这篇文章主要用于总结我写文章时的常用布局，以后写文章时也以这个为参考，使自己写文章更有条理性！

文章完善进度100%

1. 仅时间记录型

这类文章仅记录：“在什么时间？”、“做了什么事？”，可以参考我的这篇文章明日方舟戒抽卡。

编写流程

第一步

先确定文章类型，选择对应的写在md文件最上面！（在代码后面注释的，写代码时要进行修改，其它未注释的不用管）
• 公开+不顶置：文章公开任何人可读，不在首页轮播中显示。
• 公开+顶置：文章公开任何人可读，在首页轮播中显示。
• 私密+不顶置：文章要输入密码后才能使用，不在首页轮播中显示。
• 私密+顶置：文章要输入密码后才能使用，在首页轮播中显示。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
---
title: Java教程 #【等待修改/标题】
date: 2025-05-01 16:29:00 #【等待修改/文章建立日期】
updated: 2025-05-01 16:40:00 #【等待修改/文章更新日期】
cover: 'https://qwert.jpg' #【等待修改/文章首页中小图】
background: 'url(https://qwert.jpg)' #【等待修改/文章详细页背景图】
categories: #【等待修改/文章分类】
  - 技术
tags: #【等待修改/文章标签】
  - 查阅中心
  - Java
description: 记录了………… #【等待修改/文章的详细描述】
aside: false
---

• aside：false 用于控制文章显示为“窄型”，此时不显示目录，把它注释掉就会显示目录宽型！

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
---
title: Java教程 #【等待修改/标题】
date: 2025-05-01 16:29:00 #【等待修改/文章建立日期】
updated: 2025-05-01 16:40:00 #【等待修改/文章更新日期】
cover: 'https://qwert.jpg' #【等待修改/文章首页中小图】
background: 'url(https://qwert.jpg)' #【等待修改/文章详细页背景图】
categories: #【等待修改/文章分类】
  - 技术
tags: #【等待修改/文章标签】
  - 查阅中心
  - Java
description: 记录了………… #【等待修改/文章的详细描述】
aside: false
swiper_index: 3
---

• aside：false 用于控制文章显示为“窄型”，此时不显示目录，把它注释掉就会显示目录宽型！
• swiper_index：3 用于控制文章在首页轮播中的优先级，越大优先级越高，通常取1-12。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
---
title: Java教程 #【等待修改/标题】
date: 2025-05-01 16:29:00 #【等待修改/文章建立日期】
updated: 2025-05-01 16:40:00 #【等待修改/文章更新日期】
cover: 'https://qwert.jpg' #【等待修改/文章首页中小图】
background: 'url(https://qwert.jpg)' #【等待修改/文章详细页背景图】
categories: #【等待修改/文章分类】
  - 技术
tags: #【等待修改/文章标签】
  - 查阅中心
  - Java
description: 记录了………… #【等待修改/文章的详细描述】
password: 123456 #【等待修改/本篇文章密码】
message: 这里是我の加密文章，需要密码才能进入! 
aside: false 
wrong_pass_message: '抱歉, 这个密码看着不太对, 请再试试!' 
abstract: 与本电脑登录密码一致!
theme: xray
---

• aside：false 用于控制文章显示为“窄型”，此时不显示目录，把它注释掉就会显示目录宽型！
• 其它那些message、wrong_pass_message、abstract、theme不用管，仅修改后面有注释的就行！

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
---
title: Java教程 #【等待修改/标题】
date: 2025-05-01 16:29:00 #【等待修改/文章建立日期】
updated: 2025-05-01 16:40:00 #【等待修改/文章更新日期】
cover: 'https://qwert.jpg' #【等待修改/文章首页中小图】
background: 'url(https://qwert.jpg)' #【等待修改/文章详细页背景图】
categories: #【等待修改/文章分类】
  - 技术
tags: #【等待修改/文章标签】
  - 查阅中心
  - Java
description: 记录了………… #【等待修改/文章的详细描述】
password: 123456 #【等待修改/本篇文章密码】
swiper_index: 3
aside: false
message: 这里是我の加密文章，需要密码才能进入!
wrong_pass_message: '抱歉, 这个密码看着不太对, 请再试试!' 
abstract: 与本电脑登录密码一致!
theme: xray
---

