本文确立一些文档规范,兼样式测试。
譬如这是一个引言。


上行为分割线<br>测试 | 此行H5

决定使用<!–more–>,而不是hugo及css自带的“按字数统计”,作为文章引言,后者语意很混乱|此行p

文章引言通常出现在home页index的内容概览处 | 此行H6

基本文本 | 此行H2

正文设置 | 此行H3

即<p>的处理。
<p>的意思是一块文字。在键盘回车的情况下,不被识别,回车上下仍属于同一块文字。再回车空一行,即总共按两下回车,则自动开启新一p。
另外在段尾按两下回车,再另起一行,也会视为新一p。
此外再继续按回车,则都是一p的效果,视觉上不会新增行间间距,可视为回车合并。

<p>的间距即为段落间距,可用margin设置。之前设置了<p>有上下margin,但其实只用设margin-bottom就可以,因为两个相邻的模块margin会重叠
此外还需要用child伪元素单独设置首尾段(在只设bottom后只用设尾端)消除边距,否则有些地方,比如home页的正文引言部分,会间距太宽以至很丑。

行文规范 | 此行H3

基本是为了行文美观。| 测试有序列表

  1. 行内:
    行内有一个规则是中文中的英文和数字左右都要空一格。这个不然之后用脚本解决。github上也有现成插件。
  2. 换段 / 空行:
    在本行尾按两下 space 再按 enter 键进行换段。
    💡 在list内,space x 2 + enter 后每个<li>还是一个整体,enter x 2 则会分p,造成行间距过大。
  3. 段落:
    由于段落只靠<p>的上下宽,且连续回车会合并,有层次的段落间距只能靠H1-H6的上下宽决定。
  4. 缩进:
    只要是利用数字和小圆点 * 进行分割的,下方文字统一缩进。
    缩进统一用 Tab(四个 space)。

css换行规则参考 | 测试引用、加粗斜体及表格。

HTML 处理空格的基本规则:文字首尾的空格都会忽略,内部的连续空格只会算一个。
上文提到的空格,包括键盘输入的空格键,还包括制表符 \t ,和换行符 \r \n即第一次按下的回车键
即,浏览器默认设置下,文本内部的换行无效,都转成普通空格键了。(除非使用<br>显式换行)
还好,CSS提供了 white-space 等属性,处理不同的空格方案。

* 但空格被浏览器视为可换行符。意思是结合word-wrap等设置,在允许换行的设置中,可在空格处或任意字符中间,自动插入换行符来换行。

white-space 超出容器 文间换行符 空格 其它
normal[默认] 换行 转成空格 首尾的去除,文中的合并
nowrap 不换行 转成空格 首尾的去除,文中的合并 只碰到<br>换行
pre 不换行 换行 原样保留 与原始文本完全一致
pre-wrap 换行 换行 原样保留
pre-line 不换行 换行 首尾的去除,文中的合并 适用于诗歌类

官方解释看不太懂,(挂起?)上表根据阮一峰:CSS 的空格处理

直接结论:| 此行H4

正文处换行需求:

  1. 换行符、空格都保留。即只按一次回车键:换行,但不分p
  2. 文本正常换行不能溢出

则设置为:

# 测试code
p {
    white-space: pre-wrap;
    word-wrap: break-word;
}

❗️ 但实际上需要pre-wrap级别换行的,经测试目前只在<p>和<code>里需要。如果给整个.content都设置换行,则一回车就换段,包括标题和列表内部,这不是我门想要的。所以只设<p>,以及多段<code>,即<pre>也需要,而我自己喜欢代码自动换行,所以code处仍然设pre-wrap

* 但经测试还是需要在特定地方,比如hugo内置块{{summary}}之类的地方,单独设置word-break: break-all;, 否则在不知哪处就会溢出,只设word-wrap也没用。

列表的问题 | 测试列表

  • 列表项文字
    1. 宽度过宽 而且有时候宽有时候窄?
      解决:过宽是因为<li>标签中包了<p>,而<p>下边有宽。
      正常是<li>后面直接文字。使用两空格+一回车规范换行可解。
      * 有时候无法控制li中出现p
    2. 回车不换行
      设置white-space: pre-wrap;,并执行 1
  • 多级列表符号的问题
    • 无序列表<ul>符号默认样式都为实心圆。
      修改:
      • 二级设为空心圆,三级设为实心方块
      • 再多级不设了遇到再说
    • 有序列表<ol>次级不能设1.1,2.4.3这种
      目前没找到什么方便的解决方法

富文本/短代码 | 此行H3

#todo 用的时候再加 | 此行H6

如何在两年时间面试一个程序员 | 测试引用

技能的反面是 ”Problem Solving(解决问题)”,你发现他把时间都花在“解决 (低层次) 问题”上了, 你想考察的“算法技能”、“C# 程序设计技能” 都无暇顾及。注意, 这是在他认为非常精通的编程工具和编程语言中出现这样的问题。你要这样的员工么?
那怎么提高技能呢? 答案很简单, 通过不断的练习, 把那些低层次的问题都解决了, 变成不用经过大脑的自动操作, 然后才有时间和脑力来解决较高层次的问题。

图片 | 此行为H4

视频 | 此行为H4

其他高级类别 | 此行为H2

#todo 待添加插件 | 此行H6

评论区

数学公式

代码块