1 目前显示效果
1git add .
2git commit -m "update"
3git push origin master
2 解决方案
2.1 内容折叠
新建 themes\hugo-theme-cleanwhite\layouts\shortcodes\details.html
文件,并添加以下代码:
1<details style="background-color:#ffffff;border-radius:6px;border:2px dashed rgba(187, 181, 181, 0.712);">
2 <summary> <font color=#817f7f> > > > 展开 > > > </font></summary>
3 {{ .Inner | markdownify }}
4</details>
以上是旧代码,不知道为什么我使用的时候,没有前面的那个小箭头,不够直观。
于是我误打误撞又改成了以下代码,只能显示详情,不能添加 summary
,summary
里面一旦有别的东西,就不会显示小箭头了:
1<details style="background-color:#e6e3e336;border-radius:6px;border:2px dashed rgba(187, 181, 181, 0.712);">
2 {{ .Inner | markdownify }}
3</details>
在 markdown
中使用时这么写:
2.2 代码块大小限制
我是直接在主题文件中改的,在主题文件的 themes\hugo-theme-cleanwhite\static\css\hugo-theme-cleanwhite.min.css
中添加:
1pre code{font-size:16px;display:block;width:auto;white-space:pre;word-wrap:normal}
2.post-content pre,code{font-family:LXGW WenKai Screen;font-size:18px;line-height:1.5em;max-height:50em;word-spacing:0.2em;letter-spacing:0.015em;font-weight: 600;}
其中:第一行中,
font-size:16px
:代码块中的字体大小
display:block
:代码块显示方式为 block
;
第二行中, font-family:LXGW WenKai Screen
:代码块字体
line-height:1.5em
:代码块行间距
max-height:50em
:代码块最大高度为50倍当前字号的大小,超过会显示滚动条,1em表示当前元素的字号大小
word-spacing:0.2em
: 代码块中的字间距
letter-spacing:0.015em
:代码块中的字母间距
font-weight: 600
:字重,就是字的粗细程度
显示效果如下:
1import os
2import shutil
3import codecs
4
5# 定义源路径和目标路径
6source_path = "content/post/postimg"
7destination_path = "static/img"
8
9# 复制文件,如果目标路径已存在文件则不覆盖
10for filename in os.listdir(source_path):
11 source_file = os.path.join(source_path, filename)
12 destination_file = os.path.join(destination_path, filename)
13 if not os.path.exists(destination_file):
14 shutil.copy2(source_file, destination_file)
15 print(f"文件 {source_file} 复制成功!")
16 else:
17 print(f"pass")
18print(f"----------------------------------")
19# 遍历md文件并替换字符串
20md_files = [f for f in os.listdir("content/post") if f.endswith(".md")]
21for md_file in md_files:
22 md_file_path = os.path.join("content/post", md_file)
23 with codecs.open(md_file_path, 'r', encoding='utf-8', errors='ignore') as file:
24 content = file.read()
25 new_content = content.replace('/img/', '/img/')
26 if content != new_content:
27 with codecs.open(md_file_path, 'w', encoding='utf-8', errors='ignore') as file:
28 file.write(new_content)
29 print(f"文件 {md_file_path} 替换成功!")
30 else:
31 print(f"pass")
32
33
34# 定义源路径和目标路径
35source_path = "content/post/postimg"
36destination_path = "static/img"
37
38# 复制文件,如果目标路径已存在文件则不覆盖
39for filename in os.listdir(source_path):
40 source_file = os.path.join(source_path, filename)
41 destination_file = os.path.join(destination_path, filename)
42 if not os.path.exists(destination_file):
43 shutil.copy2(source_file, destination_file)
44 print(f"文件 {source_file} 复制成功!")
45 else:
46 print(f"pass")
47print(f"----------------------------------")
48# 遍历md文件并替换字符串
49md_files = [f for f in os.listdir("content/post") if f.endswith(".md")]
50for md_file in md_files:
51 md_file_path = os.path.join("content/post", md_file)
52 with codecs.open(md_file_path, 'r', encoding='utf-8', errors='ignore') as file:
53 content = file.read()
54 new_content = content.replace('/img/', '/img/')
55 if content != new_content:
56 with codecs.open(md_file_path, 'w', encoding='utf-8', errors='ignore') as file:
57 file.write(new_content)
58 print(f"文件 {md_file_path} 替换成功!")
59 else:
60 print(f"pass")
2.3 结合起来
1import os
2import shutil
3import codecs
4
5# 定义源路径和目标路径
6source_path = "content/post/postimg"
7destination_path = "static/img"
8
9# 复制文件,如果目标路径已存在文件则不覆盖
10for filename in os.listdir(source_path):
11 source_file = os.path.join(source_path, filename)
12 destination_file = os.path.join(destination_path, filename)
13 if not os.path.exists(destination_file):
14 shutil.copy2(source_file, destination_file)
15 print(f"文件 {source_file} 复制成功!")
16 else:
17 print(f"pass")
18print(f"----------------------------------")
19# 遍历md文件并替换字符串
20md_files = [f for f in os.listdir("content/post") if f.endswith(".md")]
21for md_file in md_files:
22 md_file_path = os.path.join("content/post", md_file)
23 with codecs.open(md_file_path, 'r', encoding='utf-8', errors='ignore') as file:
24 content = file.read()
25 new_content = content.replace('/img/', '/img/')
26 if content != new_content:
27 with codecs.open(md_file_path, 'w', encoding='utf-8', errors='ignore') as file:
28 file.write(new_content)
29 print(f"文件 {md_file_path} 替换成功!")
30 else:
31 print(f"pass")
32
33
34# 定义源路径和目标路径
35source_path = "content/post/postimg"
36destination_path = "static/img"
37
38# 复制文件,如果目标路径已存在文件则不覆盖
39for filename in os.listdir(source_path):
40 source_file = os.path.join(source_path, filename)
41 destination_file = os.path.join(destination_path, filename)
42 if not os.path.exists(destination_file):
43 shutil.copy2(source_file, destination_file)
44 print(f"文件 {source_file} 复制成功!")
45 else:
46 print(f"pass")
47print(f"----------------------------------")
48# 遍历md文件并替换字符串
49md_files = [f for f in os.listdir("content/post") if f.endswith(".md")]
50for md_file in md_files:
51 md_file_path = os.path.join("content/post", md_file)
52 with codecs.open(md_file_path, 'r', encoding='utf-8', errors='ignore') as file:
53 content = file.read()
54 new_content = content.replace('/img/', '/img/')
55 if content != new_content:
56 with codecs.open(md_file_path, 'w', encoding='utf-8', errors='ignore') as file:
57 file.write(new_content)
58 print(f"文件 {md_file_path} 替换成功!")
59 else:
60 print(f"pass")
3 改进
3.1 notice+details
Note
结合 details 可以使notice具有折叠效果,但是对于notice 的初衷来说,本就是为了提醒,就不需要折叠了,仅供以后想用的时候进行参考。
使用时对于notice是没有变化的,依然是:
改动方式是在 notice.html
后面进行稍微改动,添加 summary 和 details :
1<div class="notice {{ $noticeType }}" {{ if len .Params | eq 2 }} id="{{ .Get 1 }}" {{ end }}>
2<details>
3 <summary>
4 <p class="notice-title">
5 <span class="icon-notice baseline">
6 {{ printf "icons/%s.svg" $noticeType | readFile | safeHTML }}
7 </span>
8 {{- i18n $noticeType -}}
9 </p>
10 </summary>
11 {{- if or $block (not $raw) }}{{ $raw }}{{ else }}<p>{{ $raw }}</p>{{ end -}}
12</details>
13</div>