· 参考链接

Sulv的博客 | 塔塔的标签墙 | hsingko的papermod改字体教程

· To Do List

  • 更改icon配置，使Safari能够正常显示icon
  • 根据Sulv的经验修改目录位置和主题图显示
  • 添加需要的页面如Archive、Tags和Categories
  • 解决menu重复问题
  • 解决文章封面不显示摘要的问题
  • imgloop短代码的替代方案
  • 建立Tags Wall并修改配色
  • 建立读书记录页面
  • 将字体修改为思源宋体（12/27更新）
  • 添加channel.io插件
  • 一个不明觉厉的置顶文章
  • 将字体修改为霞鹜文楷
  • 更改页脚信息

· 准备工作

  PaperMod的配置文件叫做theme.toml，因为上一个主题用的是yaml文件所以我也看不懂toml了，所以使用了一个在线toml转yaml工具，很方便地改成了yaml文件。随后我发现无论我怎么改这个文件都动不了，于是把文件名改成了config.yaml，情理之中地可以了，感觉好地味（。

· icon的safari显示

  之前并没有成功让safari浏览器显示我可爱的图标，由于站名叫“小鱼钓狗”，显示的一直是一个灰底的白字“小”，非常奇怪，一看就不是正经网站！

  在config.yaml文件中设置网站icon的地方，额外添加了以下两行字段：

1
2

apple_touch_icon: " " # 你的icon链接
safari_pinned_tab: " " # 你的icon链接

  成功！

· 跟着Sulv改目录、头图和post meta

  这位大佬的亲妈级教程已经非常详细了，在这里隔空磕头感谢！真正的小白就是需要这样的教程！

将目录放在侧边|PaperMod主题

博客文章封面图片缩小并移到侧边|PaperMod主题

修改post_meta头部信息

· Menu设置

· 添加Archive、Tags和Categories

  在content文件夹中新建archive.md要建其他页面也是在这里），并添加以下内容：

---
title: "Archive"
layout: "archive"
url: "/archive/"
summary: " "
---

.
├── config.yml
├── content/
│   ├── archive.md   <--- Create archive.md here
│   └── posts/
├── static/
└── themes/
    └── PaperMod/

  Tags和Categories的添加直接在config.yaml里添加，这里列出我的menu部分的配置，供参考：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

menu:
  main:
    - identifer: tags-wall
      name: Kaede🍁
      url: tags-wall
      weight: 1  # 可以理解为排序，数字越小越靠前
    - identifer: post
      name: Post
      url: post
      weight: 3     
    - identifer: archive
      name: Archive
      url: archive/
      weight: 20
    - identifer: tags
      name: Tags
      url: tags
      weight: 40
    - identifer: categories
      name: Categories
      url: categories
      weight: 60

· Menu菜单重复

  本来我在上一步里也是添加了About、Friends和Search界面的，但这么一来这三项居然出现了两次！

  我也没找到哪里设置了这三项，于是就把这三项删了，很地味！

· 文章封面不显示摘要的问题

  往日的书写习惯是在Frontmatter里添加description，但是过来之后发现不显示，折腾了半天新增了一个summary的变量就解决了，内容跟description一致即可。

· 短代码不适配问题

  之前的Stack主题是支持很丰富的短代码的，虽然我用得上的并不很多，搬过来之后好多都失效了，好巧不巧我使用的都是失效的短代码（。

  因为关于短代码的知识我还尚未学习，只好在找到解决方案之前先搞个替代品出来。

  imgloop在stack里是个对我来说非常实用的短代码，我可以将很多图片堆叠在一起不占用太多空间，但是在papermod里用不了了，于是我就在Typora里弄了个表格往里面插入图片，颇有填写Excel综测表格并感。

  往表格里插图片需要控制一下大小，否则就会参差不齐，可以使用以下语法来调整：

1

<img src="你的图片链接" style="zoom:50%">

  意思是把图片缩小为原来的50%，也可以凭感觉输入各种你觉得合适的数字！不知为何我觉得调试图片大小的过程很解压。

  这样一来就有gallery的感觉了！但是我还是想尽快学会正统gallery怎么做啊啊啊！

