【测试】排版样本 — Gutenberg 原 生 区 块

这是排版测样样本,全使用 Gutenberg 原生区块(Core/Absatz、Core/Liste, Core/Table,Core/Core/Separator)、Core/Quote,Core/Table,Core/Separator)、Core/Quote,Core/Table,Core/Separator)、Core/Table,Core/Separator)、Core/Table,Core/Separator:Grafik,Kore/Separator,Kern/Separator,Kern/Separator,Kern/Separator,Kern/Separation,Kore/Separator,Kore/Separator,Kore/Separator,Kern/Separation,Kern/Separation,Kern/Liste,

Überschrift 1 一级标题

,标题下方斄文。Homy (Xinhui) Co., Ltd.

Überschrift 2 二级标题

H2 用的是 800 字重 + 深蓝到亮蓝的渐变文字,这一节就是用来对比「纯蓝深蓝」和「渐变」两种观感的。段落里夹一个站内链接,看链接色和 Hover 是否跟文分得开。

Überschrift 3 三级标题

三级标通常用于小节。这里正文文来查查行高導尼在 1.75 行下比查行高高小尼在 1.75 行下比来斡於英於在

Überschrift 4 四级标题

Bilder

Überschrift 5 五级标题

五级标题已经比较少见,字号通常和正文一样大,只靠字重和颜色区分。

Überschrift 6 六级标题

Bilder


列表、引用与表格

下面下面三种是 Markdown 里最出出现的结构,纯文本进 时就会自动变成这些区区块。

  • 无序列表第一项 —— Eis & Eis- und Dessertausrüstung
  • 无序列表第二项 —— Harte Eismaschinen (Gelato-Hersteller)
  • 无序列表第三项 —— Slush-Maschinen & Smoothie-Maschinen
  1. 有序列表第一步 —— 确认杯量与出料速度
  2. 有序列表第二步 —— 现场试机并记录温度曲线
  3. 有序列表第三步 —— 出运前机满负荷跑跑跑跑迷跑 小时

引用块用来强调一句话。新页页页页页页页页页页页页页页页页页页页页页页页页页页页页页页页页页页页页页页页页页页页页页页页页页页页页页页页页页页页页页页页页页页页

Hommy 排版测试
项目取 值说明
正文 颜色纯黑 #000000当前站点全局设置
正文字号17px文章正文专用
行高1.75中文更易读
H2 字重500 → 待改 800逐级元素样式覆盖了全局设置

代码与行内代码

行内代码长这样:wp_get_global_stylesheet(),代码块如下。

// 检查某个 css 变量最生效的 s = getComputedStyle (DocumentElement); sequenceconsole.log (s.getPropertyValue ('--wp--vorset--color--heading');

最后一段:测试连续两段之间的间距,以及末标点、英文文斜体 Kursivschrift 和加粗 Fettdruck 的混排果。


Held 大字测试:整行渐变 + 关键词换色

下面三个个个个个标题三种做法整行蓘色渐变郝自

做法 A:关键词用调色板颜色(纯原生,编辑器里点出来)

gut Verkaufsautomat Fabrik

→ 工具栏下拉箭头 → → 切到「文字」页签 → → 高亮 → 切到「文字」页签 → → 选琥珀色。区区块垞. <span class="has-inline-color has-luminous-vivid-amber-color">,纯原生,不写一行代码。

做法 B:键词自定义色值(纯原生,取色器里手填)

gut Verkaufsautomat Fabrik

同一个入口,取色器里直接填 #F59E0B。一是原生操作,只是颜色不进进调色板。

做法 C:关键自己也是渐变(原生做不到,要 CSS 类)

gut Verkaufsautomat Fabrik

Bilder <span> 加自定义 Klasse,再在 css 里写渐变。编辑器里得走「编辑为 HTML」,或者直接用自定定定块写。


de_DEGerman