Featured image of post 博客主题翻修记录
技术

博客主题翻修记录

折腾永无止境

虽然好几年没写博客，但是看到有越来越多的人都采用了 Stack 这款主题，忍不住手痒也想来折腾一下。不得不说大体上我还是很喜欢这款主题的，简约但又不失细节，下面就流水账式地记录一下我所做的修改。

CSS 配置文件

为了方便维护，我把所有额外的 CSS 配置存在了 assets/scss/custom 目录下，然后在 assets/scss/custom.scss 中填写如下内容：

assets/scss/custom.scss
@import "custom/fonts.scss";
@import "custom/selection.scss";
@import "custom/widgets/cloud.scss";
@import "custom/article/footnotes.scss";
@import "custom/article/footer.scss";
@import "custom/article/code.scss";
@import "custom/article/image.scss";
@import "custom/article/details.scss";
@import "custom/article/abbr.scss";
@import "custom/article/toc.scss";
@import "custom/article/related.scss";
@import "custom/twikoo.scss";
@import "custom/notice.scss";

文章样式

文本选中样式

在 Linux 上，默认的选中框是浏览器默认蓝，很不好看，我做了如下代码修改：

assets/scss/custom/selection.scss
[data-scheme="light"] {
  ::selection {
    background-color: #6d8195;
    color: white;
  }
}
[data-scheme="dark"] {
  ::selection {
      background-color: rgba($color: #6d8195, $alpha: 0.8);
      color: black;
  }
}

使用网络字体

个人而言还是更喜欢衬线字体（Serif），但这肯定是离不开网络字体的使用的，我做了如下修改：

assets/scss/custom/fonts.scss
:root {
  --sys-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Droid Sans", "Helvetica Neue";
  --zh-sans-font-family: "Noto Sans SC", "Hiragino Serif GB", "Droid Serif Fallback", "Microsoft YaHei";
  --zh-font-family: var(--zh-sans-font-family);
  --base-font-family: "Noto Sans SC", var(--sys-font-family), var(--zh-font-family), serif;
  @include respond(md) {
    --article-font-family: "Noto Serif SC", var(--sys-font-family), var(--zh-font-family), serif;
  }
  --code-font-family: "Jetbrains Mono", "Noto Sans SC", Monaco, Consolas, "Courier New", var(--zh-font-family), monospace;
  font-variant-ligatures: none;
}
layouts/partials/footer/components/custom-font.html
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC&family=Noto+Serif+SC&display=swap" rel="stylesheet">

代码样式

上面显示的这些配置文件其实是直接读取源文件的，为了做到这一点，我实现了一个名为 renderFile 的 Shortcode：

layouts/shortcodes/renderFile.html
{{- $path := .Get "path" -}}
{{- $lang := strings.TrimLeft "." (.Get "lang" | default (path.Ext $path)) -}}
{{- $title := .Get "title" | default $path -}}
{{- $options := .Get "options" | default "" -}}
{{- $content := readFile $path -}}
{{- $fold := (.Get "fold" | default .Page.Params.defaults.codeblock.fold) -}}
{{- if $fold -}}
<details class="codeblock">
    <summary class="codeblock-header">{{- $title -}}</summary>
    {{ if transform.CanHighlight $lang }}
        {{- highlight $content $lang $options -}}
    {{ else }}
        <pre><code>{{ .content }}</code></pre>
    {{ end }}
</details>
{{- else -}}
<div class="codeblock">
    <div class="codeblock-header">{{- $title -}}</div>
    {{ if transform.CanHighlight $lang }}
        {{- highlight $content $lang $options -}}
    {{ else }}
        <pre><code>{{ .content }}</code></pre>
    {{ end }}
</div>
{{- end -}}

用法是：

{{< renderFile path="文件路径" lang="文件语言" title="标题" options="highlight 选项" fold=是否可折叠 >}}

其中：

  • path: 需要被渲染的文件路径
  • lang: 可选项，被渲染的文件语言，如果不提供，那么会用后缀名作为代码语言的推测
  • title: 可选项，代码块的标题，如果不提供，那么会用文件路径充当标题
  • options: 可选项，一些其他供给 highlight 命令使用的选项，比如可以用 hl_lines 指定高亮行，可以参考 Hugo 文档
  • fold: 可选项，true 或者 false，如果不提供，默认值将会采用文章 FrontMatter 中的 defaults/codeblock/fold

如果不是用 renderFile 显示的文件，为了保证一致性，我同时添加了如下文件：

layouts/_default/_markup/render-codeblock.html
{{- $fold := and (.Attributes.title) (.Attributes.fold | default .Page.Params.defaults.codeblock.fold) -}}
{{- if $fold -}}
<details class="codeblock">
    <summary class="codeblock-header">{{ .Attributes.title }}</summary>
    {{ if transform.CanHighlight .Type }}
        {{ highlight .Inner .Type .Options }}
    {{ else }}
        <pre><code>{{ .Inner }}</code></pre>
    {{ end }}
</details>
{{- else -}}
<div class="codeblock">
    <div class="codeblock-header">{{ .Attributes.title }}</div>
    {{ if transform.CanHighlight .Type }}
        {{ highlight .Inner .Type .Options }}
    {{ else }}
        <pre><code>{{ .Inner }}</code></pre>
    {{ end }}
</div>
{{- end -}}

因此可以通过类似于如下方式来附加标题或者高亮某些行：

```python {title="hello_world.py",linenos=true,hl_lines="2-3 5",fold=false}
print("Hello World")
print("这一行会被高亮")
print("这一行会被高亮")
print("Hello World")
print("这一行会被高亮")
```

效果：

hello_world.py
1
2
3
4
5

print("Hello World")
print("这一行会被高亮")
print("这一行会被高亮")
print("Hello World")
print("这一行会被高亮")

当然我还对代码块样式做了一些其他修改（包括行内代码块），具体 CSS 文件配置如下：

assets/scss/custom/article/code.scss
// 调整行内代码块字体大小和 padding
.article-page .main-article .article-content code {
  font-size: 0.8em;
  padding: 3px 5px;
}

.article-page .main-article .article-content .codeblock {
  // 设置行间代码块样式中内部各元素的排版
  padding: 0;
  .codeblock-header {
    min-height: var(--card-padding);
    padding: 0.5em var(--card-padding);
    user-select: all;
  }
  &::after {
    content: "";
    display: block;
    min-height: var(--card-padding);
  }

  pre > code {
    display: table;
    min-width: 100%;
    font-size: 1.3rem;
    padding-left: var(--card-padding);
    padding-right: var(--card-padding);
    .line {
      width: auto;
      display: block;
      margin-left: calc(var(--card-padding) * -1);
      margin-right: calc(var(--card-padding) * -1);
      padding-left: var(--card-padding);
      padding-right: var(--card-padding);
    }
  }

  // 设置行间代码块和其他元素的间距
  margin-block-start: 1em;
  margin-block-end: 1em;

  // 设置行间代码块样式中各元素的字体样式和颜色
  font-family: var(--code-font-family);

  pre {
    line-height: 1.65;
  }
  .codeblock-header {
    font-size: 1.3rem;
    line-height: 1.4;
    word-break: break-word;
    color: var(--card-text-color-tertiary);
  }

  // 调整对应有行号的情况
  .chroma > .lntable {
    & > tbody > tr > .lntd:first-child .lnt {
      padding-left: var(--card-padding);
    }
    & > tbody > tr > .lntd:last-child {
      flex-grow: 1;
      .cl {
        padding-left: 0;
      }
    }
  }
}

// 设置可折叠代码样式
.article-page .main-article .article-content details.codeblock {
  summary.codeblock-header {
    cursor: pointer;
    &::marker, &::-webkit-details-marker {
      content: "";
      display: none;
    }
    &::before {
      font-weight: bold;
    }
    &:hover::before {
      color: var(--accent-color);
    }
  }
  &:not([open]) summary::before {
    content: "[展开代码] ";
  }
  &[open] summary::before {
    content: "[收起代码] ";
  }
  &:not([open])::after {
    min-height: 0;
  }
}

// 设置高亮行颜色
[data-scheme="light"] .chroma .hl {
  &, .line {
    background-color: #e9edf9;
  }
}
[data-scheme="dark"] .chroma .hl {
  &, .line {
    background-color: #333742;
  }
  .lnt {
    color: unset;
  }
}
git diff themes/stack/assets/ts/main.ts (edited)
--- a/themes/stack/assets/ts/main.ts
+++ b/themes/stack/assets/ts/main.ts
@@ -29,17 +29,17 @@ let Stack = {
         /**
          * Add copy button to code block
         */
-        const highlights = document.querySelectorAll('.article-content .codeblock');
+        const headers = document.querySelectorAll('.article-content .codeblock-header');
         const copyText = `Copy`,
             copiedText = `Copied!`;
 
-        highlights.forEach(highlight => {
+        headers.forEach(header => {
             const copyButton = document.createElement('button');
             copyButton.innerHTML = copyText;
             copyButton.classList.add('copyCodeButton');
-            highlight.appendChild(copyButton);
git diff themes/stack/assets/scss/partials/layout/article.scss (edited)
--- a/themes/stack/assets/scss/partials/layout/article.scss
+++ b/themes/stack/assets/scss/partials/layout/article.scss
@@ -307,7 +307,7 @@
         }
     }
 
-    .highlight {
+    .codeblock {
         background-color: var(--pre-background-color);
         padding: var(--card-padding);
         position: relative;
@@ -411,8 +411,8 @@
     /// Negative margins
     blockquote,
     figure,
-    .highlight,
-    pre,
+    .codeblock,
+    // pre,
     .gallery,
     .video-wrapper,
     .table-wrapper,

链接样式

外部链接显示图标是参考了这里，但我还更改了些外部链接在鼠标悬浮时的动画，原版的显得有些冗余了，具体修改的代码清单如下：

git diff themes/stack/assets/scss/general.scss (edited)
--- a/themes/stack/assets/scss/general.scss
+++ b/themes/stack/assets/scss/general.scss
@@ -11,7 +11,7 @@ a {
         transition: all 0.3s ease;
 
         &:hover {
-            box-shadow: 0px calc(-1rem * var(--article-line-height)) 0px rgba(var(--link-background-color), var(--link-background-opacity-hover)) inset;
+            box-shadow: unset;
         }
     }
 }
layouts/_default/_markup/render-link.html
<a class="link" href="{{ .Destination | safeURL }}" {{ with .Title}} title="{{ . }}"
{{ end }}{{ if strings.HasPrefix .Destination "http" }} target="_blank" rel="noopener"
{{ end }}>{{- .Text | safeHTML -}}{{- if strings.HasPrefix .Destination "http" -}}
<span style="white-space: nowrap;"><svg width=".7em"
    height=".7em" viewBox="0 0 21 21" xmlns="http://www.w3.org/2000/svg">
    <path d="m13 3l3.293 3.293l-7 7l1.414 1.414l7-7L21 11V3z" fill="currentColor" />
    <path d="M19 19H5V5h7l-2-2H5c-1.103 0-2 .897-2 2v14c0 1.103.897 2 2 2h14c1.103 0 2-.897 2-2v-5l-2-2v7z"
        fill="currentColor">
</svg></span>
{{- end -}}</a>

底部版权声明和最后修改日期样式

因为上面更改的显示外部链接图标是针对这里有些 Bug，顺带修补一下间距，代码清单如下：

assets/scss/custom/article/footer.scss
.article-page .main-article .article-footer  {
    section {
      &:not(:first-child) {
        margin-top: 1.2em;
      }
      &.article-tags {
        margin-bottom: 3em;
      }
      p {
        margin-block-start: 0em;
        margin-block-end: 0em;
      }
      a svg {
        width: inherit;
        height: inherit;
      }
    }
    .article-copyright {
      color: var(--card-text-color-secondary);
      a.link {
        color: var(--accent-color-darker);
      }
    }
    .article-copyright,.article-lastmod {
      line-height: 1.4;
      & > svg {
        min-height: 20px;
        min-width: 20px;
      }
    }
  }

脚注样式

同样脚注字体确实太大，于是修改了如下 CSS 代码：

assets/scss/custom/article/footnotes.scss
.article-page .main-article .article-content .footnotes {
  font-size: 1.4rem;
  ol {
    padding-inline-start: 2.5em;
  }
  p {
    margin-block-start: 0em;
    margin-block-end: 0em;
  }
}

数学公式

Hugo 因为某些原因会把 $\LaTeX$ 公式中的下划线 _ 错误解析理解成 Markdown 中的斜体强调，我的解决办法是利用 Hugo 的 Markdown 渲染引擎会直接忽略代码块语法这一点来输入 $\LaTeX$ 公式，然后再在 JavaScript 中处理因此而额外引入的 <code> 标签，这个方法的唯一缺点就是输入额外的 ` 还是很烦。期待之后等 golden-mathjax 加入 Hugo 后有更好的选择。具体修改代码如下（见高亮行）：

layouts/partials/article/components/math.html
{{- partial "helper/external" (dict "Context" . "Namespace" "KaTeX") -}}
<script>
window.addEventListener("DOMContentLoaded", () => {
  document.querySelectorAll(".article-content code").forEach(function(x){
    if (x.innerText[0] === '$' && x.innerText[x.innerText.length - 1] === '$') {
      x.parentElement.replaceChild(document.createTextNode(x.innerText), x);
    }
  });
  renderMathInElement(document.querySelector(`.article-content`), {
      delimiters: [
          { left: "$$", right: "$$", display: true },
          { left: "$", right: "$", display: false },
          { left: "\\(", right: "\\)", display: false },
          { left: "\\[", right: "\\]", display: true }
      ],
      ignoredClasses: ["gist"]
  });
});
</script>

例如输入 `$\sum_{i = 1}^n a_i = a_1 + \dots a_n$` 会得到一个行内公式：$\sum_{i = 1}^n a_i = a_1 + \dots a_n$，而 `$$\sum_{i = 1}^n a_i = a_1 + \dots a_n$$` 则可以产生行间公式：

$$\sum_{i = 1}^n a_i = a_1 + \dots a_n$$

其他

分类云和标签云样式

参考了这篇博文和这篇博文，但稍微更改了一下配置，具体代码如下：

themes/stack/layouts/partials/widget/categories.html
{{- $context := .Context -}}
{{- $limit := default 10 .Params.limit -}}
<section class="widget categoriesCloud">
    <div class="widget-icon">
        {{ partial "helper/icon" "categories" }}
    </div>
    <h2 class="widget-title section-title">{{ T "widget.categoriesCloud.title" }}</h2>

    <div class="categoriesCloud-categories">
        {{ range first $limit $context.Site.Taxonomies.categories.ByCount }}
            <a href="{{ .Page.RelPermalink }}" class="font_size_{{ .Count }}"
               style="border-left-color: {{ .Page.Params.style.background }};">
                {{ .Page.Title }}<span class="category-count">{{ .Count }}</span>
            </a>
        {{ end }}
    </div>
</section>
assets/scss/custom/widgets/cloud.scss
:root {
  --tag-border-radius: 1.5em;
  --button-border-radius: 5px;
  --code-border-radius: 3px;
}

.categoriesCloud .categoriesCloud-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;

  .category-count {
    margin-left: 7px;
    color: var(--card-text-color-secondary);
  }
  a {
    flex: 0 1 calc(5em + 90px);
    border-left: 15px solid;
    background: var(--card-background);
    box-shadow: var(--shadow-l1);
    border-radius: var(--button-border-radius);
    padding: 15px 20px;
    color: var(--card-text-color-main);
    font-size: 1.5rem;
    transition: box-shadow 0.3s ease;

    &:hover {
        box-shadow: var(--shadow-l2);
    }
  }
}

.tagCloud-tags .tag-count {
  margin-left: 7px;
  color: var(--card-text-color-secondary);
}

// To recover the other affected stuffs here
.article-category a, .article-content .copyCodeButton {
  border-radius: var(--button-border-radius);
}

.article-content code {
  border-radius: var(--code-border-radius);
}

twikoo 评论样式

暗色模式下 twikoo 默认的 CSS 样式有些问题，只需添加如下 CSS 文件就可以修补这些 bug：

assets/scss/custom/twikoo.scss
.twikoo {
    font-family: var(--zh-sans-font-family);
}
.twikoo .tk-avatar {
    &, .tk-avatar-img {
        height: 3.2rem;
        width: 3.2rem;
    }
}
.twikoo .tk-comment .tk-submit .tk-avatar {
    &, .tk-avatar-img {
        height: 2.5rem;
        width: 2.5rem;
    }
}
.twikoo .tk-replies .tk-avatar {
    &, .tk-avatar-img {
        height: 2.5rem;
        width: 2.5rem;
    }
}
.twikoo .tk-row.actions {
    margin-left: 4.2rem;
}
.twikoo .el-textarea__inner {
    min-height: 150px !important;
}

.twikoo .tk-main .tk-content  {
    line-height: 1.4;
}

短代码

除此之外，我还参考了这篇博文 引入了如下短代码。

blockquote

更改的代码清单如下：

layouts/shortcodes/blockquote.html
<!-- reset scratch variables at the start -->
{{ $.Scratch.Set "bl_author" false }}
{{ $.Scratch.Set "bl_source" false }}
{{ $.Scratch.Set "bl_link" false }}
{{ $.Scratch.Set "bl_title" false }}

{{ if .IsNamedParams }}
  {{ $.Scratch.Set "bl_author" (.Get "author") }}
  {{ $.Scratch.Set "bl_source" (.Get "source") }}
  {{ $.Scratch.Set "bl_link" (.Get "link") }}
  {{ $.Scratch.Set "bl_title" (.Get "title") }}
{{ else }}
  <!-- for the positional version if any -->
{{ end }}

<!-- if title is not set explicitly then we need to beautify the link
     if length of link is more than 32 chars, we will cut it off by 32 and
     then drop everything after the last / if any and put it in into title -->

{{ with $.Scratch.Get "bl_title" }}
  <!-- do nothing -->
{{ else }}
  {{ with $.Scratch.Get "bl_link" }}    <!-- if link is given -->
    {{ range last 1 (split ($.Scratch.Get "bl_link" ) "://") }}  <!-- split by :// and then only take the items after it to remove protocol:// -->
      {{ $.Scratch.Set "title_without_protocol" . }}
    {{ end }}
    {{ range last 1 (split ($.Scratch.Get "title_without_protocol" ) "www.")  }} <!-- also remove the www. at the start if any. we are using a second split because all URLS may not start with it -->
      {{ $.Scratch.Set "title_without_protocol" . }}
    {{ end }}
    {{ $.Scratch.Set "bl_title" ($.Scratch.Get "title_without_protocol") }}

    <!-- if link is longer than 32 bytes we should trim it -->
    {{ if (gt (len ($.Scratch.Get "title_without_protocol") ) 32) }}
      {{ $title := (slicestr ($.Scratch.Get "title_without_protocol") 0 32) }}   <!-- get the first 32 characters of title_without_protocol -->
      {{ $split_by_fw_slash := split $title "/" }}   <!-- now split on / because we want to stop after the last forward slash -->
      {{ $count := (sub (len $split_by_fw_slash) 1) }}   <!-- we want everything but the last part so we adjust the count accordingly -->

      {{ $.Scratch.Set "tempstring" "" }}   <!-- temp variable to hold the concatinated string -->
      {{ range first $count $split_by_fw_slash  }}  <!-- loop through all parts except last and concat them (add / between halves) -->
        {{ $.Scratch.Set "tempstring" ( . | printf "%s%s/" ($.Scratch.Get "tempstring") | printf "%s" ) }}
      {{ end }}
      {{ $.Scratch.Set "bl_title" ( printf "%s..." ($.Scratch.Get "tempstring") | printf "%s" ) }}
    {{ end }}
  {{ end }}
{{ end }}

<blockquote>
  <p>{{ .Inner | markdownify }}</p>
  <footer style="text-align:right">
    <p>
    <strong>{{ with $.Scratch.Get "bl_author" }}{{ . | markdownify }}{{ end }}</strong>
    {{ with $.Scratch.Get "bl_source" }}
      <cite>{{ . }}</cite>
    {{ else }}
      {{ with $.Scratch.Get "bl_link" }}
        <cite>
          <a href="{{ . }}" title="{{ . }}" rel="noopener noreferrer">{{ $.Scratch.Get "bl_title" }}</a> <!-- can't have new lines here -->
        </cite>
      {{ else }}
        {{ with $.Scratch.Get "bl_title" }}
          <cite>
            {{ $.Scratch.Get "bl_title" }}</a>
          </cite>
        {{ end }}
      {{ end }}
    {{ end }}
    </p>
  </footer>
</blockquote>

效果如下：

『偽善者』と罵られる者こそが、『英雄』になる資格がある。

——《ダンジョンに出会いを求めるのは間違っているだろうか》

notice

更改的代码清单如下：

layouts/shortcodes/notice.html
{{- $noticeType := .Get 0 -}}
{{- $title := .Get 1 | default "提示" -}}

{{- $raw := (markdownify .Inner | chomp) -}}

{{- $block := findRE "(?is)^<(?:address|article|aside|blockquote|canvas|dd|div|dl|dt|fieldset|figcaption|figure|footer|form|h(?:1|2|3|4|5|6)|header|hgroup|hr|li|main|nav|noscript|ol|output|p|pre|section|table|tfoot|ul|video)\\b" $raw 1 -}}

{{ $icon := (replace (index $.Site.Data.notice $noticeType) "icon" "icon notice-icon") }}
<div class="notice {{ $noticeType }}" {{ if len .Params | eq 2 }} id="{{ .Get 1 }}" {{ end }}>
    <div class="notice-title">{{ $icon | safeHTML }}{{ $title | markdownify }}</div>
    <div class="notice-content">{{ $raw }}</div>
</div>
assets/scss/custom/notice.scss
.notice {
    position:relative;
    padding: var(--card-padding) calc(var(--card-padding) - 5px) var(--card-padding);
    margin-bottom: 1em;
    font-size: 1.6rem;
    margin-left: calc(var(--card-padding) * -1);
    margin-right: calc(var(--card-padding) * -1);
    .notice-title {
        display: flex;
        align-items: center;
        margin-block-end: 1em;
        font-family: var(--zh-sans-font-family);
        .notice-icon {
            width: 1.2em;
            height: 1.2em;
            display: block;
        }
        svg {
            margin-inline-end: 1em;
        }
    }
    &.notice-error {
        background: hsla(0, 65%, 65%, 0.15);
        border-left: 5px solid hsl(0, 65%, 65%);
        .notice-title svg {
            color: hsl(0, 65%, 65%);
        }
    }
    &.notice-info {
        background: hsla(200, 65%, 65%, 0.15);
        border-left: 5px solid hsl(200, 65%, 65%);
        .notice-title svg {
            color: hsl(200, 65%, 65%);
        }
    }
    &.notice-warning {
        background: hsla(30, 80%, 70%, 0.15);
        border-left: 5px solid hsl(30, 80%, 70%);
        .notice-title svg {
            color: hsl(30, 80%, 70%);
        }
    }
    &.notice-tip {
        background: hsla(140, 65%, 65%, 0.15);
        border-left: 5px solid hsl(140, 65%, 65%);
        .notice-title svg {
            color: hsl(140, 65%, 65%);
        }
    }
  }
  
  [data-theme="dark"] .notice {
    &.notice-error {
        background: hsla(0, 25%, 35%, 0.15);
        border-left: 5px solid hsl(0, 25%, 35%);
        .notice-title svg {
            color: hsl(0, 25%, 35%);
        }
    }
    &.notice-info {
        background: hsla(200, 25%, 35%, 0.15);
        border-left: 5px solid hsl(200, 25%, 35%);
        .notice-title svg {
            color: hsl(200, 25%, 35%);
        }
    }
    &.notice-warning {
        background: hsla(30, 25%, 35%, 0.15);
        border-left: 5px solid hsl(30, 25%, 35%);
        .notice-title svg {
            color: hsl(30, 25%, 35%);
        }
    }
    &.notice-tip {
        background: hsla(140, 25%, 35%, 0.15);
        border-left: 5px solid hsl(140, 25%, 35%);
        .notice-title svg {
            color: hsl(140, 25%, 35%);
        }
    }
  }
data/notice.yaml
notice-error: '<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 576 512" fill="hsl(0, 65%, 65%)"><path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zM124 296c-6.6.0-12-5.4-12-12v-56c0-6.6 5.4-12 12-12h264c6.6.0 12 5.4 12 12v56c0 6.6-5.4 12-12 12H124z"/></svg>'
notice-info: '<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 512 512" fill="hsl(200, 65%, 65%)"><path d="M256 8a248 248 0 100 496 248 248 0 000-496zm0 110a42 42 0 110 84 42 42 0 010-84zm56 254c0 7-5 12-12 12h-88c-7 0-12-5-12-12v-24c0-7 5-12 12-12h12v-64h-12c-7 0-12-5-12-12v-24c0-7 5-12 12-12h64c7 0 12 5 12 12v100h12c7 0 12 5 12 12v24z"/></svg>'
notice-warning: '<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 512 512" fill="hsl(30, 80%, 70%)"><path d="M504 256a248 248 0 11-496 0 248 248 0 01496 0zm-248 50a46 46 0 100 92 46 46 0 000-92zm-44-165l8 136c0 6 5 11 12 11h48c7 0 12-5 12-11l8-136c0-7-5-13-12-13h-64c-7 0-12 6-12 13z"/></svg>'
notice-tip: '<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 512 512" fill="hsl(140, 65%, 65%)"><path d="M504 256a248 248 0 11-496 0 248 248 0 01496 0zM227 387l184-184c7-6 7-16 0-22l-22-23c-7-6-17-6-23 0L216 308l-70-70c-6-6-16-6-23 0l-22 23c-7 6-7 16 0 22l104 104c6 7 16 7 22 0z"/></svg>'

效果如下：

提示
notice-error 块
提示
notice-warning 块
提示
notice-info 块
提示
notice-tip 块

abbr

更改的代码清单如下：

layouts/shortcodes/abbr.html
<abbr title="{{ .Get "title" }}">{{ .Get "text" }}</abbr>
assets/scss/custom/article/abbr.scss
.article-page .main-article .article-content abbr {
    cursor: help;
    &::after{
        display: none;
        content: attr(title);
        font-size: 1.2rem;
        position: absolute;
        color: var(--pre-text-color);
        background: var(--pre-background-color);
        padding: 4px 10px;
        transform: translateX(-50%);
        left: 50%;
        z-index: 2147483647;
        top: calc(100% + 10px);
        border-radius: 5px;
        border-style: solid;
        border-width: 1px;
        border-color: rgb(195, 195, 195);
        box-shadow: 0px 0px 5px 0px #b9b9b9;
        width: max-content;
        max-width: 100%;
    }
    position: relative;
    @media (pointer:none), (pointer:coarse) {
        &:hover::after {
            display: inline-block;
        }
    }
}

[data-scheme="dark"] {
    .article-page .main-article .article-content abbr::after {
        box-shadow: 0px 0px 10px 0px #6a6a6a;
        border: none;
    }
}

效果如下：

移动鼠标到我身上或（如果是移动端）点击我

参考

  1. Hugo Stack主题装修笔记
  2. Hugo Stack主题装修笔记Part 2
  3. Render LaTeX math expressions in Hugo with MathJax 3
  4. Syntax highlighting | Hugo
  5. Markdown render hooks | Hugo
  6. 给 Hugo 加一点好玩的功能
© 2020 - 2024 孤独代码
本站使用 Hugo 构建
主题 Stack 由 Jimmy 设计