7.2 KiB
Creating and customizing a header and a footer — 图文教程
基于 6 个章节自动生成，含字幕摘要与关键帧截图。
1. 课程介绍与背景说明
intro | 00:00 → 00:58
摘要: 介绍本节课目标（创建自定义页眉页脚），并说明使用的主题和站点设置。
在本节课中，我们将创建并自定义 页眉和页脚。 区块主题允许我们使用区块构建整个站点， 包括页面、文章、模板和模板部分。 我们已经探索过嵌套区块 和使用区块样板。 本次会话中，我将使用主题自带的样板 创建并自定义站点的页眉和页脚。 页眉和页脚样板提供了强大的基础框架， 大部分布局工作已为您完成。 开始前需要说明， 我使用的是 2024 区块主题。 如果我进入设置-阅读， 你会注意到我已设置静态主页和文章页面。 正因如此， 如果我们进入页面并打开主页， 会发现主页已分配 给默认页面模板。 这与导航菜单中其他页面相同。 让我们开始吧。
2. 理解模板与页眉页脚的关联
knowledge | 00:58 → 01:49
摘要: 进入站点编辑器，解释当前所有模板共享页眉页脚，以及自定义后如何影响其他模板。
我们将进入站点编辑器， 在那里编辑和更新模板。 请注意，当前阶段 所有模板共享相同的页眉和页脚。 例如，如果我们打开页面模板， 会发现它与 404 模板 和单篇文章模板相同。 但这意味着什么？ 意味着如果我们自定义当前页眉
和页脚模板部分， 它会在所有相关模板上自动更新。 但如果我在某个模板上替换页眉或页脚， 就需要手动替换 所有其他要使用它的模板。 事不宜迟，
3. 自定义页眉：替换与样式调整
demo | 01:49 → 03:49
摘要: 在页面模板中替换页眉样板，并逐步调整背景图片、站点标志、标题样式和导航菜单。
开始自定义页眉和页脚。 先从页眉开始，打开列表视图。 我想替换这个页眉， 所以点击三个垂直点
然后选择“替换页眉”。 现在可以从主题自带的 一系列样板中选择。 我将选择“全宽背景图片页眉”。 选中后，开始修改。 我会确保选中封面区块， 然后替换背景图片 选中后，我就开始修改了。 我会确保选中封面区块 然后替换背景图片 使用我已上传到媒体库的图片。
接下来，我将选择站点标志区块 并上传一个透明图片 该图片我已作为标志保存在媒体库中。 然后我将再次选择封面区块， 打开风格设置并将不透明度设为零 因为我选择的是浅色图片。 完成后，我将选择站点标题区块 并选择较深的文字颜色。
接着点击三个垂直圆点 在排版旁边，选择字体系列 并选择新字体。
我还想放大站点标题， 所以我会继续设置自定义尺寸。 然后我们可以继续处理导航区块。 选中导航区块后，我会打开风格设置， 更改文字颜色，
更改字体系列
并通过设置自定义尺寸来放大导航菜单。 最后一步是为行区块添加一些内边距。 所以我会打开风格设置在尺寸下方， 添加更多内边距以创造更多空间
4. 保存页眉并应用到其他模板
demo | 03:49 → 04:37
摘要: 保存新页眉，并演示如何将其应用到404等其他模板。
下一步当然是保存 然后用我创建的这个新页眉
更新我的其他模板 使用我创建的新页眉。 使用区块样板。 例如，让我们打开 404 模板 并替换页眉。 现在你会在现有模板部分下方看到它。
我们可以保存，然后对所有其他相关模板
遵循相同流程。
现在我们可以返回页面模板 并继续处理页脚。
5. 自定义页脚：更新现有样板
demo | 04:37 → 06:37
摘要: 在页面模板中更新现有页脚样板，调整站点标志、标语、导航菜单和社交媒体链接。
这里我不打算替换页脚。 我仅会更新现有样板 然后它将自动更新 到所有其他模板上。 首先，我会放大站点标志区块 然后添加站点标语 到站点标题下方的站点标语区块。
现在我们可以处理右侧的三列。 我将选择中间区块的标题 并将其更改为“快速链接”。 然后选择导航区块 该区块已添加虚拟内容
并在边栏设置中菜单旁边的， 这张图之前用的是占位内容 接着在侧边栏设置里，菜单旁边 我将点击三个垂直点 并选择页眉导航。 同时打开设置选项卡 再次确认方向为垂直。 现在我们可以转到下一列 这次我将用新的导航菜单 替换占位内容。 所以我会点击创建新菜单
然后选择我已创建的隐私政策页面 以及条款和条件页面。 在最后一列中，
我会确保更新 社交媒体平台的链接。 目前这里还是占位内容 因此我将把井号替换为 正确的链接。 现在我的页脚已完成 当然我还可以进一步修改。
6. 验证更新与课程总结
outro | 06:37 → 07:06
摘要: 检查其他模板（如404）的页脚是否自动更新，并总结页眉页脚样板的作用。
例如 404 模板 我们会看到页脚已自动更新。 这是前端显示效果
当我访问联系页面时。 我相信页眉和页脚样板能为您助力
并为您的页眉页脚设计 提供坚实基础。
