Hugo的PaperMod主题踩坑历程

忙了一晚上，配置Papermod主题踩了太多坑。记录一下Hugo的PaperMod主题踩坑历程（包括Safari顶栏颜色配置等）。

一、安装过程

1. 不要使用git add submodule安装主题，否则将无法更改主题内容。正确方法是下载zip文件解压，然后git init。
2. api.netlify.com始终无法访问，又不在各大pac的名单上，因此开梯子的时候要设置为全局才能上去。
3. 从Hexo转向Hugo后，最大的感受就是编译速度快了不少，netlify的免费额度终于够用了～

二、配置过程

1. 设置Archive页面时，除了按照官方的做法添加archives.md文件以外，还必须在config.yml下添加如下属性：

   params:
     ShowAllPagesInArchive: true
   

2. 设置params.editPost属性时，在URL上必须加上/tree/master，例如：

   https://github.com/alvazu/hugo_standalone/tree/master/content
   

   同时，必须设置hidemeta属性，才会显示修改按钮：

   params:
     hidemeta: false
     hideSummary: false
   

3. 配置TOC的过程，可以参考如下配置，让TOC显示但自动收起：

   params:
     showtoc: true
     tocopen: false
   

4. 将主页设置为非profile mode时，还必须在config.yml下添加如下属性，首页上的文章列表才能显示：

   params:
     mainSections:
       - post
   

   这是由于在下列语句中，site.Params.mainSections属性返回posts，而site.RegularPages.Type返回post（少了个“s”）：

   where site.RegularPages "Type" "in" site.Params.mainSections
   

5. 配置RSS时，首先在config.yml下添加如下属性：

   params:
     ShowFullTextinRSS: true
   

   然后将socialIcons属性指向index.xml。

6. 要删除Catagories、Tags页面中的大标题，需要找到/layouts/_default/terms.html文件，将其中的

   <h1>{{ .Title }}</h1>
   

   （也就是第五行）注释掉。

7. 要删除底部的Powered by Hugo & PaperMod字样，需要找到layouts/partials/footer.html，从第8行开始设置注释：

   <!-- <span>
   	Powered by
   	<a href="https://gohugo.io/" rel="noopener noreferrer" target="_blank">Hugo</a> &
   	<a href="https://git.io/hugopapermod" rel="noopener" target="_blank">PaperMod</a>
   </span> -->
   

三、设置Safari顶栏颜色跟随

1. 找到layouts/partials/header.html，修改其中的JS代码为（从22行开始）：

   if (localStorage.getItem("pref-theme") === "dark") {
      document.body.classList.add('dark');
      document.querySelector('meta[name="theme-color"]').setAttribute("content","#1d1e20")
   } else if (localStorage.getItem("pref-theme") === "light") {
      document.body.classList.remove('dark')
      document.querySelector('meta[name="theme-color"]').setAttribute("content","#f5f5f5")
   } else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
      document.body.classList.add('dark');
      document.querySelector('meta[name="theme-color"]').setAttribute("content","#1d1e20")
   }
   

2. 找到layouts/partials/footer.html，修改其中的JS代码为（从73行开始）：

   document.getElementById("theme-toggle").addEventListener("click", () => {
     if (document.body.className.includes("dark")) {
       document.body.classList.remove('dark');
       localStorage.setItem("pref-theme", 'light');
       document.querySelector('meta[name="theme-color"]').setAttribute("content","#f5f5f5")
     } else {
       document.body.classList.add('dark');
       localStorage.setItem("pref-theme", 'dark');
       document.querySelector('meta[name="theme-color"]').setAttribute("content","#1d1e20")
     }
   })