魔改有风险，魔改需谨慎，一定要备份呀！！！

页面样式调节

点击查看教程

源文链接：博客魔改教程总结(二)

这个教程是通过css样式调节各个页面透明度、模糊度（亚克力效果）、圆角、边框样式等，看起来会更加舒适。

  1. 复制以下代码进去自定义的custom.css文件
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
:root {
  --trans-light: rgba(255, 255, 255, 0.88);
  --trans-dark: rgba(25, 25, 25, 0.88);
  --border-style: 1px solid rgb(169, 169, 169);
  --backdrop-filter: blur(5px) saturate(150%);
}

/* 首页文章卡片 */
#recent-posts > .recent-post-item {
  background: var(--trans-light);
  backdrop-filter: var(--backdrop-filter);
  border-radius: 25px;
  border: var(--border-style);
}

/* 首页侧栏卡片 */
#aside-content .card-widget {
  background: var(--trans-light);
  backdrop-filter: var(--backdrop-filter);
  border-radius: 18px;
  border: var(--border-style);
}

/* 文章页、归档页、普通页面 */
div#post,
div#page,
div#archive {
  background: var(--trans-light);
  backdrop-filter: var(--backdrop-filter);
  border: var(--border-style);
  border-radius: 20px;
}

/* 导航栏 */
#page-header.nav-fixed #nav {
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: var(--backdrop-filter);
}

[data-theme="dark"] #page-header.nav-fixed #nav {
  background: rgba(0, 0, 0, 0.7) !important;
}

/* 夜间模式遮罩 */
[data-theme="dark"] #recent-posts > .recent-post-item,
[data-theme="dark"] #aside-content .card-widget,
[data-theme="dark"] div#post,
[data-theme="dark"] div#archive,
[data-theme="dark"] div#page {
  background: var(--trans-dark);
}


/* 阅读模式 */
.read-mode #aside-content .card-widget {
  background: rgba(158, 204, 171, 0.5) !important;
}
.read-mode div#post {
  background: rgba(158, 204, 171, 0.5) !important;
}

/* 夜间模式下的阅读模式 */
[data-theme="dark"] .read-mode #aside-content .card-widget {
  background: rgba(25, 25, 25, 0.9) !important;
  color: #ffffff;
}
[data-theme="dark"] .read-mode div#post {
  background: rgba(25, 25, 25, 0.9) !important;
  color: #ffffff;
}

  1. 参数说明：

    • --trans-light：白天模式带透明度的背景色，如rgba(255, 255, 255, 0.88)底色是纯白色，其中0.88就透明度，在0-1之间调节，值越大越不透明；

    • --trans-dark: 夜间模式带透明度的背景色，如rgba(25, 25, 25, 0.88)底色是柔和黑色，其中0.88就透明度，在0-1之间调节，值越大越不透明;

    • --border-style: 边框样式，1px solid rgb(169, 169, 169)指宽度为1px的灰色实体边框;

    • --backdrop-filter: 背景过滤器，如blur(5px) saturate(150%)表示饱和度为150%的、高斯模糊半径为5px的过滤器，这是亚克力效果的一种实现方法;

    • 大家可以根据自己喜好进行调节，不用拘泥于我的样式！

  2. 记住在主题配置文件_config.butterfly.yml的inject配置项中引入该css文件：

1
2
3
inject: 
  head: 
+    - <link rel="stylesheet" href="/css/custom.css">
  1. 重启项目即可看见效果：
1
hexo cl; hexo s

博客宽屏适配（暂时使用）

点击查看教程

宽屏适配我修改后导致了echarts统计图图表变形，图表一会儿显示正常一会不正常，没有找到解决办法，暂时使用

源文链接：博客魔改教程总结(四)

  1. 在custom.css中加入以下样式：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/* 全局宽度 */
.layout {
  max-width: 1400px;
}

