This page looks best with JavaScript enabled

Hugo | 记录MemE主题美化过程

 ·  ☕ 9 min read

MemE

2021/11/14更新：
本站目前主题使用Zzo

目前我的博客采用MemE主题，这款主题由reuixiy制作，设计理念是轻量、极简主义，但不简陋，同时也对高度自定义非常友好，甚至还提供了简繁体中文的配置文档，也就是config.toml，以下是开发者reuixiy对MemE主题的介绍：

MemE 是一个强大且可高度定制的 GoHugo 博客主题，专为个人博客设计。MemE 主题专注于优雅、简约、现代，以及代码的正确性。MemE 主题对习惯了 Hexo 的用户非常友好，是从 Hexo 迁移到 Hugo 的不错选择。

为什么要起名为 MemE 呢？这四个字母的含义是基于这个单词本身的，即希望你的博客以及文章能够像模因一样传播、影响。当然，希望这个主题也是如此，并给你带来欢乐。至于这四个字母的形式（MemE），则是受 Taylor Swift 的 ME! 中的「you can’t spell “awesome” without “me”」启发。同时，这两个字母的大写就将这个单词分成了两部分——ME 和 em，中间两个字母组成 em，这也给人一种可爱的感觉。此外，em 也是 me 的反写，这又是我非常喜欢的形式！

MemE 主题践行极简主义，没有使用现有的流行前端库，主题的 HTML 和 CSS 皆由我纯手工从零雕琢而成。同时，MemE 的 CSS 也是按需生成的，比如：如果你不需要代码高亮的功能，那么代码高亮的样式就不会被加入 MemE 的 CSS 文件中。更甚，MemE 无需加载任何图标库——主题的图标是通过 Hugo 的数据模板直接将 SVG 嵌入到 HTML 中实现的——这使得 MemE 不会去加载图标库中大量你所不需要的图标，节约了很多资源。当然，这也意味着你可以方便地自定义属于自己的图标。

不过我自己也是小白哈哈哈，所以也参考了很多大佬的配置。在这篇文章的最后我列出了我参考的资料。感谢各位，万物皆互联。

基础部分

目录

在config.toml中将enableTOC设为true，然后在文章的 Front-Matters 加上toc: true即可。
需要注意的是目录只能显示二级以下的标题。如果需要显示一级标题，可以将startLevel修改为 1（默认2）。

不过，并不建议在文章内用一级标题，因为一级标题为文章标题。所以，文章内还是建议以二级标题开始，这更符合逻辑，也更有利于SEO(search engine optimization)。

关于目录的位置，请看这个issue。

网络字体

直接参考这篇博客。

页脚添加今日诗词

在 MemE 主题页脚添加今日诗词

在 MemE 主题的自定义页脚文件中添加以下代码即可：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

<!-- 文件位置：~/layouts/partials/custom/footer.html -->

<script src="https://sdk.jinrishici.com/v2/browser/jinrishici.js" charset="utf-8"></script>
<text class="poem_sentence"></text>
<text class="poem_info"></text>
<script type="text/javascript">
  jinrishici.load(function(result) {
    var sentence = document.querySelector(".poem_sentence")
    var info = document.querySelector(".poem_info")
    sentence.innerHTML = result.data.content
    info.innerHTML = '——' + result.data.origin.author
  });
</script>

这里我出现了一个问题，因为设置了诗句和作者之间用破折号「——」连接，而我按照教程在~/layouts/partials/custom/footer.html中添加了代码后发现破折号显示乱码，而且生成的诗句被放在了最下方，而我希望诗句处在作者和版权之间，所以我在~/layouts/partials/footer.html的适当位置添加代码。

需要注意我直接修改了meme主题的页脚文件而不是主题的自定义页脚文件，只适用于手动安装主题，如果是 git submodule 方式安装主题则不要直接修改主题页脚文件，否则不利于主题后续更新。

加载进度条

Hugo theme stack主题 正确的魔改方式 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

