Stacked Theme Documentation

Documentation for the Modified Stack Version

Table of contents

The official documentation can be found here This article is fully reprinted from https://zyxin.xyz/blog/tutorial/

Settings Instructions

Front-matter Settings

See the following example

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
title = "<The title of the page>"
date = "2010-01-01" # Publication date
lastmod = "2020-01-01" # Update date
description = "<The subtitle of the page>" # Will be displayed on the homepage
math = true # Enable support for Katex on this page
tags = ["<The tags of the page>"]
categories = ["<The categories of the page>"]
aliases = ["some-page-link", "AnOtHER_LinK"] # Add other paths for the current page
license = "CC BY-NC-ND" # Specify the sharing agreement for the current page

[menu.main] # Add the entry of the current page to the left menu
weight = -90 # Used for sorting
params = { icon = "<The icon of the entry>"}

[[links]] # Add an external link block at the bottom of the article
title = "<The title of the external link>"
description = "<The subtitle of the external link>"
website = "<The address of the external link>"
image = "<The square image of the external link, both local and network images are supported>"
TOML

Rendering Examples

Basic Elements

Link: This is a link
Key: Ctrl
Phonetic Annotation: shì
Footnote: There is a footnote here1
Inline Code Block: This is a string of code
Multi-line Code Block:

This is
multi-line
code
199
200
201
202
203
This is
with
highlighting,
syntax type
code block
TEXT
Code Block
MD
1
This is a code block generated using the `highlight` shortcode
static/doc/test_code.zh-cn.sh
SH

Quotes

This is a quote block

This is the second paragraph of a quote block

This is a code block within a quote
This is within a quoteThe table title
This is within a quoteThe table content

This is a quoted block with a source

Jacob, Theme Documentation

Lists

Unordered List:

  • Nested List
    • Second-level list element
      • Third-level list element
        • Fourth-level list element
  • Code Block within List
    This is a code block
  • Checkbox
  • Checked Checkbox
  • Table within List
    This is within a listThe table title
    This is within a listThe table content

Ordered List:

  1. Nested List
    1. Second-level list element
      1. Third-level list element
        1. Fourth-level list element
        2. Fourth-level list element
      2. Third-level list element
    2. Second-level list element
  2. Nested List

Tables

This is aTable Title Generated by Markdown
This is aTable Content Generated by Markdown
Table Generated by HTML Tag

This is a piece of inline code

This is a quote within the table

This is a multi-line code

This is a quoted block with a source within the table

Jacob, Theme Documentation

Tabs

Note: Currently, tab pages do not support nesting.

  • Basic
  • Lists
  • Code
  • Tables
  • Quotes

Link: This is a link
Key: Ctrl
Phonetic Annotation: shì
Footnote: There is a footnote here1
Inline Code Block: This is a string of code


  1. The footnote content in the tab. Due to the limitations of Hugo, currently, footnotes in tabs can only be generated within the tab ↩︎

Unordered List:

  • Nested List
    • Second-level list element
      • Third-level list element
        • Fourth-level list element

Ordered List

  1. Nested List
    1. Second-level list element
      1. Third-level list element
        1. Fourth-level list element
        2. Fourth-level list element
      2. Third-level list element
    2. Second-level list element
  2. Nested List
This is
multi-line
code
This is within a tabThe table title
This is within a tabThe table content

This is a quote block

This is the second paragraph of a quote block

This is a quoted block with a source

Jacob, Theme Documentation

Notice Boxes

Default Style
This is a notice box
Default Style (Folded)
This is a default folded notice box
Default Style (No Content)
Example
This is an example notice box
Caution
This is a caution notice box
Summary
This is a summary notice box
Information
This is an information notice box
Tip
This is a tip notice box
Success
This is a success notice box
Question
This is a question notice box
Warning
This is a warning notice box
Failure
This is a failure notice box
Bug
This is a bug notice box
Custom
This is a notice box with a custom icon and color
Custom (No Content) — Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text

Reference Code

If you want to replicate the style of this website, you can refer to the following CSS styles:

assets/scss/custom.scss
SCSS
  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
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
// 使头像不是圆形而是圆角矩形
.sidebar header .site-avatar .site-logo {
  border-radius: 10%;
}

// .row {
//   display: flex;
//   flex-wrap: wrap;
// }

// .col {
//   flex: 1;
//   box-sizing: border-box;
// }