/* 侧边卡片栏宽度 */
.aside-content {
  max-width: 318px;
  min-width: 300px;
}

/* 平板尺寸自适应(不启用侧边栏宽度限制) */
@media screen and (max-width: 900px) {
  .aside-content {
    max-width: none !important;
    padding: 0 5px 0 5px;
  }
}

不想再非首页的地方显示侧边栏，那就需要给非首页的页面加上标记，修改 [BlogRoot]\themes\butterfly\layout\includes\layout.pug为以下内容：

1
2
3
4
5
6
7
8
9
 - var htmlClassHideAside = theme.aside.enable && theme.aside.hide ? 'hide-aside' : ''
 - page.aside = is_archive() ? theme.aside.display.archive: is_category() ? theme.aside.display.category : is_tag() ? theme.aside.display.tag : page.aside
 - var hideAside = !theme.aside.enable || page.aside === false ? 'hide-aside' : ''
- - var pageType = is_post() ? 'post' : 'page'
+ - var pageType = is_home() ? 'page home' : is_post() ? 'post' : 'page'

doctype html
html(lang=config.language data-theme=theme.display_mode class=htmlClassHideAside)
  ...

或者直接用改好的pug（4.3.1可以食用）

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
- var htmlClassHideAside = theme.aside.enable && theme.aside.hide ? 'hide-aside' : ''
- page.aside = is_archive() ? theme.aside.display.archive: is_category() ? theme.aside.display.category : is_tag() ? theme.aside.display.tag : page.aside
- var hideAside = !theme.aside.enable || page.aside === false ? 'hide-aside' : ''
- var pageType = is_home() ? 'page home' : is_post() ? 'post' : 'page'

doctype html
html(lang=config.language data-theme=theme.display_mode class=htmlClassHideAside) 
  head
    include ./head.pug
  body
    if theme.preloader.enable
      !=partial('includes/loading/loading', {}, {cache: true})

    - var DefaultBg = page.defaultbg ? page.defaultbg : theme.background.default
    - var DDMBg = theme.background.darkmode ? theme.background.darkmode : DefaultBg
    - var DarkmodeBg = page.darkmodebg ? page.darkmodebg : DDMBg
    if theme.background
      if page.background
        #web_bg(style=`background:`+ page.background + `;background-attachment: local;background-position: center;background-size: cover;background-repeat: no-repeat;`)
      else
        #web_bg

        if page.defaultbg || page.darkmodebg
          style.
            #web_bg{
              background: #{DefaultBg} !important;
              background-attachment: local!important;
              background-position: center!important;
              background-size: cover!important;
              background-repeat: no-repeat!important;
            }
            [data-theme="dark"]
              #web_bg{
                background: #{DarkmodeBg} !important;
                background-attachment: local!important;
                background-position: center!important;
                background-size: cover!important;
                background-repeat: no-repeat!important;
              }      

    !=partial('includes/sidebar', {}, {cache: true})

    if page.type !== '404'
      #body-wrap(class=pageType)
        include ./header/index.pug

        main#content-inner.layout(class=hideAside)
          if body
            div!= body
          else
            block content
            if theme.aside.enable && page.aside !== false
              include widget/index.pug

        - var footerBg = theme.footer_bg
        if !is_post()
          if (footerBg === true)
            - var footer_bg = 'background-color: transparent;'
          else
            - var footer_bg = 'background-color: transparent;'
        else
          - var footer_bg = 'background-color: transparent;'



        footer#footer(style=footer_bg)
          !=partial('includes/footer', {}, {cache: true})

    else
      include ./404.pug

    include ./rightside.pug
    !=partial('includes/third-party/search/index', {}, {cache: true})
    !=partial('includes/rightmenu',{}, {cache:true})
    include ./additional-js.pug

现在主页的class就变成page home了，我们再在custom.css加入如下css，主题就能智能区分主页和分页了，可以自动选择卡片显示：