<!-- layouts/partials/footer/custom.html -->
<script
    src="https://cdn.jsdelivr.net/gh/zhixuan2333/gh-blog@v0.1.0/js/nprogress.min.js"
    integrity="sha384-bHDlAEUFxsRI7JfULv3DTpL2IXbbgn4JHQJibgo5iiXSK6Iu8muwqHANhun74Cqg"
    crossorigin="anonymous"
></script>
<link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/gh/zhixuan2333/gh-blog@v0.1.0/css/nprogress.css"
    integrity="sha384-KJyhr2syt5+4M9Pz5dipCvTrtvOmLk/olWVdfhAp858UCa64Ia5GFpTN7+G4BWpE"
    crossorigin="anonymous"
/>
<script>
    NProgress.start();
    document.addEventListener("readystatechange", () => {
        if (document.readyState === "interactive") NProgress.inc(0.8);
        if (document.readyState === "complete") NProgress.done();
    });
</script>

需要注意stack和meme的页脚文件位置不太一样，meme的在~/layouts/partials/custom/footer.html。不过进度条是在页面顶端，所以我选择在header.html添加代码。

短代码

在博客中插入B站视频

在博客中插入B站视频

虽然我个人相当不喜欢bilibili，但bili在哪都能看，而油管不行。

添加代码

在layouts/shortcodes文件夹中创建文件bilibili.html(如果没有那个文件夹就自己新建一个)，我选择在博客根目录下建layouts/shortcodes文件夹，后续换主题的时候方便管理。然后粘贴如下代码：

1
2
3
4
5
6
7
8

{{ $videoID := index .Params 0 }}
{{ $pageNum := index .Params 1 | default 1}}

{{ if (findRE "^[bB][vV][0-9a-zA-Z]+$" $videoID) }}
<div><iframe id="biliplayer" src="//player.bilibili.com/player.html?bvid={{ $videoID }}&page={{ $pageNum }}" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" loading="lazy" > </iframe></div>
{{ else }}
<div><iframe id="biliplayer" src="//player.bilibili.com/player.html?aid={{ $videoID }}&page={{ $pageNum }}" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" loading="lazy" > </iframe></div>
{{ end }}

然后用 CSS 修改播放器的尺寸，最好能根据不同的屏幕大小 (PC 和手机) 动态调整。在/assets/scss/components/_post-meta.scss中插入：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

// 嵌入 BiliBili 视频
#biliplayer {
  width: 100%;
  height: 550px;
}
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
  #biliplayer {
    width: 100%;
    height: 250px;
  }
}

或者直接在刚刚的layouts/shortcodes/bilibili.html中添加：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

<style>
// 嵌入 BiliBili 视频
#biliplayer {
  width: 100%;
  height: 550px;
}
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
  #biliplayer {
    width: 100%;
    height: 250px;
  }
}
</style>

我在这里做了一点改动，第二步css/html的id应该是biliplayer而不是bilibili，如果看不懂的话直接复制我的代码即可。

应用

在你想插入 B 站视频的地方写下 (AV号不带 av/AV，BV号必须带bv/BV，PV号控制分P，默认为 1，直接写不需要代码框)

1

{{< bilibili [AV号/BV号] [PV号] >}}

以长毛象的介绍这段影片为例：

可以写做：

1

{{< bilibili BV1UW411g7eq >}}

或者

1

{{< bilibili 21139681 >}}

效果如下：

黑幕文字

可以直接参考：https://mogeko.me/posts/zh-cn/080/

还有更多…

甩链接，实在肝不动了Orz

鼠标点击特效

三选一，MemE主题将代码放置在/layouts/partials/custom/script.html中。

核心价值观

参考：博客园主题。

 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

