127 lines
7.2 KiB
Markdown
127 lines
7.2 KiB
Markdown
# 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 模板 我们会看到页脚已自动更新。 这是前端显示效果
|
||
|
||
当我访问联系页面时。 我相信页眉和页脚样板能为您助力
|
||
|
||
并为您的页眉页脚设计 提供坚实基础。
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
---
|
