Set up blog - Hugo + PaperMod

baseURL: "https://gdhblog.com/" # Blog domain name
paginate: 10 # Number of articles to display per page on the home page
theme: hugo-PaperMod-8.0 # Name of the PaperMod theme folder in the themes directory
title: My Blog

enableRobotsTXT: true # Allows search engines to crawl and index the site, recommended to set as true.
hasCJKLanguage: true # Automatically detects if the content includes Chinese, Japanese or Korean languages. This can be enabled if the articles use a lot of Chinese punctuation marks.
buildDrafts: false # This option controls whether to include content marked as drafts when building the site.
buildFuture: false # This option controls whether to include content with future publish dates when building the site.
buildExpired: false # his option controls whether to include expired content when building the site. Setting it to false ensures that only the latest and most relevant content is displayed on the live site.
minify:
  disableXML: true # This will disable the generation of the XML sitemap. If you don't need the XML sitemap, this can reduce build time.
  minifyOutput: true # true This will compress the HTML, CSS, and JavaScript files, reducing the file size of the pages and improving page load speed.

params:
  env: production # to enable google analytics, opengraph, twitter-cards and schema.
  keywords: [
      keywords1,
      keywords2,
      keywords3,
    ] # Homepage Keywords
  displayFullLangName: true
  label: # 左上角图标
    icon: "img/favicon.gif" # Image Paths: /static/img
    iconHeight: 35

  images: ["<link or path of image for opengraph, twitter-cards>"]
  DateFormat: "2006-01-02" # 将时间格式修改为国内常用格式
  defaultTheme: auto # dark, light
  disableThemeToggle: false
  ShowReadingTime: true # 阅读文章时间
  ShowShareButtons: false # 文章底部的分享按钮
  ShowPostNavLinks: true
  ShowBreadCrumbs: true # 显示面包屑导航
  ShowCodeCopyButtons: true
  ShowWordCount: true
  ShowRssButtonInSectionTermList: true
  UseHugoToc: true
  disableSpecial1stPost: false
  disableScrollToTop: false
  comments: true # 文章评论
  hidemeta: false
  hideSummary: true # 隐藏文章摘要
  showtoc: true # 显示文章目录
  tocopen: true # 默认打开文章目录

  assets:
    # disableHLJS: true # to disable highlight.js
    # disableFingerprinting: true
    favicon: "img/favicon.gif" # 图片路径：/static/img 
    favicon16x16: "img/favicon.gif"
    favicon32x32: "img/favicon.gif"
    apple_touch_icon: "img/favicon.gif"
    safari_pinned_tab: "img/favicon.gif"

  cover:
    hidden: true # hide everywhere but not in structured data
    hiddenInList: true # hide on list pages and home
    hiddenInSingle: true # hide on single page

  # for search
  # https://fusejs.io/api/options.html
  fuseOpts:
    isCaseSensitive: false
    shouldSort: true
    location: 0
    distance: 1000
    threshold: 0.4
    minMatchCharLength: 0
    limit: 10 # refer: https://www.fusejs.io/api/methods.html#search
    keys: ["title", "permalink", "summary", "content"]

# Read: https://github.com/adityatelange/hugo-PaperMod/wiki/FAQs#using-hugos-syntax-highlighter-chroma
pygmentsUseClasses: true
markup:
  highlight:
    # noClasses: false
    anchorLineNos: true
    codeFences: true
    guessSyntax: true # Guessed Syntax Highlighting: It's recommended to set this feature to 'true'. If you don't specify the languages to display, it will automatically match the syntax.
    lineNos: true # This option allows you to choose whether to display line numbers for the code snippets.
    style: monokai

