搞了好几天终于把博客建起来了

现在开始罗列遇到的问题和解决方法

1.数学公式不加载

在_config.butterfly.yml文件中选择katex

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
math:
  # Choose: mathjax, katex
  # Leave it empty if you don't need math
  use: katex
  per_page: true
  hide_scrollbar: false

  mathjax:
    # Enable the contextual menu
    enableMenu: true
    # Choose: all / ams / none, This controls whether equations are numbered and how
    tags: none

  katex:
    # Enable the copy KaTeX formula
    copy_tex: true

  1. 卸载hexo-renderer-marked
  2. 卸载hexo-renderer-kramed
  3. cnpm i hexo-renderer-markdown-it --save

在hexo根目录_config.yml中配置

1
2
3
markdown:
  plugins:
    - '@renbaoshuo/markdown-it-katex'

注意：一定要卸载掉hexo-renderer-marked和hexo-renderer-kramed才能使用

2.Markdown插入图片

_congig.yml文件中45行左右位置

1
post_asset_folder: true

将false修改为true，这样子会新建一篇博客时随着markdown文件时新建一个目录。图片可以直接放在目录下。

markdown文件中调用图片可以直接使用markdown的调用方法，注意修改路径

下面的test博客中，test.png路径为_post/test/test.png

1
2
3
4
5
正确加载写法:<img src="test.png" alt="测试" style="zoom: 25%;" />  
无法加载写法:<img src="./test/test.png" alt="测试" style="zoom: 25%;" />

正确加载写法:![test](test.png)
无法加载写法:![test](./test/test.png)

虽然test.md和test.png不在同级目录,但是可以直接写图片名无需加前面的目录

3.网站信息卡片访问人数怎么关

一开始我找了半天以为是在aside侧栏的设置里面关闭，之后发现其实把统计彻底关了就行

在_config.butterfly.yml文件中下面三个都设置为false

1
2
3
4
5
# Busuanzi count for PV / UV in site
busuanzi:
  site_uv: false
  site_pv: false
  page_pv: false

4.修改文章顶部图片高度

找到butterfly/source/css/_layout/post.styl

在开头加入

1
2
3
#page-header
  &.post-bg
      height: 300px

其中height可以调节顶部图片高度

5.修改分类、标签等页面顶部图高度和文字高度

找到butterfly/source/css/_layout/head.styl

77行左右

1
2
3
4
5
6
7
8
9
10
11
12
// page
&.not-home-page
  height: 300px //这里修改顶部图高度

  +maxWidth768()
    height: 280px

#page-site-info
  position: absolute
  top: 160px         //这里修改顶部文字位置
  padding: 0 10px
  width: 100%

6.h1-h6标题添加美化小风车后距离左侧太远？

我找了半天没找到在哪配置，那么我直接强行修改吧哈哈哈哈

source/css/custom.css中添加：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.container.post-content h1,
.container.post-content h2,
.container.post-content h3,
.container.post-content h4,
.container.post-content h5,
.container.post-content h6 {
    padding-left: 15px!important;
}

.container.post-content h1:hover,
.container.post-content h2:hover,
.container.post-content h3:hover,
.container.post-content h4:hover,
.container.post-content h5:hover,
.container.post-content h6:hover {
    padding-left: 18px!important;
    color: #1d42a7;
}

受不了辣，直接强行修改到左侧的距离

记得在inject里引入

1
2
3
inject:
  head:
    - <link rel="stylesheet" href="/css/custom.css">

7.live2d不加载

live2d本地不加载

live2d要是在本地无法加载的话，那么大概率是因为模型不兼容问题。

如果使用了hexo-helper-live2d的话，就无法使用model3格式的live2d文件，因为这个插件在几年前就停止更新了。现在大部分都是model3文件，所以我们需要使用另一款live2d插件：hexo-oh-my-live2d

1
cnpm install hexo-oh-my-live2d

下载后看到配置文件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
# _config.yml
OhMyLive2d:
  enable: true
  CDN: /live2d/index.min.js
  # CDN: https://cdn.jsdelivr.net/npm/oh-my-live2d
  # CDN: https://registry.npmmirror.com/oh-my-live2d/latest/files
  # CDN: https://registry.npmmirror.com/oh-my-live2d/0.13/files/dist/index.min.js
  option:
    # importType: 'cubism2' #  导入类型, 默认使用全量导入: complete , 可选值: complete, cubism2, cubism5
    libraryUrls: # 自定义 Cubism SDK 外部资源地址
      complete: https://registry.npmmirror.com/oh-my-live2d/latest/files/lib/complete.js
      cubism2: https://registry.npmmirror.com/oh-my-live2d/latest/files/lib/cubism2.js
      cubism5: https://registry.npmmirror.com/oh-my-live2d/latest/files/lib/cubism5.js
    menus:
#      items: |
#        (defaultItems)=>{
#         return []
#        }

#     items: |
#       (defaultItems)=>{
#        return [
#          ...defaultItems,
#          {
#            id: 'github',
#            icon: 'github-fill',
#            title: '我的github',
#            onClick: ()=>window.open('https://github.com/hacxy')
#          }
#
#        ]
#       }
    mobileDisplay: true # 是否在移动端显示
    models:
      - path: /live2d/泉此方/泉此方.model3.json
        mobilePosition: [-10, 23] # 移动端时模型在舞台中的位置。 默认值: [0,0] [横坐标, 纵坐标]
        mobileScale: 0.1 # 移动端时模型的缩放比例 默认值: 0.1
        mobileStageStyle: # 移动端时舞台的样式
          width: 180
          height: 166
        motionPreloadStrategy: NONE # 动作预加载策略 默认值: IDLE 可选值: ALL | IDLE | NONE
        position: [20, 55] # 模型在舞台中的位置。 默认值: [0,0] [横坐标, 纵坐标]
        scale: 0.15 # 模型的缩放比例 默认值: 0.1
        # showHitAreaFrames: false # 是否显示点击区域 默认值: false
        stageStyle:
          width: 250
          height: 250
    parentElement: document.body #为组件提供一个父元素，如果未指定则默认挂载到 body 中
    primaryColor: 'var(--btn-bg)' # 主题色 支持变量
    sayHello: false # 是否在初始化阶段打印项目信息
    tips:
      style:
        width: 200
        height: 120
        left: calc(50% - 5px)
        top: -80px
      mobileStyle:
        width: 180
        height: 70
        left: calc(50% - 30px)
        top: -100px
      idleTips:
        interval: 15000
        # message:
        #   - 你好呀~
        #   - 欢迎来到我的小站~
        # 自定义提示语 需要 引入 axios 库 ,也可以使用其他方法
        message: |
          function(){
            return axios.get('https://v1.hitokoto.cn?c=i')
              .then(function (response) {
                return response.data.hitokoto ;
              })
              .catch(function (error) {
                console.error(error);
              });
          }
        # wordTheDay: true
        # 自定义  https://v1.hitokoto.cn  数据
        # wordTheDay: |
        #   function(wordTheDayData){
        #     return `${wordTheDayData.hitokoto}    by.${wordTheDayData.from}`;
        #   }
  # then: |
  #   (oml2d)=>{
  #      setTimeout(() => {
  #     oml2d.tipsMessage('hello world', 3000, 10);
  #   }, 8000);
  #   }

首先把自己的模型放在source中

只需要在models.path处换成自己模型中的model3文件路径即可

  • 如果觉得舞台边上的按钮看着比较烦人，可以直接加入下面代码让舞台边上的按钮全部消失
1
2
3
4
5
menus:
     items: |
       (defaultItems)=>{
        return []
       }

live2d云端不加载

非常的诡异啊，我在github.io访问的时候一切都很正常，但是我使用域名解析后，通过域名访问直接让live2d神秘消失了！

打开控制台一看

1
2
3
https://registry.npmmirror.com/oh-my-live2d/latest/files
Request Method: GET
Status Code: 403 Forbidden

嚯嚯嚯，原来是国内域名访问不了镜像

那么就用最暴力的方法咯

  1. 直接提前下载好了镜像中的 index.min.js文件
  2. 存放在source/live2d里
  3. 将_config.yml文件中下面内容进行修改：
1
2
3
4
OhMyLive2d:
  enable: true
  CDN: /live2d/index.min.js
  # CDN: https://registry.npmmirror.com/oh-my-live2d/latest/files

推送上去，还真行了o.O

8.加载页面等待时间过长

我开了一个加载动画，这个动画会在整个页面加载完成后才停下，live2d会导致加载很久，但是如果关闭的话，已进入页面所有图片全都显示空白，那么就…

限制他最多加载3s咯，这样子一般来说顶部图能加载好，而live2d进去慢慢加载也无所谓

themes\butterfly\layout\includes\loading文件中26行左右

1
2
preloader.initLoading()
window.addEventListener('load', preloader.endLoading)

修改为

1
2
3
4
5
6
7
8
preloader.initLoading()
    const loadingTimeout = setTimeout(preloader.endLoading, 3000);

    // 限制最多加载3s
    window.addEventListener('load', () => {
      clearTimeout(loadingTimeout);
      preloader.endLoading();
    });