<script type="text/javascript">
/* 鼠标特效，文字特效 */
var a_idx = 0;
jQuery(document).ready(function($) {
    $("body").click(function(e) {
        var a = new Array("❤富强❤","❤民主❤","❤文明❤","❤和谐❤","❤自由❤","❤平等❤","❤公正❤","❤法治❤","❤爱国❤","❤敬业❤","❤诚信❤","❤友善❤");
        var $i = $("<span></span>").text(a[a_idx]);
        a_idx = (a_idx + 1) % a.length;
        var x = e.pageX,
        y = e.pageY;
        $i.css({
            "z-index": 999999999999999999999999999999999999999999999999999999999999999999999,
            "top": y - 20,
            "left": x,
            "position": "absolute",
            "font-weight": "bold",
            "color": "rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"
        });
        $("body").append($i);
        $i.animate({
            "top": y - 180,
            "opacity": 0
        },
        1500,
        function() {
            $i.remove();
        });
    });
});
</script>

烟花特效

1
2
3

<!--鼠标点击特效，烟花效应-->
<script src="https://cdn.jsdelivr.net/gh/ZhaoUncle/image@main/static/mouse-click.js"></script>
<canvas width="1777" height="841" style="position: fixed; left: 0px; top: 0px; z-index: 2147483647; pointer-events: none;"></canvas>

爱心特效

1

<script src="https://cdn.jsdelivr.net/gh/ITJoker233/ITJoker233.github.io@latest/CDN/js/love.min.js"></script>

看板娘

Hugo博客添加live2d看板娘

方法1: 使用html模板，引入js文件

将以下代码添加到/layouts/partials/footer.html中{{ end }}的前一行。

 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

<!-- Live2D，网页上的小人，可以修改live2d_config.js来修改模型，模型都在static/live2d_models里面 -->
<!-- 你也可以把js文件下载下来，放到static/js/目录下，就不依赖别人的服务了 -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/live2d-widget@3.1.4/lib/L2Dwidget.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/live2d-widget@3.1.4/lib/L2Dwidget.0.min.js"></script>

<script type="text/javascript">
    L2Dwidget.init({
        model: {
            scale: 1,
            hHeadPos: 0.5,
            vHeadPos: 0.618,
            jsonPath: 'https://cdn.jsdelivr.net/gh/DomathID/live2d-model@main/Miku/miku.model.json',       // xxx.model.json 的路径,换人物修改这个
        },
        display: {
            superSample: 9,     // 超采样等级，相当于清晰度，数值越高越清晰
            width: 300,         // canvas的宽度
            height: 400,        // canvas的高度
            position: 'left',   // 显示位置：左或右
            hOffset: 0,         // canvas水平偏移，正方向为右
            vOffset: 0,         // canvas垂直偏移
        },
        mobile: {
            show: true,         // 是否在移动设备上显示
            scale: 1,           // 移动设备上的缩放
            motion: true,       // 移动设备是否开启重力感应
        },
        react: {
            opacityDefault: 1,  // 默认透明度
            opacityOnHover: 1,  // 鼠标移上透明度
        },
    });
</script>

方法2: 直接在config.toml里面引入js文件

修改主题配置文件config.toml，添加：

1
2
3
4
5
6
7

    # 第三方库配置
    [params.page.library]
      [params.page.library.css]
      [params.page.library.js]
        live2d-widget1 = "https://cdn.jsdelivr.net/npm/live2d-widget@3.1.4/lib/L2Dwidget.min.js"
        live2d-widget2 = "https://cdn.jsdelivr.net/npm/live2d-widget@3.1.4/lib/L2Dwidget.0.min.js"
        live2d-config = "/js/live2d_config.js"

然后新建/static/js/live2d_config.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

    L2Dwidget.init({
        model: {
            scale: 1,
            hHeadPos: 0.5,
            vHeadPos: 0.618,
            jsonPath: 'https://cdn.jsdelivr.net/gh/DomathID/live2d-model@main/Miku/miku.model.json',       // xxx.model.json 的路径,换人物修改这个
        },
        display: {
            superSample: 9,     // 超采样等级，相当于清晰度，数值越高越清晰
            width: 300,         // canvas的宽度
            height: 400,        // canvas的高度
            position: 'left',   // 显示位置：左或右
            hOffset: 0,         // canvas水平偏移，正方向为右
            vOffset: 0,         // canvas垂直偏移
        },
        mobile: {
            show: true,         // 是否在移动设备上显示
            scale: 1,           // 移动设备上的缩放
            motion: true,       // 移动设备是否开启重力感应
        },
        react: {
            opacityDefault: 1,  // 默认透明度
            opacityOnHover: 1,  // 鼠标移上透明度
        },
     });