1
2
3
4
5
6
7
8
9
10
/* 除了首页以外其他页面隐藏卡片，并采用宽屏显示 */
#archive,
#page,
#category,
#tag {
  width: 100%;
}
.page:not(.page.home) .aside-content {
  display: none;
}

重启项目即可看到变更：

1
hexo cl; hexo s

Heo同款loading动画

点击查看教程

懒得完全搬过来了，查看安知鱼-Heo同款loading动画

butterfly 4.5 以上方案

  1. 将文件themes/butterfly/layout/includes/loading/fullpage-loading.pug替换为如下代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
#loading-box(onclick='document.getElementById("loading-box").classList.add("loaded")')
  .loading-bg
    div.loading-img
    .loading-image-dot

script.
  const preloader = {
    endLoading: () => {
      document.body.style.overflow = 'auto';
      document.getElementById('loading-box').classList.add("loaded")
    },
    initLoading: () => {
      document.body.style.overflow = '';
      document.getElementById('loading-box').classList.remove("loaded")

    }
  }
  window.addEventListener('load',()=> { preloader.endLoading() })

  if (!{theme.pjax && theme.pjax.enable}) {
    document.addEventListener('pjax:send', () => { preloader.initLoading() })
    document.addEventListener('pjax:complete', () => { preloader.endLoading() })
  }
  1. 修改themes/butterfly/layout/includes/loading/index.pug
1
2
3
4
5
6
7
if theme.preloader.source === 1
  include ./fullpage-loading.pug
else if theme.preloader.source === 2
  include ./pace.pug
else
  include ./fullpage-loading.pug
  include ./pace.pug
  1. 新建source/css/progress_bar.css, 也可以不做这一步下面配置文件pace_css_url这一项就要留空, 这一步是修改 pace 加载的胶囊 💊 样式用的
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
.pace {
  -webkit-pointer-events: none;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  z-index: 2000;
  position: fixed;
  margin: auto;
  top: 10px;
  left: 0;
  right: 0;
  height: 8px;
  border-radius: 8px;
  width: 4rem;
  background: #eaecf2;
  border: 1px #e3e8f7;
  overflow: hidden;
}

.pace-inactive .pace-progress {
  opacity: 0;
  transition: 0.3s ease-in;
}

.pace .pace-progress {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  max-width: 200px;
  position: absolute;
  z-index: 2000;
  display: block;
  top: 0;
  right: 100%;
  height: 100%;
  width: 100%;
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  animation: gradient 1.5s ease infinite;
  background-size: 200%;
}

.pace.pace-inactive {
  opacity: 0;
  transition: 0.3s;
  top: -8px;
}
@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
  1. 替换themes/butterfly/source/css/_layout/loading.styl为如下代码, 注意其中颜色代码--anzhiyu-card-bg等需自行替换为自己的色值。
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
if hexo-config('preloader')
  .loading-bg
    display: flex;
    width: 100%;
    height: 100%;
    position: fixed;
    background: var(--anzhiyu-card-bg);
    //background: rgba(255, 255, 255, 0.9) // 我的配置方案（白天模式，黑夜模式见下面第7点）
    z-index: 1001;
    opacity: 1;
    transition: .3s;

  #loading-box
    .loading-img
      width: 100px;
      height: 100px;
      border-radius: 50%;
      margin: auto;
      border: 4px solid #f0f0f2;
      animation-duration: .3s;
      animation-name: loadingAction;
      animation-iteration-count: infinite;
      animation-direction: alternate;
    .loading-image-dot
      width: 30px;
      height: 30px;
      background: #6bdf8f;
      position: absolute;
      border-radius: 50%;
      border: 6px solid #fff;
      top: 50%;
      left: 50%;
      transform: translate(18px, 24px);
    &.loaded
      .loading-bg
        opacity: 0;
        z-index: -1000;

  @keyframes loadingAction
    0% {
        opacity: 1;
    }

    100% {
        opacity: .4;
    }
  1. 在合适的地方加上自定义 css, 其中 background 的 url 即为 loading 的图片地址。我加在了progress_bar.css中
