《Hexo:从零开始编写自己的主题》

1. Hexo 概述以及 Hexo 的工作原理

2. Hexo 主题编写入门

3.优化风格，设计自己的主题

4.优化图片显示效果、代码高亮和数学公式

5.添加本地搜索功能并发布博客供官网接收

5.添加本地搜索功能并发布博客供官网接收

经过这么长时间，主题的各项功能已经逐步完善，目前已经提交到hexo官网。 请大家去查看一下，搜索一下heyan。

5.1 增加本地搜索功能

本地搜索是指搜索范围仅限于自己的所有博客，而不是百度、谷歌等第三方搜索引擎。

例如，

该功能的实现需要依赖第三方库，具体地址为：。

首先安装依赖项，

$ npm install hexo-generator-search --save

然后修改hexo的.yml配置文件，在最后添加：

search:
  path: search.xml
  field: post
  content: true
  template: themes/heyan/search.xml

最后需要将搜索到的模板文件.xml文件导入到主题文件中。 这个文件可以下载或者在刚刚安装的依赖包中找到。 具体地址为/hexo--//.xml

复制粘贴后的结果是这样的：

然后需要在主题的/js/目录下添加一个.js文件，并复制粘贴内容以供参考。

在 .ejs / .ejs 文件中添加对此 js 文件的引用，

<%- js('js/search.js') %> 
    <script type="text/javascript">
        var search_path = "<%= config.search.path %>";
        if (search_path.length == 0) {
            search_path = "search.xml";
        }
        var path = "<%= config.root %>" + search_path;
        searchFunc(path, 'local-search-input', 'local-search-result');
    script>

最后配置如下搜索输入框，并指定搜索输入框的id

<form class="d-flex">
    <button class="btn text-muted fa fa-search" disabled>button>
    <input id="local-search-input" class="form-control me-2 pe-4" type="search"
            placeholder="<%- theme.search.placeholder%> " aria-label="Search">
form>

并指定搜索结果的输出位置。 我将搜索结果输出在正文前面。

在.ejs中，在前面添加搜索结果框并指定id。

<div class="col-md-8">
    <div class="markdown-section">
        
        <div id="local-search-result">div>
        <%- body %> 
    div>
div>

不要更改id，使用.js默认值可以节省一些不必要的麻烦。 大功告成，但是你需要一步步测试，并多次记录，看看哪一步可以正确运行。

5.2 提交主题至官网收录 5.2.1 提交方式

hexo.io官网的源代码地址是：为了提交自己的主题，需要更新这个源代码，但是显然我们没有权限直接修改。

分叉到您自己的存储库中。

修改fork站点，编辑/_data/.yml文件，在最后添加自己的主题信息：

- name: heyan
  description: A simple but elegant Hexo theme.
  link: https://github.com/smile-yan/hexo-theme-heyan
  preview: https://smileyan.cn/heyan/
  tags:
    - 中文
    - English
    - simple
    - elegant
    - highlight
    - mathjax
    - local-search

// 添加主题截图，注意主题截图必须是png图片。 并且图片的名称与你的主题名称相同。 一般来说，为了表明你的主题很优秀，你会把几张截图放在一起。 我是用PPT来做的，然后截图了。

这张猫的照片是在百度上找到的。 主要目的是为了吸引别人的注意。

git add//push 到你的 fork 仓库，然后提交 pull。 可以理解为合并请求。 提交后会进入自动审核流程，同时也会提示您需要注意的问题。

等待授权的hexo-site管理员看到，然后执行合并操作。 可能需要一些时间（我总共等了不超过两天）。

最后，你可以在hexo主题网站上搜索你的主题名称，看看是否可以找到。

总结

开发这样一个主题的目的是什么？ 这个问题我思考了很长时间。 首先，这绝对不会给我带来任何收入。 我最大的愿望就是得到一些喜欢。 虽然这不能转化为收入，但这是别人对自己劳动成果的一种认可，值得高兴。

还有一个重要的原因可能是我从hexo中受益匪浅。 我用过他们的一些主题，虽然浏览量不多，也没什么好处。 但使用这个主题我确实收获很多，学到了很多。

所以我愿意花时间阅读官方文档，阅读其他主题源码，自己写一个。 虽然我不是前端开发人员。

希望这些笔记能够帮助到更多的人，也希望更多优秀的话题能够陆续发表。

如果有任何疑问，可以在我的主题源码库中提出问题。 感谢您的支持！

2022年4月23日20:58