惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

WordPress大学
WordPress大学
D
Darknet – Hacking Tools, Hacker News & Cyber Security
Hacker News: Ask HN
Hacker News: Ask HN
N
News and Events Feed by Topic
Forbes - Security
Forbes - Security
The Last Watchdog
The Last Watchdog
TaoSecurity Blog
TaoSecurity Blog
Schneier on Security
Schneier on Security
SecWiki News
SecWiki News
V
Vulnerabilities – Threatpost
Project Zero
Project Zero
O
OpenAI News
W
WeLiveSecurity
Security Archives - TechRepublic
Security Archives - TechRepublic
Exploit-DB.com RSS Feed
Exploit-DB.com RSS Feed
H
Hacker News: Front Page
Cisco Talos Blog
Cisco Talos Blog
Spread Privacy
Spread Privacy
Help Net Security
Help Net Security
P
Privacy & Cybersecurity Law Blog
K
Kaspersky official blog
S
Security @ Cisco Blogs
Latest news
Latest news
AWS News Blog
AWS News Blog
U
Unit 42
Martin Fowler
Martin Fowler
阮一峰的网络日志
阮一峰的网络日志
S
Secure Thoughts
CTFtime.org: upcoming CTF events
CTFtime.org: upcoming CTF events
Application and Cybersecurity Blog
Application and Cybersecurity Blog
Know Your Adversary
Know Your Adversary
Scott Helme
Scott Helme
博客园 - 司徒正美
B
Blog RSS Feed
C
Check Point Blog
Hacker News - Newest:
Hacker News - Newest: "LLM"
D
Docker
Google Online Security Blog
Google Online Security Blog
Jina AI
Jina AI
aimingoo的专栏
aimingoo的专栏
Recent Commits to openclaw:main
Recent Commits to openclaw:main
Last Week in AI
Last Week in AI
月光博客
月光博客
C
CXSECURITY Database RSS Feed - CXSecurity.com
S
SegmentFault 最新的问题
NISL@THU
NISL@THU
T
The Blog of Author Tim Ferriss
C
Cisco Blogs
Attack and Defense Labs
Attack and Defense Labs
小众软件
小众软件

/home/rook1e

AI 编码小记 1 | /home/rook1e 被 CGO 交叉编译折磨的一个周末 | /home/rook1e 独立开发备忘录 | /home/rook1e 使用 Cline + Gemini 2.5 Pro 来做 Vibe coding | /home/rook1e RawWeb 更新:SimHash 和 Meilisearch | /home/rook1e Neovim、终端和生产力 | /home/rook1e RawWeb.org 的前三次技术栈迭代 | /home/rook1e 配置轻量级 Linux 远程开发环境(Fedora 38) | /home/rook1e 我的透明代理方案 1.0 | /home/rook1e 深入理解 Linux TProxy | /home/rook1e 我的初代 NAS | /home/rook1e 劫持 Golang 编译 | /home/rook1e 初探 Golang 代码混淆 | /home/rook1e 「SF」子域名搜集工具开发小结 | /home/rook1e Code-Breaking 2020 Bashinj | /home/rook1e 浅谈 HTTP 请求走私 | /home/rook1e
从 Material-T 到 Fluid | /home/rook1e
Yuan (rook1e) · 2019-09-24 · via /home/rook1e
目录

关于项目转移

用 Material-T 的同学应该注意到了,Material-T 已经更名为 Fluid 并转移到了 Fluid-dev 组织。之前在 issue #74 里简单解释了一下,其实原因也就是那么简单,我觉得 Material-T 交给社区比在我手里更靠谱,之前跟 @zkqiang 老哥合作开发的过程很流畅,也让我确信社区合作式的工作流不会增加时间成本(废话😂)。

下面简单说一下最近的更新,写完这篇以后就不再针对主题的更新水博客了,Release 里写的很清楚,我再 bb 就没必要了。

新功能

配置自动合并

对于 Hexo 主题更新这个大难题,总归是做了一次尝试,从 Theme configurations using Hexo data files 学来的(NexT 牛逼),现在体验还不错。

思路就是利用 Hexo 的数据文件功能,此功能要求 Hexo 3.0+。

有时您可能需要在主题中使用某些资料,而这些资料并不在文章内,并且是需要重复使用的,那么您可以考虑使用 Hexo 3.0 新增的「数据文件」功能。此功能会载入 source/_data 内的 YAML 或 JSON 文件,如此一来您便能在网站中复用这些文件了。

具体配置请参考文档和 实现平滑升级

自定义静态资源地址

(v1.5.0 版本及以上)如果需要使用 CDN 或其他方式存放静态资源:将 _static_prefix.yml 复制到博客根目录的 /source/_data/ 中,重命名为 fluid_static_prefix.yml并按自己的需求修改配置。若 _data/fluid_static_prefix.yml 存在则会自动覆盖 /theme/fluid/_static_prefix.yml

博客托管在 GitHub Page 的话可能对有些地区访问速度不太友好,所以可以将第三方的资源引用改为靠谱的公共 CDN 服务商,比如 cdnjsjsDelivr。有家底的同学可以用自己的 CDN 服务。