配置Waline评论

Waline 评论系统的介绍与基础配置

按照Waline官方文档快速开始。

第一步推荐使用 LeanCloud 国际版，因为国内版还需要和备案的域名绑定，很是麻烦。第二步利用Vercel部署Waline，点击官方给出的快速部署链接，也就是那个deploy蓝色按钮，然后按照官方文档继续部署，直到你获得ServerURL，也就是服务端地址。

在/layouts/partials/components/comments.html中添加代码：

1
2
3
4
5
6
7
8
9

{{ if and (.Params.comments | default .Site.Params.enableComments) (eq hugo.Environment "production") }}
    {{ if or (in .Site.Params.mainSections .Section) .Params.comments }}

+       {{ if .Site.Params.enableWaline }}
+           <div id="waline"></div>
+       {{ end }}

    {{ end }}
{{ end }}

在/layouts/layouts/third-party/script.html中添加代码：

1
2
3
4
5
6
7
8
9

{{ if and (.Params.comments | default .Site.Params.enableComments) (eq hugo.Environment "production") }}
    {{ if or (in .Site.Params.mainSections .Section) .Params.comments }}

+       {{ if .Site.Params.enableWaline }}
+           {{ partial "third-party/waline.html" . }}
+       {{ end }}

    {{ end }}
{{ end }}

在/layouts/layouts/third-party中新建waline.html，添加：

 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

<script>
    function loadComments() {
        if (typeof Waline === 'undefined') {
            var getScript = (options) => {
                var script = document.createElement('script');
                script.defer = true;
                script.crossOrigin = 'anonymous';
                Object.keys(options).forEach((key) => {
                    script[key] = options[key];
                });
                document.body.appendChild(script);
            };
            getScript({
                src: 'https://cdn.jsdelivr.net/npm/@waline/client/dist/Waline.min.js',
                onload: () => {
                    newWaline();
                }
            });
        } else {
            newWaline();
        }
    }
    function newWaline() {
        new Waline({
            el: '#waline',
            serverURL: '{{ .Site.Params.walineServerURL }}',
            placeholder: '{{ .Site.Params.walinePlaceholder }}',
            avatar: '{{ .Site.Params.walineAvatar }}',
            meta: {{ .Site.Params.walineMeta }},
            pageSize: {{ .Site.Params.walinePageSize }},
            lang: '{{ .Site.Params.walineLang }}',
            highlight: {{ .Site.Params.walineHighlight }},
            avatarCDN: '{{ .Site.Params.walineAvatarCDN }}',
            requiredFields: {{ .Site.Params.walineRequiredFields }}
        });
    }
</script>

在博客配置文件config.toml中添加：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

## Waline
enableWaline = true
walineServerURL = ""
walinePlaceholder = "请填写正确的昵称和邮箱，方便接收评论回复信息哦。"  #留言框占位提示文字
walineAvatar = "mp"
walineMeta = ["nick", "mail", "link"]
walinePageSize = 10
walineLang = "zh-CN"
walineHighlight = true
walineAvatarCDN = "https://cdn.v2ex.com/gravatar/"
walineRequiredFields = ["nick", "mail"]
# 说明：https://waline.js.org/

邮件通知与后续魔改请见Hugo | 为Zzo主题添加Waline评论。

特别鸣谢

MemE主题的官方文档

config.toml可供参考

建站笔记，包括Waline评论、短代码、今日诗词等

config.toml解读以及网络字体如何添加

stack主题的魔改教程，参考了加载进度条

参考了短代码配置

Roelxy
WRITTEN BY
Roelxy
新世紀摸魚戰士

See Also