Hugo:内容折叠与代码块大小限制

Posted by Nefelibata on Wed 2024-03-27 | | about 3 mins
Last Modified on Thu 2024-05-23

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>

以上是旧代码,不知道为什么我使用的时候,没有前面的那个小箭头,不够直观。

于是我误打误撞又改成了以下代码,只能显示详情,不能添加 summarysummary 里面一旦有别的东西,就不会显示小箭头了:

1<details style="background-color:#e6e3e336;border-radius:6px;border:2px dashed rgba(187, 181, 181, 0.712);">
2    {{ .Inner | markdownify }}
3</details>

markdown 中使用时这么写:

image-20240328081447543

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是没有变化的,依然是:

image-20240328154028511

改动方式是在 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>

3.2 可添加 css 来改进动态效果