比如我的博客是托管在 GitHub Pages 的,国内访问速度不理想,而 jsDelivr 有在大陆部署节点,而且可以直接缓存 GitHub 仓库中的文件,所以选择 jsDelivr 优化一下加载速度。比如 fluid/source/lib/ 中的各种第三方库,我用 https://cdn.jsdelivr.net/gh/fluid-dev/[email protected]/source/lib 作为前缀,这个 url 的各个部分的意思即为:

gh => 从 GitHub 拉取资源
fluid-dev/hexo-theme-fluid => github.com/fluid-dev/hexo-theme-fluid 仓库
@1.5.0 => 指定版本 release v1.5.0
source/lib => 仓库的相应目录

这里只针对 source/lib 目录下的资源,是因为 source/js source/css source/img 的文件较小且没有全部用到,没必要上 CDN,而且 CSS 文件需要实时编译。source/lib 下的文件是稳定的,直接引用就可以了。

上述方式修改之后的 fluid_static_prefix.yml

internal_js: /js
internal_css: /css
internal_img: /img

anchor: https://cdn.jsdelivr.net/gh/fluid-dev/[email protected]/source/lib/anchor

font_awesome: https://cdn.jsdelivr.net/gh/fluid-dev/[email protected]/source/lib/font-awesome

github_markdown: https://cdn.jsdelivr.net/gh/fluid-dev/[email protected]/source/lib/github-markdown

jquery: https://cdn.jsdelivr.net/gh/fluid-dev/[email protected]/source/lib/jquery

bootstrap: https://cdn.jsdelivr.net/gh/fluid-dev/[email protected]/source/lib/bootstrap

mdbootstrap: https://cdn.jsdelivr.net/gh/fluid-dev/[email protected]/source/lib/mdbootstrap

popper: https://cdn.jsdelivr.net/gh/fluid-dev/[email protected]/source/lib/popper

prettify: https://cdn.jsdelivr.net/gh/fluid-dev/[email protected]/source/lib/prettify

prettify_theme: https://cdn.jsdelivr.net/gh/fluid-dev/[email protected]/source/lib/prettify

tocbot: https://cdn.jsdelivr.net/gh/fluid-dev/[email protected]/source/lib/tocbot

typed: https://cdn.jsdelivr.net/gh/fluid-dev/[email protected]/source/lib/typed

经过测试,效果是很显著的,原本不挂代理需要 10s 左右才能显示轮廓的首页,使用 jsdelivr 配合懒加载功能,现在不挂代理也仅仅需要 1s。以后在更新的时候只需要把 1.5.0 改为相应的版本号即可。

当然也可以选择各个第三方库对应的 CDN,但要注意选用对应的版本。

lazyload

Fluid 也算是比较靠图片的主题,优秀的图片搭配会引导整个站点的风格。为了提高首屏加载速度(主要是我也不会优化其他的…),给图片做了懒加载,只有出现在视口的图片才会加载 现在是提前一段滚动距离加载。本想用现成的 lazysizes 库实现,但是实践的时候刷到了 图片 lazyload 的学问和在 Hexo 上的最佳实践,其中提到的思路是利用 srcset 属性优先级高于 src 的特性,既保证不支持 srcset 的爬虫、RSS 阅读器等可以读到 src 属性不至于抓取到一个有空白占位图的页面中,又可以让页面初次渲染的时候只加载很小的 loading 图。具体的实现参考了文中的代码,填了一些坑。

其他

  • 新配置项 about.md_path 用于指定 about.md 的路径
  • i18n && 中英 README 什么叫国际化主题啊(战术后仰)
  • 向下滚屏 && 向顶部滚屏

优化

  • 新 logo
  • 延迟打字机效果:#65
  • 统一默认的 banner_img:精简主题包大小,统一默认的风格
  • 可以指定 about.md 的存放位置:方便实现平滑更新
  • 优化首页文章摘要区的高度限制:当手动设置摘要时(摘要优先级:手动 > 自动),首页文章摘要区的高度不再锁定。方便喜欢不加文章缩略图的同学展示更多文章内容。如果已为文章添加首页缩略图,建议开启自动摘要或手动设置字数合适的摘要。

bug fix

  • 修复 valine 加载问题
  • 移除顶部进度条
  • 修复读取文件时路径错误

平滑更新指北

当前利用了数据文件的 Fluid 已经可以实现平滑更新了:下载最新 Release 并解压、改名、直接覆盖原主题即可。 当然需要做以下前提准备:

  1. 在 Hexo 的 source 目录下新建 _data 文件夹
  2. 将 Fluid 中的 _config.yml 和 _static_prefix.yml 拷贝到步骤 1 的文件夹中,分别改名为 fluid_config.yml 和 fluid_static_prefix.yml
  3. 将自定义的资源文件移动到主题之外,比如图片存放到 /source/images/,about.md 存放到 /source/about.md
  4. 将主题配置中的 banner_img、about.md 修改为上一步自定义的存放位置。比如按照如上配置的话,图片链接就是 /img/your_img_name.png,about.md 的位置就是 ../../source/about.md
  5. 下次更新就只需要用新的 Release 覆盖旧 Fluid 文件夹就可以了。当然也需要关注一下更新内容有没有涉及到配置文件或静态资源文件,及时更新存放在 /source/_data 下的数据文件