博客个性化配置

选择主题

可以通过前人已开发的主题来美化我们的博客，Hexo框架下可供选择的主题有很多，包括Butterfly、NexT等，可以在Hexo官网的主题列表中，选择喜爱的主题进行配置。我选择了Butterfly这一款主题，并基于官方文档进行配置。

配置过程

  1. 在根目录下，即“blog”文件夹下输入npm i hexo-theme-butterfly下载Butterfly主题
  2. 修改_config.yml中theme的值，改成butterfly
  3. 新建_config.butterfly.yml文件，并在其中写入相关的配置信息，具体可参考网上的教程。
  4. 修改完成后deploy到Github上即可。

遇到的问题

  1. 使用主题后，点击导航栏中的分类（tags）、标签（categories）按钮，会跳转到一个页面，并报错Cannot GET /xxx/。这些页面需要我们自己配置，在根目录下输入指令hexo new page 页面名，会在source文件夹下创建一个相关的文件夹，此时再点击导航栏中的按钮就可以正常跳转了。刚刚生成的文件夹下会有一个index.md文件，在该文件中添加一行type: 页面名，并在文章的顶部加上tags，categories属性，那么分类页面和标签页面就配置好了。要注意的是，categories的属性值只能有一个，而tags的属性值可以有多个。格式如下： 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    # categories/index.md
    ---
    title: categories
    date: yyyy-mm-dd hh:mm:ss
    type: categories
    ---

    # tags/index.md
    ---
    title: tags
    date: yyyy-mm-dd hh:mm:ss
    type: tags
    ---

    # title.md
    ---
    title: title
    date: yyyy-mm-dd hh:mm:ss
    categories: category
    tags: 
        - tag1
        - tag2
    ---
    text
  2. 文章中的图片又由于路径的问题无法加载了。由于之前修改过hexo-asset-image的index.js的代码，于是尝试将代码还原成原来的样子。先删除hexo-asset-image插件npm uninstall hexo-asset-image，再重新下载npm install https://github.com/CodeFalling/hexo-asset-image。再次运行后，图片能够正常加载。

参考资料

https://hexo.io/themes/
https://butterfly.js.org/posts/21cfbf15/