博客主题更换：Stack to MemE

是的我换主题了，永远年轻，永远爱换皮肤。曾经的我嫌弃单栏过于简陋，现在的我觉得单栏才是最好看的，回归简洁，选择了 MemE 这个主题。在 MemE 主题之上又做了一些个性化的修改。

配置 waline 评论

Stack 主题里用的是 waline 评论，MemE 主题的评论插件中没有提供 waline，不想再去创建一个应用，搜了一圈发现刚好有在 MemE 中配置 waline 评论的帖子，就直接搬来用了。

配合主题修改评论的暗黑模式，只需要在配置中添加 dark: 'html[data-theme="dark"]'即可。不同主题可能会有所不同，具体看官方文档。如果要自定义样式，加在 custom.scss中是不会生效的，需要在Waline.html的<style>标签中自定义。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17


<!--Waline.html-->
<script>
...
function newWaline() {
 new Waline({
 el: '#waline',
 serverURL: '{{ .Site.Params.walineServerURL }}',
 ...
<!--在此处加入-->
 dark: 'html[data-theme="dark"]'
 });
...
}
</script>
<style>
/* 自定义样式 */
</style>

配置说说功能

(已删)

最开始是看到哔哔点啥 :: 木木木木木这个页面，觉得非常适合用来发我的铲屎官日记，看了大佬的教程，显然——我没有看懂。原理清楚，看着简单，插入到自己的主题里又摸不着路子，学习 Hugo 模板语法的时间成本太多，再加上用微信公众号、捷径等发哔哔的方式其实我也不是很需要，于是只好放弃。

才怪！

自己码不了难道还找不到现成的了吗！我使出搜索大法，最后找到了这个插件：Artitalk.js. （一个小 Tip: 由于 Hugo 使用的人还不算很多，在找博客功能的时候不妨用 Hexo 试试。）看看这介绍，“基于 LeanCloud 实现的可实时发布说说/微语的 js”，这不正是我想要的吗！

在 LeanCloud 的配置很简单，跟着使用文档一步步配置。然后是在 MemE 主题中引入：

配置菜单栏，在 config 文件中新增菜单：

1
2
3
4


[[menu.main]]
        pageref = "/cat/"
        name = "猫咪"
        weight = 5 //权重，表示菜单栏的顺序

在content文件夹下新建cat文件夹，下面再新建一个_index.md：

1
2
3
4
5
6
7


---
title: "铲屎官日记"
layout: "cat"
comments: false
---

: 说说页面需要的文字

在layouts/_default/下新增cat.html, 作为说说的 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
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


{{ define "main" }}
 <!-- 引用 artitalk -->
 <script type="text/javascript" src="https://unpkg.com/artitalk"></script>
 <!--container和主题结构保持一致-->
 <div class="container">
 {{ partial "header.html" . }}
 {{ if ne .Site.Params.headerLayout "flex" }}
   {{ if or (and .IsHome .Site.Params.displayMenuInHome) (and (not .IsHome) .Site.Params.enableMenu) }}
     {{ partial "menu.html" . }}
   {{ end }}
   {{ partial "components/multilingual.html" . }}
   {{ partial "components/dark-mode.html" . }}
 {{ end }}
 <main class="main list" id="main">
   <div class="main-inner">
     <div class="content cat">
 <!--页面标题-->
       <h1 class="list-title">{{ .Title }}</h1>
 <!--页面介绍-->
       <div class="post-body e-content">
 {{ .Content }}
       </div>
 <!-- 存放说说的容器 -->
       <div id="artitalk_main"></div>
     </div>
   </div>
 </main>
 </div>
 <script>
 new Artitalk({
 appId: "", // Your LeanCloud appId
 appKey: "", // Your LeanCloud appKey
 pageSize: 10, // 每页说说数量
 color3: "var(--color-contrast-high)", // 文字颜色
 color1: "hsla(var(--color-contrast-lower-h), var(--color-contrast-lower-s), var(--color-contrast-lower-l), 0.5)", //背景颜色1
 color2: "hsla(var(--color-contrast-lower-h), var(--color-contrast-lower-s), var(--color-contrast-lower-l), 0.5)" // 背景颜色2
 });
 </script>
 <!--修改样式-->
 <style>
 /* 说说文字颜色和阴影 */
 #artitalk_main .cbp_tmtimeline>li .cbp_tmlabel{
 box-shadow: none;
 }

 /* 加载按钮颜色 */
 #operare_artitalk .at_button, #artitalk_main .at_button{
 background-color: var(--color-contrast-lower);
 color: var(--color-contrast-high);
 transition: background-color .5s;
 }

 #operare_artitalk .at_button, #artitalk_main .at_button:hover{
 background-color: hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.3);
 box-shadow: none;
 }

 /* 最底下artitalk链接颜色 */
 #artitalk_main .power a{
 color: var(--color-primary);
 }
 </style>
{{ end }}

配置完成，顺利的话博客就拥有了说说页面啦。

折叠目录

用<details><summary></summary></details>标签，添加在layouts/partials/utils/toc.html :

1
2
3
4
5
6
7


<!-- Inject TOC Title -->
{{- if .Site.Params.displayTOCTitle -}}
 {{- $regexPatternTOC := `(<nav class="contents">\n.+)(<(ol|ul) class="toc">)` -}}
<!-- 在这里修改 -->
 {{- $regexReplacementTOC := (printf `$1<details open><summary class="toc"><h2 id="contents" class="contents-title">%s</h2></summary>$2` (i18n "tocTitle")) -}}
 {{- $toc = $toc | replaceRE $regexPatternTOC $regexReplacementTOC -}}
{{- end -}}

博客主题更换：Stack to MemE

配置 waline 评论

配置说说功能

折叠目录

相关文章：