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)
410 lines
12 KiB
Text
410 lines
12 KiB
Text
1
|
|
00:00:00,000 --> 00:00:04,000
|
|
在本课中，我们将创建并自定义页眉和页脚。
|
|
In this lesson, we will create and customize a header and footer.
|
|
|
|
2
|
|
00:00:04,000 --> 00:00:12,000
|
|
区块主题允许我们使用区块构建整个站点，包括页面、文章、模板和模板部分。
|
|
Block themes allow us to build our entire site using blocks, including pages, posts, templates and template parts.
|
|
|
|
3
|
|
00:00:12,000 --> 00:00:16,000
|
|
我们已经探索了嵌套区块和使用区块模式。
|
|
We have already explored nesting blocks and using block patterns.
|
|
|
|
4
|
|
00:00:16,000 --> 00:00:20,800
|
|
在本会话中，我将创建并自定义我站点的页眉和页脚，
|
|
In this session, I'm going to create and customize the header and footer of my site
|
|
|
|
5
|
|
00:00:20,800 --> 00:00:23,000
|
|
使用我主题自带的区块模式。
|
|
using patterns that come with my theme.
|
|
|
|
6
|
|
00:00:23,000 --> 00:00:27,571
|
|
页眉和页脚区块模式提供了一个坚实的工作基础，
|
|
Header and footer patterns provide a strong foundation to work from
|
|
|
|
7
|
|
00:00:27,571 --> 00:00:31,000
|
|
并且大部分布局已经为你做好了。
|
|
and most of the layout has already been done for you.
|
|
|
|
8
|
|
00:00:31,000 --> 00:00:37,000
|
|
在我们开始之前，我想强调一下，我正在使用 2024 区块主题。
|
|
Before we start, I wanted to highlight that I am using the 2024 block theme.
|
|
|
|
9
|
|
00:00:37,000 --> 00:00:40,333
|
|
如果我进入设置、阅读，
|
|
And if I go to settings, reading,
|
|
|
|
10
|
|
00:00:40,333 --> 00:00:47,000
|
|
你会注意到我已设置了一个静态主页和文章页面。
|
|
you will notice I have set a static homepage and posts page.
|
|
|
|
11
|
|
00:00:47,000 --> 00:00:52,805
|
|
正因为我这样做了，如果我们前往页面并打开我们的主页，
|
|
And because I've done this, if we make our way to pages and open up our homepage,
|
|
|
|
12
|
|
00:00:52,805 --> 00:00:57,941
|
|
我们会注意到我们的主页已被指派给默认页面模板。
|
|
we will notice that our homepage has been assigned to the default page template.
|
|
|
|
13
|
|
00:00:57,941 --> 00:01:03,000
|
|
这与我导航菜单中的其他页面相同。
|
|
This same as the other pages in my navigation menu.
|
|
|
|
14
|
|
00:01:03,000 --> 00:01:05,200
|
|
让我们继续并开始使用。
|
|
Let's go ahead and get started.
|
|
|
|
15
|
|
00:01:05,200 --> 00:01:11,000
|
|
我们将前往站点编辑器，在那里我们可以编辑和更新我们的模板。
|
|
We will make our way to the site editor, where we can edit and update our templates.
|
|
|
|
16
|
|
00:01:11,000 --> 00:01:16,000
|
|
请注意，在此阶段，我们所有的模板共享相同的页眉和页脚。
|
|
Please note, at this stage, all of our templates share the same header and footer.
|
|
|
|
17
|
|
00:01:16,000 --> 00:01:19,132
|
|
例如，如果我们打开我们的页面模板，
|
|
So if we open up our pages template for example,
|
|
|
|
18
|
|
00:01:19,132 --> 00:01:23,000
|
|
我们会注意到它与我们的 404 模板相同。
|
|
we will notice it is the same as our 404 template.
|
|
|
|
19
|
|
00:01:23,000 --> 00:01:31,000
|
|
以及单篇文章模板。
|
|
And single posts template for example.
|
|
|
|
20
|
|
00:01:31,000 --> 00:01:32,579
|
|
但这意味着什么？
|
|
But what does that mean?
|
|
|
|
21
|
|
00:01:32,579 --> 00:01:36,646
|
|
这意味着如果我们自定义当前的页眉和页脚模板部分，
|
|
It means if we customize the current header and footer template part,
|
|
|
|
22
|
|
00:01:36,646 --> 00:01:39,526
|
|
它将在其所在的所有模板上自动更新。
|
|
it will update automatically on all the templates it's on.
|
|
|
|
23
|
|
00:01:39,526 --> 00:01:43,465
|
|
但如果我在一个模板上替换页眉或页脚，
|
|
But if I replace the header or footer on a template
|
|
|
|
24
|
|
00:01:43,465 --> 00:01:49,154
|
|
我就需要在我将要使用它的所有其他模板上也手动替换它。
|
|
I will need to manually replace it on all the other templates I am going to use it as well.
|
|
|
|
25
|
|
00:01:49,154 --> 00:01:52,360
|
|
闲话少说，我这就打开我的页面模板，
|
|
Without further ado, I am going to open up my page template
|
|
|
|
26
|
|
00:01:52,360 --> 00:01:55,000
|
|
并开始自定义我的页眉和页脚。
|
|
and start customizing my header and footer.
|
|
|
|
27
|
|
00:01:55,000 --> 00:01:59,000
|
|
让我们从页眉开始，打开列表视图。
|
|
Let's start with the header and open up the list view.
|
|
|
|
28
|
|
00:01:59,000 --> 00:02:03,571
|
|
我想替换这个页眉，所以我会点击三个垂直圆点，
|
|
I want to replace this header, so I will click on the three vertical dots
|
|
|
|
29
|
|
00:02:03,571 --> 00:02:05,857
|
|
然后选择“替换页眉”。
|
|
and then select replace header.
|
|
|
|
30
|
|
00:02:05,857 --> 00:02:11,000
|
|
现在我可以从我主题附带的一系列样板中进行选择。
|
|
And now I can select from a range of patterns that come with my theme.
|
|
|
|
31
|
|
00:02:11,000 --> 00:02:15,000
|
|
我将选择“全宽背景图像内的页眉”。
|
|
I am going to select header inside full width background image.
|
|
|
|
32
|
|
00:02:15,000 --> 00:02:19,000
|
|
一旦选中，我就开始修改。
|
|
And once selected, I am going to start modifying.
|
|
|
|
33
|
|
00:02:19,000 --> 00:02:25,923
|
|
我会确保选中封面区块，然后替换背景图像。
|
|
I will make sure I select the cover block and then replace the background image.
|
|
|
|
34
|
|
00:02:25,923 --> 00:02:31,000
|
|
用一张我已经上传到媒体库的图像。
|
|
With an image I have already uploaded to my media library.
|
|
|
|
35
|
|
00:02:31,000 --> 00:02:37,400
|
|
接下来，我将选择站点标志区块，并上传一张透明图像，
|
|
Next, I will select the site logo block and upload a transparent image
|
|
|
|
36
|
|
00:02:37,400 --> 00:02:42,520
|
|
这张图像我已作为标志保存在我的媒体库中。
|
|
that I have saved as a logo in my media library.
|
|
|
|
37
|
|
00:02:42,520 --> 00:02:48,244
|
|
然后我会再次选中封面区块，打开样式并将不透明度设为零，
|
|
Then I will select the cover block again, open styles and change the opacity to zero
|
|
|
|
38
|
|
00:02:48,244 --> 00:02:51,000
|
|
因为我选择了一张浅色图像。
|
|
as I have selected a light image.
|
|
|
|
39
|
|
00:02:51,000 --> 00:02:59,000
|
|
完成之后，我将选择我的站点标题区块，并选择一种更深的文本颜色。
|
|
Once I have done that, I will select my site title block and choose a darker text color.
|
|
|
|
40
|
|
00:02:59,000 --> 00:03:03,364
|
|
然后我会点击排版旁边的三个垂直圆点，
|
|
Then I will click on the three vertical dots next to typography
|
|
|
|
41
|
|
00:03:03,364 --> 00:03:07,000
|
|
选择字体系列并选择一种新字体。
|
|
select font family and choose a new font.
|
|
|
|
42
|
|
00:03:07,000 --> 00:03:18,368
|
|
我还想放大站点标题，所以我会继续并设置一个自定义尺寸。
|
|
I also want to enlarge the site title so I will go ahead and set a custom size.
|
|
|
|
43
|
|
00:03:18,368 --> 00:03:22,556
|
|
然后我们就可以继续处理导航区块了。
|
|
Then we can move on to our navigation block.
|
|
|
|
44
|
|
00:03:22,556 --> 00:03:29,649
|
|
选中导航区块后，我会打开样式设置，
|
|
Once the navigation block is selected, I will open styles,
|
|
|
|
45
|
|
00:03:29,649 --> 00:03:34,656
|
|
更改文本颜色，更改字体系列，
|
|
change the color of the text, change the font family
|
|
|
|
46
|
|
00:03:34,656 --> 00:03:43,000
|
|
并通过设置自定义尺寸来放大我的导航菜单。
|
|
and also enlarge my navigation menu by setting a custom size.
|
|
|
|
47
|
|
00:03:43,000 --> 00:03:48,486
|
|
我想做的最后一步是在我的行区块周围添加一些内边距。
|
|
The last step I want to take is to add some padding around my row block.
|
|
|
|
48
|
|
00:03:48,486 --> 00:03:55,743
|
|
所以我会打开样式设置，在尺寸下方，添加更多内边距，
|
|
So I will open up my styles and below dimensions, add some more padding
|
|
|
|
49
|
|
00:03:55,743 --> 00:03:59,226
|
|
为文本周围创造更多空间。
|
|
to create some more space around the text.
|
|
|
|
50
|
|
00:03:59,226 --> 00:04:03,000
|
|
然后我们的新页眉就完成了。
|
|
And then our new header is done.
|
|
|
|
51
|
|
00:04:03,000 --> 00:04:06,086
|
|
下一步当然是保存，
|
|
The next step of course is to save
|
|
|
|
52
|
|
00:04:06,086 --> 00:04:15,000
|
|
然后用我使用样板创建的这个新页眉来更新我的其他模板。
|
|
and then to update my other templates with this new header that I have created using patterns.
|
|
|
|
53
|
|
00:04:15,000 --> 00:04:23,000
|
|
例如，让我们继续打开我们的 404 模板并替换页眉。
|
|
So for example, let's go ahead and open up our 404 template and replace the header.
|
|
|
|
54
|
|
00:04:23,000 --> 00:04:31,000
|
|
现在你会在现有模板部分下方看到它。
|
|
And now you will see it below existing template parts.
|
|
|
|
55
|
|
00:04:31,000 --> 00:04:39,000
|
|
我们可以保存，然后对所有其他相关模板遵循相同的过程。
|
|
We can save and then follow the same process for all the other relevant templates.
|
|
|
|
56
|
|
00:04:39,000 --> 00:04:43,941
|
|
现在我们可以返回页面模板，继续处理页脚。
|
|
Now we can return to our page template and move on to our footer.
|
|
|
|
57
|
|
00:04:43,941 --> 00:04:47,975
|
|
在这种情况下，我不打算替换页脚，
|
|
In this case I am not going to replace the footer
|
|
|
|
58
|
|
00:04:47,975 --> 00:04:51,000
|
|
我只是要更新现有的样板。
|
|
I am merely going to update the existing pattern.
|
|
|
|
59
|
|
00:04:51,000 --> 00:04:55,000
|
|
然后它会在所有其他模板上自动更新。
|
|
And then it will automatically update on all the other templates.
|
|
|
|
60
|
|
00:04:55,000 --> 00:05:00,209
|
|
首先，我会放大站点标志区块，
|
|
Firstly I will enlarge the site logo block
|
|
|
|
61
|
|
00:05:00,209 --> 00:05:11,000
|
|
然后我会将我的网站标语添加到网站标题下方的网站标语区块中。
|
|
and then I will add my site tagline to the site tagline block below the site title.
|
|
|
|
62
|
|
00:05:11,000 --> 00:05:15,000
|
|
现在我们可以继续处理右侧的三列。
|
|
Now we can move on to the three columns on the right.
|
|
|
|
63
|
|
00:05:15,000 --> 00:05:23,000
|
|
我会选中中间区块的标题，并将其更改为“快速链接”。
|
|
I will select the title of the middle block and change it to quick links.
|
|
|
|
64
|
|
00:05:23,000 --> 00:05:31,000
|
|
然后我会选中那个已添加了虚拟内容的导航区块。
|
|
Then I will select the navigation block which has been added with dummy content.
|
|
|
|
65
|
|
00:05:31,000 --> 00:05:37,545
|
|
在边栏设置中，菜单旁边，我会点击那三个垂直的点，
|
|
And in the sidebar settings next to menu I will click on the three vertical dots
|
|
|
|
66
|
|
00:05:37,545 --> 00:05:40,000
|
|
然后选择页眉导航。
|
|
and select the header navigation.
|
|
|
|
67
|
|
00:05:40,000 --> 00:05:47,000
|
|
我也会打开设置选项卡，并再次确认方向是垂直的。
|
|
I will also open the settings tab and double check that the orientation is vertical.
|
|
|
|
68
|
|
00:05:47,000 --> 00:05:50,409
|
|
现在我们可以转到下一列，
|
|
Now we can move on to the next column
|
|
|
|
69
|
|
00:05:50,409 --> 00:05:56,091
|
|
这次我将用一个新的导航菜单替换虚拟内容。
|
|
and this time I am going to replace the dummy content with a new navigation menu.
|
|
|
|
70
|
|
00:05:56,091 --> 00:06:02,062
|
|
所以我会点击创建新菜单，
|
|
So I will click on create new menu
|
|
|
|
71
|
|
00:06:02,062 --> 00:06:10,024
|
|
然后选择我已创建的隐私政策页面，
|
|
and then select the privacy policy page which I have already created
|
|
|
|
72
|
|
00:06:10,024 --> 00:06:15,000
|
|
以及条款和条件页面。
|
|
as well as the terms and conditions page.
|
|
|
|
73
|
|
00:06:15,000 --> 00:06:19,872
|
|
在最后一列，我会确保更新链接，
|
|
And in the last column I will make sure that I update the links
|
|
|
|
74
|
|
00:06:19,872 --> 00:06:23,444
|
|
指向我的社交媒体平台。
|
|
to my social media platforms.
|
|
|
|
75
|
|
00:06:23,444 --> 00:06:26,421
|
|
所以目前这里还是占位内容，
|
|
So at the moment there is dummy content
|
|
|
|
76
|
|
00:06:26,421 --> 00:06:31,000
|
|
因此我将用正确的链接替换掉这个井号标签。
|
|
and therefore I will replace the hashtag with the correct link.
|
|
|
|
77
|
|
00:06:31,000 --> 00:06:37,720
|
|
现在我的页脚就完成了，当然我还可以做进一步的修改。
|
|
And now my footer is done but I can of course make further modifications.
|
|
|
|
78
|
|
00:06:37,720 --> 00:06:43,000
|
|
保存后，我们可以去看看其他模板。
|
|
After saving we can make our way to our other templates.
|
|
|
|
79
|
|
00:06:43,000 --> 00:06:51,000
|
|
例如 404 模板，我们会看到页脚已自动更新。
|
|
For example the 404 template and we will see that the footer updated automatically.
|
|
|
|
80
|
|
00:06:51,000 --> 00:06:55,000
|
|
这里是我访问联系页面时在前端看到的效果。
|
|
And here is a view on the front end when I visit my contact page.
|
|
|
|
81
|
|
00:06:55,000 --> 00:07:02,368
|
|
我相信页眉和页脚区块样板会助你一臂之力，
|
|
I trust header and footer patterns will give you a boost
|
|
|
|
82
|
|
00:07:02,368 --> 00:07:07,990
|
|
并为你的页眉页脚设计提供坚实的基础。
|
|
and provide you a strong foundation for your header and footer design.
|
|
|