• aside：false 用于控制文章显示为“窄型”，此时不显示目录，把它注释掉就会显示目录宽型！
• swiper_index：3 用于控制文章在首页轮播中的优先级，越大优先级越高，通常取1-12。
• 其它那些message、wrong_pass_message、abstract、theme不用管，仅修改后面有注释的就行！

第二步

写本篇文章的简单介绍 + 当前文章编写进度！

1
2
3
{% note info simple %}本篇文章简单介绍！
{% progress 10 red 文章完善进度10% %}
{% endnote %}

第三 步

使用时间軕样式进行写文章！

1
2
3
4
5
6
7
8
9
10
11
12
13
{% timeline 建站历程,blue %}
<!-- timeline 2025-05-08 -->
今天是5月8日，…………
<!-- endtimeline -->

<!-- timeline 2025-05-04 -->
今天是5月4号，…………
<!-- endtimeline -->

<!-- timeline 2025-05-02 -->
今天是5月2日，…………
<!-- endtimeline -->
{% endtimeline %}

2. 问题方法型

这类文章主要记录：“问题及其对应的解答方式”，可以参考我的这篇文章Matlab操作Excel。
• 例子文章是“n问题，每1问题1回答类型”！
• 若为“1问题，1回答类型”，直接不用最后那重复一步！
• 若为“n问题，1回答类型”，先把那些问题写了，一个问题一个标题，再在最后面的那问题下用折叠框写方法！
• 若为“1问题，n回答类型”，就在折叠框回答那步骤多搞几个折叠框，命名后面加“（方式一）”！

编写流程

第一步

先确定文章类型，选择对应的写在md文件最上面！（在代码后面注释的，写代码时要进行修改，其它未注释的不用管）
• 公开+不顶置：文章公开任何人可读，不在首页轮播中显示。
• 公开+顶置：文章公开任何人可读，在首页轮播中显示。
• 私密+不顶置：文章要输入密码后才能使用，不在首页轮播中显示。
• 私密+顶置：文章要输入密码后才能使用，在首页轮播中显示。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
---
title: Java教程 #【等待修改/标题】
date: 2025-05-01 16:29:00 #【等待修改/文章建立日期】
updated: 2025-05-01 16:40:00 #【等待修改/文章更新日期】
cover: 'https://qwert.jpg' #【等待修改/文章首页中小图】
background: 'url(https://qwert.jpg)' #【等待修改/文章详细页背景图】
categories: #【等待修改/文章分类】
  - 技术
tags: #【等待修改/文章标签】
  - 查阅中心
  - Java
description: 记录了………… #【等待修改/文章的详细描述】
aside: false
---

• aside：false 用于控制文章显示为“窄型”，此时不显示目录，把它注释掉就会显示目录宽型！

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
---
title: Java教程 #【等待修改/标题】
date: 2025-05-01 16:29:00 #【等待修改/文章建立日期】
updated: 2025-05-01 16:40:00 #【等待修改/文章更新日期】
cover: 'https://qwert.jpg' #【等待修改/文章首页中小图】
background: 'url(https://qwert.jpg)' #【等待修改/文章详细页背景图】
categories: #【等待修改/文章分类】
  - 技术
tags: #【等待修改/文章标签】
  - 查阅中心
  - Java
description: 记录了………… #【等待修改/文章的详细描述】
aside: false
swiper_index: 3
---

• aside：false 用于控制文章显示为“窄型”，此时不显示目录，把它注释掉就会显示目录宽型！
• swiper_index：3 用于控制文章在首页轮播中的优先级，越大优先级越高，通常取1-12。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
---
title: Java教程 #【等待修改/标题】
date: 2025-05-01 16:29:00 #【等待修改/文章建立日期】
updated: 2025-05-01 16:40:00 #【等待修改/文章更新日期】
cover: 'https://qwert.jpg' #【等待修改/文章首页中小图】
background: 'url(https://qwert.jpg)' #【等待修改/文章详细页背景图】
categories: #【等待修改/文章分类】
  - 技术
tags: #【等待修改/文章标签】
  - 查阅中心
  - Java
description: 记录了………… #【等待修改/文章的详细描述】
password: 123456 #【等待修改/本篇文章密码】
message: 这里是我の加密文章，需要密码才能进入! 
aside: false 
wrong_pass_message: '抱歉, 这个密码看着不太对, 请再试试!' 
abstract: 与本电脑登录密码一致!
theme: xray
---

