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
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227

// --- 变量定义 (假设这些变量已在别处定义) ---
// $toc-title-font-size: 1.1em;
// $toc-content-font-size: 0.9em;
// $single-link-color: #333;
// $single-link-hover-color: #007bff;
// $global-border-color: #eee;
// ... 以及对应的 dark 和 black 主题变量

// --- 通用 TOC 基础样式 ---
.toc {
  .toc-title {
    font-size: $toc-title-font-size;
    font-weight: bold;
    text-transform: uppercase;
  }

  .toc-content {
    font-size: $toc-content-font-size;

    // --- 移除 text-indent, 使用更现代的 Flexbox/Grid 或伪元素布局 ---
    ul {
      padding-left: 0; // 重置内边距, 在 a 标签上控制
      list-style: none;

      a {
        // --- 优化: 将 a 标签设为块级或行内块, 方便添加 padding 和 hover 背景 ---
        display: block;
        padding: 0 0; // --- 调整这里 (1): 减小链接的上下内边距来缩小行距 ---
        position: relative;
        padding-left: 1.35rem; // 为伪元素留出空间
        text-decoration: none; // 确保没有下划线
        transition: color 0.2s, background-color 0.2s; // 平滑过渡

        // --- 新增: 鼠标悬停效果 ---
        &:hover {
          color: $single-link-hover-color;
          background-color: rgba($global-border-color, 0.5); // 添加一个淡淡的背景色
          border-radius: 4px;

          [theme=dark] & {
            color: $single-link-hover-color-dark;
            background-color: rgba($global-border-color-dark, 0.2);
          }
          [theme=black] & {
            color: $single-link-hover-color-black;
            background-color: rgba($global-border-color-black, 0.2);
          }
        }
      }

      // --- 优化: 使用 > 选择器区分层级 ---
      // Level 1
      > li > a::before {
        content: "●"; // 使用实心圆点作为一级标记
        font-weight: bolder;
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        color: $single-link-color;
        [theme=dark] & { color: $single-link-color-dark; }
        [theme=black] & { color: $single-link-color-black; }
      }

      ul {
        padding-left: 1rem; // 子列表的缩进
        // --- 调整这里 (2): 减小层级之间的垂直间距 ---
        // margin-top: 0.1rem;
        // margin-bottom: 0.1rem;

        // --- 新增: 视觉引导线 ---
        position: relative;
        &::before {
          content: '';
          position: absolute;
          left: 0.35rem; // 调整线的位置
          top: 0.5rem;
          bottom: 0.5rem;
          width: 1px;
          background-color: $global-border-color;
          [theme=dark] & { background-color: $global-border-color-dark; }
          [theme=black] & { background-color: $global-border-color-black; }
        }

        // Level 2
        > li > a::before {
          content: "○"; // 使用空心圆点
        }

        // Level 3 (如果需要)
        ul > li > a::before {
          content: "◌"; // 使用更小的空心圆点
        }
      }
    }
  }

  // --- ruby 样式 ---
  ruby {
    background: $code-background-color;

    rt {
      color: $global-font-secondary-color;
    }

    [theme=dark] & {
      background: $code-background-color-dark;

      rt {
        color: $global-font-secondary-color-dark;
      }
    }
    [theme=black] & {
      background: $code-background-color-black;

      rt {
        color: $global-font-secondary-color-black;
      }
    }
  }
}

// --- 浮动目录 ---
#toc-auto {
  display: block;
  position: absolute;
  width: $MAX_LENGTH;
  max-width: 0;
  // --- 优化: 增加内边距, 让内容有呼吸空间 ---
  padding: 0 1rem;
  border-left: 3px solid $global-border-color; // 边框稍微细一点
  @include overflow-wrap(break-word);
  box-sizing: border-box;
  top: 10rem;
  left: 0;
  visibility: hidden;

  // --- 新增: 半透明背景, 提升可读性 ---
  border-radius: 0 8px 8px 0; // 右侧添加圆角
  @include blur;

  [theme=dark] & {
    border-left-color: $global-border-color-dark;
  }
  [theme=black] & {
    border-left-color: $global-border-color-black;
  }

  [header-desktop=normal] & {
    top: 5rem;
  }

  .toc-title {
    margin: 1rem 0;
  }

  .toc-content {
    ul {
      // --- 优化: 为 active 状态的伪元素也应用高亮颜色 ---
      a.active {
        font-weight: bold;
        color: $single-link-hover-color; // 使用 hover 颜色以示强调
        [theme=dark] & { color: $single-link-hover-color-dark; }
        [theme=black] & { color: $single-link-hover-color-black; }

        &::before {
          color: $single-link-hover-color;
          [theme=dark] & { color: $single-link-hover-color-dark; }
          [theme=black] & { color: $single-link-hover-color-black; }
        }
      }

      .has-active > ul {
        display: block;
      }

      ul {
        display: none;
      }
    }

    &.always-active ul {
      display: block;
    }

    > nav > ul {
      margin: .625rem 0;
    }
  }
}

