INNERSO

博客主题更换：Stack to MemE

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

配置 waline 评论

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

帖子是这篇：Waline 评论系统的介绍与基础配置

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

 1<!--Waline.html-->
 2<script>
 3...
 4function newWaline() {
 5 new Waline({
 6 el: '#waline',
 7 serverURL: '{{ .Site.Params.walineServerURL }}',
 8 ...
 9<!--在此处加入-->
10 dark: 'html[data-theme="dark"]'
11 });
12...
13}
14</script>
15<style>
16/* 自定义样式 */
17</style>

配置说说功能

(已删)

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

才怪！

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

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

  1. 配置菜单栏，在 config 文件中新增菜单：
1[[menu.main]]
2        pageref = "/cat/"
3        name = "猫咪"
4        weight = 5 //权重，表示菜单栏的顺序
  1. 在content文件夹下新建cat文件夹，下面再新建一个_index.md：
1---
2title: "铲屎官日记"
3layout: "cat"
4comments: false
5---
6
7: 说说页面需要的文字
  1. 在layouts/_default/下新增cat.html, 作为说说的 HTML 页面，并修改样式。内容如下:
 1{{ define "main" }}
 2 <!-- 引用 artitalk -->
 3 <script type="text/javascript" src="https://unpkg.com/artitalk"></script>
 4 <!--container和主题结构保持一致-->
 5 <div class="container">
 6 {{ partial "header.html" . }}
 7 {{ if ne .Site.Params.headerLayout "flex" }}
 8   {{ if or (and .IsHome .Site.Params.displayMenuInHome) (and (not .IsHome) .Site.Params.enableMenu) }}
 9     {{ partial "menu.html" . }}
10   {{ end }}
11   {{ partial "components/multilingual.html" . }}
12   {{ partial "components/dark-mode.html" . }}
13 {{ end }}
14 <main class="main list" id="main">
15   <div class="main-inner">
16     <div class="content cat">
17 <!--页面标题-->
18       <h1 class="list-title">{{ .Title }}</h1>
19 <!--页面介绍-->
20       <div class="post-body e-content">
21 {{ .Content }}
22       </div>
23 <!-- 存放说说的容器 -->
24       <div id="artitalk_main"></div>
25     </div>
26   </div>
27 </main>
28 </div>
29 <script>
30 new Artitalk({
31 appId: "", // Your LeanCloud appId
32 appKey: "", // Your LeanCloud appKey
33 pageSize: 10, // 每页说说数量
34 color3: "var(--color-contrast-high)", // 文字颜色
35 color1: "hsla(var(--color-contrast-lower-h), var(--color-contrast-lower-s), var(--color-contrast-lower-l), 0.5)", //背景颜色1
36 color2: "hsla(var(--color-contrast-lower-h), var(--color-contrast-lower-s), var(--color-contrast-lower-l), 0.5)" // 背景颜色2
37 });
38 </script>
39 <!--修改样式-->
40 <style>
41 /* 说说文字颜色和阴影 */
42 #artitalk_main .cbp_tmtimeline>li .cbp_tmlabel{
43 box-shadow: none;
44 }
45
46 /* 加载按钮颜色 */
47 #operare_artitalk .at_button, #artitalk_main .at_button{
48 background-color: var(--color-contrast-lower);
49 color: var(--color-contrast-high);
50 transition: background-color .5s;
51 }
52
53 #operare_artitalk .at_button, #artitalk_main .at_button:hover{
54 background-color: hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.3);
55 box-shadow: none;
56 }
57
58 /* 最底下artitalk链接颜色 */
59 #artitalk_main .power a{
60 color: var(--color-primary);
61 }
62 </style>
63{{ end }}

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

折叠目录

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

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

<< Previous Post

|

Next Post >>

#HUGO

x