博客装修日记

外链后显示图标

在layouts/_default/_markup/render-link.html里{{ .Text | safeHTML }}之后增加如下代码

1
2
3
4
5
6
7
8


{{ 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 }}

总字数统计

在layouts/partials/footer/footer.html里增加以下代码

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


<!-- Add total page and word count time -->
<section class="totalcount">
    {{$totalWords := 0}} {{/* 初始化 $totalWords 为 0 */}}
    {{ range (where .Site.Pages "Kind" "page" )}}
    {{$totalWords = add $totalWords .WordCount}} {{/* 使用 add 函数 */}}
    {{ end }}

    {{ $tenThousands := div $totalWords 10000 }}
    {{ $remainingThousands := mod (div $totalWords 1000) 10 }}

    发表了{{ len (where .Site.RegularPages "Section" "post") }}篇文章 ·
    总计{{ $tenThousands }}万{{ $remainingThousands }}千字
    <br>
</section>

在assets/scss/partials/footer.scss里修改风格：

1
2
3
4
5


.totalcount {
    color: var(--card-text-color-secondary);
    font-weight: normal;
    margin-bottom: 5px;
    }

代码块 MAC 风

在 assets/scss/partials/layout/article.scss，找到 .highlight 部分并修改成如下：

1
2
3
4
5
6
7
8


.highlight {
    background-color: var(--pre-background-color);
    padding: var(--card-padding);
    position: relative;
    border-radius: 10px;
    max-width: 100% !important;
    margin: 0 !important;
    box-shadow: var(--shadow-l1) !important;

创建 static/img/code-header.svg 文件：

1
2
3
4
5


<svg xmlns="http://www.w3.org/2000/svg" version="1.1"  x="0px" y="0px" width="450px" height="130px">
    <ellipse cx="65" cy="65" rx="50" ry="52" stroke="rgb(220,60,54)" stroke-width="2" fill="rgb(237,108,96)"/>
    <ellipse cx="225" cy="65" rx="50" ry="52"  stroke="rgb(218,151,33)" stroke-width="2" fill="rgb(247,193,81)"/>
    <ellipse cx="385" cy="65" rx="50" ry="52"  stroke="rgb(27,161,37)" stroke-width="2" fill="rgb(100,200,86)"/>
</svg>

最后在 assets/scss/custom.scss 添加代码块的样式：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


// 为代码块顶部添加 macos 样式
.article-content {
    .highlight:before {
      content: "";
      display: block;
      background: url(/img/code-header.svg);
      height: 25px;
      width: 100%;
      background-size: 52px;
      background-repeat: no-repeat;
      margin-top: -10px;
      margin-bottom: 0;
    }
  }

增加返回顶部按钮

在layouts/partials/footer/components/script.html里增加如下代码

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31


<!-- Add back to top button -->
<script>
    function backToTop() {
      document.documentElement.scrollIntoView({
        behavior: 'smooth',
      })
    }
  
    window.onload = function () {
      let scrollTop =
        this.document.documentElement.scrollTop || this.document.body.scrollTop
      let totopBtn = this.document.getElementById('back-to-top')
      if (scrollTop > 0) {
        totopBtn.style.display = 'inline'
      } else {
        totopBtn.style.display = 'none'
      }
    }
  
    window.onscroll = function () {
      let scrollTop =
        this.document.documentElement.scrollTop || this.document.body.scrollTop
      let totopBtn = this.document.getElementById('back-to-top')
      if (scrollTop < 200) {
        totopBtn.style.display = 'none'
      } else {
        totopBtn.style.display = 'inline'
        totopBtn.addEventListener('click', backToTop, false)
      }
    }
  </script>

在layouts/partials/footer/custom.html里增加如下代码。改了一下按钮的颜色（background-color 和 border-color)，跟主题色系统一。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79


<!-- Add back to top button -->
<a href="#" id="back-to-top" title="返回顶部"></a>

<!--返回顶部 CSS -->
<style>
  #back-to-top {
    display: none;
    position: fixed;
    bottom: 5px;
    right: 15px;
    width: 40px; /* Reduced size */
    height: 40px; /* Reduced size */
    border-radius: 50%; /* Circular button for modern look */
    background-color: var(--body-background);
    box-shadow: var(--shadow-l2);
    font-size: 20px; /* Adjusted for smaller button */
    text-align: center;
    line-height: 38px; /* Center align arrow */
    cursor: pointer;
    transition:
      transform 0.3s ease,
      background-color 0.3s ease; /* Added smooth interaction */
  }

  #back-to-top:before {
    content: "";
    display: inline-block;
    position: relative;
    transform: rotate(135deg);
    height: 8px; /* Reduced size */
    width: 8px; /* Reduced size */
    border-width: 0 0 2px 2px;
    border-color: var(--back-to-top-color);
    border-style: solid;
  }

  #back-to-top:hover {
    transform: scale(1.1); /* Slightly larger on hover */
    background-color: var(--accent-background); /* Optional hover effect */
  }

  #back-to-top:hover:before {
    border-color: var(--accent-color); /* Change arrow color on hover */
  }

  /* Responsive styles */
  @media screen and (max-width: 768px) {
    #back-to-top {
      bottom: 5px;
      right: var(--container-padding);
      width: 30px; /* Slightly smaller for mobile */
      height: 30px;
      font-size: 16px;
      line-height: 32px;
    }
  }

  @media screen and (min-width: 1024px) {
    #back-to-top {
      bottom: 10px;
      right: 20px;
    }
  }

  @media screen and (min-width: 1280px) {
    #back-to-top {
      bottom: 15px;
      right: 25px;
    }
  }

  @media screen and (min-width: 1536px) {
    #back-to-top {
      bottom: 15px;
      right: 25px;
      /* visibility: hidden; */
    }
  }
</style>

最后更新于 XXX

在 hugo.yaml 中添加

1
2
3
4
5
6
7
8
9


frontmatter:
  # 按优先级排序：
  # :git - 文件提交修改时间
  # lastmod - 文章里 lastmod 字段
  # :fileModTime - 文件修改时间
  # :default - 默认时间
  lastmod: [":git", "lastmod", ":fileModTime", ":default"]    
  
enableGitInfo: true

在归档列表里面显示文章副标题/简介

在assets/scss/partials/article.scss里找到.article-list–compact，在里面添加如下css设置：

1
2
3
4
5
6
7
8


.article-subtitle {
    margin-top: -5px;
    font-size: 1.5rem;

    @include respond(md) {
        font-size: 1.6rem;
    }
}

再在layouts/partials/article-list/compact.html添加如下代码：

1
2
3
4
5
6


 <h2 class="article-title">
{{- .Title -}}
</h2>
<div class="article-subtitle">
{{- or .Params.description .Summary | plainify | safeHTML -}}
</div>

修改代码块字体大小

在assets/scss/partials/article.scss内加上font-size设定：

1
2
3
4
5


code {
    border-radius: var(--tag-border-radius);
    font-size: 14px; // Add font size setting for code block
    font-family: var(--code-font-family);
}

参考文章：

Hugo Stack主题装修笔记

hugo-stack-主题使用和美化配置