// --- 静态目录 (页面内) ---
#toc-static {
  display: none;
  margin: 1.5rem 0; // 增加上下边距
  border: 1px solid $global-border-color; // --- 优化: 使用边框代替背景色, 更简洁
  border-radius: 8px;
  overflow: hidden; // 配合圆角

  [theme=dark] & { border-color: $global-border-color-dark; }
  [theme=black] & { border-color: $global-border-color-black; }

  &[kept=true] {
    display: block;
  }

  .toc-title {
    display: flex;
    justify-content: space-between;
    line-height: 2em;
    padding: 0.5rem 1rem;
    background: $code-background-color;
    cursor: pointer; // --- 新增: 表明标题可点击

    [theme=dark] & { background: $code-background-color-dark; }
    [theme=black] & { background: $code-background-color-black; }
  }

  .toc-content {
    background-color: transparent; // --- 优化: 移除背景色, 使其与文章背景一致

    > nav > ul {
      margin: 0;
      padding: .8rem 1rem .8rem 1rem; // 统一内边距
    }
  }
}

1
2
3
4
5
6

{{< mediacard title="大唐双龙传" 
    coverurl="..." link="..." 
    author="黄易" type="24-01" 
    starscore="★★★" greystar="☆☆" 
    intro="..." 
>}}

1

{{< mediacard title="法师故事" coverurl="..." author="索斯" type="24-08" ... >}}

1
2
3
4
5
6
7
8

- title: "法师故事"
  coverurl: "[https://bookcover.yuewen.com/qdbimg/349573/57821/600.webp](https://bookcover.yuewen.com/qdbimg/349573/57821/600.webp)"
  link: "[https://www.qidian.com/book/57821/](https://www.qidian.com/book/57821/)"
  author: "索斯"
  type: "24-08"
  starscore: "★★★★"
  greystar: "☆"
  intro: "魔兽践踏，巨龙咆哮，巫师诅咒，魔法璀璨之光照耀知识灯塔！"

 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

{{- $dataFile := .Get 0 -}}
{{- $yearPrefix := .Get 1 -}}

{{- if not $dataFile -}}
  {{- errorf "medialist shortcode in %s: 缺少第一个参数 (数据文件名)。" .Page.Path -}}
{{- end -}}
{{- if not $yearPrefix -}}
  {{- errorf "medialist shortcode in %s: 缺少第二个参数 (年份)。" .Page.Path -}}
{{- end -}}

{{- $mediaData := index site.Data $dataFile -}}

{{- if $mediaData -}}
  {{- $count := 0 -}}
  {{- range $mediaData -}}
    {{- if (hasPrefix .type $yearPrefix) -}}
      {{- $count = add $count 1 -}}
      <div class="media">
        <div class="media-cover" style="background-image:url(\{\{ .coverurl \}\})"></div>
        <div class="media-meta">
          <div class="media-meta-item title"><a href="\{\{ .link \}\}" target="_blank" rel="noopener noreferrer">\{\{ .title \}\}</a><span style="float:right;font-weight:400">\{\{ .type \}\}</span></div>
          <div class="media-meta-item">
            <span class="author">\{\{ .author \}\}</span>
            <span class="star-score">\{\{ .starscore \}\}<span class="grey-star">\{\{ .greystar \}\}</span></span>
          </div>
          <div class="media-meta-item intro">\{\{ .intro | safeHTML \}\}</div>
        </div>
      </div>
    {{- end -}}
  {{- end -}}

  {{- if eq $count 0 -}}
    <p style="text-align: center; color: #888;">本年度暂无记录。</p>
  {{- end -}}
{{- else -}}
  <p>警告：找不到数据文件 data/\{\{ $dataFile \}\}.yaml (或 .json/.toml)</p>
{{- end -}}

1
2
3
4
5

{{< admonition type=tip title="影剧（20部）" open=false >}}
  {{< mediacard title="非诚勿扰3 (2023)" ... >}}
  {{< mediacard title="葬送的芙莉莲 (2023)" ... >}}
  ... (还有很多条)
{{< /admonition >}}

1
2
3

{{< admonition type=tip title="影剧" open=false >}}
  {{< medialist "movies" "24" >}}
{{< /admonition >}}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

使用方法:
  hugo
  hugo [flags]
  hugo [command]
  hugo [command] [flags]

节选的 command:
  new         为你的站点创建新的内容
  server      一个高性能的 web 服务器

节选的 flags:
  -D, --buildDrafts                包括被标记为 draft 的文章
  -E, --buildExpired               包括已过期的文章
  -F, --buildFuture                包括将在未来发布的文章

举几个栗子:
  hugo -D                          生成静态文件并包括 draft 为 true 的文章
  hugo new post/new-content.md     新建一篇文章
  hugo new site mysite             新建一个称为 mysite 的站点
  hugo server -E                   启动服务器并包括已过期的文章

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

~/blog $ tree -L 1
.                   # 对比             Hexo
├── archetypes/     # 文章模板          scaffolds/
├── content/        # 文章目录          source/_posts/
├── data/           # Hugo 数据文件     source/_data/
├── layouts/        # 布局模板
├── public/         # 生成的静态文件     public/
├── resources/      # Hugo 缓存
├── static/         # 网站的静态文件     source/
├── themes/         # 主题目录          themes/
└── config.toml     # 配置文件          _config.yml

1
2
3
4
5
6

~/blog/themes/divine $ tree -L 1
.
├── archetypes/
├── images/
├── layouts/
└── static/

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

title: "{{ replace .Name "-" " " | title }}"
date: {{ .Date }}
categories: Diary, Reading, Studying
tags:
    - x
    - xx
    - xxx
type: "home"
toc: false
mathjax: false
codes: [bash, diff, markdown, python, r]
comments: false
vertical: false
image: true
draft: false