beginner-wordpress-user/platform/Creating and customizing a header and a footer/bilibili/Creating and customizing a header and a footer.bcc

{
  "font_size": 0.4,
  "font_color": "#FFFFFF",
  "background_alpha": 0.5,
  "background_color": "#9C27B0",
  "Stroke": "none",
  "body": [
    {
      "from": 0.0,
      "to": 4.0,
      "location": 2,
      "content": "在本课中，我们将创建并自定义页眉和页脚。"
    },
    {
      "from": 4.0,
      "to": 12.0,
      "location": 2,
      "content": "区块主题允许我们使用区块构建整个站点，包括页面、文章、模板和模板部分。"
    },
    {
      "from": 12.0,
      "to": 16.0,
      "location": 2,
      "content": "我们已经探索了嵌套区块和使用区块模式。"
    },
    {
      "from": 16.0,
      "to": 20.8,
      "location": 2,
      "content": "在本会话中，我将创建并自定义我站点的页眉和页脚，"
    },
    {
      "from": 20.8,
      "to": 23.0,
      "location": 2,
      "content": "使用我主题自带的区块模式。"
    },
    {
      "from": 23.0,
      "to": 27.571,
      "location": 2,
      "content": "页眉和页脚区块模式提供了一个坚实的工作基础，"
    },
    {
      "from": 27.571,
      "to": 31.0,
      "location": 2,
      "content": "并且大部分布局已经为你做好了。"
    },
    {
      "from": 31.0,
      "to": 37.0,
      "location": 2,
      "content": "在我们开始之前，我想强调一下，我正在使用 2024 区块主题。"
    },
    {
      "from": 37.0,
      "to": 40.333,
      "location": 2,
      "content": "如果我进入设置、阅读，"
    },
    {
      "from": 40.333,
      "to": 47.0,
      "location": 2,
      "content": "你会注意到我已设置了一个静态主页和文章页面。"
    },
    {
      "from": 47.0,
      "to": 52.805,
      "location": 2,
      "content": "正因为我这样做了，如果我们前往页面并打开我们的主页，"
    },
    {
      "from": 52.805,
      "to": 57.941,
      "location": 2,
      "content": "我们会注意到我们的主页已被指派给默认页面模板。"
    },
    {
      "from": 57.941,
      "to": 63.0,
      "location": 2,
      "content": "这与我导航菜单中的其他页面相同。"
    },
    {
      "from": 63.0,
      "to": 65.2,
      "location": 2,
      "content": "让我们继续并开始使用。"
    },
    {
      "from": 65.2,
      "to": 71.0,
      "location": 2,
      "content": "我们将前往站点编辑器，在那里我们可以编辑和更新我们的模板。"
    },
    {
      "from": 71.0,
      "to": 76.0,
      "location": 2,
      "content": "请注意，在此阶段，我们所有的模板共享相同的页眉和页脚。"
    },
    {
      "from": 76.0,
      "to": 79.132,
      "location": 2,
      "content": "例如，如果我们打开我们的页面模板，"
    },
    {
      "from": 79.132,
      "to": 83.0,
      "location": 2,
      "content": "我们会注意到它与我们的 404 模板相同。"
    },
    {
      "from": 83.0,
      "to": 91.0,
      "location": 2,
      "content": "以及单篇文章模板。"
    },
    {
      "from": 91.0,
      "to": 92.579,
      "location": 2,
      "content": "但这意味着什么？"
    },
    {
      "from": 92.579,
      "to": 96.646,
      "location": 2,
      "content": "这意味着如果我们自定义当前的页眉和页脚模板部分，"
    },
    {
      "from": 96.646,
      "to": 99.526,
      "location": 2,
      "content": "它将在其所在的所有模板上自动更新。"
    },
    {
      "from": 99.526,
      "to": 103.465,
      "location": 2,
      "content": "但如果我在一个模板上替换页眉或页脚，"
    },
    {
      "from": 103.465,
      "to": 109.154,
      "location": 2,
      "content": "我就需要在我将要使用它的所有其他模板上也手动替换它。"
    },
    {
      "from": 109.154,
      "to": 112.36,
      "location": 2,
      "content": "闲话少说，我这就打开我的页面模板，"
    },
    {
      "from": 112.36,
      "to": 115.0,
      "location": 2,
      "content": "并开始自定义我的页眉和页脚。"
    },
    {
      "from": 115.0,
      "to": 119.0,
      "location": 2,
      "content": "让我们从页眉开始，打开列表视图。"
    },
    {
      "from": 119.0,
      "to": 123.571,
      "location": 2,
      "content": "我想替换这个页眉，所以我会点击三个垂直圆点，"
    },
    {
      "from": 123.571,
      "to": 125.857,
      "location": 2,
      "content": "然后选择“替换页眉”。"
    },
    {
      "from": 125.857,
      "to": 131.0,
      "location": 2,
      "content": "现在我可以从我主题附带的一系列样板中进行选择。"
    },
    {
      "from": 131.0,
      "to": 135.0,
      "location": 2,
      "content": "我将选择“全宽背景图像内的页眉”。"
    },
    {
      "from": 135.0,
      "to": 139.0,
      "location": 2,
      "content": "一旦选中，我就开始修改。"
    },
    {
      "from": 139.0,
      "to": 145.923,
      "location": 2,
      "content": "我会确保选中封面区块，然后替换背景图像。"
    },
    {
      "from": 145.923,
      "to": 151.0,
      "location": 2,
      "content": "用一张我已经上传到媒体库的图像。"
    },
    {
      "from": 151.0,
      "to": 157.4,
      "location": 2,
      "content": "接下来，我将选择站点标志区块，并上传一张透明图像，"
    },
    {
      "from": 157.4,
      "to": 162.52,
      "location": 2,
      "content": "这张图像我已作为标志保存在我的媒体库中。"
    },
    {
      "from": 162.52,
      "to": 168.244,
      "location": 2,
      "content": "然后我会再次选中封面区块，打开样式并将不透明度设为零，"
    },
    {
      "from": 168.244,
      "to": 171.0,
      "location": 2,
      "content": "因为我选择了一张浅色图像。"
    },
    {
      "from": 171.0,
      "to": 179.0,
      "location": 2,
      "content": "完成之后，我将选择我的站点标题区块，并选择一种更深的文本颜色。"
    },
    {
      "from": 179.0,
      "to": 183.364,
      "location": 2,
      "content": "然后我会点击排版旁边的三个垂直圆点，"
    },
    {
      "from": 183.364,
      "to": 187.0,
      "location": 2,
      "content": "选择字体系列并选择一种新字体。"
    },
    {
      "from": 187.0,
      "to": 198.368,
      "location": 2,
      "content": "我还想放大站点标题，所以我会继续并设置一个自定义尺寸。"
    },
    {
      "from": 198.368,
      "to": 202.556,
      "location": 2,
      "content": "然后我们就可以继续处理导航区块了。"
    },
    {
      "from": 202.556,
      "to": 209.649,
      "location": 2,
      "content": "选中导航区块后，我会打开样式设置，"
    },
    {
      "from": 209.649,
      "to": 214.656,
      "location": 2,
      "content": "更改文本颜色，更改字体系列，"
    },
    {
      "from": 214.656,
      "to": 223.0,
      "location": 2,
      "content": "并通过设置自定义尺寸来放大我的导航菜单。"
    },
    {
      "from": 223.0,
      "to": 228.486,
      "location": 2,
      "content": "我想做的最后一步是在我的行区块周围添加一些内边距。"
    },
    {
      "from": 228.486,
      "to": 235.743,
      "location": 2,
      "content": "所以我会打开样式设置，在尺寸下方，添加更多内边距，"
    },
    {
      "from": 235.743,
      "to": 239.226,
      "location": 2,
      "content": "为文本周围创造更多空间。"
    },
    {
      "from": 239.226,
      "to": 243.0,
      "location": 2,
      "content": "然后我们的新页眉就完成了。"
    },
    {
      "from": 243.0,
      "to": 246.086,
      "location": 2,
      "content": "下一步当然是保存，"
    },
    {
      "from": 246.086,
      "to": 255.0,
      "location": 2,
      "content": "然后用我使用样板创建的这个新页眉来更新我的其他模板。"
    },
    {
      "from": 255.0,
      "to": 263.0,
      "location": 2,
      "content": "例如，让我们继续打开我们的 404 模板并替换页眉。"
    },
    {
      "from": 263.0,
      "to": 271.0,
      "location": 2,
      "content": "现在你会在现有模板部分下方看到它。"
    },
    {
      "from": 271.0,
      "to": 279.0,
      "location": 2,
      "content": "我们可以保存，然后对所有其他相关模板遵循相同的过程。"
    },
    {
      "from": 279.0,
      "to": 283.941,
      "location": 2,
      "content": "现在我们可以返回页面模板，继续处理页脚。"
    },
    {
      "from": 283.941,
      "to": 287.975,
      "location": 2,
      "content": "在这种情况下，我不打算替换页脚，"
    },
    {
      "from": 287.975,
      "to": 291.0,
      "location": 2,
      "content": "我只是要更新现有的样板。"
    },
    {
      "from": 291.0,
      "to": 295.0,
      "location": 2,
      "content": "然后它会在所有其他模板上自动更新。"
    },
    {
      "from": 295.0,
      "to": 300.209,
      "location": 2,
      "content": "首先，我会放大站点标志区块，"
    },
    {
      "from": 300.209,
      "to": 311.0,
      "location": 2,
      "content": "然后我会将我的网站标语添加到网站标题下方的网站标语区块中。"
    },
    {
      "from": 311.0,
      "to": 315.0,
      "location": 2,
      "content": "现在我们可以继续处理右侧的三列。"
    },
    {
      "from": 315.0,
      "to": 323.0,
      "location": 2,
      "content": "我会选中中间区块的标题，并将其更改为“快速链接”。"
    },
    {
      "from": 323.0,
      "to": 331.0,
      "location": 2,
      "content": "然后我会选中那个已添加了虚拟内容的导航区块。"
    },
    {
      "from": 331.0,
      "to": 337.545,
      "location": 2,
      "content": "在边栏设置中，菜单旁边，我会点击那三个垂直的点，"
    },
    {
      "from": 337.545,
      "to": 340.0,
      "location": 2,
      "content": "然后选择页眉导航。"
    },
    {
      "from": 340.0,
      "to": 347.0,
      "location": 2,
      "content": "我也会打开设置选项卡，并再次确认方向是垂直的。"
    },
    {
      "from": 347.0,
      "to": 350.409,
      "location": 2,
      "content": "现在我们可以转到下一列，"
    },
    {
      "from": 350.409,
      "to": 356.091,
      "location": 2,
      "content": "这次我将用一个新的导航菜单替换虚拟内容。"
    },
    {
      "from": 356.091,
      "to": 362.062,
      "location": 2,
      "content": "所以我会点击创建新菜单，"
    },
    {
      "from": 362.062,
      "to": 370.024,
      "location": 2,
      "content": "然后选择我已创建的隐私政策页面，"
    },
    {
      "from": 370.024,
      "to": 375.0,
      "location": 2,
      "content": "以及条款和条件页面。"
    },
    {
      "from": 375.0,
      "to": 379.872,
      "location": 2,
      "content": "在最后一列，我会确保更新链接，"
    },
    {
      "from": 379.872,
      "to": 383.444,
      "location": 2,
      "content": "指向我的社交媒体平台。"
    },
    {
      "from": 383.444,
      "to": 386.421,
      "location": 2,
      "content": "所以目前这里还是占位内容，"
    },
    {
      "from": 386.421,
      "to": 391.0,
      "location": 2,
      "content": "因此我将用正确的链接替换掉这个井号标签。"
    },
    {
      "from": 391.0,
      "to": 397.72,
      "location": 2,
      "content": "现在我的页脚就完成了，当然我还可以做进一步的修改。"
    },
    {
      "from": 397.72,
      "to": 403.0,
      "location": 2,
      "content": "保存后，我们可以去看看其他模板。"
    },
    {
      "from": 403.0,
      "to": 411.0,
      "location": 2,
      "content": "例如 404 模板，我们会看到页脚已自动更新。"
    },
    {
      "from": 411.0,
      "to": 415.0,
      "location": 2,
      "content": "这里是我访问联系页面时在前端看到的效果。"
    },
    {
      "from": 415.0,
      "to": 422.368,
      "location": 2,
      "content": "我相信页眉和页脚区块样板会助你一臂之力，"
    },
    {
      "from": 422.368,
      "to": 427.99,
      "location": 2,
      "content": "并为你的页眉页脚设计提供坚实的基础。"
    }
  ]
}