• aside：false 用于控制文章显示为“窄型”，此时不显示目录，把它注释掉就会显示目录宽型！
• 其它那些message、wrong_pass_message、abstract、theme不用管，仅修改后面有注释的就行！

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
---
title: Java教程 #【等待修改/标题】
date: 2025-05-01 16:29:00 #【等待修改/文章建立日期】
updated: 2025-05-01 16:40:00 #【等待修改/文章更新日期】
cover: 'https://qwert.jpg' #【等待修改/文章首页中小图】
background: 'url(https://qwert.jpg)' #【等待修改/文章详细页背景图】
categories: #【等待修改/文章分类】
  - 技术
tags: #【等待修改/文章标签】
  - 查阅中心
  - Java
description: 记录了………… #【等待修改/文章的详细描述】
password: 123456 #【等待修改/本篇文章密码】
swiper_index: 3
aside: false
message: 这里是我の加密文章，需要密码才能进入!
wrong_pass_message: '抱歉, 这个密码看着不太对, 请再试试!' 
abstract: 与本电脑登录密码一致!
theme: xray
---

• aside：false 用于控制文章显示为“窄型”，此时不显示目录，把它注释掉就会显示目录宽型！
• swiper_index：3 用于控制文章在首页轮播中的优先级，越大优先级越高，通常取1-12。
• 其它那些message、wrong_pass_message、abstract、theme不用管，仅修改后面有注释的就行！

第二步

写本篇文章的简单介绍 + 当前文章编写进度！

1
2
3
{% note info simple %}本篇文章简单介绍！
{% progress 10 red 文章完善进度10% %}
{% endnote %}

第三步

写问题一的标题：“问题一”/“具体问题名”，然后在下面写具体的问题！

第四步

写一个折叠框，里面写回答：

1
2
3
4
5
{% folding green, 具体操作步骤 %}
①……
②……
③……
{% endfolding %}

• 若回答非常简单，直接正文就行！
• 若有补充的东西，再折叠框步骤最下面用“• ”进行补充！

第五步

重复步骤4……

3. 小说收藏类

这类文章主要用于收藏一些好文章，可以参考我的这篇文章你凭什么上北大。

编写流程

第一步

先确定文章类型，选择对应的写在md文件最上面！（在代码后面注释的，写代码时要进行修改，其它未注释的不用管）
• 公开+不顶置：文章公开任何人可读，不在首页轮播中显示。
• 公开+顶置：文章公开任何人可读，在首页轮播中显示。
• 私密+不顶置：文章要输入密码后才能使用，不在首页轮播中显示。
• 私密+顶置：文章要输入密码后才能使用，在首页轮播中显示。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
---
title: Java教程 #【等待修改/标题】
date: 2025-05-01 16:29:00 #【等待修改/文章建立日期】
updated: 2025-05-01 16:40:00 #【等待修改/文章更新日期】
cover: 'https://qwert.jpg' #【等待修改/文章首页中小图】
background: 'url(https://qwert.jpg)' #【等待修改/文章详细页背景图】
categories: #【等待修改/文章分类】
  - 技术
tags: #【等待修改/文章标签】
  - 查阅中心
  - Java
description: 记录了………… #【等待修改/文章的详细描述】
aside: false
---

• aside：false 用于控制文章显示为“窄型”，此时不显示目录，把它注释掉就会显示目录宽型！

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
---
title: Java教程 #【等待修改/标题】
date: 2025-05-01 16:29:00 #【等待修改/文章建立日期】
updated: 2025-05-01 16:40:00 #【等待修改/文章更新日期】
cover: 'https://qwert.jpg' #【等待修改/文章首页中小图】
background: 'url(https://qwert.jpg)' #【等待修改/文章详细页背景图】
categories: #【等待修改/文章分类】
  - 技术
tags: #【等待修改/文章标签】
  - 查阅中心
  - Java
description: 记录了………… #【等待修改/文章的详细描述】
aside: false
swiper_index: 3
---

• aside：false 用于控制文章显示为“窄型”，此时不显示目录，把它注释掉就会显示目录宽型！
• swiper_index：3 用于控制文章在首页轮播中的优先级，越大优先级越高，通常取1-12。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
---
title: Java教程 #【等待修改/标题】
date: 2025-05-01 16:29:00 #【等待修改/文章建立日期】
updated: 2025-05-01 16:40:00 #【等待修改/文章更新日期】
cover: 'https://qwert.jpg' #【等待修改/文章首页中小图】
background: 'url(https://qwert.jpg)' #【等待修改/文章详细页背景图】
categories: #【等待修改/文章分类】
  - 技术
