如何在Jekyll主题的GH Pages站点为单页设置自定义标题

你应该是用Jekyll搭建的GH Pages站点对吧？问题的核心很明确：你之前设置的title是页面的HTML标题（对应浏览器标签栏），但页面顶部大区块的标题是直接调用了全局配置里的site.title，所以没被同步覆盖。下面给你一步步的解决方法：

1. 检查你的页面模板代码 #

首先找到站点里的布局模板（一般在/_layouts/文件夹下，比如default.html或者博客页面专属的blog.html），定位到顶部大标题对应的代码段，它大概率是这样的：

<div class="site-header-banner">
  <h1>{{ site.title }}</h1>
  <p>{{ site.tagline }}</p>
</div>

2. 修改模板支持页面级覆盖 #

把这段代码改成优先读取页面自定义的变量，没有的话再 fallback 到全局配置：

<div class="site-header-banner">
  <h1>{{ page.header_title | default: site.title }}</h1>
  <p>{{ page.header_tagline | default: site.tagline }}</p>
</div>

这里的header_title和header_tagline是自定义变量名，你可以换成自己喜欢的（比如page_top_title），只要后面和页面里的配置对应上就行。

3. 在目标页面设置覆盖变量 #

打开你要修改的/blog/index.html，在页面最顶部的YAML前置区域（---包裹的部分）添加自定义的标题和标语：

---
title: "我的技术博客"  # 浏览器标签栏的标题，你之前已经设置过的内容
header_title: "博客首页"  # 页面顶部大区块要显示的标题
header_tagline: "记录代码与技术成长"  # 对应要替换的标语
---

额外提示 #

如果你用的是GitHub Pages官方提供的成熟主题（比如Minimal Mistakes、Chirpy等），很多主题本身已经内置了页面级标题覆盖的功能，可能不需要手动改模板——直接查主题文档找对应的变量就行。比如有些主题用page.title作为顶部大标题，page.meta_title作为浏览器标题，这时候你只要在页面前置里设置title就能直接覆盖顶部大标题了。

内容的提问来源于stack exchange，提问作者iBug