把Blog构建工具从Octopress换到Hugo。

选一个符合需求的theme。我的需求如下：

1. 简洁
2. 支持 Table Of Contents
3. 支持 mermaid

最后没有找到完全满意的，选了hugo-theme-diary。

基于diary做了一些改造。

1. 把页面宽度调大一点。修改hugo theme的源文件assets/scss/journal.scss：

    $side-container-width: 25%;
    $extra-container-width: 25%;
   

   改为

    $side-container-width: 20%;
    $extra-container-width: 20%;
   

2. 支持mermaid。参考如何为你的 Hugo 博客引入 mermaid 支持？。原理就是把Hugo生成的HTML片段从

   <pre><code class="language-mermaid">
       <!-- mermaid code -->
   </code></pre>
   

   转换为：

   <div class="mermaid">
       <!-- mermaid code -->
   </div>
   

   在Blog仓库的路径下增加layouts/partials/journal.html，内容如下：

   <script language="javascript">
   window.onload = function(e){ 
       const blocks = document.querySelectorAll("pre code.language-mermaid");
       for (let i = 0; i < blocks.length; i++) {
           const block = blocks[i];
           const rootElement = block.parentElement;
           var container = document.createElement("div");
           container.className = "align-center mermaid";
           container.textContent = block.childNodes[0].textContent;
           rootElement.parentElement.replaceChild(container, rootElement);
       }
   }
   </script>
   <script src="https://cdn.bootcdn.net/ajax/libs/mermaid/8.11.2/mermaid.js"></script>
   

3. 因为换构建工具，这次也想把生成的路径也去掉日期。所以之前Blog里一些内部引用的链接也会失效。

   参考Links and Cross References，能搜出来的绝对引用链接，都在文章里替换为：

   {{< relref "document-name" >}}
   

4. FIX disqus评论，修改themes/diary/layouts/partials/comment.html中disqus的部分：

   {{ if .Site.Params.disqusShortname }}
   <div id="disqus_thread"></div>
   <script>
       var disqus_config = function () {
       this.page.url = "{{.Permalink }}";  // Replace PAGE_URL with your page's canonical URL variable
       this.page.identifier = "{{.Slug}}"; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
       };
   
       (function() { // DON'T EDIT BELOW THIS LINE
       var d = document, s = d.createElement('script');
       s.src = 'https://{{.Site.Params.disqusShortname}}.disqus.com/embed.js';
       s.setAttribute('data-timestamp', +new Date());
       (d.head || d.body).appendChild(s);
       })();
   </script>
   {{ end }}
   

5. 隐藏post。

   如果只隐藏单个post，不让它在首页或者posts页面出现，可以在文章源文件的front matter里加入

    _build: {"list":false }
   

   如果要隐藏一个系列（section）的文章，那么要修改themes/diary/layouts/index.html，把

    {{range .Paginator.Pages}}
   

   修改为

    {{range (where .Paginator.Pages "Section" "not in" site.Params.invisibleSections)}}
   

   同时在 config.toml 里增加配置：

    [params]
    invisibleSections = ["this-is-a-hidden-section"]

Last modified on 2021-11-27