{"id":653340,"date":"2025-09-13T11:31:37","date_gmt":"2025-09-13T03:31:37","guid":{"rendered":"http:\/\/puo.cn\/?p=653340"},"modified":"2025-09-13T11:31:37","modified_gmt":"2025-09-13T03:31:37","slug":"github-pages-han-ge%e5%bc%95%e5%af%bc%e9%a1%b5%e4%bb%a3%e7%a0%81%e7%95%99%e5%ad%98","status":"publish","type":"post","link":"http:\/\/puo.cn\/?p=653340","title":{"rendered":"github pages-han.ge\u5f15\u5bfc\u9875\u4ee3\u7801\u7559\u5b58"},"content":{"rendered":"

\u6f14\u793a\u5730\u5740:http:\/\/han.ge<\/a><\/p>\n

\"\"<\/p>\n

<\/code><\/p>\n

<!DOCTYPE html>
\n<html lang=”zh”>
\n<head>
\n<meta charset=”UTF-8″>
\n<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
\n<title>\u6db5\u54e5\u7684\u4e2a\u4eba\u4e3b\u9875<\/title>
\n<link rel=”stylesheet” href=”https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/5.15.4\/css\/all.min.css”>
\n<style>
\n* { margin: 0; padding: 0; box-sizing: border-box; font-family: ‘Arial’, sans-serif; }
\nhtml, body { min-height: 100%; width: 100%; overflow-x: hidden; background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); }
\nbody { display: flex; flex-direction: column; align-items: center; padding: 20px; }
\n.container { width: 100%; max-width: 1200px; display: flex; flex-direction: column; gap: 30px; margin: 0 auto; }<\/p>\n

<\/code><\/p>\n

\/* \u4e2a\u4eba\u8d44\u6599\u5361\u7247 *\/
\n.profile-card { background: rgba(255, 255, 255, 0.9); border-radius: 20px; padding: 30px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); display: flex; flex-direction: column; align-items: center; position: relative; overflow: hidden; backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.3); }
\n.profile-card::before { content: ”; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 70%); transform: rotate(45deg); z-index: 0; }
\n.profile-card>* { position: relative; z-index: 1; }
\n.avatar { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; border: 5px solid white; box-shadow: 0 5px 15px rgba(0,0,0,0.2); margin-bottom: 20px; }
\n.profile-name { font-size: 28px; font-weight: bold; margin-bottom: 10px; color: #333; }
\n.profile-bio { font-size: 16px; color: #666; text-align: center; margin-bottom: 20px; max-width: 600px; }
\n.social-links { display: flex; gap: 15px; margin-top: 15px; }
\n.social-link { width: 45px; height: 45px; border-radius: 50%; background: #f0f0f0; display: flex; align-items: center; justify-content: center; color: #555; font-size: 20px; transition: all 0.3s ease; cursor: pointer; text-decoration: none; }
\n.social-link:hover { transform: translateY(-5px); box-shadow: 0 5px 15px rgba(0,0,0,0.2); }
\n.social-link.wechat:hover { background: #07C160; color: white; }
\n.social-link.qq:hover { background: #12B7F5; color: white; }
\n.social-link.email:hover { background: #EA4335; color: white; }
\n.social-link.blog:hover { background: #FF5722; color: white; }
\n.social-link.website:hover { background: #2196F3; color: white; }<\/p>\n

<\/code><\/p>\n

\/* \u95ee\u5019\u8bed *\/
\n.greeting { font-size: 24px; font-weight: bold; color: #333; margin-bottom: 20px; text-align: center; }<\/p>\n

<\/code><\/p>\n

\/* \u7f51\u7ad9\u5bfc\u822a *\/
\n.nav-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; width: 100%; }
\n.nav-category { background: white; border-radius: 15px; padding: 20px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); transition: transform 0.3s ease; }
\n.nav-category:hover { transform: translateY(-5px); }
\n.category-title { font-size: 18px; font-weight: bold; margin-bottom: 15px; padding-left: 10px; border-left: 4px solid #4285F4; color: #333; }
\n.nav-links { display: flex; flex-direction: column; gap: 10px; }
\n.nav-link { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; transition: background-color 0.2s; text-decoration: none; color: #555; }
\n.nav-link:hover { background-color: #f5f5f5; }
\n.nav-link i { font-size: 16px; width: 20px; text-align: center; }<\/p>\n

<\/code><\/p>\n

\/* \u63d0\u793a\u6d88\u606f *\/
\n.toast { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%) translateY(100px); background: rgba(0,0,0,0.7); color: white; padding: 10px 20px; border-radius: 30px; font-size: 14px; opacity: 0; transition: all 0.3s ease; z-index: 1000; }
\n.toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }<\/p>\n

<\/code><\/p>\n

@media (max-width: 768px) {
\n.nav-container { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
\n}
\n<\/style>
\n<\/head>
\n<body>
\n<div class=”container”>
\n<!– \u4e2a\u4eba\u8d44\u6599 –>
\n<div class=”profile-card”>
\n<img src=”https:\/\/picsum.photos\/seed\/avatar123\/120\/120.jpg” alt=”\u4e2a\u4eba\u5934\u50cf” class=”avatar”>
\n<h1 class=”profile-name”>\u6db5\u54e5<\/h1>
\n<p class=”profile-bio”>80\u540e\u5927\u53d4\uff0c\u7231\u559d\u9152\uff0c\u7231\u71ac\u591c\uff0c\u7231\u8ffd\u756a\uff01<\/p>
\n<div class=”social-links”>
\n<div class=”social-link wechat” data-copy=”\u5fae\u4fe1\u53f7\uff1afarhans”><i class=”fab fa-weixin”><\/i><\/div>
\n<div class=”social-link qq” data-copy=”QQ\u53f7\uff1a46369606″><i class=”fab fa-qq”><\/i><\/div>
\n<a href=”mailto:fim@qq.com” class=”social-link email”><i class=”fas fa-envelope”><\/i><\/a>
\n<a href=”http:\/\/hanshuailing.com\/wordpress” target=”_blank” class=”social-link blog”><i class=”fas fa-blog”><\/i><\/a>
\n<a href=”http:\/\/dh.nqq.org” target=”_blank” class=”social-link website”><i class=”fas fa-globe”><\/i><\/a>
\n<\/div>
\n<\/div><\/p>\n

<\/code><\/p>\n

<!– \u95ee\u5019\u8bed –>
\n<div class=”greeting” id=”greeting”>\u665a\u4e0a\u597d\uff01\u6b22\u8fce\u6765\u5230shuai\u7684\u4e2a\u4eba\u4e3b\u9875<\/div><\/p>\n

<\/code><\/p>\n

<!– \u7f51\u7ad9\u5bfc\u822a –>
\n<div class=”nav-container”>
\n<div class=”nav-category”>
\n<div class=”category-title”>\ud83d\udcf1 \u793e\u4ea4\u5a92\u4f53<\/div>
\n<div class=”nav-links”>
\n<a href=”https:\/\/weibo.com” target=”_blank” class=”nav-link”><i class=”fab fa-weibo”><\/i> \u5fae\u535a<\/a>
\n<a href=”https:\/\/www.zhihu.com” target=”_blank” class=”nav-link”><i class=”fas fa-question-circle”><\/i> \u77e5\u4e4e<\/a>
\n<a href=”https:\/\/www.reddit.com” target=”_blank” class=”nav-link”><i class=”fab fa-reddit”><\/i> Reddit<\/a>
\n<a href=”https:\/\/twitter.com” target=”_blank” class=”nav-link”><i class=”fab fa-twitter”><\/i> Twitter<\/a>
\n<\/div>
\n<\/div><\/p>\n

<\/code><\/p>\n

<div class=”nav-category”>
\n<div class=”category-title”>\ud83d\udcbb \u5f00\u53d1\u5de5\u5177<\/div>
\n<div class=”nav-links”>
\n<a href=”https:\/\/github.com” target=”_blank” class=”nav-link”><i class=”fab fa-github”><\/i> GitHub<\/a>
\n<a href=”https:\/\/gitlab.com” target=”_blank” class=”nav-link”><i class=”fab fa-gitlab”><\/i> GitLab<\/a>
\n<a href=”https:\/\/codepen.io” target=”_blank” class=”nav-link”><i class=”fab fa-codepen”><\/i> CodePen<\/a>
\n<a href=”https:\/\/jsfiddle.net” target=”_blank” class=”nav-link”><i class=”fas fa-code”><\/i> JSFiddle<\/a>
\n<\/div>
\n<\/div><\/p>\n

<\/code><\/p>\n

<div class=”nav-category”>
\n<div class=”category-title”>\ud83c\udfac \u5a31\u4e50\u4f11\u95f2<\/div>
\n<div class=”nav-links”>
\n<a href=”https:\/\/www.youtube.com” target=”_blank” class=”nav-link”><i class=”fab fa-youtube”><\/i> YouTube<\/a>
\n<a href=”https:\/\/www.netflix.com” target=”_blank” class=”nav-link”><i class=”fas fa-film”><\/i> Netflix<\/a>
\n<a href=”https:\/\/open.spotify.com” target=”_blank” class=”nav-link”><i class=”fab fa-spotify”><\/i> Spotify<\/a>
\n<a href=”https:\/\/www.bilibili.com” target=”_blank” class=”nav-link”><i class=”fas fa-tv”><\/i> \u54d4\u54e9\u54d4\u54e9<\/a>
\n<\/div>
\n<\/div><\/p>\n

<\/code><\/p>\n

<div class=”nav-category”>
\n<div class=”category-title”>\ud83d\udee0 \u5e38\u7528\u670d\u52a1<\/div>
\n<div class=”nav-links”>
\n<a href=”https:\/\/mail.google.com” target=”_blank” class=”nav-link”><i class=”fas fa-envelope”><\/i> Gmail<\/a>
\n<a href=”https:\/\/drive.google.com” target=”_blank” class=”nav-link”><i class=”fas fa-cloud”><\/i> Google Drive<\/a>
\n<a href=”https:\/\/translate.google.com” target=”_blank” class=”nav-link”><i class=”fas fa-language”><\/i> Google \u7ffb\u8bd1<\/a>
\n<a href=”https:\/\/calendar.google.com” target=”_blank” class=”nav-link”><i class=”fas fa-calendar-alt”><\/i> Google \u65e5\u5386<\/a>
\n<\/div>
\n<\/div>
\n<\/div>
\n<\/div><\/p>\n

<\/code><\/p>\n

<!– \u63d0\u793a\u6d88\u606f –>
\n<div class=”toast” id=”toast”>\u5df2\u590d\u5236\u5230\u526a\u8d34\u677f<\/div><\/p>\n

<\/code><\/p>\n

<script>
\n\/\/ \u8bbe\u7f6e\u95ee\u5019\u8bed
\nfunction setGreeting() {
\nconst hour = new Date().getHours();
\nlet greeting = ”;
\nif (hour < 6) greeting = ‘\u591c\u6df1\u4e86\uff0c\u6ce8\u610f\u4f11\u606f\uff01’;
\nelse if (hour < 9) greeting = ‘\u65e9\u4e0a\u597d\uff01\u65b0\u7684\u4e00\u5929\u5f00\u59cb\u4e86’;
\nelse if (hour < 12) greeting = ‘\u4e0a\u5348\u597d\uff01\u5de5\u4f5c\u987a\u5229\u5417’;
\nelse if (hour < 14) greeting = ‘\u4e2d\u5348\u597d\uff01\u8be5\u5403\u5348\u996d\u4e86’;
\nelse if (hour < 17) greeting = ‘\u4e0b\u5348\u597d\uff01\u7ee7\u7eed\u52a0\u6cb9’;
\nelse if (hour < 19) greeting = ‘\u508d\u665a\u597d\uff01\u653e\u677e\u4e00\u4e0b\u5427’;
\nelse if (hour < 22) greeting = ‘\u665a\u4e0a\u597d\uff01\u6b22\u8fce\u6765\u5230\u6211\u7684\u4e2a\u4eba\u4e3b\u9875’;
\nelse greeting = ‘\u591c\u6df1\u4e86\uff0c\u6ce8\u610f\u4f11\u606f\uff01’;
\ndocument.getElementById(‘greeting’).textContent = greeting;
\n}
\nsetGreeting();
\nsetInterval(setGreeting, 3600000);<\/p>\n

<\/code><\/p>\n

\/\/ \u590d\u5236\u529f\u80fd
\ndocument.querySelectorAll(‘.social-link[data-copy]’).forEach(link => {
\nlink.addEventListener(‘click’, function() {
\nconst textToCopy = this.getAttribute(‘data-copy’);
\nnavigator.clipboard.writeText(textToCopy).then(() => {
\nconst toast = document.getElementById(‘toast’);
\ntoast.classList.add(‘show’);
\nsetTimeout(() => toast.classList.remove(‘show’), 2000);
\n});
\n});
\n});
\n<\/script>
\n<\/body>
\n<\/html><\/p>\n

 <\/p>\n","protected":false},"excerpt":{"rendered":"

\u6f14\u793a\u5730\u5740:http:\/\/han.ge <!DOCTYPE html> <html lang=”zh”> <head> <meta charset=”UTF-8&#…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[140],"tags":[161,309,194,252],"topic":[415],"class_list":["post-653340","post","type-post","status-publish","format-standard","hentry","category-domain-website","tag-github","tag-html","tag-194","tag-252","topic-code"],"_links":{"self":[{"href":"http:\/\/puo.cn\/index.php?rest_route=\/wp\/v2\/posts\/653340","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/puo.cn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/puo.cn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/puo.cn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/puo.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=653340"}],"version-history":[{"count":1,"href":"http:\/\/puo.cn\/index.php?rest_route=\/wp\/v2\/posts\/653340\/revisions"}],"predecessor-version":[{"id":653386,"href":"http:\/\/puo.cn\/index.php?rest_route=\/wp\/v2\/posts\/653340\/revisions\/653386"}],"wp:attachment":[{"href":"http:\/\/puo.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=653340"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/puo.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=653340"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/puo.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=653340"},{"taxonomy":"topic","embeddable":true,"href":"http:\/\/puo.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftopic&post=653340"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}