· 重头戏！标签墙的建立！

  标签墙这个想法我八月份就想做了！今天终于学会了！鼓掌！家人们！

  我从塔塔修改的Cactus主题文件里直接找到了layouts/_default/tags-wall.html、content/tags-wall.md和static/js/tags-wall.js三个文件，原封不动地搬到了我的对应文件夹里（ps：如果博客文件夹没有static/js/可以自己新建），并在config.yaml的menu设置里加上了tags-wall。

· 修改内容

  layouts/_default/tags-wall.html，根据范例修改即可，附带外链时，将链接中的所有/改成&#47;，标签设为随机大小时也要改。

· 修改颜色

  static/js/tags-wall.js，第131行处修改颜色十六进制代码即可。分享一下我的配色：

1

'#648b7f',  '#8ba38e', '#bec59a','#e9b77f','#f3d5a3','#e2a67d','#cd7161','#d5856f','#af5f56','#c6967d','#e7d292','#e6ad8e'

· 顺便加个读书记录页面

  用notion来做吧！使用了象友的模板，自己修改了一丢丢，挺好用的！

· 添加Channel.io插件

  因为不想开评论系统了，所以搞了这个，这是官网。

  配置没什么难度，自己设置完之后进入settings/general/manage plug-in/web plug-in settings设置一下你想放在左边还是右边，然后在同界面的install plug-in复制js代码，去layouts/partials/footer.html里另起一行贴进去即可。

  这个东西就方便在有app提示，不需要开电脑就能回复，而且目前看来消息没有延迟，基本功能也是免费的。

· 置顶个文章过一下瘾罢

  不明所以但是非要弄一个（嗑cp性质的）英文诗（汗！cp脑滚啊）

  操作方法是在文章的frontmatter里加上weight: 1的变量，是排序的意思，不加就是默认时间顺序咯！

· 更改字体

  照着以前Stack的改字体教程一顿操作猛如虎最后愉悦报错，okay算了，好像papermod跟其他主题改字体确实有点不一样，而我又毫无基础无法举一反三，改不了字体我就改变自己，学会发现黑体の美…………

  直到我不放弃地搜到了hsingko的这篇改字体教程，只会抄作业的差生立即动手了！刚好我也想换一个偏圆体的楷体，这个字体还是很美丽也符合我的要求的！加载也非常迅速！

简单测试一下：

中文简体：先帝创业未半而中道崩殂

English: I know that I deserve your love

日本語：私の恋を悲劇のジュリエットにしないで

  我常用的三种语言表现都很良好！舒服

  12/27更新：还是换成思源宋体了，思源宋体永远滴神。

· 更改页脚信息

  将layouts/partials/footer.html中的3-12行改为以下代码（借用塔塔修改的Cactus主题文件）

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

    {{$scratch := newScratch}}
    {{ range (where .Site.Pages "Kind" "page" )}}
        {{$scratch.Add "total" .WordCount}}
    {{ end }}
  
    <section class="copyright">
      &copy; 
         {{ if and (.Site.Params.footer.since) (ne .Site.Params.footer.since (int (now.Format "2006"))) }}
             {{ .Site.Params.footer.since }} - 
         {{ end }}
         2022-2022 站点名或者描述</a> · <a id="days">0</a>Days<br>
       {{$var :=  $scratch.Get "total"}}{{$var = div $var 100.0}}{{$var = math.Ceil $var}}{{$var = div $var 10.0}}共书写了{{$var}}k字 ·  {{ len (where .Site.RegularPages "Section" "!=" "") }} 篇文章</br><span><p>
     </section>
  
     <script>
      var s1 = '2022-08-09';//设置为建站时间
      s1 = new Date(s1.replace(/-/g, "/"));
      s2 = new Date();
      var days = s2.getTime() - s1.getTime();
      var number_of_days = parseInt(days / (1000 * 60 * 60 * 24));
      document.getElementById('days').innerHTML = number_of_days;
      </script>

  以上！就是我的本次改主题日记！总结下来就是很地味啊…………被一些很简单的东西普通地困住的阿枫实在是……

  希望能在实践中学到越来越多的东西吧！非常感谢上面的各位博友提供的代码、思路和教程！

ps. 太喜欢我的标签墙了！求你们去看一看QuQ