biss/blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
01b5e2e1baf9630484631bb89a109e855f2bd2ac
blog/page/3/index.html
T
biss 01b5e2e1ba Merge pull request '更换到Astro' (#9) from switch-to-astro into master 
Reviewed-on: #9
 -- [CST 2026-06-19 Friday 13:28:19]
2026-06-19 13:28:19 +08:00

524 lines
45 KiB
HTML
Raw Blame History

<!DOCTYPE html><html lang="zh-CN"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="description" content="Personal blog by biss."><link rel="icon" href="/images/Bi.ico"><script defer src="https://umami.biss.click/script.js" data-website-id="3d97b310-b241-4fc6-bc9c-68e317fc7d42"></script><script>window.SITE_CONFIG = {"site":{"url":"https://blog.biss.click","name":"Bi's Blog","description":"Personal blog by biss.","language":"zh-CN","domain":"blog.biss.click","slogan":"好奇心转化为代码的空间。","startTime":"2025-01-01T00:00:00+08:00","copyrightStartYear":2025,"license":"内容采用 CC BY-NC-SA 4.0 协议"},"author":{"name":"biss","email":"bishsh2006@gmail.com","github":"https://github.com/bishshi","avatar":"https://free.picui.cn/free/2025/08/10/689845496a283.png"},"comments":{"envId":"https://comment.biss.click","region":"","script":"https://cdn.jsdelivr.net/npm/twikoo@1.7.7/dist/twikoo.min.js"},"analytics":{"umami":{"script":"https://umami.biss.click/script.js","websiteId":"3d97b310-b241-4fc6-bc9c-68e317fc7d42","statsEndpoint":"https://blogumami.biss.click"}},"talks":{"apiUrl":"https://mm.biss.click/api/echo/page","pageSize":30,"homeLimit":6,"cacheKey":"talksCache","cacheTimeKey":"talksCacheTime","cacheDurationMs":1800000,"fallbackAvatar":"https://free.picui.cn/free/2025/08/10/689845496a283.png"},"search":{"apiKey":"2uxQzk7eD2GBCljdSmIiuU3ause7UK9n","server":{"host":"typesense.biss.click","port":"443","protocol":"https"},"indexName":"blogs","searchParams":{"query_by":"title,content","highlight_full_fields":"title,content","per_page":8,"num_typos":1,"typo_tokens_threshold":1,"prefix":true},"ui":{"maxRetries":10,"retryDelay":100,"animationDuration":300,"maxInitRetries":30,"placeholder":"输入关键词寻找故事..."}},"externalLinks":{"waitSeconds":10,"whitelist":["blog.biss.click","biss.click","github.com","localhost","127.0.0.1"]}};</script><script>
(() => {
const storageKey = 'site-theme';
const savedTheme = localStorage.getItem(storageKey);
const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
document.documentElement.dataset.theme = savedTheme || systemTheme;
})();
</script><link rel="stylesheet" href="https://cdn.jsdmirror.com/npm/instantsearch.css/themes/reset-min.css"><link rel="stylesheet" href="https://cdn.jsdmirror.com/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.css"><link rel="stylesheet" href="https://cdn.jsdmirror.com/npm/@fortawesome/fontawesome-free@6.7.2/css/all.min.css"><title>文章 - 第 3 页 | Bi&#39;s Blog</title><link rel="stylesheet" href="/_astro/BaseLayout.D7kFxpxP.css"></head> <body> <header class="site-header"> <nav class="nav"> <a class="brand" href="/">Bi&#39;s Blog</a> <button class="nav-menu-toggle" type="button" aria-label="打开菜单" aria-expanded="false" data-nav-toggle> <i class="fa-solid fa-bars nav-menu-open" aria-hidden="true"></i> <i class="fa-solid fa-xmark nav-menu-close" aria-hidden="true"></i> </button> <div class="nav-menu" data-nav-menu> <div class="nav-links nav-center"> <a href="/archives/"><i class="fa-solid fa-box-archive nav-icon" aria-hidden="true"></i><span>归档</span></a><a href="/categories/"><i class="fa-solid fa-folder-open nav-icon" aria-hidden="true"></i><span>分类</span></a><a href="/tags/"><i class="fa-solid fa-tags nav-icon" aria-hidden="true"></i><span>标签</span></a><a href="/shuoshuo/"><i class="fa-regular fa-comments nav-icon" aria-hidden="true"></i><span>说说</span></a><a href="/about/"><i class="fa-solid fa-heart nav-icon" aria-hidden="true"></i><span>关于</span></a><a href="/link/"><i class="fa-solid fa-link nav-icon" aria-hidden="true"></i><span>友链</span></a> </div> <div class="nav-links nav-actions"> <button class="nav-random" type="button" onclick="randomPost()" aria-label="前往随机文章" title="前往随机文章"> <i class="fa-solid fa-shuffle nav-icon" aria-hidden="true"></i> <span>随机文章</span> </button> <button class="nav-search search-typesense-trigger" type="button" aria-label="搜索" title="搜索"> <i class="fa-solid fa-magnifying-glass nav-icon" aria-hidden="true"></i> <span>搜索</span> </button> <button class="theme-toggle" type="button" aria-label="切换夜间模式" title="切换夜间模式" data-theme-toggle> <i class="fa-solid fa-sun theme-toggle-sun nav-icon" aria-hidden="true"></i> <i class="fa-solid fa-moon theme-toggle-moon nav-icon" aria-hidden="true"></i> </button> </div> </div> </nav> </header> <main> <section class="hero compact-hero"> <div> <p class="eyebrow">写给日常、技术和正在发生的自己</p> <h1>Bi&#39;s Blog</h1> <p>第 3 页，继续翻看最近的记录。</p> </div> </section> <section class="content-wrap home-layout"> <div class="home-main"> <div class="section-heading"> <h2>最新文章</h2> <a href="/archives/">查看全部</a> </div> <div class="post-list"> <article class="post-card"> <a href="/posts/c6143ad3/"> <time datetime="2025-08-14T17:05:27.000Z">2025/08/15</time> <h2>自定义页脚（新）</h2> <p>您提供的代码是一个自定义页脚的HTML和CSS代码 要在您的网站中使用这个自定义页脚，请按照以下步骤操作： 1. 首先，将提供的CSS代码复制到您网站的CSS文件中。如果您没有单独的CSS文件，可以在HTML文件的`&lt;head&gt;`部分添加`&lt;style&gt;`标签，并将CSS代码粘贴到其中。 2. 接下来，将提供的HTML代码复制到您网站的HTML文件中。将其放置在`&lt;body&gt;`标签内，最好在页面的底部。 3. 根据需要自定义页脚内容，例如更改版权信息、菜单链接、社交链接等。 4. 保存更改并在浏览器中查看您的网站，您应该能看到自定义页脚。</p> </a> <div class="meta-list"> <a href="/categories/site-notes/">建站手札</a> <a href="/tags/%E7%BD%91%E7%AB%99/">#网站</a> </div> </article><article class="post-card"> <a href="/posts/33249733/"> <time datetime="2025-08-14T16:25:49.000Z">2025/08/15</time> <h2>自定义分类条</h2> <p>这篇文章介绍了如何在博客系统中自定义分类栏的设计和实现过程。首先，通过Pug模板语言创建了一个名为categoryBar.pug的文件，用于定义分类栏的结构和样式。接着，在Stylus样式文件category-bar.styl中详细定义了分类栏的样式，包括内边距、背景颜色、边框圆角等，并设置了滚动条的样式。最后，在JavaScript文件main.js中添加了一个setCategoryBarActive函数，用于根据当前页面路径自动激活相应的分类项。此外，还讨论了如何将自定义的分类栏集成到主题中，并提供了相关的Pug混入代码。整个过程确保了分类栏的可定制性和易维护性。</p> </a> <div class="meta-list"> <a href="/categories/site-notes/">建站手札</a> <a href="/tags/%E7%BD%91%E7%AB%99/">#网站</a> </div> </article><article class="post-card"> <a href="/posts/3e61a389/"> <time datetime="2025-08-13T16:12:25.000Z">2025/08/14</time> <h2>自定义导航栏</h2> <p>这篇文章介绍了如何在最新版的Butterfly 5.4中自定义导航栏，包括PC端和PE端的修改方法以及CSS文件的调整。主要内容包括修改header\nav.pug和menu_item.pug文件中的内容，调整head.styl和sidebar.styl中的CSS样式，以及在CSS文件中添加新的样式规则。这些修改旨在实现导航栏的个性化设置，如菜单项的显示、位置调整、背景颜色变化等，以提升网站的用户体验和视觉效果。</p> </a> <div class="meta-list"> <a href="/categories/site-notes/">建站手札</a> <a href="/tags/%E7%BD%91%E7%AB%99/">#网站</a> </div> </article><article class="post-card"> <a href="/posts/b5866b9e/"> <time datetime="2025-08-12T15:15:32.000Z">2025/08/12</time> <h2>利用 SiteMap 随机访问站内页面</h2> <p>提供了一个很好的解决方案，通过使用 Hexo 的 sitemap 生成器和 JavaScript 代码来实现随机访问站内页面的功能 以下是你提供的步骤的详细解释：</p> </a> <div class="meta-list"> <a href="/categories/site-notes/">建站手札</a> <a href="/tags/%E7%BD%91%E7%AB%99/">#网站</a> </div> </article><article class="post-card"> <a href="/posts/41b9aff7/"> <time datetime="2025-08-12T09:46:25.000Z">2025/08/12</time> <h2>博客添加AI总结</h2> <p>这篇文章介绍了如何在Hexo博客中添加AI摘要功能，作者寻找并尝试了多个AI摘要插件后，最终选择了hexo-ai-summary-liushen插件。安装过程中，作者详细说明了如何安装额外依赖，并在Hexo配置文件中添加了相关配置。文章还提供了关于内容清洗、摘要字段设置、日志等级、API接口配置、插件适配等方面的详细说明和配置示例。此外，作者还介绍了如何将AI摘要集成到Hexo主题中，并提供了相关的CSS样式和JavaScript动效代码，以实现更加逼真的摘要效果。最后，作者提醒用户在运行插件前注意备份，并介绍了如何处理可能出现的缓存问题。</p> </a> <div class="meta-list"> <a href="/categories/site-notes/">建站手札</a> <a href="/tags/%E7%BD%91%E7%AB%99/">#网站</a> </div> </article><article class="post-card"> <a href="/posts/a6ab0925/"> <time datetime="2025-08-12T09:19:16.000Z">2025/08/12</time> <h2>利用插件自定义页脚菜单</h2> <p>这篇文章介绍了如何使用插件来自定义Hexo博客的页脚菜单。首先，通过npm安装了hexo-butterfly-footer-marcus插件，并根据需要安装了yamljs插件。接着，在博客的配置文件中添加了相关配置信息，包括页脚美化、图标链接、作者信息等。文章还提供了具体的参数释义和使用方法，指导读者如何填写配置项和修改源码来调整页脚样式和布局。最后，文章还提到了如何解决在黑暗模式下修改按钮层级的问题，并提供了相关的代码修改示例。</p> </a> <div class="meta-list"> <a href="/categories/site-notes/">建站手札</a> <a href="/tags/%E7%BD%91%E7%AB%99/">#网站</a> </div> </article><article class="post-card"> <a href="/posts/f0a1a1f4/"> <time datetime="2025-08-11T20:59:46.000Z">2025/08/12</time> <h2>英语文章分享-去奋力生活吧，就好像死亡近在咫尺</h2> <p>这篇文章讨论了在生活中追求意义的重要性，特别是在面对死亡时。作者作为一名临终关怀医生，见证了无数病人对未实现目标的遗憾。文章指出，许多人因感到精力不足或时间不够而未能追求自己的目标。然而，研究表明，拥有强烈目标感的人实际上更有活力，更容易被激励。目的不在于做出巨大贡献，而在于找到能激发内心火花的小目标，如阅读、散步或重拾儿时的爱好。文章强调，勇气是追求目标的关键，而不仅仅是勇敢。最后，作者警告说，如果不在有生之年追求目标，可能会在死亡时后悔莫及。</p> </a> <div class="meta-list"> <a href="/categories/study/">学习</a> <a href="/tags/%E8%8B%B1%E8%AF%AD/">#英语</a> </div> </article><article class="post-card"> <a href="/posts/8bdb35fb/"> <time datetime="2025-08-11T16:02:12.000Z">2025/08/12</time> <h2>自定义右键菜单</h2> <p>这篇文章介绍了如何在自定义右键菜单中添加各种功能，包括返回、前进、刷新、滚动到页面不同位置、复制文本、搜索页面、打开链接、粘贴内容、复制本文地址、在新窗口打开链接、保存图片、随机文章浏览、切换深色模式、繁简转换、阅读模式以及隐私声明、Cookie协议和版权声明等。同时，文章还提供了创建Pug文件和JavaScript文件的步骤，详细说明了如何编写右键菜单的HTML结构和交互逻辑。</p> </a> <div class="meta-list"> <a href="/categories/site-notes/">建站手札</a> <a href="/tags/%E7%BD%91%E7%AB%99/">#网站</a> </div> </article><article class="post-card"> <a href="/posts/da17d00/"> <time datetime="2025-08-10T19:30:40.000Z">2025/08/11</time> <h2>在侧边栏中添加欢迎信息</h2> <p>这篇文章介绍了如何在侧边栏中添加欢迎信息，包括申请腾讯地图API key、添加js脚本以及根据用户的地理位置显示个性化欢迎语。首先，文章指导读者如何申请腾讯地图API key，并提醒注意填写信任域名时不要包含&#39;https://&#39;。接着，文章说明了在主题的js目录下添加txmap.js脚本的过程，并提到了一个更完善的js脚本。最后，文章详细描述了如何使用获取到的地理位置信息，通过switch语句根据不同的国家、省份和城市显示相应的欢迎语。</p> </a> <div class="meta-list"> <a href="/categories/site-notes/">建站手札</a> <a href="/tags/%E7%BD%91%E7%AB%99/">#网站</a> </div> </article><article class="post-card"> <a href="/posts/ad244066/"> <time datetime="2025-08-10T08:25:39.000Z">2025/08/10</time> <h2>配置说说页面</h2> <p>这段文字看起来是一个部署教程，主要是关于如何在服务器上部署一个名为“Moments”的应用，并将其与网站集成。以下是对这段文字的概括： 1. 介绍了硬件和软件的要求，包括服务器、域名、Docker环境和反向代理工具（如Nginx）。 2. 提供了Moments应用的部署方法，包括使用docker-compose进行部署和配置Nginx反向代理。 3. 介绍了如何在前端集成Moments应用，包括引入必要的CSS和JS文件，以及创建一个新的页面来显示Moments的内容。 需要注意的是，这段文字中的一些链接和代码可能已经过时或者不适用于所有场景，建议在实际操作时参考最新的官方</p> </a> <div class="meta-list"> <a href="/categories/site-notes/">建站手札</a> <a href="/tags/%E7%BD%91%E7%AB%99/">#网站</a> </div> </article><article class="post-card"> <a href="/posts/6e5f5039/"> <time datetime="2025-08-02T19:07:05.000Z">2025/08/03</time> <h2>部署历程</h2> <p>这篇文章详细介绍了如何部署Hexo博客到Linux服务器，包括前提条件、本地环境准备、SSH密钥认证、配置步骤、工作流程以及故障排除提示。文章首先列出了部署所需满足的条件，然后逐步指导读者如何在服务器上安装Git、创建裸仓库、配置Git钩子以自动部署Hexo博客，并提供了验证部署成功的步骤。最后，文章还给出了一些常见问题的解决建议，帮助读者顺利完成部署。整个过程简单高效，适合需要自动化部署博客的用户。</p> </a> <div class="meta-list"> <a href="/categories/site-notes/">建站手札</a> <a href="/tags/%E7%BD%91%E7%AB%99/">#网站</a> </div> </article> </div> <nav class="pagination" aria-label="分页导航"><a class="pagination-link pagination-prev" href="/page/2/" aria-label="上一页">
上一页
</a><div class="pagination-pages" aria-label="第 3 页，共 3 页"><a class="pagination-number" href="/">1</a><a class="pagination-number" href="/page/2/">2</a><span class="pagination-number is-current" aria-current="page">3</span></div><span class="pagination-link pagination-next is-disabled" aria-disabled="true">
下一页
</span></nav> </div> <aside class="home-sidebar" aria-label="首页侧边栏"> <section class="sidebar-card profile-card"> <img class="profile-avatar" src="https://free.picui.cn/free/2025/08/10/689845496a283.png" alt="biss" loading="lazy"> <div class="profile-name">biss</div> <div class="profile-stats"> <a href="/archives/"> <span>文章</span> <strong>43</strong> </a> <a href="/tags/"> <span>标签</span> <strong>18</strong> </a> <a href="/categories/"> <span>分类</span> <strong>5</strong> </a> </div> <a class="follow-button" href="https://github.com/bishshi" target="_blank" rel="noreferrer"> <span class="github-mark" aria-hidden="true">GitHub</span> <span>Follow Me</span> </a> <div class="profile-links" aria-label="联系方式"> <a href="https://github.com/bishshi" target="_blank" rel="noreferrer" aria-label="GitHub">GitHub</a> <a href="mailto:bishsh2006@gmail.com" aria-label="Email">Email</a> </div> </section> <div class="sticky-sidebar"> <section class="sidebar-card notice-card"> <h2><span aria-hidden="true">!</span> 公告</h2> <div id="welcome-ip-location-info">
欢迎来自 <strong>远方</strong> 的小友。<br>
烧烤三件套，灵魂蘸料。<br>
当前位置距离博主约 <strong>473</strong> 公里！
</div> <p id="aside-weather">当前天气加载中...</p> </section> <section class="sidebar-card calendar-card"> <h2>日历</h2> <div class="calendar-widget"> <div class="calendar-summary"> <strong id="calendar-week">第--周 周--</strong> <span id="calendar-date">--</span> <small id="calendar-solar">----年--月 第--天</small> <small id="calendar-lunar">今天也很好</small> </div> <div class="calendar-grid" id="calendar-grid" aria-label="本月日历"></div> </div> </section> <section class="sidebar-card schedule-card"> <h2>剩余时间</h2> <div class="schedule-widget"> <div class="schedule-left"> <strong>距离除夕</strong> <span id="new-year-days">--</span> <small id="new-year-date">---- -- --</small> </div> <div class="schedule-bars"> <div class="schedule-row"> <span>本年</span> <progress id="year-progress" max="100" value="0"></progress> <em id="year-left">--天</em> </div> <div class="schedule-row"> <span>本月</span> <progress id="month-progress" max="100" value="0"></progress> <em id="month-left">--天</em> </div> <div class="schedule-row"> <span>本周</span> <progress id="week-progress" max="100" value="0"></progress> <em id="week-left">--天</em> </div> </div> </div> </section> <section class="sidebar-card recent-card"> <h2>最新文章</h2> <div class="sidebar-posts"> <a class="sidebar-post" href="/posts/4c91a8f2/"> <span class="post-thumb-fallback" aria-hidden="true"></span> <span> <strong>用 Umami 分享链接给网站信息卡提供统计数据</strong> <time datetime="2026-06-19T08:58:00.000Z">2026/06/19</time> </span> </a><a class="sidebar-post" href="/posts/efe1e805/"> <span class="post-thumb-fallback" aria-hidden="true"></span> <span> <strong>把普通的一天过成自己的节奏</strong> <time datetime="2026-05-29T18:09:40.000Z">2026/05/30</time> </span> </a><a class="sidebar-post" href="/posts/3f8de22/"> <img src="https://pic.biss.click/image/92de2106-ee94-493e-ad40-b7d4054b23c6.webp" alt="" loading="lazy"> <span> <strong>GPT Image2 初试</strong> <time datetime="2026-04-25T15:00:00.000Z">2026/04/25</time> </span> </a><a class="sidebar-post" href="/posts/8712baaa/"> <span class="post-thumb-fallback" aria-hidden="true"></span> <span> <strong>电子价签玩法</strong> <time datetime="2026-04-19T13:46:25.000Z">2026/04/19</time> </span> </a><a class="sidebar-post" href="/posts/9b2ef00a/"> <img src="https://pic.biss.click/image/d1705811-324e-4378-a512-74d4baa651b7.png" alt="" loading="lazy"> <span> <strong>OpenGL- Cohen-Sutherland 编码裁剪算法</strong> <time datetime="2026-04-15T19:34:23.000Z">2026/04/16</time> </span> </a> </div> </section> <section class="sidebar-card site-info-card" data-site-info-card data-stats-endpoint="https://blogumami.biss.click"> <h2><i class="fa-solid fa-chart-line" aria-hidden="true"></i> 网站信息</h2> <dl class="site-info-list"> <div> <dt>文章数目</dt> <dd>43</dd> </div><div> <dt>本站总字数</dt> <dd>32,569</dd> </div><div> <dt>本站访客数</dt> <dd data-stat-key="visitors">--</dd> </div><div> <dt>本站访问量</dt> <dd data-stat-key="pageviews">--</dd> </div><div> <dt>最后更新时间</dt> <dd>2026/06/19</dd> </div> </dl> </section> <script>
(() => {
const cacheDuration = 10 * 60 * 1000;
const formatter = new Intl.NumberFormat('en-US');
const cards = [...document.querySelectorAll('[data-site-info-card]')];
const endpoint = cards.find((card) => card.dataset.statsEndpoint)?.dataset.statsEndpoint;
if (!endpoint) return;
const cacheKey = `site-info-stats:${endpoint}`;
const updateCards = (stats) => {
const visitors = Number(stats?.visitors);
const pageviews = Number(stats?.pageviews);
cards.forEach((card) => {
const visitorsEl = card.querySelector('[data-stat-key="visitors"]');
const pageviewsEl = card.querySelector('[data-stat-key="pageviews"]');
if (visitorsEl && Number.isFinite(visitors)) visitorsEl.textContent = formatter.format(visitors);
if (pageviewsEl && Number.isFinite(pageviews)) pageviewsEl.textContent = formatter.format(pageviews);
});
};
try {
const cached = JSON.parse(localStorage.getItem(cacheKey) || 'null');
if (cached?.time && Date.now() - cached.time < cacheDuration) {
updateCards(cached.data);
return;
}
} catch {
localStorage.removeItem(cacheKey);
}
fetch(endpoint, { headers: { Accept: 'application/json' } })
.then((response) => {
if (!response.ok) throw new Error(`Stats request failed: ${response.status}`);
return response.json();
})
.then((data) => {
localStorage.setItem(cacheKey, JSON.stringify({ time: Date.now(), data }));
updateCards(data);
})
.catch(() => {
});
})();
</script> </div> </aside> <script>
(() => {
const dayNames = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
const pad = (value) => String(value).padStart(2, '0');
const dayMs = 86400000;
const percent = (used, total) => Math.min(100, Math.max(0, (used / total) * 100));
const lunarFormatter = new Intl.DateTimeFormat('zh-CN-u-ca-chinese', {
year: 'numeric',
month: 'long',
day: 'numeric',
});
const solarFestivals = {
'01-01': '元旦',
'03-08': '妇女节',
'03-12': '植树节',
'05-01': '劳动节',
'05-04': '青年节',
'06-01': '儿童节',
'07-01': '建党节',
'08-01': '建军节',
'09-10': '教师节',
'10-01': '国庆节',
};
const lunarFestivals = {
'正月-1': '春节',
'正月-15': '元宵',
'五月-5': '端午',
'七月-7': '七夕',
'七月-15': '中元',
'八月-15': '中秋',
'九月-9': '重阳',
'腊月-8': '腊八',
'腊月-23': '北方小年',
'腊月-24': '南方小年',
};
const springFestivalDates = [
'2024-02-10',
'2025-01-29',
'2026-02-17',
'2027-02-06',
'2028-01-26',
'2029-02-13',
'2030-02-03',
'2031-01-23',
'2032-02-11',
];
const setText = (id, value) => {
const el = document.getElementById(id);
if (el) el.textContent = value;
};
const toDateKey = (date) => `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
const toMonthDayKey = (date) => `${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
const escapeHtml = (value) =>
String(value).replace(/[&<>"']/g, (char) => ({
'&': '&amp;',
'<': '&lt;',
'>': '&gt;',
'"': '&quot;',
"'": '&#39;',
})[char]);
function dayOfYear(date) {
const start = new Date(date.getFullYear(), 0, 1);
return Math.floor((date - start) / 86400000) + 1;
}
function weekOfYear(date) {
const firstDay = new Date(date.getFullYear(), 0, 1);
const pastDays = Math.floor((date - firstDay) / dayMs);
return Math.ceil((pastDays + firstDay.getDay() + 1) / 7);
}
function getLunarInfo(date) {
const parts = lunarFormatter.formatToParts(date);
const month = parts.find((part) => part.type === 'month')?.value || '';
const day = parts.find((part) => part.type === 'day')?.value || '';
const yearName = parts.find((part) => part.type === 'yearName')?.value || '';
return {
yearName,
month,
day,
dayName: day === '1' ? month : `${day}日`,
festival: lunarFestivals[`${month}-${day}`] || '',
};
}
function getFestival(date) {
const lunar = getLunarInfo(date);
const solar = solarFestivals[toMonthDayKey(date)] || '';
return solar || lunar.festival;
}
function getNextNewYearEve(now) {
const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
const nextSpring = springFestivalDates
.map((date) => new Date(`${date}T00:00:00`))
.find((date) => date > today);
if (!nextSpring) {
return new Date(now.getFullYear() + 1, 1, 16);
}
return new Date(nextSpring.getFullYear(), nextSpring.getMonth(), nextSpring.getDate() - 1);
}
function renderCalendar(now) {
const todayLunar = getLunarInfo(now);
const todayFestival = getFestival(now);
setText('calendar-week', `第${weekOfYear(now)}周 ${dayNames[now.getDay()]}`);
setText('calendar-date', pad(now.getDate()));
setText('calendar-solar', `${now.getFullYear()}年${now.getMonth() + 1}月 第${dayOfYear(now)}天`);
setText(
'calendar-lunar',
todayFestival
? `${todayLunar.yearName}年 ${todayFestival}`
: `${todayLunar.yearName}年 农历${todayLunar.month}${todayLunar.day}日`
);
const grid = document.getElementById('calendar-grid');
if (!grid) return;
const year = now.getFullYear();
const month = now.getMonth();
const first = new Date(year, month, 1).getDay();
const days = new Date(year, month + 1, 0).getDate();
const previousDays = new Date(year, month, 0).getDate();
const cells = [];
for (let i = 0; i < 42; i += 1) {
const dayNumber = i - first + 1;
const isCurrent = dayNumber >= 1 && dayNumber <= days;
const displayDay = isCurrent
? dayNumber
: dayNumber < 1
? previousDays + dayNumber
: dayNumber - days;
const cellDate = new Date(year, month, dayNumber);
const lunar = getLunarInfo(cellDate);
const isToday = isCurrent && displayDay === now.getDate();
const title = `${toDateKey(cellDate)} 农历${lunar.month}${lunar.day}日`;
cells.push(`
<span
class="${isCurrent ? '' : 'muted'} ${isToday ? 'today' : ''}"
title="${escapeHtml(title)}"
aria-label="${escapeHtml(title)}"
>
<b>${displayDay}</b>
</span>
`);
}
grid.innerHTML = cells.join('');
}
function renderSchedule(now) {
const year = now.getFullYear();
const nextEve = getNextNewYearEve(now);
const daysToEve = Math.max(0, Math.ceil((nextEve - now) / dayMs));
const yearStart = new Date(year, 0, 1);
const yearEnd = new Date(year + 1, 0, 1);
const monthStart = new Date(year, now.getMonth(), 1);
const monthEnd = new Date(year, now.getMonth() + 1, 1);
const weekStart = new Date(year, now.getMonth(), now.getDate() - ((now.getDay() + 6) % 7));
const weekEnd = new Date(weekStart.getFullYear(), weekStart.getMonth(), weekStart.getDate() + 7);
setText('new-year-days', String(daysToEve));
setText('new-year-date', `${nextEve.getFullYear()}-${pad(nextEve.getMonth() + 1)}-${pad(nextEve.getDate())}`);
const rows = [
['year', yearStart, yearEnd],
['month', monthStart, monthEnd],
['week', weekStart, weekEnd],
];
rows.forEach(([name, start, end]) => {
const total = end - start;
const used = now - start;
const progressValue = percent(used, total);
const left = Math.max(0, Math.ceil((end - now) / dayMs));
const bar = document.getElementById(`${name}-progress`);
if (bar) {
bar.value = progressValue;
bar.title = `已过 ${progressValue.toFixed(1)}%`;
bar.setAttribute('aria-valuetext', `已过 ${progressValue.toFixed(1)}%`);
}
setText(`${name}-left`, `${progressValue.toFixed(0)}% / ${left}天`);
});
}
function initSidebar() {
const now = new Date();
renderCalendar(now);
renderSchedule(now);
}
initSidebar();
})();
</script> <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script> <script src="https://cdn.jsdmirror.com/gh/bishshi/welcomemessage/txmap.js"></script> <script src="/js/weather.js"></script> </section> </main> <footer class="site-footer" aria-label="站点页脚"> <div class="footer-inner"> <section class="footer-top" aria-label="站点信息"> <a class="footer-brand" href="/" aria-label="Bi's Blog 首页"> <img src="/images/Bi.ico" alt="" loading="lazy"> <span>Bi&#39;s Blog</span> </a> <p class="footer-slogan">好奇心转化为代码的空间。</p> </section> <section class="footer-contact" aria-label="联系方式"> <p>联系方式</p> <div class="footer-socials"> <a href="mailto:bishsh2006@gmail.com" aria-label="发送邮件" title="发送邮件"> <i class="fa-solid fa-envelope" aria-hidden="true"></i> </a><a href="/rss.xml" aria-label="订阅 RSS" title="订阅 RSS"> <i class="fa-solid fa-rss" aria-hidden="true"></i> </a><a href="https://github.com/bishshi" target="_blank" rel="noreferrer" aria-label="GitHub" title="GitHub"> <i class="fa-brands fa-github" aria-hidden="true"></i> </a> </div> <nav class="footer-contact-links" aria-label="页脚链接"> <a href="/archives/">发展历程</a> <span aria-hidden="true">|</span><a href="/privacy/">隐私政策</a> </nav> </section> <section class="footer-bottom" aria-label="版权信息"> <div> <p>© 2025 - 2026 Bi&#39;s Blog</p> <p>blog.biss.click | 内容采用 CC BY-NC-SA 4.0 协议</p> </div> <div class="footer-meta"> <p>本站已运行：<span id="site-runtime">计算中...</span></p> <p> <a href="https://fastly.com/" target="_blank" rel="noreferrer">Fastly</a> <span aria-hidden="true">|</span><a href="https://astro.build/" target="_blank" rel="noreferrer">ASTRO</a> </p> </div> </section> </div> </footer> <aside class="hitokoto-card" aria-label="一言" data-hitokoto-card data-astro-cid-4cgfuthx> <div class="hitokoto-card__head" data-astro-cid-4cgfuthx> <button class="hitokoto-card__toggle" type="button" aria-label="展开一言" aria-expanded="true" title="一言" data-hitokoto-toggle data-astro-cid-4cgfuthx> <i class="fa-solid fa-quote-left" aria-hidden="true" data-astro-cid-4cgfuthx></i> <span data-astro-cid-4cgfuthx>一言</span> </button> <div class="hitokoto-card__actions" data-astro-cid-4cgfuthx> <button class="hitokoto-card__refresh" type="button" aria-label="换一句" title="换一句" data-hitokoto-refresh data-astro-cid-4cgfuthx> <i class="fa-solid fa-rotate" aria-hidden="true" data-astro-cid-4cgfuthx></i> </button> <button class="hitokoto-card__collapse" type="button" aria-label="收起一言" title="收起" data-hitokoto-collapse data-astro-cid-4cgfuthx> <i class="fa-solid fa-chevron-down" aria-hidden="true" data-astro-cid-4cgfuthx></i> </button> </div> </div> <a class="hitokoto-card__text" href="https://hitokoto.cn/" target="_blank" rel="noreferrer" data-hitokoto-text data-astro-cid-4cgfuthx>
获取中...
</a> <p class="hitokoto-card__from" data-hitokoto-from data-astro-cid-4cgfuthx>来自 Hitokoto</p> </aside> <script type="module">(()=>{const o=document.querySelector("[data-hitokoto-card]"),s=o?.querySelector("[data-hitokoto-toggle]"),r=o?.querySelector("[data-hitokoto-text]"),l=o?.querySelector("[data-hitokoto-from]"),k=o?.querySelector("[data-hitokoto-refresh]"),m=o?.querySelector("[data-hitokoto-collapse]");if(!(o instanceof HTMLElement)||!(s instanceof HTMLButtonElement)||!(r instanceof HTMLAnchorElement)||!(l instanceof HTMLElement))return;const g="https://yiyan.biss.click/api?encode=json",u="hitokoto-card-cache",y=360*60*1e3,d={sentence:"生活明朗，万物可爱。",source:"本地缓存",url:"https://hitokoto.cn/"},L=["/","/index.html"].includes(window.location.pathname);function c(t){o.classList.toggle("is-collapsed",!t),s.setAttribute("aria-expanded",String(t)),s.setAttribute("aria-label",t?"收起一言":"展开一言")}function f(){try{const t=localStorage.getItem(u);if(!t)return null;const e=JSON.parse(t);return!e||typeof e.expiresAt!="number"||e.expiresAt<=Date.now()?null:e.data}catch{return null}}function x(t){try{localStorage.setItem(u,JSON.stringify({data:t,expiresAt:Date.now()+y}))}catch{}}function i(t){r.textContent=t.sentence,r.href=t.url||"https://hitokoto.cn/",l.textContent=t.source?`出自 ${t.source}`:"来自 Hitokoto"}async function h({force:t=!1}={}){if(!t){const e=f();if(e){i(e);return}}o.classList.add("is-loading"),r.textContent="获取中...";try{const e=await fetch(g);if(!e.ok)throw new Error(`Hitokoto request failed: ${e.status}`);const n=await e.json(),a=n.hitokoto||n.content||n.sentence||n.text,S=typeof a=="string"&&a.trim()?a.trim():d.sentence,E=typeof n.from=="string"&&n.from.trim()?n.from.trim():"Hitokoto",w=n.uuid?`https://hitokoto.cn/?uuid=${encodeURIComponent(n.uuid)}`:"https://hitokoto.cn/",p={sentence:S,source:E,url:w};x(p),i(p)}catch(e){console.error(e),i(f()||d)}finally{o.classList.remove("is-loading")}}c(L),s.addEventListener("click",()=>{c(o.classList.contains("is-collapsed"))}),k?.addEventListener("click",t=>{t.stopPropagation(),c(!0),h({force:!0})}),m?.addEventListener("click",t=>{t.stopPropagation(),c(!1)}),o.addEventListener("click",t=>{o.classList.contains("is-collapsed")&&(t.target instanceof Element&&t.target.closest("a, button")||c(!0))}),h()})();</script> <div class="custom-context-menu" data-context-menu role="menu" aria-hidden="true"> <div class="context-menu-nav" aria-label="页面导航"> <button type="button" data-context-action="back" aria-label="后退上一页" title="后退上一页"> <i class="fa-solid fa-arrow-left" aria-hidden="true"></i> </button> <button type="button" data-context-action="forward" aria-label="前进下一页" title="前进下一页"> <i class="fa-solid fa-arrow-right" aria-hidden="true"></i> </button> <button type="button" data-context-action="reload" aria-label="刷新页面" title="刷新页面"> <i class="fa-solid fa-rotate-right" aria-hidden="true"></i> </button> <a href="/" aria-label="返回首页" title="返回首页"> <i class="fa-solid fa-house" aria-hidden="true"></i> </a> </div> <div class="context-menu-group" data-selection-group hidden> <button type="button" data-context-action="copy-selection" data-selection-item> <i class="fa-regular fa-copy" aria-hidden="true"></i> <span>复制选中文字</span> </button> <button type="button" data-context-action="search-selection" data-selection-item> <i class="fa-brands fa-microsoft" aria-hidden="true"></i> <span>用 Bing 搜索</span> </button> <button type="button" data-context-action="quote-selection" data-selection-item data-comments-item> <i class="fa-regular fa-comment-dots" aria-hidden="true"></i> <span>引用到评论区</span> </button> </div> <div class="context-menu-group" data-image-group hidden> <button type="button" data-context-action="copy-image"> <i class="fa-regular fa-image" aria-hidden="true"></i> <span>复制图片</span> </button> <button type="button" data-context-action="open-image"> <i class="fa-solid fa-up-right-from-square" aria-hidden="true"></i> <span>新页面打开图片</span> </button> <button type="button" data-context-action="copy-image-url"> <i class="fa-solid fa-link" aria-hidden="true"></i> <span>复制图片地址</span> </button> </div> <div class="context-menu-group"> <a href="/archives/"> <i class="fa-solid fa-box-archive" aria-hidden="true"></i> <span>时间线</span> </a> <a href="/categories/"> <i class="fa-solid fa-folder" aria-hidden="true"></i> <span>分类</span> </a> <a href="/tags/"> <i class="fa-solid fa-hashtag" aria-hidden="true"></i> <span>标签</span> </a> <button type="button" data-context-action="comments" data-comments-item> <i class="fa-regular fa-comment-dots" aria-hidden="true"></i> <span>跳转评论区</span> </button> <button type="button" data-context-action="print"> <i class="fa-solid fa-print" aria-hidden="true"></i> <span>打印页面</span> </button> <a href="/cc/"> <i class="fa-solid fa-circle-info" aria-hidden="true"></i> <span>网站版权</span> </a> </div> </div> <script>
(() => {
const menu = document.querySelector('[data-context-menu]');
if (!menu) return;
const selectionItems = [...menu.querySelectorAll('[data-selection-item]')];
const selectionGroup = menu.querySelector('[data-selection-group]');
const commentsItems = [...menu.querySelectorAll('[data-comments-item]')];
const imageGroup = menu.querySelector('[data-image-group]');
const focusableSelector = 'a[href], button:not([disabled])';
let lastSelectionText = '';
let lastImage = null;
const isNativeContextTarget = (target) =>
target instanceof Element &&
Boolean(target.closest('input, textarea, select, [contenteditable="true"], [contenteditable=""]'));
const getCommentsTarget = () =>
document.querySelector('.twikoo-comments, #twikoo-wrap, #twikoo, .tk-comments-container');
const getSelectionText = () => String(window.getSelection?.() || '').trim();
const getImageTarget = (target) => {
if (!(target instanceof Element)) return null;
const image = target.closest('img');
return image instanceof HTMLImageElement ? image : null;
};
const getImageUrl = () => {
if (!lastImage) return '';
return lastImage.currentSrc || lastImage.src || lastImage.getAttribute('src') || '';
};
const copyText = async (text) => {
if (navigator.clipboard?.writeText) {
await navigator.clipboard.writeText(text);
return;
}
const textarea = document.createElement('textarea');
textarea.value = text;
textarea.setAttribute('readonly', '');
textarea.style.position = 'fixed';
textarea.style.inset = '0 auto auto -9999px';
document.body.appendChild(textarea);
textarea.select();
document.execCommand('copy');
textarea.remove();
};
const setMenuState = () => {
const hasSelection = lastSelectionText.length > 0;
const hasComments = Boolean(getCommentsTarget());
const hasImage = Boolean(getImageUrl());
selectionItems.forEach((item) => {
item.hidden = !hasSelection;
});
if (selectionGroup) selectionGroup.hidden = !hasSelection;
commentsItems.forEach((item) => {
item.hidden = !hasComments || (item.hasAttribute('data-selection-item') && !hasSelection);
});
if (imageGroup) imageGroup.hidden = !hasImage;
};
const closeMenu = () => {
menu.classList.remove('is-open');
menu.setAttribute('aria-hidden', 'true');
};
const openMenu = (x, y) => {
setMenuState();
menu.classList.add('is-open');
menu.setAttribute('aria-hidden', 'false');
const rect = menu.getBoundingClientRect();
const gap = 10;
const left = Math.min(Math.max(gap, x), window.innerWidth - rect.width - gap);
const top = Math.min(Math.max(gap, y), window.innerHeight - rect.height - gap);
menu.style.left = `${left}px`;
menu.style.top = `${top}px`;
};
const jumpToComments = () => {
const target = getCommentsTarget();
target?.scrollIntoView({ behavior: 'smooth', block: 'start' });
};
const quoteToComments = () => {
jumpToComments();
window.setTimeout(() => {
const textarea = document.querySelector('#twikoo textarea, .twikoo-comments textarea, .tk-input textarea');
if (!(textarea instanceof HTMLTextAreaElement) || !lastSelectionText) return;
const quote = lastSelectionText
.split(/\r?\n/)
.map((line) => `> ${line}`)
.join('\n');
const current = textarea.value.trim();
textarea.value = current ? `${current}\n\n${quote}\n` : `${quote}\n`;
textarea.dispatchEvent(new Event('input', { bubbles: true }));
textarea.focus();
}, 500);
};
const searchSelection = () => {
if (!lastSelectionText) return;
const url = `https://www.bing.com/search?q=${encodeURIComponent(lastSelectionText)}`;
window.open(url, '_blank', 'noopener,noreferrer');
};
const copyImage = async () => {
const imageUrl = getImageUrl();
if (!imageUrl) return;
try {
if (!navigator.clipboard?.write || typeof ClipboardItem === 'undefined') {
throw new Error('Image clipboard is not available.');
}
const response = await fetch(imageUrl, { mode: 'cors' });
const blob = await response.blob();
await navigator.clipboard.write([
new ClipboardItem({ [blob.type || 'image/png']: blob }),
]);
} catch {
await copyText(new URL(imageUrl, window.location.href).toString());
}
};
const openImage = () => {
const imageUrl = getImageUrl();
if (!imageUrl) return;
window.open(new URL(imageUrl, window.location.href).toString(), '_blank', 'noopener,noreferrer');
};
document.addEventListener('contextmenu', (event) => {
if (isNativeContextTarget(event.target)) return;
lastSelectionText = getSelectionText();
lastImage = getImageTarget(event.target);
event.preventDefault();
openMenu(event.clientX, event.clientY);
});
document.addEventListener('click', (event) => {
const actionTarget = event.target instanceof Element ? event.target.closest('[data-context-action]') : null;
if (!actionTarget || !menu.contains(actionTarget)) {
closeMenu();
return;
}
const action = actionTarget.dataset.contextAction;
closeMenu();
if (action === 'back') history.back();
if (action === 'forward') history.forward();
if (action === 'reload') location.reload();
if (action === 'copy-selection' && lastSelectionText) copyText(lastSelectionText);
if (action === 'search-selection') searchSelection();
if (action === 'quote-selection') quoteToComments();
if (action === 'copy-image') copyImage();
if (action === 'open-image') openImage();
if (action === 'copy-image-url') copyText(new URL(getImageUrl(), window.location.href).toString());
if (action === 'comments') jumpToComments();
if (action === 'print') window.print();
});
document.addEventListener('keydown', (event) => {
if (event.key === 'Escape') closeMenu();
if (event.key === 'Tab' && menu.classList.contains('is-open')) {
const items = [...menu.querySelectorAll(focusableSelector)].filter((item) => !item.closest('[hidden]'));
if (items.length === 0) return;
const first = items[0];
const last = items[items.length - 1];
if (event.shiftKey && document.activeElement === first) {
event.preventDefault();
last.focus();
} else if (!event.shiftKey && document.activeElement === last) {
event.preventDefault();
first.focus();
}
}
});
window.addEventListener('scroll', closeMenu, { passive: true });
window.addEventListener('resize', closeMenu);
})();
</script> <script src="https://cdn.jsdmirror.com/npm/instantsearch.js@4.56.0"></script> <script src="https://cdn.jsdmirror.com/npm/typesense-instantsearch-adapter@2.7.0/dist/typesense-instantsearch-adapter.min.js"></script> <script src="https://cdn.jsdmirror.com/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.umd.js"></script> <script src="/js/random.js"></script> <script src="/js/search/typesense-search.js"></script> <script src="/js/external-links.js"></script> <script>
(() => {
const nav = document.querySelector('.nav');
const toggle = document.querySelector('[data-nav-toggle]');
const menu = document.querySelector('[data-nav-menu]');
if (!nav || !toggle || !menu) return;
function setMenu(open) {
nav.classList.toggle('is-open', open);
toggle.setAttribute('aria-expanded', String(open));
toggle.setAttribute('aria-label', open ? '关闭菜单' : '打开菜单');
}
toggle.addEventListener('click', () => {
setMenu(!nav.classList.contains('is-open'));
});
menu.addEventListener('click', (event) => {
if (event.target instanceof Element && event.target.closest('a')) setMenu(false);
});
window.addEventListener('resize', () => {
if (window.innerWidth > 720) setMenu(false);
});
})();
(() => {
const storageKey = 'site-theme';
const root = document.documentElement;
const button = document.querySelector('[data-theme-toggle]');
const media = window.matchMedia('(prefers-color-scheme: dark)');
const getSystemTheme = () => (media.matches ? 'dark' : 'light');
const getTheme = () => localStorage.getItem(storageKey) || getSystemTheme();
function applyTheme(theme) {
root.dataset.theme = theme;
button?.setAttribute('aria-label', theme === 'dark' ? '切换到日间模式' : '切换到夜间模式');
button?.setAttribute('title', theme === 'dark' ? '切换到日间模式' : '切换到夜间模式');
}
applyTheme(getTheme());
button?.addEventListener('click', () => {
const nextTheme = root.dataset.theme === 'dark' ? 'light' : 'dark';
localStorage.setItem(storageKey, nextTheme);
applyTheme(nextTheme);
});
media.addEventListener('change', () => {
if (!localStorage.getItem(storageKey)) applyTheme(getSystemTheme());
});
})();
(() => {
const runtime = document.getElementById('site-runtime');
if (!runtime) return;
const start = new Date(window.SITE_CONFIG.site.startTime).getTime();
const pad = (value) => String(value).padStart(2, '0');
function updateRuntime() {
const diff = Math.max(0, Date.now() - start);
const days = Math.floor(diff / 86400000);
const hours = Math.floor((diff / 3600000) % 24);
const minutes = Math.floor((diff / 60000) % 60);
const seconds = Math.floor((diff / 1000) % 60);
runtime.textContent = `${days} 天 ${pad(hours)} 时 ${pad(minutes)} 分 ${pad(seconds)} 秒`;
}
updateRuntime();
window.setInterval(updateRuntime, 1000);
})();
</script> </body> </html>
Reference in New Issue View Git Blame Copy Permalink