hexo 学习 0031:hexo 语法高亮

在技术博客中,代码块是展示核心内容的灵魂。如果代码没有颜色区分,阅读起来就像在看一堆枯燥的字符堆砌。Hexo 内置了对两大主流语法高亮库——Highlight.jsPrismJS 的支持。

你可以把语法高亮想象成给代码穿上“制服”。Highlight.js 和 PrismJS 就是两家不同的制服制造商,一家擅长在服务器端就把衣服做好(服务端高亮),另一家则提供了丰富的配件让浏览器自己去搭配(浏览器端高亮)。Hexo 允许你自由选择其中一家,甚至决定是在生成网站时穿好衣服,还是让读者打开网页时再穿。

本篇教程将详细讲解如何在 Hexo 中配置和使用这两套系统。

阅读更多

hexo 学习 0030:hexo 国际化(i18n)

在 Hexo 中,如果你想让博客支持多种语言(例如同时提供中文和英文版本),就需要使用国际化(Internationalization,简称 i18n)功能。这里的 “i18n” 是单词 internationalization 的缩写,因为首字母 i 和尾字母 n 之间有 18 个字母,所以用 i18n 代表。

这就好比开了一家餐厅,你准备了中文菜单和英文菜单。当中国客人进来时,你递上中文菜单;当外国客人进来时,你递上英文菜单。Hexo 的 i18n 功能就是帮你自动判断该给读者展示哪种语言的“菜单”。

阅读更多

hexo 学习 0029:hexo helpers

在 Hexo 的主题开发中,Helper(辅助函数)是你最得力的助手。你可以把它们想象成模板中的“快捷指令”或“瑞士军刀”,它们能让你在编写模板文件(如 .ejs.swig.pug)时,快速插入复杂的代码片段、处理数据或生成标准的 HTML 结构。

请注意一个核心规则:Helper 只能在模板文件中使用,不能直接在源文件(如 Markdown 文章)中调用。

下面我们将详细拆解 Hexo 内置的各类 Helper,帮助你从零开始掌握它们。

阅读更多

hexo 学习 0028:hexo 变量

在 Hexo 主题开发中,变量是连接数据与模板的桥梁。你可以把变量想象成“快递包裹”,Hexo 引擎在渲染页面时,会将文章内容、站点配置、日期信息等打包进不同的变量对象中,模板只需拆开对应的包裹即可获取内容。如果不知道这些变量的存在,你就无法在页面上动态展示文章标题、分类列表或分页导航。

阅读更多

hexo 学习 0026:hexo 主题

创建一个 Hexo 主题本质上就是构建一个特定结构的文件夹。你可以把主题想象成博客的“皮肤”和“骨架”,它决定了网站长什么样以及内容如何排列。创建过程非常简单:在 themes 目录下新建一个文件夹,然后修改博客根目录 _config.yml 中的 theme 配置项指向该文件夹名称,即可立即切换。

阅读更多