tags: #【等待修改/文章标签】
  - 查阅中心
  - Java
description: 记录了………… #【等待修改/文章的详细描述】
password: 123456 #【等待修改/本篇文章密码】
message: 这里是我の加密文章，需要密码才能进入! 
aside: false 
wrong_pass_message: '抱歉, 这个密码看着不太对, 请再试试!' 
abstract: 与本电脑登录密码一致!
theme: xray
---

• aside：false 用于控制文章显示为“窄型”，此时不显示目录，把它注释掉就会显示目录宽型！
• 其它那些message、wrong_pass_message、abstract、theme不用管，仅修改后面有注释的就行！

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
---
title: Java教程 #【等待修改/标题】
date: 2025-05-01 16:29:00 #【等待修改/文章建立日期】
updated: 2025-05-01 16:40:00 #【等待修改/文章更新日期】
cover: 'https://qwert.jpg' #【等待修改/文章首页中小图】
background: 'url(https://qwert.jpg)' #【等待修改/文章详细页背景图】
categories: #【等待修改/文章分类】
  - 技术
tags: #【等待修改/文章标签】
  - 查阅中心
  - Java
description: 记录了………… #【等待修改/文章的详细描述】
password: 123456 #【等待修改/本篇文章密码】
swiper_index: 3
aside: false
message: 这里是我の加密文章，需要密码才能进入!
wrong_pass_message: '抱歉, 这个密码看着不太对, 请再试试!' 
abstract: 与本电脑登录密码一致!
theme: xray
---

• aside：false 用于控制文章显示为“窄型”，此时不显示目录，把它注释掉就会显示目录宽型！
• swiper_index：3 用于控制文章在首页轮播中的优先级，越大优先级越高，通常取1-12。
• 其它那些message、wrong_pass_message、abstract、theme不用管，仅修改后面有注释的就行！

第二步

