GitHub 被封后,我将网站迁移到 Cloudflare Pages,速度飞快
本文介绍了作者因 GitHub 账号被封而被迫迁移网站的经历。作者在凌晨美化网站并推送更新时发现账号被 Masked,怀疑与使用域名邮箱有关。认为 GitHub 虽重要但访问不便,且存在被封风险,因此决定将网站迁移至 Cloudflare Pages。通过本地编译后拖拽部署,发现 Cloudflare Pages 速度极快,优于 Vercel。作者最终建议开发者备份代码至 Codeberg 或 Gitee 等平台,避免依赖单一服务商。全文体现了对开源平台风险的警觉与主动备份的重要性。
Butterfly 主题实现:文章随机跳转盲盒功能教程
本文介绍了如何为 Butterfly 主题实现随机跳转文章的功能,通过编写 JavaScript 脚本爬取归档页面并提取文章链接,再随机选择一个链接进行跳转。文章详细展示了从复用友链跳转脚本到修改选择器适配归档页面的过程,并给出了完整的 randomizer 函数代码。同时说明了在主题配置中注入脚本文件以及在页脚添加触发链接的方法,最后提醒不同主题需根据实际情况调整链接类名。
网站目录问题用 JS 自动刷新、解决并删除错误 CSS
本文介绍了如何通过在网站配置文件中添加 JavaScript 代码来解决目录显示异常的问题,该代码会在页面加载完成后等待所有图片加载,并在 1.5 秒后自动刷新页面,同时监听 PJAX 等异步加载事件以保持功能生效。文章还指出了之前使用 CSS 强制修改图片宽高比的做法是错误的,会导致评论区表情包异常,因此已删除该样式。作者反思了自己因精神状态不佳而导致的失误。
巧用 CSS 容器一步修复 Butterfly 主题,目录加载图片大小问题
本文介绍了在使用 Butterfly 主题时,遇到的目录大小计算问题,即目录仅统计首次加载时的内容而非加载完成后的实际大小。文章提供了解决方案:通过为图片添加 CSS 容器,设置 width: 100%、aspect-ratio 和 object-fit 属性,实现图片占位与裁剪,从而解决目录高度计算错误。同时,作者强调了根据网站图片比例(如 4:3、16:9 或 1:1)调整 aspect-ratio 值,并建议使用压缩后的 .webp 格式图片以保持原分辨率。最后给出了在主题配置文件中注入该 CSS 文件的方法。
Butterfly 主题深色模式:SVG 图标颜色不跟随的解决方案
本文介绍了在 Butterfly 主题中启用深色模式并解决 SVG 图片颜色冲突的方法。通过在 _config.butterfly.yml 中配置 darkmode 选项,可以开启深色模式切换按钮,并设置自动跟随系统或固定时间段切换。然而,手动引入的 .svg 图片在深色模式下不会自动变色,仍显示为黑色。为解决此问题,使用 CSS 媒体查询 @media (prefers-color-scheme: dark) 和滤镜 filter: brightness(0) invert(1) !important,将 SVG 图片在深色模式下反转成白色。将该样式保存为 svg.css,并通过 inject.head 配置注入到网站中,从而实现深色模式下 SVG 图片变为白色、浅色模式下保持黑色,避免颜色冲突。
Shell 脚本自动创建,并追加内容到说说 YAML 文件
本文介绍了如何使用 Shell 脚本向 YAML 文件动态追加数据记录。脚本定义了两个函数:nofile 用于在文件不存在时创建并写入第一条记录,包含当前日期时间、固定 key 值 1 以及用户输入的内容;hadfile 则读取已有文件中的最大 key 值并自动递增,然后追加新记录。主逻辑通过检查文件是否存在来调用相应函数。该脚本适用于自动化博客或静态站点中类似说说、动态等内容的管理,实现简单且高效。
Hexo Frontmatter 元数据教程详解:一篇搞懂所有字段
本文介绍了 Hexo 静态博客中 Frontmatter 的各项元数据字段及其作用,包括标题、日期、标签、分类、封面、更新日期、摘要、关键词、目录、评论和置顶等。通过 YML 格式的 Frontmatter,用户无需数据库即可管理文章信息,并控制文章在网站中的显示方式与排序。文章详细解释了每个字段的配置方法,例如封面使用 cover 关键字、置顶通过 sticky 设置数值等,旨在帮助读者快速掌握 Hexo 文章元数据的配置技巧,提升博客搭建效率。
Markdown 常用语法,与对应 HTML 标签完整对照教程
本文介绍了 Markdown 中常见的语法元素及其对应的 HTML 标签,包括标题、链接、图片、表格、有序序列、无序序列、删除线、斜体、标粗、引用、分割线、行内代码、代码块以及任务列表(待办和已办)等。通过对比 Markdown 简洁的书写方式与相应的 HTML 实现,帮助读者快速掌握 Markdown 的使用方法,并理解其作为 HTML 简化版的本质。文章适合初学者参考,也便于有 HTML 基础的开发者快速切换。
Hexo 博客 Butterfly 主题安装,与配置完整教程指南
本文介绍了 Hexo Butterfly 主题的安装与详细配置方法。文章从安装主题开始,指导用户修改 Hexo 配置文件并复制主题配置文件。随后依次讲解了导航栏、菜单、代码块、社交链接、图片设置、首页字幕、目录、文章版权、分页、过期提示、页脚、侧边栏(作者卡片、公告、最新评论、运行时间)、繁简转换、暗黑模式、滚动百分比、复制设置、字数统计、搜索、分享、评论系统(推荐 Waline)、主题颜色、字体、加载动画、特效、图片灯箱、PJAX、懒加载及注入代码等模块的配置选项。此外还说明了分类、标签、友链、说说等页面的创建与数据文件编写方式。最后给出了初始化 Git 仓库和部署建议。本文适合希望个性化搭建 Hexo 博客并使用 Butterfly 主题的开发者参考。
Hexo 网站必备五款插件,推荐及安装方法
本文介绍了 Hexo 博客框架的 5 个常用插件及其安装方式,包括:hexo-generator-sitemap 用于生成网站地图,hexo-generator-feed 用于生成订阅链接,hexo-generator-search 提供站内搜索功能,hexo-all-minifier 可压缩网页资源但无法处理字体且不支持 ARM 架构,hexo-helper-live2d 用于添加 Live2D 模型。每个插件都附有简洁的安装命令,方便用户快速配置。



