用 Umami 分享链接给网站信息卡提供统计数据
这篇文章记录如何通过 Umami 的分享链接获取公开统计数据，再用 Cloudflare Worker 做一层缓存代理，最后把访客数和访问量显示到博客侧边栏的网站信息卡里。
Bi's Blog
#网站
共 17 篇文章
添加网站左上角菜单
这篇文章详细介绍了如何在柳神的网站上添加一个自定义的左上角菜单，包括菜单的结构、样式以及响应式设计。作者提供了具体的HTML和CSS代码示例，展示了如何实现一个包含多个链接和功能的导航栏，同时确保在不同屏幕尺寸下的适配性。此外，还解释了一些关键的CSS属性和JavaScript交互效果，以实现平滑的菜单显示和隐藏。通过这些步骤，用户可以轻松地自定义和美化网站的顶部导航栏，提升用户体验。
自定义字体
这篇文章讨论了如何自定义网站字体，以提升网站的美观性和用户体验。作者首先提到了在移动端和电脑上使用woff或woff2字体能够完美显示的重要性，并提到谷歌字体库可能已经可以直接在中国大陆访问，这使得自定义字体的需求可能不再那么迫切。接着，文章详细介绍了如何在网上寻找并下载喜欢的字体，包括字体格式的转换方法。然后，展示了如何在CSS文件中添加字体，包括如何声明字体族和指定字体文件的路径。最后，文章还提供了关于其他字体格式的参考，并指导如何在主题文件的font配置区域修改字体设置。
在侧边栏添加日历和倒计时
实现了一个侧边栏日历与倒计时卡片，包含以下核心功能：日历展示:显示当前日期（公历与农历）、星期、生肖、干支年份。动态生成当月日历网格，高亮当天日期。倒计时模块:距离除夕倒计时：实时计算并显示剩余天数（示例中为2026年2月16日）。进度条：分别展示本年、本月、本周的已过去进度（百分比）及剩余天数。农历支持:调用 chinese-lunar.js 库将公历转换为农历，格式化显示为“干支年+生肖年+农历月+农历日”。
搭建Owncloud并集成Onlyoffice
这篇文章详细介绍了如何搭建Owncloud网盘服务并集成Onlyoffice文档编辑器。首先，作者描述了搭建过程中的基本步骤，包括安装网盘和进行系统调优，其中强调了Redis缓存配置和Cron任务设置的重要性。接着，作者提到了在1panel应用商店安装Onlyoffice的过程，并说明了如何将其反向代理至个人域名。最后，文章指导用户在Owncloud中搜索并安装Onlyoffice插件，确保了整个集成过程的顺利完成。
为博客添加CMS系统
这篇文章介绍了如何为Hexo博客添加一个基于Sveltia CMS的CMS系统。首先，作者通过npm安装了Sveltia CMS，并在博客源码目录下创建了必要的文件和目录结构。接着，作者详细说明了如何在config.yml文件中配置CMS，包括字段定义、页面和集合的设置。由于作者使用的是自己的服务器，无法使用官方的认证系统，因此他还讲解了如何配置GitHub OAuth应用，并在Cloudflare上设置环境变量以支持CI/CD流程。最后，作者指出完成这些步骤后，可以通过访问博客的admin后台来管理内容。
使用GitHub推送Hexo到服务器
这篇文章介绍了如何使用GitHub推送Hexo到服务器，包括建立GitHub仓库、上传文件、创建Action以及配置环境变量等步骤。首先，文章提供了在香港直连GitHub的方法，并指导如何在本地安装git、配置用户名和邮箱、创建SSH Key并在GitHub上上传公钥。接着，文章详细说明了如何在自己的hexo根目录下初始化git仓库，并使用PowerShell将文件推送到新建的私有仓库。此外，文章还创建了一个Action，用于自动化部署过程，包括检查分支、缓存项目、安装Node和Hexo、安装依赖、清理文件树、生成静态文件并压缩、部署到服务器等环节。最后，文章列出了需要配置的环境变量，如服务器IP、用户名、密钥密码、私钥和SSH登录端口，并强调了测试的重要性，以确保整个部署流程无报错。
自定义页脚（新）
您提供的代码是一个自定义页脚的HTML和CSS代码 要在您的网站中使用这个自定义页脚，请按照以下步骤操作： 1. 首先，将提供的CSS代码复制到您网站的CSS文件中。如果您没有单独的CSS文件，可以在HTML文件的`<head>`部分添加`<style>`标签，并将CSS代码粘贴到其中。 2. 接下来，将提供的HTML代码复制到您网站的HTML文件中。将其放置在`<body>`标签内，最好在页面的底部。 3. 根据需要自定义页脚内容，例如更改版权信息、菜单链接、社交链接等。 4. 保存更改并在浏览器中查看您的网站，您应该能看到自定义页脚。
自定义分类条
这篇文章介绍了如何在博客系统中自定义分类栏的设计和实现过程。首先，通过Pug模板语言创建了一个名为categoryBar.pug的文件，用于定义分类栏的结构和样式。接着，在Stylus样式文件category-bar.styl中详细定义了分类栏的样式，包括内边距、背景颜色、边框圆角等，并设置了滚动条的样式。最后，在JavaScript文件main.js中添加了一个setCategoryBarActive函数，用于根据当前页面路径自动激活相应的分类项。此外，还讨论了如何将自定义的分类栏集成到主题中，并提供了相关的Pug混入代码。整个过程确保了分类栏的可定制性和易维护性。
自定义导航栏
这篇文章介绍了如何在最新版的Butterfly 5.4中自定义导航栏，包括PC端和PE端的修改方法以及CSS文件的调整。主要内容包括修改header\nav.pug和menu_item.pug文件中的内容，调整head.styl和sidebar.styl中的CSS样式，以及在CSS文件中添加新的样式规则。这些修改旨在实现导航栏的个性化设置，如菜单项的显示、位置调整、背景颜色变化等，以提升网站的用户体验和视觉效果。
利用 SiteMap 随机访问站内页面
提供了一个很好的解决方案，通过使用 Hexo 的 sitemap 生成器和 JavaScript 代码来实现随机访问站内页面的功能 以下是你提供的步骤的详细解释：
博客添加AI总结
这篇文章介绍了如何在Hexo博客中添加AI摘要功能，作者寻找并尝试了多个AI摘要插件后，最终选择了hexo-ai-summary-liushen插件。安装过程中，作者详细说明了如何安装额外依赖，并在Hexo配置文件中添加了相关配置。文章还提供了关于内容清洗、摘要字段设置、日志等级、API接口配置、插件适配等方面的详细说明和配置示例。此外，作者还介绍了如何将AI摘要集成到Hexo主题中，并提供了相关的CSS样式和JavaScript动效代码，以实现更加逼真的摘要效果。最后，作者提醒用户在运行插件前注意备份，并介绍了如何处理可能出现的缓存问题。
利用插件自定义页脚菜单
这篇文章介绍了如何使用插件来自定义Hexo博客的页脚菜单。首先，通过npm安装了hexo-butterfly-footer-marcus插件，并根据需要安装了yamljs插件。接着，在博客的配置文件中添加了相关配置信息，包括页脚美化、图标链接、作者信息等。文章还提供了具体的参数释义和使用方法，指导读者如何填写配置项和修改源码来调整页脚样式和布局。最后，文章还提到了如何解决在黑暗模式下修改按钮层级的问题，并提供了相关的代码修改示例。
自定义右键菜单
这篇文章介绍了如何在自定义右键菜单中添加各种功能，包括返回、前进、刷新、滚动到页面不同位置、复制文本、搜索页面、打开链接、粘贴内容、复制本文地址、在新窗口打开链接、保存图片、随机文章浏览、切换深色模式、繁简转换、阅读模式以及隐私声明、Cookie协议和版权声明等。同时，文章还提供了创建Pug文件和JavaScript文件的步骤，详细说明了如何编写右键菜单的HTML结构和交互逻辑。
在侧边栏中添加欢迎信息
这篇文章介绍了如何在侧边栏中添加欢迎信息，包括申请腾讯地图API key、添加js脚本以及根据用户的地理位置显示个性化欢迎语。首先，文章指导读者如何申请腾讯地图API key，并提醒注意填写信任域名时不要包含'https://'。接着，文章说明了在主题的js目录下添加txmap.js脚本的过程，并提到了一个更完善的js脚本。最后，文章详细描述了如何使用获取到的地理位置信息，通过switch语句根据不同的国家、省份和城市显示相应的欢迎语。
配置说说页面
这段文字看起来是一个部署教程，主要是关于如何在服务器上部署一个名为“Moments”的应用，并将其与网站集成。以下是对这段文字的概括： 1. 介绍了硬件和软件的要求，包括服务器、域名、Docker环境和反向代理工具（如Nginx）。 2. 提供了Moments应用的部署方法，包括使用docker-compose进行部署和配置Nginx反向代理。 3. 介绍了如何在前端集成Moments应用，包括引入必要的CSS和JS文件，以及创建一个新的页面来显示Moments的内容。 需要注意的是，这段文字中的一些链接和代码可能已经过时或者不适用于所有场景，建议在实际操作时参考最新的官方
部署历程
这篇文章详细介绍了如何部署Hexo博客到Linux服务器，包括前提条件、本地环境准备、SSH密钥认证、配置步骤、工作流程以及故障排除提示。文章首先列出了部署所需满足的条件，然后逐步指导读者如何在服务器上安装Git、创建裸仓库、配置Git钩子以自动部署Hexo博客，并提供了验证部署成功的步骤。最后，文章还给出了一些常见问题的解决建议，帮助读者顺利完成部署。整个过程简单高效，适合需要自动化部署博客的用户。