// 自定义配色
:root[data-scheme="light"] {
  --accent-color: #1a5086; // 主题色
  --accent-color-darker: #2c3e50; // 主题色2(深色)

  --body-text-color: #707070; // 页面字体颜色
  --card-text-color-main: #34495e; // 卡片字体颜色
  --card-text-color-tertiary: #767676; // 副卡片字体颜色
  --code-background-color: #f8f8f8; // 行内代码背景色
  --code-text-color: #e96900; // 行内代码前景色
  --blockquote-background-color: #b9ebea4d; // 引用块背景颜色
  --tr-even-background-color: #eff0fa54 !important; // 表格配色样式

  --selection-text-color: #333; // 选区前景色
  --selection-background-color: #b3b5b8; // 选区背景色
}
:root[data-scheme="dark"] {
  // 暗黑模式下的配色

  --accent-color: #73d3eb;
  --accent-color-darker: #539aac;

  --blockquote-background-color: #313f5645;
  --body-background: #111; // 整页背景配色
  --card-background: #191d24; // 卡片配色
  --tr-even-background-color: #1e242ecf !important;
  --code-background-color: #360d0d;
  --code-text-color: #e96900;

  --selection-text-color: #fff;
  --selection-background-color: #34495e;

  $panel-bg: #323a47;
  $panel-title: #555;
  --panel-background-color: #{$panel-bg};
  --panel-titlebar-color: #{$panel-title};
  --panel-hover-color: #{mix($panel-bg, $panel-title, 50%)};
}

// 调整列表缩进和编号
.article-content {
  // 中文编号
  ol:lang(zh-cn) {
    // 一级序号
    list-style: simp-chinese-informal;

    // 二级序号
    ol {
      list-style-type: none;
      counter-reset: sectioncounter;

      li:before {
        content: "(" counter(sectioncounter, simp-chinese-informal) ") ";
        counter-increment: sectioncounter;
        color: var(--accent-color);
        margin-left: -32px;
      }
    }

    // 三级序号
    ol ol {
      list-style: decimal;

      li:before {
        content: "";
        margin-left: 0px;
      }
    }
  }

  // 英文编号
  ol:lang(en),
  ul:lang(en) {
    padding-inline-start: 32px;
  }

  li::marker {
    color: var(--accent-color);
    font-weight: bold;
  }

  // 脚注编号
  .footnotes ol {
    list-style: decimal;
  }

  // 清除目录内的编号
  #TableOfContents-inline {
    ol:lang(zh-cn) ol li:before {
      content: "";
      margin-left: 0;
    }
  }
}

// 调整引用间距
.article-content blockquote {
  :first-child {
    margin-top: 0px;
  }
  :last-child {
    margin-bottom: 0px;
  }
}

// 右侧归档数字斜体
.widget.archives .archives-year a span.count {
  font-style: italic;
}

//将滚动条修改为圆角样式
//菜单滚动条美化
.menu::-webkit-scrollbar {
  display: none;
}

// 全局滚动条美化
/* scrollbar styles for Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) transparent;
}
/**/
/* scrollbar styles for Chromium */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb);
  border-radius: 20px;
  border: 6px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
  background-color: var(--scrollbar-hover);
}
::-webkit-scrollbar-track {
  background-color: transparent;
}

// 归档页面两栏
@media (min-width: 1024px) {
  .article-list--compact {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: none;
    box-shadow: none;
    gap: 1rem;

    article {
      background: var(--card-background);
      border: none;
      box-shadow: var(--shadow-l2);
      margin-bottom: 8px;
      border-radius: 16px;
    }
  }
}

/*-----------归档页面----------*/
//归档页面卡片缩放
.article-list--tile article {
  transition: 0.6s ease;
}

.article-list--tile article:hover {
  transform: scale(1.03, 1.03);
}

// 友情链接三栏
@media (min-width: 1024px) {
  .article-list--compact.links {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    background: none;
    box-shadow: none;
    gap: 1rem;

    article {
      background: var(--card-background);
      border: none;
      box-shadow: var(--shadow-l2);
      margin-bottom: 8px;
      border-radius: var(--card-border-radius);

      &:nth-child(odd) {
        margin-right: 8px;
      }
    }
  }
}

// body{
//   --white:#fff;
//   --snow: color(display-p3 170% 170% 170%);
//   --blackp3: color(display-p3 0% 0% 0%);
// }

