1. 前言
PugPaw's Hexo Blog 是一个基于 Hexo 搭建的个人博客，使用的主题是 hexo-theme-sagiri，这个主题是基于 Sakura 主题改进而来的。
本文旨在介绍 hexo-theme-sagiri 这个 npm 包的基本使用方法，通过使用这个主题，你可以快速地搭建一个响应式的博客。同时，本文将深入讲解该主题的配置以及相关插件的使用，帮助读者更好地自定义自己的博客。
2. 安装
使用 npm 安装 hexo-theme-sagiri：
$ npm install hexo-theme-sagiri --save
3. 配置
3.1 主题配置文件 _config.yml
在使用 hexo-theme-sagiri 之前，需要先对该主题的配置文件进行配置。主题的配置文件为 _config.yml，它以 YAML 格式保存在 Hexo 博客的根目录中。
以下是主题配置文件的示例：
-- -------------------- ---- ------- - ------ ----- ----- - --------- --------- ----- ----- ----------- ----------- ------ ------ ------ ------ ---- --------- - ------- -------- -------- ---- -------- - ------------ - -------- - --- - -------- - ------- - ----- - ------- ------------- ---- ------- --------- ---- - ---- ------------------------- -- - ----- ----- ------------ --------- - ------ --------- --------- -- - ------ ----- ----- ----- ------------- --------------------- - ------ ----------------- - ----- -------- --------------- - ------ -------- ---------------- - ------ ----- ------- ------ -------------------------- ------- ----------------- -------- --------------------
其中，各个参数的含义如下：
menu：导航菜单，用于指定博客的各个页面的链接；rss：RSS feed 的链接，如果你有设置 RSS，可以设置成/rss.xml等；sidebar：侧边栏的位置，可以设置成left或者right；widgets：侧边栏模块，可以选择需要显示的侧边栏模块，该主题提供了recent_posts, category, tag, tagcloud, archive等模块；excerpt_link：在首页显示文章的摘要，并提供Read More...链接；fancybox：是否使用 fancybox 查看文章中的图片；google_site_verification：Google 网站验证的 meta 标签；theme_color：主题颜色，默认为#2F303A；language：主题语言，默认为en，支持en和zh-CN；header_image：首页的 header image；disqus_shortname：Disqus 评论系统的 shortname；baidu_analysis：百度统计的统计代码；google_analysis：Google 统计的统计代码；social：社交链接，用于指定博主的社交链接。
3.2 插件配置文件 config.ejs
该主题有一个重要的插件，hexo-generator-json-content，它用于生成 hexo 的 JSON API，以此可以实现搜索、评论等功能。在使用该插件之前，需要对其进行配置。
在主题配置文件的头部插入以下内容：
-- -------------------- ---- -------
- ------ ---- ---
------------
----- -----
------
- -----
- ----
- ----
- ----
------
- -----
- ----
- ----
- ----
- ----------
- ----3.3 Next 主题配置文件 themes/next/_config.yml
该主题继承了 Next 主题，并对其进行了一些自定义。如果你需要对该主题进行更深入的定制，需要对 Next 主题 进行相关的配置。
以下是 Next 主题配置文件的示例：
-- -------------------- ---- ------- - ------ ----- ----- - ----------- ----------- ----- ----- --------- --------- ------ ------ ------ ------ - ------- ------------- ---- ------- - ------- -------- -------- ----- -------- - ------ - ------------ - -------- - --- - -------- - ------- - ----- - ---- ------------------------- -- - ----- ----- ------------ --------- - ------ --------- --------- -- - ------ ----- ------- ------ -------------------------- ------- ----------------- -------- --------------------
4. 使用
在完成主题配置之后，就可以使用 hexo-theme-sagiri 了。
4.1 首页
通过浏览器打开 Hexo 博客的首页，就可以看到 hexo-theme-sagiri 的效果了。以下是该主题的首页的截图：
在该主题的首页中，有一张全屏轮播图，用于展示博主最新的文章。并且，在首页中，也可以通过点击导航菜单访问其他页面。
4.2 文章页面
在 hexo-theme-sagiri 的文章页面中，可以看到完整的文章内容，以及该文章的分类、标签等信息。同时，文章页面也支持访客的评论等功能。
以下是该主题的文章页面的截图：
4.3 配置修改
在对该主题进行使用之后，你可以根据自己的需要，进行相关的配置修改。以下是修改过后的配置文件：
-- -------------------- ---- ------- - ------ ----- ----- - --------- --------- ----------- ----------- ----- ----- --------- --------- ------ ------ ---- --------- - ------- -------- -------- ---- -------- - ------------ - -------- - -------- - ----- - ------ - ------- ------------- ------- --------- ---- - ---- ------------------------- -- - ----- ----- ------------ --------- - ------ --------- --------- -- - ------ ----- ----- ----- ------------- ----------------- - ------ ----------------- - ----- -------- --------------- - ------ -------- ---------------- - ------ ----- ------- ------ -------------------------- ------- ----------------- -------- --------------------
在本次修改中，我的博客将导航中的 About 页面修改成了 Projects 页面，并且将内容中的 Read More... 修改成了 阅读全文...。同时，修改了主题颜色，使用了自己的 header image。
5. 总结
通过本文的介绍，读者可以快速了解 hexo-theme-sagiri 这个主题的使用方法，并进行基础的侧边栏、颜色、图片等方面的定制。同时，本文还介绍了该主题中，较为重要的 JSON API 的使用方法，对于对博客搜索有需求的读者，也有一定的学习价值。
当然，由于 hexo-theme-sagiri 是一个开源主题，它的自定义性是十分强的。读者可以通过修改主题配置文件，更改主题的配色、布局等方面的信息，从而实现自己博客的自定义需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005668681e8991b448e2b5c