-
Notifications
You must be signed in to change notification settings - Fork 0
/
notes.txt
96 lines (93 loc) · 6.37 KB
/
notes.txt
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
为了写清并规范好设计的原则，写一个说明.
I 最主体的 html 是 themes/zero/layouts/_default/baseof.html
I.a 所有网页都是由它生成的.
I.b 它规定了网页的主体结构：
==========1<head>
========== 1.1<meta> {{ block "head_meta" . }}——一些特殊的 meta 信息放置区，主要是为了 noindex 而设计出来的
========== 1.2<title> {{ block "head_title" . }}——因每个页面不一样，留出待填充
========== 1.3<css>
========== 1.4<script>——ctheme.js，换主题颜色
========== 1.5<KaTeX>——只有 pandoc 为 markup 的网页才会有
========== 1.6<Google_Analytics/GoatCounter>
==========2<body>
========== 2.1<bar_for_phone>——宽屏幕时的 CSS 为不显示
========== 2.1.1<bar_left_botton>
========== 2.1.2<bar_search-icon>
========== 2.1.3<bar_title>
========== 2.1.4<bar_right_button>
========== 2.1.3.1{{ block "bar_toc" . }}——只有 single 页才有内容
========== 2.2<body_for_pc>
========== 2.2.1<left>——因为所有网页共有，因此在这里写开
========== 2.2.1.1<left_non-footer>
========== 2.2.1.1.1<left_non-footer_option>
========== 2.2.1.1.1.1<left_non-footer_option_search-icon>——小屏幕时的 CSS 为不显示
========== 2.2.1.1.1.2<left_non-footer_option_theme-switch>
========== 2.2.1.1.1.3<left_non-footer_option_language>
========== 2.2.1.1.1.4<left_non-footer_option_rss>
========== 2.2.1.1.2<left_non-footer_head>——小屏幕时的 CSS 为不显示
========== 2.2.1.1.2.1<left_non-footer_head_title>
========== 2.2.1.1.2.2<left_non-footer_head_subtitle>
========== 2.2.1.1.3<left_non-footer_main>
========== 2.2.1.1.4<left_non-footer_search>——仅在宽屏幕时显示，作为 template 装载进来的
========== 2.2.1.1.4.1<search_bar>
========== 2.2.1.1.4.1.1<search_bar_search-box>
========== 2.2.1.1.4.1.2<search_bar_close-sign>
========== 2.2.1.1.4.2<search_results>
========== 2.2.1.2<left_footer>
========== 2.2.1.2.1<copyright>
========== 2.2.2<right>——因 index, 404, list, single 各不相同，故只写出结构
========== 2.2.2.1{{ block "right_head" . }}
========== 2.2.2.2{{ block "right_main" . }}
========== 2.2.2.3<right_search>——仅在小屏幕时显示，作为 template 装载进来的
========== 2.2.2.3.1<search_bar>
========== 2.2.2.3.1.1<search_bar_search-box>
========== 2.2.2.3.1.2<search_bar_close-sign>
========== 2.2.2.3.2<search_results>
========== 2.2.3<toc>——因只有 single 页面有其他页面没有，故只写出结构
========== 2.2.3.1{{ block "toc" . }}
========== 2.3<script>——main.js
II 接下来就是几个其他的 html，进一步补充上面的 baseof.html 的信息.
II.a 主页 themes/zero/layouts/index.html
==========定义 主页的 1.2{{ "head_title" }}
==========定义 主页的 2.2.2.1{{ "right_head" }}
==========定义 主页的 2.2.2.2{{ "right_main" }}
II.b 404页 themes/zero/layouts/404.html
==========定义 404页的 1.2{{ "head_title" }}
==========定义 404页的 2.2.2.1{{ "right_head" }}
==========定义 404页的 2.2.2.2{{ "right_main" }}
II.c 列表页 themes/zero/layouts/_default/list.html
==========定义 列表页的 1.2{{ "head_title" }}——按所在 section 显示
==========定义 列表页的 2.2.2.1{{ "right_head" }}
========== <right_head_title>——按所在 section 显示
========== <right_head_des>——有一个单独的 md 文件，就像普通文章那样
==========定义 列表页的 2.2.2.2{{ "right_main" }}
========== 每篇文章一个 summary，使用 .Render 的方法，而不是 partial.
========== 见 https://discourse.gohugo.io/t/hugo-theme-engine-render-vs-partial/3018
========== 每个 summary 模块在 themes/zero/layouts/_default/summary.html
II.d 文章页 themes/zero/layouts/_default/single.html
==========定义 文章页的 1.1{{ "head_meta" }}，如果需要不被搜索引擎收录，则在这里写上 noindex
==========定义 文章页的 1.2{{ "head_title" }}
==========定义 文章页的 2.1.3.1{{ "bar_toc" }}
==========定义 文章页的 2.2.2.1{{ "right_head" }}
========== <right_head_title>
========== <right_head_des>
==========定义 文章页的 2.2.2.2{{ "right_main" }}
========== <right_main_article>
========== <This_Article>
========== <List_of_Other_Articles_in_This_Column>
========== <right_main_notes>——只有有 PDF 文件的才有
========== <record>——通过 partial 的方法展示书影音的记录表格，只在特定的两个特殊页面展示
========== <right_main_comments>——使用 partial 方法加载评论模块
========== 评论模块在 themes/zero/layouts/partials/comments.html
========== 其实这是与 right_main 并列的模块
==========定义 文章页的 2.2.3.1{{ "toc" }}
III 网站样式在 CSS 处，有三个样式表，已使用 CSS3 进行重写，新特性有 flex 布局和 transition 动画.
III.a 基本样式——themes/zero/static/css/base.css
III.b 宽屏幕样式——themes/zero/static/css/normal.css
III.c 小屏幕样式——themes/zero/static/css/small.css
III.d 自己规定的 CSS 书写规范：
1. 有关盒子内部的样式，如字体、字号、表格、代码、图片，以及盒子的 margin、padding、边框等信息，（宽屏幕和小屏幕）相同的部分放到 base.css 中，不同的部分分别存放，有一边是 display: none 的当作两边完全不同；
2. 有关盒子之间的样式，即整体的排版信息，如 flex 的方向、序号等相关信息，全都分开存放，即便相同也分开，因为排版是整体的工作，单拿出一个来是不够的，还需要看它的父元素和子元素.
3. 按照等级由大到小的顺序排列，同级的两个盒子按先后顺序排列，即，第二个一级元素的 CSS 排在第一个一级元素及其所有子级元素的后面.
4. 计数功能放在 base.css 的最后.
5. 适当写注释，最后要用工具把没用的 CSS 语句删除.