1
2
3
4
.loading-img {
  background: url(https://npm.elemecdn.com/anzhiyu-blog@2.1.1/img/avatar.webp) no-repeat center center;
  background-size: cover;
}
  1. 最后修改_config.butterfly.yml中preloader选项, 改完以后source: 1为满屏加载无pace胶囊,source: 2为pace胶囊无满屏动画, source: 3是两者都启用。
1
2
3
4
5
6
7
8
9
10
11
# Loading Animation (加载动画)
preloader:
  enable: true
  # source
  # 1. fullpage-loading
  # 2. pace (progress bar)
  # else all
  source: 3
  # pace theme (see https://codebyzach.github.io/pace/)
  pace_css_url: /css/progress_bar.css
  avatar: # 自定义头像
  1. 为了使得黑夜模式的加载动画背景为黑色，在source/config/css/custom.css文集中加入
1
2
3
4
5
/*--------加载动画-------------*/
/* 深色模式背景 */
html[data-theme="dark"] .loading-bg {
    background: rgba(0, 0, 0, 0.85) !important; /* 深色模式背景 */
}

别忘了在_config.butterfly.yml文件中的inject中引入progress_bar.css

Twikoo评论系统的实现

点击查看教程

部署方法：

直接查看此教程下面的参考文字教程和参考视频教程，比我讲的好，而且清晰明了建议看Twikoo Vercel 部署教程这个官方视频

Twikoo评论失败问题：

写在前面：

由于Vercel的域名被墙，这会导致大陆IP用户无法评论。

前提条件：

  • 用Vercel部署了Twikoo评论系统
  • 一个自己的注册域名

1. 在Vercel添加子域名

进入Vercel的twikoo项目后，点击Settings - Domains，在窗口里输入一个子域名（不要加http前缀）。这里我选择用twikoo.thirdshire.com作为我的子域名。

添加子域名

点击Add添加之后， Vercel会显示配置错误如下，并提示需要在DNS服务商处添加一条DNS记录。

添加DNS记录提示

2. 为域名添加DNS记录

DNS服务商就是给网站添加各种A record/CNAME record的地方。我使用的是阿里云域名解析，找到添加DNS记录的地方，新建一条DNS 解析记录，内容就按照上面Vercel提示的添加即可。

3. 确认配置成功

添加完DNS记录之后，回到Vercel并刷新界面。看到下面这个界面，就显示DNS已经配置成功了。

子域名配置成功

想要进一步确认的话，可以点击进入这个子域名，如果网站显示“Twikoo 云函数运行正常”，就说明这个子域名可以用来当作Twikoo的入口啦。

4. 更新Twikoo设置

进入博客的配置文件，把博客文件的Twikoo设置里envID的链接替换成上面配置好的子域名。具体方法可以参考butterfly魔改教程（一）中的gitalk评论设置

这样配置完之后，国内用户也可以在Twikoo里面评论了～

Twikoo 找回暗号及密码：

打开你在部署方法阶段建立的MongoDB数据库进入页面后按照如下图步骤一次点击找到config，手动删除其中”5”指向的ADMIN_PASS 密码，重新登录 twikoo 就可以重新配置密码了

image-20250125221238848

image-20250125221348927

参考文章：

参考文字教程：

视频教程：

公告栏文字样式

点击查看教程

其实就是普通的html在主题配置文件_config.butterfly.yml中写入如下配置：

1
2
3
4
aside:
  card_announcement:
    enable: true
    content: <center><b>--- 主域名 ---<br><a href="https://www.ccjinblog.info" title="此线路部署于阿里云轻量级服务器" class="anno_content"><font color="#5ea6e5">ccjinblog.info</font></a><br>--- 备用域名 ---<br><a href="https://www.ccjinblog.top" title="此线路部署于Vercel" class="anno_content"><font color="#5ea6e5">ccjinblog.top</font></a></b></center>

参考写法：

1
2
3
4
aside:
  card_announcement:
    enable: true
    content: <center><b>--- 主域名 ---<br><a href="https://www.fomal.cc" title="此线路部署于Vercel" class="anno_content"><font color="#5ea6e5">fomal.cc</font></a>&nbsp;|&nbsp;<a href="https://www.fomal.cn" title="此线路部署于Vercel" class="anno_content"><font color="#5ea6e5">fomal.cn</font></a><br>--- 备用域名 ---<br><a href="https://netlify.fomal.cc" title="此线路部署于Netlify" class="anno_content"><font color="#5ea6e5">netlify.fomal.cc</font></a><br><a href="https://cloudflare.fomal.cc" title="此线路部署于Cloudflare" class="anno_content"><font color="#5ea6e5">cloudflare.fomal.cc</font></a><br><a href="https://railway.fomal.cc" title="此线路部署于Railway" class="anno_content"><font color="#5ea6e5">railway.fomal.cc</font></a><br>--- 网站安卓APP ---<br>🍧<a href="https://sourcebucket.s3.ladydaily.com/Fomalhaut.apk" title="点这里可以下载网站的安卓APP" class="anno_content"><font color="#5ea6e5">点此下载</font></a>🍧</b></center>

添加fps显示(LYX)

点击查看教程

fps

  1. 新建文件[BlogRoot]\source\config\js\fps.js并写入如下代码：
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
if (window.localStorage.getItem("fpson") == undefined || window.localStorage.getItem("fpson") == "1") {
    var rAF = function () {
        return (
            window.requestAnimationFrame ||
            window.webkitRequestAnimationFrame ||
            function (callback) {
                window.setTimeout(callback, 1000 / 60);
            }
        );
    }();
    var frame = 0;
    var allFrameCount = 0;
    var lastTime = Date.now();
    var lastFameTime = Date.now();
    var loop = function () {
        var now = Date.now();
        var fs = (now - lastFameTime);
        var fps = Math.round(1000 / fs);

        lastFameTime = now;
        // 不置 0，在动画的开头及结尾记录此值的差值算出 FPS
        allFrameCount++;
        frame++;

        if (now > 1000 + lastTime) {
            var fps = Math.round((frame * 1000) / (now - lastTime));
            if (fps <= 5) {
                var kd = `<span style="color:#bd0000">卡成ppt🤢</span>`
            } else if (fps <= 15) {
                var kd = `<span style="color:red">电竞级帧率😖</span>`
            } else if (fps <= 25) {
                var kd = `<span style="color:orange">有点难受😨</span>`
            } else if (fps < 35) {
                var kd = `<span style="color:#9338e6">不太流畅🙄</span>`
            } else if (fps <= 45) {
                var kd = `<span style="color:#08b7e4">还不错哦😁</span>`
            } else {
                var kd = `<span style="color:#39c5bb">十分流畅🤣</span>`
            }
            document.getElementById("fps").innerHTML = `FPS:${fps} ${kd}`;
            frame = 0;
            lastTime = now;
        };

        rAF(loop);
    }

    loop();
} else {
    document.getElementById("fps").style = "display:none!important"
}
  1. 在自定义样式文件custom.css中加入如下代码，我这里让这块东西在左下角，你可以自己指定位置，其中backdrop-filter过滤器也可以自己指定，也可以不要：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/* 帧率检测 */
#fps {
  position: fixed;
  /* 指定位置 */
  left: 10px;
  bottom: 10px;
  z-index: 1919810;
}
[data-theme="light"] #fps {
  background-color: rgba(255, 255, 255, 0.85);
  backdrop-filter: var(--backdrop-filter);
  padding: 4px;
  border-radius: 4px;
}
[data-theme="dark"] #fps {
  background-color: rgba(0, 0, 0, 0.72);
  backdrop-filter: var(--backdrop-filter);
  padding: 4px;
  border-radius: 4px;
}
  1. 在主题配置文件_config.butterfly.yml文件中加入以下代码：