搞上下面的代码，修改一下第“165-166”、“169-182”、“186-187”行就行！

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
{% raw %}
<div id="short-story-container">
  <script>
    (function () {
      const container = document.getElementById('short-story-container');
      const shadowRoot = container.attachShadow({ mode: 'open' });
      // 样式调整：魔法书风格
      const style = document.createElement('style');
      style.textContent = `
        :host {
          display: block;
          font-family: 'Times New Roman', Georgia, serif;
          max-width: 900px;
          margin: 20px auto;
          padding: 0;
          position: relative;
          background: #f5e7c1 url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="100" height="100" fill="%23f5e7c1"/><path d="M0,50 Q25,40 50,50 T100,50" stroke="%23e8d9b5" fill="none" stroke-width="1"/></svg>');
          border: 15px solid transparent;
          border-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="94" height="94" x="3" y="3" fill="none" stroke="%23b38e6d" stroke-width="6" rx="5" ry="5"/><rect width="88" height="88" x="6" y="6" fill="none" stroke="%23d4b78f" stroke-width="4" rx="3" ry="3"/></svg>') 20;
          box-shadow: 0 0 25px rgba(0,0,0,0.3), 
                      inset 0 0 50px rgba(179, 142, 109, 0.5),
                      0 0 10px 5px rgba(179, 142, 109, 0.3);
          /* 移除rotateX变换，保持宽度一致 */
        }
        /* 魔法书装饰元素 */
        :host::before {
          content: "";
          position: absolute;
          top: -10px;
          left: 50%;
          transform: translateX(-50%);
          width: 60%;
          height: 15px;
          background: #b38e6d;
          border-radius: 0 0 10px 10px;
          box-shadow: 0 2px 5px rgba(0,0,0,0.3);
        }
        :host::after {
          content: "";
          position: absolute;
          bottom: -10px;
          left: 50%;
          transform: translateX(-50%);
          width: 60%;
          height: 15px;
          background: #b38e6d;
          border-radius: 10px 10px 0 0;
          box-shadow: 0 -2px 5px rgba(0,0,0,0.3);
        }
        /* 标题 + 作者 容器 */
        .title-wrap {
          border-bottom: 2px solid #b38e6d;
          padding: 15px 30px 10px;
          margin: 0;
          background: linear-gradient(to right, transparent, rgba(179, 142, 109, 0.2), transparent);
          position: relative;
        }
        .title-wrap::before,
        .title-wrap::after {
          content: "✧";
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          color: #b38e6d;
          font-size: 24px;
        }
        .title-wrap::before {
          left: 5px;
        }
        .title-wrap::after {
          right: 5px;
        }
        .story-title {
          text-align: center;
          color: #5a3921;
          font-size: 32px;
          margin: 0 0 5px;
          font-weight: bold;
          text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
          letter-spacing: 1px;
          font-family: 'SimSun', '宋体', serif;
        }
        .author {
          text-align: center;
          font-style: italic;
          color: #7f6b5a;
          margin: 0;
          font-size: 18px;
          letter-spacing: 1px;
        }
        /* 正文容器 */
        .story-content {
          line-height: 1.8;
          color: #4a3a2a;
          text-indent: 2em;
          background: rgba(245, 231, 193, 0.7);
          padding: 25px 40px;
          margin: 0;
          border-left: 1px solid rgba(179, 142, 109, 0.5);
          border-right: 1px solid rgba(179, 142, 109, 0.5);
          border-bottom: 1px solid rgba(179, 142, 109, 0.5);
          position: relative;
        }
        .story-content::before {
          content: "";
          position: absolute;
          top: 0;
          left: 20px;
          right: 20px;
          height: 1px;
          background: linear-gradient(to right, transparent, #b38e6d, transparent);
        }
        .story-content p {
          margin-bottom: 1em;
          font-size: 18px;
        }
        /* 读后感部分 */
        .reflection {
          background: rgba(232, 220, 200, 0.7);
          padding: 25px 40px;
          border-left: 4px solid #b38e6d;
          margin: 0;
          position: relative;
          border-bottom: 1px solid rgba(179, 142, 109, 0.5);
        }
        .reflection::before {
          content: "";
          position: absolute;
          top: 0;
          left: 20px;
          right: 20px;
          height: 1px;
          background: linear-gradient(to right, transparent, #b38e6d, transparent);
        }
        .reflection-title {
          color: #5a3921;
          margin-top: 0;
          font-family: 'SimSun', '宋体', serif;
          text-align: left;
          font-size: 24px;
          border-bottom: 1px dashed #b38e6d;
          padding-bottom: 10px;
        }
        /* 交互效果 */
        .story-title:hover {
          color: #8b4513;
          cursor: pointer;
          text-shadow: 1px 1px 3px rgba(139, 69, 19, 0.3);
        }
        /* 修改后的魔法书翻页效果 - 只旋转Y轴 */
        @keyframes pageTurn {
          0% { transform: rotateY(0deg); }
          50% { transform: rotateY(10deg); }
          100% { transform: rotateY(0deg); }
        }
        :host:hover {
          animation: pageTurn 2s ease-in-out;
        }
      `;
      shadowRoot.appendChild(style);
      // HTML 结构
      const content = document.createElement('div');
      content.innerHTML = `
        <div class="title-wrap">
          <p class="story-title">努力，终会与成功相遇</p>
          <p class="author">作者：余兢兢</p>
        </div>
        <div class="story-content">
          <p></p>
          <p></p>
          <p></p>
          <p></p>
          <p></p>
          <p></p>
          <p></p>
          <p></p>
          <p></p>
          <p></p>
          <p></p>
          <p></p>
          <p></p>
          <p></p>
        </div>
        <div class="reflection">
          <h3 class="reflection-title">我的读后感</h3>
          <p>还没看！</p>
          <p>还没看！</p>
        </div>
      `;
      shadowRoot.appendChild(content);
      // 交互逻辑
      const title = shadowRoot.querySelector('.story-title');
      title.addEventListener('click', function() {
        this.style.color = this.style.color === 'rgb(139, 69, 19)' ? '#5a3921' : '#8b4513';
      });
    })();
  </script>
</div>
{% endraw %}

4. 知识点记录型

这类文章主要用于记录繁杂的知识点，比如博客文章编写语法

编写流程

第一步

先确定文章类型，选择对应的写在md文件最上面！（在代码后面注释的，写代码时要进行修改，其它未注释的不用管）
• 公开+不顶置：文章公开任何人可读，不在首页轮播中显示。
• 公开+顶置：文章公开任何人可读，在首页轮播中显示。
• 私密+不顶置：文章要输入密码后才能使用，不在首页轮播中显示。
• 私密+顶置：文章要输入密码后才能使用，在首页轮播中显示。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
---
title: Java教程 #【等待修改/标题】
date: 2025-05-01 16:29:00 #【等待修改/文章建立日期】
updated: 2025-05-01 16:40:00 #【等待修改/文章更新日期】
cover: 'https://qwert.jpg' #【等待修改/文章首页中小图】
background: 'url(https://qwert.jpg)' #【等待修改/文章详细页背景图】
categories: #【等待修改/文章分类】
  - 技术