// hdr toggle
[data-hdrscheme="off"] {
  #hdr-mode-toggle {
    color: var(--body-text-color);
    // font-weight: 700;
    transition: none;
    background-color: transparent;

    .icon-tabler-hdr-on {
      transition: none;
      background-color: transparent;
      color: var(--body-text-color);
      display: none;
      video {
        border-radius: 20%;
        object-fit: cover;
        // isolation: isolate;
      }
    }

    .icon-tabler-hdr-off {
      // isolation: isolate;
      background-color: transparent;
      color: var(--body-text-color);
      display: unset;
      video {
        border-radius: 20%;
        object-fit: cover;
        // isolation: isolate;
      }
    }
  }
}

#hdr-mode-toggle {
  // margin-top: auto;
  color: var(--body-text-color);
  display: flex;
  align-items: center;
  cursor: pointer;
  gap: var(--menu-icon-separation);

  transition: none;
  background-color: transparent;

  .icon-tabler-hdr-off {
    // isolation: isolate;
    transition: none;
    background-color: transparent;
    color: var(--body-text-color);
    display: none;
    video {
      border-radius: 20%;
      object-fit: cover;
      // isolation: isolate;
    }
  }

  .icon-tabler-hdr-on {
    transition: none;
    background-color: transparent;
    color: var(--body-text-color);
    display: unset;
    video {
      border-radius: 20%;
      object-fit: cover;
      // isolation: isolate;
    }
  }
}

.article-video {
  video {
    max-width: 90%;
    height: auto;
    object-fit: contain;
  }
}

// .icon-tabler-hdr-on,.icon-tabler-hdr-off{
//   width: 100px;
//   height: 40px;
// }

#main-menu li svg {
  width: 30px;
  height: 30px;
}

If you want to use the elements of this page, you can refer to the following documentation:

content/en/notes/devel/params-of-this-site/index.md
MD
  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
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
+++
title = "Stacked Theme Documentation"
date = "2023-01-12"
tags = [ "Hugo", "Shortcode" ]
keywords = [ "hugo", "shortcode" ]
description = "Documentation for the Modified Stack Version"
slug= "stacked-theme-document"
series = "Notes on Building a Website"
+++

