自己在githubpages + hexo 搭建自己博客遇到的问题

搭建过程可以参考：https://zhuanlan.zhihu.com/p/26625249

下面是我在这一过程中遇到的问题

侧栏中的“日志”点击，产生404错误，之后hexo s 进入本地模式后，点击出现错误：Cannot GET /archives/%7C%7C%20archive/

参考文章：https://blog.csdn.net/qq_36852780/article/details/104680152?depth_1-utm_source=distribute.pc_relevant.none-task&utm_source=distribute.pc_relevant.none-task

访问的链接是域名/archives/%7C%7C%20archive/, 可见后面的多余了, 问题就是删除后面多余字符

解决多余字符

posts的class="site-state-item site-state-posts"

打开博客根目录/themes/next/layout/_macro/sidebar.swig, 搜索class的值, 快速定位错误位置.

修改之前:

{% if config.archive_dir != '/' and site.posts.length > 0 %}
             <div class="site-state-item site-state-posts">
             {% if theme.menu.archives %}
               <a href="{{ url_for(theme.menu.archives).split('||')[0] | trim }}">
             {% else %}
               <a href="{{ url_for(config.archive_dir) }}">
             {% endif %}
                 <span class="site-state-item-count">{{ site.posts.length }}</span>
                 <span class="site-state-item-name">{{ __('state.posts') }}</span>
               </a>
             </div>
{% endif %}

修改之后:

{% if config.archive_dir != '/' and site.posts.length > 0 %}
              <div class="site-state-item site-state-posts">
                <a href="{{ url_for(config.archive_dir) }}">
                  <span class="site-state-item-count">{{ site.posts.length }}</span>
                  <span class="site-state-item-name">{{ __('state.posts') }}</span>
                </a>
              </div>
{% endif %}

将中间的判断删掉, 保留下面else的内容即可解决该问题

为文章添加标签和分类：参考：https://juejin.im/post/5cc11c41f265da038f7745b5

为博客添加文章搜索功能：参考：http://xhksun.com/2019/03/10/hexo-Next-%E4%B8%BB%E9%A2%98%E6%B7%BB%E5%8A%A0%E6%90%9C%E7%B4%A2%E5%8A%9F%E8%83%BD/

安装相关插件
首先安装搜索插件： hexo-generator-searchdb

在hexo路径文件夹下执行：
1
$ npm install hexo-generator-searchdb --save
配置hexo
安装完成，在hexo的配置文件_config.yml中添加：
1
2
3
4
5
search:
path: search.xml
field: post
format: html
limit: 10000
配置主题
Next 主题自带搜索设置，编辑主题配置文件：_config.yml

找到文件中 Local search 的相关配置，设为 true
1
2
3
# Local search
local_search:
enable: true
hexo 重新部署
1
$ hexo d -g
给Hexo Next设置阅读全文

参考：https://www.jianshu.com/p/d335569a6238

Hexo 的 Next 主题默认是首页显示你每篇文章的全文内容，但这会使你的首页篇幅过于冗长，针对这个问题我们可以这么做：

用编辑器打开themes/next 目录下的_config.yml文件

找到代码：
1
2
3
auto_excerpt:
enable: false
length: 150
将enable的 false改成true，length可以设定文章预览的文本长度。

修改后重启即可。
next主题配置时链接图标丢失解决方案

参考：https://www.jianshu.com/p/a1777c2098b0

但是按着上面博客中的配置会出现 Cannot GET /%20/ 的问题。20%表示的是空格，所以多了个空格路径不对。以archives为例，改成“ archives: /archives/|| archive”就可以了。

如何添加新的图标：

在http://www.fontawesome.com.cn/faicons/ 网站中搜索图标，之后复制该网站的图标名称。

例如我们需要archive的图标，搜索后出现如下结果：

选择一个名字，比如我选择archive ,在根目录/theme/next/_config.yml 中需要的地方设置

例如：

这样就可以了，重新部署一下。

最下面选择页面部分，向左的箭头和向右的箭头没有，显示代码：i class= fa fa-angle-right /i

解决方法：

打开主题文件themes/你的主题/layout/_partial/pagination.ejs文件，修改代码：

修改前：

<%- paginator({
    prev_text: "<i class='fa fa-angle-left'></i>",
    next_text: "<i class='fa fa-angle-right'></i>"
}) %>

修改后：

<%- paginator({
    prev_text: "<i class='fa fa-angle-left'></i>",
    next_text: "<i class='fa fa-angle-right'></i>",
    escape: false
}) %>

自己在githubpages + hexo 搭建自己博客遇到的问题

安装相关插件

配置hexo

配置主题

hexo 重新部署