欢迎来到建站记录的第二部分：butterfly 主题的安装与初始化

主题安装与使用

下载主题

1
2
3
git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly
# or
git clone -b master https://gitee.com/immyw/hexo-theme-butterfly.git themes/butterfly

修改站点配置文件 _config.yml ,把主题修改为 Butterfly

1
theme: Butterfly

为了后续方便配置，需要在当前目录 blog/ 创建 _config.butterfly.yml 文件，并将根目录下的 _config.yml 文件内容复制进去。更多的主题配置信息可以等待之后的文章~

尝试执行以下指令,以查看应用主题后的效果

1
2
hexo clean #清除旧的内容
hexo g #生成发布用的静态页面

本地查看

1
hexo s # hexo server

执行完该命令可以去 localhost:4000 查看效果

异常处理

case1 ：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
ERROR TypeError: /data/blog/themes/butterfly/layout/includes/head.pug:40  
38|  
39| !=favicon_tag(theme.favicon || config.favicon)

> 40| link(rel="canonical" href=urlNoIndex())  
> 41|  
> 42| //- 預解析  
> 43| !=partial('includes/head/preconnect', {}, {cache:theme.fragment_cache})

prettyUrls is not a function  
at Object. (/data/blog/themes/butterfly/scripts/helpers/page.js:58:10)  
at eval (eval at wrap (/data/blog/node_modules/pug-runtime/wrap.js:6:10), :89:77)  
at template (eval at wrap (/data/blog/node_modules/pug-runtime/wrap.js:6:10), :4603:215)  
at _View._compiled (/data/blog/node_modules/hexo/lib/theme/view.js:136:50)  
at _View.render (/data/blog/node_modules/hexo/lib/theme/view.js:39:17)  
at /data/blog/node_modules/hexo/lib/hexo/index.js:64:21  
at tryCatcher (/data/blog/node_modules/bluebird/js/release/util.js:16:23)  
at /data/blog/node_modules/bluebird/js/release/method.js:15:34  
at RouteStream._read (/data/blog/node_modules/hexo/lib/hexo/router.js:47:5)  
at RouteStream.Readable.read (_stream_readable.js:479:10)  
at resume_ (_stream_readable.js:966:12)  
at processTicksAndRejections (internal/process/task_queues.js:80:21) {  
path: '/data/blog/themes/butterfly/layout/includes/head.pug'
...

解决方案

  1. 优先确认 themes/butterfly 中有相关的文件内容
  2. 尝试执行如下命令： 
    1
    2
    3
    4
    5
    6
    npm cache clean --force
    rm -rf node_modules
    rm -rf package-lock.json
    npm install
    hexo clean
    hexo g

case2：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
TypeError: /Users/blog/themes/butterfly/layout/includes/widget/index.pug:33
    31|       !=partial('includes/widget/card_tags', {}, {cache: true})
    32|       !=partial('includes/widget/card_archives', {}, {cache: true})
  > 33|       !=partial('includes/widget/card_webinfo', {}, {cache: true})
    34|       !=partial('includes/widget/card_bottom_self', {}, {cache: true})

/Users/blog/themes/butterfly/layout/includes/widget/card_webinfo.pug:18
    16|         .webinfo-item
    17|           .item-name=_p('aside.card_webinfo.site_wordcount') + " :"
  > 18|           .item-count=totalcount(site)
    19|       if theme.busuanzi.site_uv
    20|         .webinfo-item
    21|           .item-name= _p('aside.card_webinfo.site_uv_name') + " :"

totalcount is not a function

请检查是否安裝了wordcount插件

1
npm i --save hexo-wordcount

case3：

如果你沒有 pug 以及 stylus 的渲染器会报错

1
2
extends includes/layout.pug block content include ./includes/mixins/post-ui
.pug #recent-posts.recent-posts +postUI include includes/pagination.pug

解决方案

1
2
3
4
npm install hexo-renderer-pug hexo-renderer-stylus --save
hexo clean
hexo g
hexo s

case4：

hexo本地测试运行重启后页面空白，且提示 : 

1
WARN No layout: index.html

可以参考 case1 & case2 ，即 hexo generate 没有成功

case5：

尝试 hexo deploy 发布的时候失败，显示如下，没有反应

1
2
3
4
5
6
7
8
9
10
11
12
13
INFO  Validating config
INFO
  ===================================================================

      #####  #    # ##### ##### ###### #####  ###### #      #   #
      #    # #    #   #     #   #      #    # #      #       # #
      #####  #    #   #     #   #####  #    # #####  #        #
      #    # #    #   #     #   #      #####  #      #        #
      #    # #    #   #     #   #      #   #  #      #        #
      #####   ####    #     #   ###### #    # #      ######   #

                            4.1.0
  ===================================================================

解决方案：deploy 参数需要配置到 _config.yml 文件中。
注意：冒号后面需要一个空格

1
2
3
4
5
deploy:
	type: git
	repo: git@github.com:yourname/yourname.github.io.git
	# 推荐使用Git链接，使用http模式还会存在需要填写 用户名和邮箱的情况
	branch: main

更多问题请参考 butterfly 官方文档中的解答