# Multilingual Configuration
defaultContentLanguage: en # Default Language 
defaultContentLanguageInSubdir: false # If you want your default language content to use a subdirectory (e.g. '/en/'), you can configure that in the multilingual settings.
languages:
  en:
    title: Rickey's blog
    description: "I sincerely document this because life is worth it."
    weight: 2
    languageCode: en-us
    languageName: "English"
    params:
      author: Rickey
      social: true
      profileMode:
        enabled: true
        title: "Rickey Gong"
        subtitle: "I sincerely document this because life is worth it."
        imageUrl: "avatar.png" # path: /static
        imageWidth: 120
        imageHeight: 120
        imageTitle: "Welcome to Rickey's blog"
        buttons:
          - name: Posts
            url: posts
          - name: Archives
            url: archives
          - name: Links
            url: friends
          - name: Please have a coffee
            url: donate
      # Social platform small icon, reference：https://adityatelange.github.io/hugo-PaperMod/posts/papermod/papermod-icons/
      socialIcons:
        - name: github
          url: "https://github.com/rickeygong/"
        - name: email
          url: "mailto:donghai.gong@outlook.com"
        - name: rss
          url: /index.xml/
        - name: bilibili
          url: "https://space.bilibili.com/14020906"
        - name: linkedin
          url: "https://linkedin.com/in/donghai-gong-11a74b225"
    menu:
      main:
        - identifier: search
          name: Search
          url: /search/
          weight: 1 # The "weight" parameter represents the order of the right-upper menu buttons, from 1 to 8, from left to right.
        - identifier: posts
          name: Posts
          url: /posts/
          weight: 2
        - identifier: categories
          name: Categories
          url: /categories/
          weight: 3
        - identifier: archives
          name: Archives
          url: /archives/
          weight: 4
        - identifier: tags
          name: Tags
          url: /tags/
          weight: 5
        - identifier: about
          name: About
          url: /about/
          weight: 6
        - identifier: friends
          name: Links
          url: /friends/
          weight: 7
        - identifier: rss
          name: RSS
          url: index.xml
          weight: 8

  zh:
    title: 龚东海的博客
    description: "我真诚地记录着，因为生活值得"
    weight: 1
    languageCode: zh-cn
    languageName: "简体中文"
    params:
      author: 龚东海
      social: true
      profileMode:
        enabled: true
        title: "龚东海"
        subtitle: "我真诚地记录着，因为生活值得。"
        imageUrl: "avatar.png"
        imageWidth: 120
        imageHeight: 120
        imageTitle: "欢迎来到龚东海的博客"
        buttons:
          - name: 文章
            url: posts
          - name: 归档
            url: archives
          - name: 友链
            url: friends
          - name: 请喝咖啡
            url: donate
      socialIcons:
        - name: github
          url: "https://github.com/rickeygong/"
        - name: email
          url: "mailto:donghai.gong@outlook.com"
        - name: rss
          url: /index.xml/
        - name: bilibili
          url: "https://space.bilibili.com/14020906"
        - name: linkedin
          url: "https://linkedin.com/in/donghai-gong-11a74b225"
    menu:
      main:
        - identifier: search
          name: 搜索
          url: /search/
          weight: 1
        - identifier: posts
          name: 文章
          url: /posts/
          weight: 2
        - identifier: categories
          name: 分类
          url: /categories/
          weight: 3
        - identifier: archives
          name: 归档
          url: /archives/
          weight: 4
        - identifier: tags
          name: 标签
          url: /tags/
          weight: 5
        - identifier: about
          name: 关于
          url: /about/
          weight: 6
        - identifier: friends
          name: 友情链接
          url: /friends/
          weight: 7
        - identifier: rss
          name: RSS
          url: index.xml
          weight: 8

# ----- [Begin]. Search config -----
outputs:
  home:
    - HTML
    - RSS
    - JSON
# ----- [End]. Search config -----