1
2
3
4
5
inject: 
  head: 
+    - <span id="fps"></span> # 帧率检测
  bottom: 
+    - <script async src="/js/fps.js"></script> # 帧率检测
  1. 重启项目看看角落有没有出现帧率块
1
hexo cl; hexo s

Live2D教程（店长）

点击查看教程

目前只推荐这个(因为消耗资源较少)，这是博客自带的看板娘，这孩子不会说话也不能换装，只会跟着你的鼠标晃动脑袋，不过有几款超可爱。

安装

  1. 在Hexo根目录[BlogRoot]下打开终端，输入以下指令安装必要插件：

    1
    npm install --save hexo-helper-live2d

  2. 打开站点配置文件[BlogRoot]\config.yml
    搜索live2d,按照如下注释内容指示进行操作。
    如果没有搜到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
    # Live2D
    ## https://github.com/EYHN/hexo-helper-live2d
    live2d:
      enable: true #开关插件版看板娘
      scriptFrom: local # 默认
      pluginRootPath: live2dw/ # 插件在站点上的根目录(相对路径)
      pluginJsPath: lib/ # 脚本文件相对与插件根目录路径
      pluginModelPath: assets/ # 模型文件相对与插件根目录路径
      # scriptFrom: jsdelivr # jsdelivr CDN
      # scriptFrom: unpkg # unpkg CDN
      # scriptFrom: https://npm.elemecdn.com/live2d-widget@3.x/lib/L2Dwidget.min.js # 你的自定义 url
      tagMode: false # 标签模式, 是否仅替换 live2d tag标签而非插入到所有页面中
      debug: false # 调试, 是否在控制台输出日志
      model:
        use: live2d-widget-model-wanko # npm-module package name
        # use: wanko # 博客根目录/live2d_models/ 下的目录名
        # use: ./wives/wanko # 相对于博客根目录的路径
        # use: https://npm.elemecdn.com/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json # 你的自定义 url
      display:
        position: right #控制看板娘位置
        width: 150 #控制看板娘大小
        height: 300 #控制看板娘大小
      mobile:
        show: true # 手机中是否展示

  3. 完成后保存修改，在Hexo根目录下运行指令。

    1
    2
    3
    hexo clean
    hexo g
    hexo s

    之所以必须要使用hexo clean是因为我们需要清空缓存重新生成静态页面，不然看板娘没被加入生成的静态页面里，是不会出现的。

更换

  1. 同样是在Hexo根目录[BlogRoot]下，打开终端，选择想要的看板娘进行安装，例如我这里用到的是 live2d-widget-model-koharu，一个Q版小正太。其他的模型也可以在模型预览里查看以供选择。

  2. 输入指令

    1
    npm install --save live2d-widget-model-koharu

  3. 然后在站点配置文件[BlogRoot]\_config.yml里找到model项修改为期望的模型

    1
    2
    3
    model:
      use: live2d-widget-model-koharu
      # 默认为live2d-widget-model-wanko

  4. 之后按部就班的运行

    1
    2
    3
    hexo clean
    hexo g
    hexo s

    就能在localhost:4000上查看效果了。

卸载看板娘

卸载插件和卸载模型的指令都是通过npm进行操作的。在博客根目录[BlogRoot]打开终端，输入：

1
2
3

npm uninstall hexo-helper-live2d #卸载看板娘插件
npm uninstall live2d-widget-model-modelname #卸载看板娘模型。记得替换modelname为看板娘名称

卸载后为了保证配置项不出错，记得把[BlogRoot]\_config.yml里的配置项给注释或者删除掉。