> The official documentation can be [found here](https://stack.jimmycai.com/guide/)
  This article is fully reprinted from https://zyxin.xyz/blog/tutorial/

## Settings Instructions

### Front-matter Settings

See the following example

```toml
title = "<The title of the page>"
date = "2010-01-01" # Publication date
lastmod = "2020-01-01" # Update date
description = "<The subtitle of the page>" # Will be displayed on the homepage
math = true # Enable support for Katex on this page
tags = ["<The tags of the page>"]
categories = ["<The categories of the page>"]
aliases = ["some-page-link", "AnOtHER_LinK"] # Add other paths for the current page
license = "CC BY-NC-ND" # Specify the sharing agreement for the current page

[menu.main] # Add the entry of the current page to the left menu
weight = -90 # Used for sorting
params = { icon = "<The icon of the entry>"}

[[links]] # Add an external link block at the bottom of the article
title = "<The title of the external link>"
description = "<The subtitle of the external link>"
website = "<The address of the external link>"
image = "<The square image of the external link, both local and network images are supported>"
```

## Rendering Examples

### Basic Elements

Link: [This is a link](#)  
Key: <kbd>Ctrl</kbd>  
Phonetic Annotation: {{< ruby "()(shì)" >}}  
Footnote: There is a footnote here[^basic]  
Inline Code Block: `This is a string of code`  
Multi-line Code Block:
```
This is
multi-line
code
```

```text {linenostart=199,hl_lines="2-4"}
This is
with
highlighting,
syntax type
code block
```

{{< highlight title="Code Block" type="md" >}}
This is a code block generated using the `highlight` shortcode
{{< /highlight >}}

{{< code "static/doc/test_code.zh-cn.sh" >}}

[^basic]: The footnote content in the basic elements

### Quotes

> This is a quote block
> 
> This is the second paragraph of a quote block
>
> ```
> This is a code block within a quote
> ```
>
> |This is within a quote|The table title|
> |-------------:|:-------|
> |This is within a quote|The table content|

{{< quote author="Jacob" source="Theme Documentation" url="#">}}
This is a quoted block with a source<br/>
{{< /quote >}}


### Lists

Unordered List:
- Nested List
  - Second-level list element
    - Third-level list element
      - Fourth-level list element
- Code Block within List
  ```
  This is a code block
  ```
- [ ] Checkbox
- [x] Checked Checkbox
- Table within List
  |This is within a list|The table title|
  |-------------:|:-------|
  |This is within a list|The table content|

Ordered List:
1. Nested List
    1. Second-level list element
        1. Third-level list element
            1. Fourth-level list element
            1. Fourth-level list element
        1. Third-level list element
    1. Second-level list element
1. Nested List

### Tables

|This is a|Table Title Generated by Markdown|
|--------------------:|:------|
|This is a|Table Content Generated by Markdown|

<table>
<tr><th colspan="2">Table Generated by HTML Tag</th>
</tr><tr><td>

`This is a piece of inline code`

</td><td>

> This is a quote within the table

</td></tr><tr><td>

```
This is a multi-line code
```

</td><td>

{{< quote author="Jacob" source="Theme Documentation" url="#">}}
This is a quoted block with a source within the table<br/>
{{< /quote >}}

</td></tr>
</table>

### Tabs

> Note: Currently, tab pages do not support nesting.

{{< tabs >}}
{{% tab Basic Elements %}}

Link: [This is a link](#)  
Key: <kbd>Ctrl</kbd>  
Phonetic Annotation: {{< ruby "()(shì)" >}}  
Footnote: There is a footnote here[^tab]  
Inline Code Block: `This is a string of code`  

[^tab]: The footnote content in the tab. Due to the limitations of Hugo, currently, footnotes in tabs can only be generated within the tab

{{% /tab %}}

{{% tab Lists %}}

Unordered List:
- Nested List
  - Second-level list element
    - Third-level list element
      - Fourth-level list element

Ordered List
1. Nested List
    1. Second-level list element
        1. Third-level list element
            1. Fourth-level list element
            1. Fourth-level list element
        1. Third-level list element
    1. Second-level list element
1. Nested List

{{% /tab %}}
{{< tab-code Code Blocks text >}}
This is
multi-line
code
{{< /tab-code >}}

{{% tab Tables %}}
|This is within a tab|The table title|
|---------------:|:-------|
|This is within a tab|The table content|
{{% /tab %}}

{{% tab Quotes %}}
> This is a quote block
> 
> This is the second paragraph of a quote block

{{< quote author="Jacob" source="Theme Documentation" url="#">}}
This is a quoted block with a source<br/>
{{< /quote >}}

{{% /tab %}}
{{< /tabs >}}

### Notice Boxes

{{< notice "Default Style" >}}
This is a **notice box**
{{< /notice >}}

{{< notice title="Default Style (Folded)" fold=true >}}
This is a default folded **notice box**
{{< /notice >}}

{{< notice "Default Style (No Content)" />}}

{{< notice "Example" example >}}
This is an **example** notice box
{{< /notice >}}

{{< notice title="Caution" style="note" fold=true >}}
This is a **caution** notice box
{{< /notice >}}

{{< notice title="Summary" style="abstract" fold=true >}}
This is a **summary** notice box
{{< /notice >}}

{{< notice title="Information" style="info" fold=true >}}
This is an **information** notice box
{{< /notice >}}

{{< notice title="Tip" style="tip" fold=true >}}
This is a **tip** notice box
{{< /notice >}}

{{< notice title="Success" style="success" fold=true >}}
This is a **success** notice box
{{< /notice >}}

{{< notice title="Question" style="question" fold=true >}}
This is a **question** notice box
{{< /notice >}}

{{< notice title="Warning" style="warning" fold=true >}}
This is a **warning** notice box
{{< /notice >}}

{{< notice title="Failure" style="failure" fold=true >}}
This is a **failure** notice box
{{< /notice >}}

{{< notice title="Bug" style="bug" fold=true >}}
This is a **bug** notice box
{{< /notice >}}

{{< notice title="Custom" icon="brand-github" style="github" >}}
This is a notice box with a custom icon and color
{{< /notice >}}

{{< notice title="Custom (No Content) — Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text" icon="brand-github" style="github" />}}

## Reference Code

If you want to replicate the style of this website, you can refer to the following CSS styles:

{{< code path="assets/scss/custom.scss" fold="true">}}

If you want to use the elements of this page, you can refer to the following documentation:

{{< code path="content/en/notes/devel/params-of-this-site/index.md" fold="true">}}

  1. The footnote content in the basic elements ↩︎

请在评论前阅读我们的评论政策


内容是由智能博客生成器生产 powered by ChatGGPTT
Built with Hugo
Theme Stacked designed by Jimmy, modified by Jacob