<style>
    .friendurl {
        text-decoration: none !important;
        color: var(--primary) !important;
        box-shadow: none !important;
    }

    .myfriend {
        width: 56px !important;
        height: 56px !important;
        border-radius: 50% !important;
        padding: 2px;
        margin-top: 20px !important;
        margin-left: 14px !important;
        background-color: #fff;
    }

    .frienddiv {
        overflow: auto;
        height: 100px;
        width: 49%;
        display: inline-block !important;
        border-radius: 5px;
        background: none;

        -webkit-transition: box-shadow 0.4s ease, transform 0.4s ease;
        -moz-transition: box-shadow 0.4s ease, transform 0.4s ease;
        -o-transition: box-shadow 0.4s ease, transform 0.4s ease;

        transition: box-shadow 0.4s ease, transform 0.4s ease;
    }

    .frienddiv:hover {
        background: var(--code-bg);
        transition: box-shadow 1s ease, transform 1s ease;
    }

    .dark .frienddiv:hover {
        background: var(--code-bg);
        transition: box-shadow 1s ease, transform 1s ease;
    }

    .frienddiv:hover .frienddivleft img {
        transition: 0.9s !important;
        transform: rotate(360deg) !important;
    }

    .frienddivleft {
        width: 92px;
        float: left;
        margin-right: -5px;
    }

    .frienddivright {
        margin-top: 18px;
        margin-right: 18px;
    }

    .friendname {
        text-overflow: ellipsis;
        font-size: 100%;
        margin-bottom: 5px;
        color: var(--primary);
    }

    .friendinfo {
        text-overflow: ellipsis;
        font-size: 70%;
        color: var(--primary);
    }

    @media screen and (max-width: 600px) {
        .friendinfo {
            display: none;
        }

        .frienddivleft {
            width: 84px;
            margin: auto;
        }

        .frienddivright {
            height: 100%;
            margin: auto;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .friendname {
            font-size: 18px;
        }
    }

    .site-friend-link-image {
        border-radius: 50% !important;
    }

    .site-friend:hover img {
        transition: 0.9s !important;
        transform: rotate(360deg) !important;
    }
</style>

{{- if .IsNamedParams -}}
<a target="_blank" href={{ .Get "url" }} title={{if .Get "title" }} {{.Get "title" }} {{else}} {{.Get "name" }} {{end}}
    class="friendurl">
    <div class="frienddiv">
        <div class="frienddivleft">
            <img class="myfriend" src={{ .Get "logo" }} />
        </div>
        <div class="frienddivright">
            <div class="friendname">{{- .Get "name" -}}</div>
            <div class="friendinfo">{{- .Get "word" -}}</div>
        </div>
    </div>
</a>
{{- end }}

{{- $headers := findRE "<h[1-6].*?>(.|\n])+?</h[1-6]>" .Content -}}
    {{- $has_headers := ge (len $headers) 1 -}}
    {{- if $has_headers -}}
    <aside id="toc-container" class="toc-container wide">
        <div class="toc">
            <details {{if (.Param "TocOpen" ) }} open{{ end }}>
                <summary accesskey="c" title="(Alt + C)">
                    <span class="details">{{- i18n "toc" | default "Table of Contents" }}</span>
                </summary>

                <div class="inner">
                    {{- $largest := 6 -}}
                    {{- range $headers -}}
                    {{- $headerLevel := index (findRE "[1-6]" . 1) 0 -}}
                    {{- $headerLevel := len (seq $headerLevel) -}}
                    {{- if lt $headerLevel $largest -}}
                    {{- $largest = $headerLevel -}}
                    {{- end -}}
                    {{- end -}}

                    {{- $firstHeaderLevel := len (seq (index (findRE "[1-6]" (index $headers 0) 1) 0)) -}}

                    {{- $.Scratch.Set "bareul" slice -}}
                    <ul>
                        {{- range seq (sub $firstHeaderLevel $largest) -}}
                        <ul>
                            {{- $.Scratch.Add "bareul" (sub (add $largest .) 1) -}}
                            {{- end -}}
                            {{- range $i, $header := $headers -}}
                            {{- $headerLevel := index (findRE "[1-6]" . 1) 0 -}}
                            {{- $headerLevel := len (seq $headerLevel) -}}

                            {{/* get id="xyz" */}}
                            {{- $id := index (findRE "(id=\"(.*?)\")" $header 9) 0 }}

                            {{- /* strip id="" to leave xyz, no way to get regex capturing groups in hugo */ -}}
                            {{- $cleanedID := replace (replace $id "id=\"" "") "\"" "" }}
                            {{- $header := replaceRE "<h[1-6].*?>((.|\n])+?)</h[1-6]>" "$1" $header -}}

                                {{- if ne $i 0 -}}
                                {{- $prevHeaderLevel := index (findRE "[1-6]" (index $headers (sub $i 1)) 1) 0 -}}
                                {{- $prevHeaderLevel := len (seq $prevHeaderLevel) -}}
                                {{- if gt $headerLevel $prevHeaderLevel -}}
                                {{- range seq $prevHeaderLevel (sub $headerLevel 1) -}}
                                <ul>
                                    {{/* the first should not be recorded */}}
                                    {{- if ne $prevHeaderLevel . -}}
                                    {{- $.Scratch.Add "bareul" . -}}
                                    {{- end -}}
                                    {{- end -}}
                                    {{- else -}}
                                    </li>
                                    {{- if lt $headerLevel $prevHeaderLevel -}}
                                    {{- range seq (sub $prevHeaderLevel 1) -1 $headerLevel -}}
                                    {{- if in ($.Scratch.Get "bareul") . -}}
                                </ul>
                                {{/* manually do pop item */}}
                                {{- $tmp := $.Scratch.Get "bareul" -}}
                                {{- $.Scratch.Delete "bareul" -}}
                                {{- $.Scratch.Set "bareul" slice}}
                                {{- range seq (sub (len $tmp) 1) -}}
                                {{- $.Scratch.Add "bareul" (index $tmp (sub . 1)) -}}
                                {{- end -}}
                                {{- else -}}
                        </ul>
                        </li>
                        {{- end -}}
                        {{- end -}}
                        {{- end -}}
                        {{- end }}
                        <li>
                            <a href="#{{- $cleanedID -}}" aria-label="{{- $header | plainify -}}">{{- $header | safeHTML
                                -}}</a>
                            {{- else }}
                        <li>
                            <a href="#{{- $cleanedID -}}" aria-label="{{- $header | plainify -}}">{{- $header | safeHTML
                                -}}</a>
                            {{- end -}}
                            {{- end -}}
                            <!-- {{- $firstHeaderLevel := len (seq (index (findRE "[1-6]" (index $headers 0) 1) 0)) -}} -->
                            {{- $firstHeaderLevel := $largest }}
                            {{- $lastHeaderLevel := len (seq (index (findRE "[1-6]" (index $headers (sub (len $headers)
                            1)) 1) 0)) }}
                        </li>
                        {{- range seq (sub $lastHeaderLevel $firstHeaderLevel) -}}
                        {{- if in ($.Scratch.Get "bareul") (add . $firstHeaderLevel) }}
                    </ul>
                    {{- else }}
                    </ul>
                    </li>
                    {{- end -}}
                    {{- end }}
                    </ul>
                </div>
            </details>
        </div>
    </aside>
    <script>
        let activeElement;
        let elements;
        window.addEventListener('DOMContentLoaded', function (event) {
            checkTocPosition();

            elements = document.querySelectorAll('h1[id],h2[id],h3[id],h4[id],h5[id],h6[id]');
            // Make the first header active
            activeElement = elements[0];
            const id = encodeURI(activeElement.getAttribute('id')).toLowerCase();
            document.querySelector(`.inner ul li a[href="#${id}"]`).classList.add('active');
        }, false);

        window.addEventListener('resize', function (event) {
            checkTocPosition();
        }, false);

        window.addEventListener('scroll', () => {
            // Check if there is an object in the top half of the screen or keep the last item active
            activeElement = Array.from(elements).find((element) => {
                if ((getOffsetTop(element) - window.pageYOffset) > 0 &&
                    (getOffsetTop(element) - window.pageYOffset) < window.innerHeight / 2) {
                    return element;
                }
            }) || activeElement

            elements.forEach(element => {
                const id = encodeURI(element.getAttribute('id')).toLowerCase();
                if (element === activeElement) {
                    document.querySelector(`.inner ul li a[href="#${id}"]`).classList.add('active');
                } else {
                    document.querySelector(`.inner ul li a[href="#${id}"]`).classList.remove('active');
                }
            })
        }, false);

        const main = parseInt(getComputedStyle(document.body).getPropertyValue('--article-width'), 10);
        const toc = parseInt(getComputedStyle(document.body).getPropertyValue('--toc-width'), 10);
        const gap = parseInt(getComputedStyle(document.body).getPropertyValue('--gap'), 10);

        function checkTocPosition() {
            const width = document.body.scrollWidth;

            if (width - main - (toc * 2) - (gap * 4) > 0) {
                document.getElementById("toc-container").classList.add("wide");
            } else {
                document.getElementById("toc-container").classList.remove("wide");
            }
        }

        function getOffsetTop(element) {
            if (!element.getClientRects().length) {
                return 0;
            }
            let rect = element.getBoundingClientRect();
            let win = element.ownerDocument.defaultView;
            return rect.top + win.pageYOffset;
        }
    </script>
    {{- end }}

:root {
    --article-width: 650px;
    --toc-width: 230px;
  }
  
  .toc {
    margin: 0 2px 40px 2px;
    border: 1px solid var(--border);
    background: var(--entry);
    border-radius: var(--radius);
    padding: 0.4em;
  }
  
  .toc-container.wide {
    position: absolute;
    height: 100%;
    border-right: 1px solid var(--border);
    left: calc((var(--toc-width) * 0.9 + var(--gap)) * -1);
    top: calc(var(--gap) * 2);
    width: var(--toc-width);
  }
  
  .wide .toc {
    position: sticky;
    top: var(--gap);
    border: unset;
    background: unset;
    border-radius: unset;
    width: 100%;
    margin: 0 2px 40px 2px;
  }
  
  .toc details summary {
    cursor: zoom-in;
    margin-inline-start: 20px;
    padding: 12px 0;
  }
  
  .toc details[open] summary {
    font-weight: 500;
  }
  
  .toc-container.wide .toc .inner {
    margin: 0;
  }
  
  .toc .active {
    font-size: 110%;
    font-weight: 600;
    color: #614a85;
    text-decoration: underline;
  }
  
  .toc ul {
    list-style-type: circle;
  }
  
  .toc .inner {
    margin: 0 0 0 20px;
    padding: 0px 15px 15px 20px;
    font-size: 16px;
  
    max-height: 83vh;
    overflow-y: auto;
  }
  
  .toc .inner::-webkit-scrollbar-thumb {
    background: var(--border);
    border: 7px solid var(--theme);
    border-radius: var(--radius);
  }
  
  .toc li ul {
    margin-inline-start: calc(var(--gap) * 0.5);
    list-style-type: none;
  }
  
  .toc li {
    list-style: none;
    font-size: 0.95rem;
    padding-bottom: 5px;
  }
  
  .toc li a:hover {
    color: var(--secondary);
  }

<table
  {{- range $k, $v := .Attributes }}
    {{- if $v }}
      {{- printf " %s=%q" $k $v | safeHTMLAttr }}
    {{- end }}
  {{- end }} class="custom_table_style">
  <thead>
    {{- range .THead }}
      <tr>
        {{- range . }}
          <th
            {{- with .Alignment }}
              {{- printf " style=%q" (printf "text-align: %s" .) | safeHTMLAttr }}
            {{- end -}}
          >
            {{- .Text -}}
          </th>
        {{- end }}
      </tr>
    {{- end }}
  </thead>
  <tbody>
    {{- range .TBody }}
      <tr>
        {{- range . }}
          <td
            {{- with .Alignment }}
              {{- printf " style=%q" (printf "text-align: %s" .) | safeHTMLAttr }}
            {{- end -}}
          >
            {{- .Text -}}
          </td>
        {{- end }}
      </tr>
    {{- end }}
  </tbody>
</table>

<style>
.post-content table:not(.lntable .highlighttable,.highlight table,.gist .highlight){
  display: table;
  background-color: transparent;
  border-radius: 6px;
  border: 1px solid black;
  outline: 2px solid black;
  overflow-x: auto;
  table-layout: fixed;
  word-break: break-all;
  font-size: 12px;
}

.dark .post-content table:not(.lntable .highlighttable,.highlight table,.gist .highlight){
  outline: 2px solid rgb(54, 156, 95);
}

.post-content table:not(.lntable .highlighttable,.highlight table,.gist .highlight) thead{
  background-color: #545d7b8a;
}

.dark .post-content table:not(.lntable .highlighttable,.highlight table,.gist .highlight) thead{
  background-color: rgb(62, 62, 62);
}

.post-content table:not(.lntable .highlighttable,.highlight table,.gist .highlight) td,
.post-content table:not(.lntable .highlighttable,.highlight table,.gist .highlight) tr,
.post-content table:not(.lntable .highlighttable,.highlight table,.gist .highlight) th{
  border-bottom: unset;
  border: 1px solid black,
}

.post-content table:not(.lntable .highlighttable,.highlight table,.gist .highlight) td:hover,
.post-content table:not(.lntable .highlighttable,.highlight table,.gist .highlight) td:focus{
  background-color: rgba(67, 166, 86, 0.8);
}

.dark .post-content table:not(.lntable .highlighttable,.highlight table,.gist .highlight) td:hover,
.dark .post-content table:not(.lntable .highlighttable,.highlight table,.gist .highlight) td:focus{
  background-color: rgb(0, 0, 0, 0.7);
}
</style>

---
title: '{{ replace .File.ContentBaseName "-" " " | title }}' # Title of current post
description: ''  # Subtitle of the current post
date: '{{ .Date }}' # Date created
author: "Rickey" # author
slug: '' Article Url
showToc: true # Show Toc
TocOpen: true # Expand the catalog automatically
enableCopyright: true # Show copyright information
comments: true # Show comments
weight: null # If top, then the corresponding number
draft: false # If or not it is a draft

Categories:
  - Example
  
Tags:
  - Example

keywords:
    - keywords1
    - keywords2
    - keywords3

cover:
  # Alternative text for images, for accessibility and for displaying text when an image fails to load
  alt: ''
  # Caption text for images, usually used to describe the content of the image
  caption: '' 
  # Path to the cover image, either a relative path or an absolute URL, to specify the actual cover image
  image: '' 
  # Indicates if the image path is relative. If true, the path is considered relative to the current content file; if false, it is considered absolute.
  relative: false 
---