导航

hexo主题

发布时间：5 个月前 更新时间：3 months ago
开发 Hexo

正如你所见，你现在正在查看此篇文章的博客，就是接下来我要向你介绍的由我个人编写的Hexo博客主题。

到目前为止，主题还未开发完成，有许多问题和功能都没有得到解决，希望在未来的日子里，我可以一步一步将它完善。

项目地址

主题介绍

该主题使用 EJS 作为静态渲染模板语言，因为它非常的简单，很易于上手，以便你能够很轻易的修改主题。主题目录结构也非常的简单，你能够快速的定位到你想要修改的功能，我在 layout.ejs 文件中包含了全部的<head> 外部资源导入。当某个组件需要用到JS进行操纵时，我会在该组件中包含相关JS文件，而不会在调用者处进行导入。

layout 根目录下的所有ejs后缀文件都是 hexo 文档中会被默认渲染的模型。在 partial 目录下包含有全部的被渲染模型所依赖的组件，我将它们按照目录的方式进行分类，以便你能够更快速的找到组件并修改。但是，css 和 js 文件，我并没有做到这样，这是非常抱歉的，因为 css 和 js 文件单一性太强，一个源文件就能够编写所有的组件需求（它们的代码量也很少），所以我干脆直接丢在根目录下了，请你谅解。

在主题中，我使用的外部字体只有一个，但我仍然单独创建了一个fonts.css文件去进行字体属性声明。若您向对主题中的文章添加更多的字体样式，这很方便。

主题的设计哲学就是简洁，因为全采用 Bootstrap 的组件，外加 Bootstrap 本身的设计就很不错，所以我并没有做多少的改动就编写了这样一个简单、美观以及高效的主题。

在编写该主题期间，我一直是边学边用，从零基础到编写这样一个主题，解决遇到的各种问题，我总共使用的学习时间是 1 个月：

  1. HTML+CSS+JS 的学习
  2. EJS 的学习
  3. NodeJS 的学习
  4. Sass 的学习
  5. Bootstrap 5 的学习
  6. 以及编写过程中使用的所有库学习

我本身是一位Linux系统开发工程师，所以对功能的划分、文件目录的组织，有着得天独厚的优势。

希望你能够喜欢我的第一个前端作品。

Hexo 插件介绍

前端组件介绍

  1. 灯箱 -> FancyBox
  2. 前端框架 -> Bootstrap 5
  3. 网站图标 -> Bootstrap Icons
  4. 粒子动画效果 -> particles.js
  5. JQuery -> JQuery
  6. 评论功能 -> Twikoo

站点架构

粒子动画效果

粒子动画效果通过 particles.js 实现，它是一个非常简单的粒子动画效果库，我们可以通过该库提供的官网，来自定义我们想要的粒子效果。但是需要注意的是，粒子效果对计算机资源占用比较大，如果你已知该问题，仍需要使用。那么可以通过修改主题目录下的_config.yml文件中的如下内容：

particles: 
  enabled: false # 是否启用粒子特效
  conf_path: "/assets/particlesjs-config.json" # 填写souce目录下绝对路径

自定义完成后可以替换 /source/assets 目录下的 particles-config.json 文件来使用你想要的粒子效果。

粒子效果官网图

评论功能

站点的评论功能使用的是 Twikoo 开源项目，采用云函数的方式部署，是最为简单的方式。

搜索框

搜索对我来说还是大费周章的，因为我是干中学，当我设计出弹窗的时候，并没有动画效果，包括设计搜索框的弹窗也耗费了许多的心神。刚开始采用的是 Bootstrap 5 的拟态框方案，但是它提供的动画太过生硬了，达不到我想要的效果。然后我就 ”取其精华，去其糟粕”，我把 Bootstrap 的 模态框 样式给截取下来，然后自己设计动画和JS函数。最后，实现的效果是 “搜索模态框从没有 -> 向外展开 -> 完全展开”，关闭的效果取反即可。

全站搜索，采用的是 hexo-generator-search 插件提供的全站数据统计地图，后续我想使用它去进行一个 “Zero Load” 渲染。

Hexo 部署

Hexo 采用 Docker 部署。文章通过，Syncthing 在各主机间同步。因为 Hexo 提供了 new 子命令去管理和生成 front-mattera。因为 front-matter 包含有下列文章的元信息(metadata)：

  • 创建时间
  • 文章分类
  • 文章标签
  • 文章渲染标题
  • 文章封面
  • 文章描述
  • 以及其它的自定义信息

所以一般情况下不好将 Hexo 控制台和文章编写给解耦，好在 Hexo 提供了丰富的插件功能，我找到一个插件可以自动生成 front-matter 信息 hexo-auto-front-matter，该插件可以将 new 子命令与文章撰写给解耦掉，使得我们可以在个人 PC 上编写文章，通过 Syncthing 同步到远程服务器上。

更甚可以将我们的多个设备加入 Syncthing Link 中去，这样确保的数据的安全性和完整性，我的建议是在 Syncthing 上开启版本控制功能，这样就算我们在其它设备上误删了文件，也可以在服务器主机的 Syncthing 管理面板恢复。

全站查找