studio
4cfcf09a97
Sources: video-subtitle-pipeline artifacts/beginner-wordpress-user/ - subtitles/: en, zh, bilingual SRT/ASS (100 files) - platform/: youtube SRT + bilibili BCC per video (75 files) - manifests/: per-video manifest.json (25 files) - quality/: quality reports (50 files)
327 lines
7.3 KiB
Text
327 lines
7.3 KiB
Text
1
|
|
00:00:00,000 --> 00:00:04,000
|
|
在本课中，我们将创建并自定义页眉和页脚。
|
|
|
|
2
|
|
00:00:04,000 --> 00:00:12,000
|
|
区块主题允许我们使用区块构建整个站点，包括页面、文章、模板和模板部分。
|
|
|
|
3
|
|
00:00:12,000 --> 00:00:16,000
|
|
我们已经探索了嵌套区块和使用区块模式。
|
|
|
|
4
|
|
00:00:16,000 --> 00:00:20,800
|
|
在本会话中，我将创建并自定义我站点的页眉和页脚，
|
|
|
|
5
|
|
00:00:20,800 --> 00:00:23,000
|
|
使用我主题自带的区块模式。
|
|
|
|
6
|
|
00:00:23,000 --> 00:00:27,571
|
|
页眉和页脚区块模式提供了一个坚实的工作基础，
|
|
|
|
7
|
|
00:00:27,571 --> 00:00:31,000
|
|
并且大部分布局已经为你做好了。
|
|
|
|
8
|
|
00:00:31,000 --> 00:00:37,000
|
|
在我们开始之前，我想强调一下，我正在使用 2024 区块主题。
|
|
|
|
9
|
|
00:00:37,000 --> 00:00:40,333
|
|
如果我进入设置、阅读，
|
|
|
|
10
|
|
00:00:40,333 --> 00:00:47,000
|
|
你会注意到我已设置了一个静态主页和文章页面。
|
|
|
|
11
|
|
00:00:47,000 --> 00:00:52,805
|
|
正因为我这样做了，如果我们前往页面并打开我们的主页，
|
|
|
|
12
|
|
00:00:52,805 --> 00:00:57,941
|
|
我们会注意到我们的主页已被指派给默认页面模板。
|
|
|
|
13
|
|
00:00:57,941 --> 00:01:03,000
|
|
这与我导航菜单中的其他页面相同。
|
|
|
|
14
|
|
00:01:03,000 --> 00:01:05,200
|
|
让我们继续并开始使用。
|
|
|
|
15
|
|
00:01:05,200 --> 00:01:11,000
|
|
我们将前往站点编辑器，在那里我们可以编辑和更新我们的模板。
|
|
|
|
16
|
|
00:01:11,000 --> 00:01:16,000
|
|
请注意，在此阶段，我们所有的模板共享相同的页眉和页脚。
|
|
|
|
17
|
|
00:01:16,000 --> 00:01:19,132
|
|
例如，如果我们打开我们的页面模板，
|
|
|
|
18
|
|
00:01:19,132 --> 00:01:23,000
|
|
我们会注意到它与我们的 404 模板相同。
|
|
|
|
19
|
|
00:01:23,000 --> 00:01:31,000
|
|
以及单篇文章模板。
|
|
|
|
20
|
|
00:01:31,000 --> 00:01:32,579
|
|
但这意味着什么？
|
|
|
|
21
|
|
00:01:32,579 --> 00:01:36,646
|
|
这意味着如果我们自定义当前的页眉和页脚模板部分，
|
|
|
|
22
|
|
00:01:36,646 --> 00:01:39,526
|
|
它将在其所在的所有模板上自动更新。
|
|
|
|
23
|
|
00:01:39,526 --> 00:01:43,465
|
|
但如果我在一个模板上替换页眉或页脚，
|
|
|
|
24
|
|
00:01:43,465 --> 00:01:49,154
|
|
我就需要在我将要使用它的所有其他模板上也手动替换它。
|
|
|
|
25
|
|
00:01:49,154 --> 00:01:52,360
|
|
闲话少说，我这就打开我的页面模板，
|
|
|
|
26
|
|
00:01:52,360 --> 00:01:55,000
|
|
并开始自定义我的页眉和页脚。
|
|
|
|
27
|
|
00:01:55,000 --> 00:01:59,000
|
|
让我们从页眉开始，打开列表视图。
|
|
|
|
28
|
|
00:01:59,000 --> 00:02:03,571
|
|
我想替换这个页眉，所以我会点击三个垂直圆点，
|
|
|
|
29
|
|
00:02:03,571 --> 00:02:05,857
|
|
然后选择“替换页眉”。
|
|
|
|
30
|
|
00:02:05,857 --> 00:02:11,000
|
|
现在我可以从我主题附带的一系列样板中进行选择。
|
|
|
|
31
|
|
00:02:11,000 --> 00:02:15,000
|
|
我将选择“全宽背景图像内的页眉”。
|
|
|
|
32
|
|
00:02:15,000 --> 00:02:19,000
|
|
一旦选中，我就开始修改。
|
|
|
|
33
|
|
00:02:19,000 --> 00:02:25,923
|
|
我会确保选中封面区块，然后替换背景图像。
|
|
|
|
34
|
|
00:02:25,923 --> 00:02:31,000
|
|
用一张我已经上传到媒体库的图像。
|
|
|
|
35
|
|
00:02:31,000 --> 00:02:37,400
|
|
接下来，我将选择站点标志区块，并上传一张透明图像，
|
|
|
|
36
|
|
00:02:37,400 --> 00:02:42,520
|
|
这张图像我已作为标志保存在我的媒体库中。
|
|
|
|
37
|
|
00:02:42,520 --> 00:02:48,244
|
|
然后我会再次选中封面区块，打开样式并将不透明度设为零，
|
|
|
|
38
|
|
00:02:48,244 --> 00:02:51,000
|
|
因为我选择了一张浅色图像。
|
|
|
|
39
|
|
00:02:51,000 --> 00:02:59,000
|
|
完成之后，我将选择我的站点标题区块，并选择一种更深的文本颜色。
|
|
|
|
40
|
|
00:02:59,000 --> 00:03:03,364
|
|
然后我会点击排版旁边的三个垂直圆点，
|
|
|
|
41
|
|
00:03:03,364 --> 00:03:07,000
|
|
选择字体系列并选择一种新字体。
|
|
|
|
42
|
|
00:03:07,000 --> 00:03:18,368
|
|
我还想放大站点标题，所以我会继续并设置一个自定义尺寸。
|
|
|
|
43
|
|
00:03:18,368 --> 00:03:22,556
|
|
然后我们就可以继续处理导航区块了。
|
|
|
|
44
|
|
00:03:22,556 --> 00:03:29,649
|
|
选中导航区块后，我会打开样式设置，
|
|
|
|
45
|
|
00:03:29,649 --> 00:03:34,656
|
|
更改文本颜色，更改字体系列，
|
|
|
|
46
|
|
00:03:34,656 --> 00:03:43,000
|
|
并通过设置自定义尺寸来放大我的导航菜单。
|
|
|
|
47
|
|
00:03:43,000 --> 00:03:48,486
|
|
我想做的最后一步是在我的行区块周围添加一些内边距。
|
|
|
|
48
|
|
00:03:48,486 --> 00:03:55,743
|
|
所以我会打开样式设置，在尺寸下方，添加更多内边距，
|
|
|
|
49
|
|
00:03:55,743 --> 00:03:59,226
|
|
为文本周围创造更多空间。
|
|
|
|
50
|
|
00:03:59,226 --> 00:04:03,000
|
|
然后我们的新页眉就完成了。
|
|
|
|
51
|
|
00:04:03,000 --> 00:04:06,086
|
|
下一步当然是保存，
|
|
|
|
52
|
|
00:04:06,086 --> 00:04:15,000
|
|
然后用我使用样板创建的这个新页眉来更新我的其他模板。
|
|
|
|
53
|
|
00:04:15,000 --> 00:04:23,000
|
|
例如，让我们继续打开我们的 404 模板并替换页眉。
|
|
|
|
54
|
|
00:04:23,000 --> 00:04:31,000
|
|
现在你会在现有模板部分下方看到它。
|
|
|
|
55
|
|
00:04:31,000 --> 00:04:39,000
|
|
我们可以保存，然后对所有其他相关模板遵循相同的过程。
|
|
|
|
56
|
|
00:04:39,000 --> 00:04:43,941
|
|
现在我们可以返回页面模板，继续处理页脚。
|
|
|
|
57
|
|
00:04:43,941 --> 00:04:47,975
|
|
在这种情况下，我不打算替换页脚，
|
|
|
|
58
|
|
00:04:47,975 --> 00:04:51,000
|
|
我只是要更新现有的样板。
|
|
|
|
59
|
|
00:04:51,000 --> 00:04:55,000
|
|
然后它会在所有其他模板上自动更新。
|
|
|
|
60
|
|
00:04:55,000 --> 00:05:00,209
|
|
首先，我会放大站点标志区块，
|
|
|
|
61
|
|
00:05:00,209 --> 00:05:11,000
|
|
然后我会将我的网站标语添加到网站标题下方的网站标语区块中。
|
|
|
|
62
|
|
00:05:11,000 --> 00:05:15,000
|
|
现在我们可以继续处理右侧的三列。
|
|
|
|
63
|
|
00:05:15,000 --> 00:05:23,000
|
|
我会选中中间区块的标题，并将其更改为“快速链接”。
|
|
|
|
64
|
|
00:05:23,000 --> 00:05:31,000
|
|
然后我会选中那个已添加了虚拟内容的导航区块。
|
|
|
|
65
|
|
00:05:31,000 --> 00:05:37,545
|
|
在边栏设置中，菜单旁边，我会点击那三个垂直的点，
|
|
|
|
66
|
|
00:05:37,545 --> 00:05:40,000
|
|
然后选择页眉导航。
|
|
|
|
67
|
|
00:05:40,000 --> 00:05:47,000
|
|
我也会打开设置选项卡，并再次确认方向是垂直的。
|
|
|
|
68
|
|
00:05:47,000 --> 00:05:50,409
|
|
现在我们可以转到下一列，
|
|
|
|
69
|
|
00:05:50,409 --> 00:05:56,091
|
|
这次我将用一个新的导航菜单替换虚拟内容。
|
|
|
|
70
|
|
00:05:56,091 --> 00:06:02,062
|
|
所以我会点击创建新菜单，
|
|
|
|
71
|
|
00:06:02,062 --> 00:06:10,024
|
|
然后选择我已创建的隐私政策页面，
|
|
|
|
72
|
|
00:06:10,024 --> 00:06:15,000
|
|
以及条款和条件页面。
|
|
|
|
73
|
|
00:06:15,000 --> 00:06:19,872
|
|
在最后一列，我会确保更新链接，
|
|
|
|
74
|
|
00:06:19,872 --> 00:06:23,444
|
|
指向我的社交媒体平台。
|
|
|
|
75
|
|
00:06:23,444 --> 00:06:26,421
|
|
所以目前这里还是占位内容，
|
|
|
|
76
|
|
00:06:26,421 --> 00:06:31,000
|
|
因此我将用正确的链接替换掉这个井号标签。
|
|
|
|
77
|
|
00:06:31,000 --> 00:06:37,720
|
|
现在我的页脚就完成了，当然我还可以做进一步的修改。
|
|
|
|
78
|
|
00:06:37,720 --> 00:06:43,000
|
|
保存后，我们可以去看看其他模板。
|
|
|
|
79
|
|
00:06:43,000 --> 00:06:51,000
|
|
例如 404 模板，我们会看到页脚已自动更新。
|
|
|
|
80
|
|
00:06:51,000 --> 00:06:55,000
|
|
这里是我访问联系页面时在前端看到的效果。
|
|
|
|
81
|
|
00:06:55,000 --> 00:07:02,368
|
|
我相信页眉和页脚区块样板会助你一臂之力，
|
|
|
|
82
|
|
00:07:02,368 --> 00:07:07,990
|
|
并为你的页眉页脚设计提供坚实的基础。
|