tags: #【等待修改/文章标签】
  - 查阅中心
  - Java
description: 记录了………… #【等待修改/文章的详细描述】
aside: false
---

• aside：false 用于控制文章显示为“窄型”，此时不显示目录，把它注释掉就会显示目录宽型！

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
---
title: Java教程 #【等待修改/标题】
date: 2025-05-01 16:29:00 #【等待修改/文章建立日期】
updated: 2025-05-01 16:40:00 #【等待修改/文章更新日期】
cover: 'https://qwert.jpg' #【等待修改/文章首页中小图】
background: 'url(https://qwert.jpg)' #【等待修改/文章详细页背景图】
categories: #【等待修改/文章分类】
  - 技术
tags: #【等待修改/文章标签】
  - 查阅中心
  - Java
description: 记录了………… #【等待修改/文章的详细描述】
aside: false
swiper_index: 3
---

• aside：false 用于控制文章显示为“窄型”，此时不显示目录，把它注释掉就会显示目录宽型！
• swiper_index：3 用于控制文章在首页轮播中的优先级，越大优先级越高，通常取1-12。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
---
title: Java教程 #【等待修改/标题】
date: 2025-05-01 16:29:00 #【等待修改/文章建立日期】
updated: 2025-05-01 16:40:00 #【等待修改/文章更新日期】
cover: 'https://qwert.jpg' #【等待修改/文章首页中小图】
background: 'url(https://qwert.jpg)' #【等待修改/文章详细页背景图】
categories: #【等待修改/文章分类】
  - 技术
tags: #【等待修改/文章标签】
  - 查阅中心
  - Java
description: 记录了………… #【等待修改/文章的详细描述】
password: 123456 #【等待修改/本篇文章密码】
message: 这里是我の加密文章，需要密码才能进入! 
aside: false 
wrong_pass_message: '抱歉, 这个密码看着不太对, 请再试试!' 
abstract: 与本电脑登录密码一致!
theme: xray
---

• aside：false 用于控制文章显示为“窄型”，此时不显示目录，把它注释掉就会显示目录宽型！
• 其它那些message、wrong_pass_message、abstract、theme不用管，仅修改后面有注释的就行！

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
---
title: Java教程 #【等待修改/标题】
date: 2025-05-01 16:29:00 #【等待修改/文章建立日期】
updated: 2025-05-01 16:40:00 #【等待修改/文章更新日期】
cover: 'https://qwert.jpg' #【等待修改/文章首页中小图】
background: 'url(https://qwert.jpg)' #【等待修改/文章详细页背景图】
categories: #【等待修改/文章分类】
  - 技术
tags: #【等待修改/文章标签】
  - 查阅中心
  - Java
description: 记录了………… #【等待修改/文章的详细描述】
password: 123456 #【等待修改/本篇文章密码】
swiper_index: 3
aside: false
message: 这里是我の加密文章，需要密码才能进入!
wrong_pass_message: '抱歉, 这个密码看着不太对, 请再试试!' 
abstract: 与本电脑登录密码一致!
theme: xray
---

• aside：false 用于控制文章显示为“窄型”，此时不显示目录，把它注释掉就会显示目录宽型！
• swiper_index：3 用于控制文章在首页轮播中的优先级，越大优先级越高，通常取1-12。
• 其它那些message、wrong_pass_message、abstract、theme不用管，仅修改后面有注释的就行！

第二步

写本篇文章的简单介绍 + 当前文章编写进度！

1
2
3
{% note info simple %}本篇文章简单介绍！
{% progress 10 red 文章完善进度10% %}
{% endnote %}

第三步

直接按知识点目录进行编写，分“一级标题、二级标题、三级标题……”，并在标题前写序号“1. 、1.1 、1.1.1 ”。若碰到重点部分，在标题后加个“⭐”就行！

5. 视频页面更新

操作步骤

第一步

①先手动删除bilibili文件夹及其中文件

第二步

②在extra_bangumis.json文件中进行修改

第三步

③在vscode的终端输入命令进行更新

1
hexo bangumi -u