自定义Google Blogger模板关于页及导航active类失效问题咨询

1. 关于页内容与首页完全一致问题 #

原因是你的模板没有针对页面类型做条件渲染，默认所有页面都加载了首页的博文列表逻辑。
Blogger提供了data:view系列属性判断当前页面类型：

• data:view.isHomepage：是否为首页
• data:view.isPage：是否为独立静态页面（包括关于页、声明页等你在后台创建的页面）
• data:post.body：静态页面在后台编辑的独立内容，需要在页面渲染逻辑中调用该属性才能输出

你需要修改模板的主内容渲染区代码，加入条件判断：

<!-- 首页渲染逻辑 -->
<b:if cond='data:view.isHomepage'>
  <!-- 原有首页博文列表、分页等代码放在这里 -->
</b:if>

<!-- 静态页面渲染逻辑 -->
<b:if cond='data:view.isPage'>
  <h2 class="page-title"><data:post.title/></h2>
  <div class="page-content">
    <data:post.body/>
  </div>
</b:if>

修改后访问静态页面就会输出你在后台为关于页填写的独立内容，不会再显示首页内容。 #

2. 导航栏active类不生效问题 #

你的代码错误点在于URL拼接逻辑：data:blog.homepageUrl默认末尾自带斜杠/，你拼接的字符串是"p/about.html"，最终拼接结果为https://mywebsite.com//p/about.html，和实际页面地址https://mywebsite.com/p/about.html多了一个斜杠，所以条件不成立，active类不会添加。

提供两种更稳妥的修复写法：

写法1：修正URL拼接逻辑 #

<li class='nav-item'>
  <a class='nav-link' href='/p/about.html'>
    <b:class cond='data:blog.url == data:blog.homepageUrl + "p/about.html"' name='active'/>
    <i class='fas fa-user fa-fw me-2'/>
    About Me
  </a>
</li>

写法2：路径包含判断（更通用，不受域名变更影响） #

<li class='nav-item'>
  <a class='nav-link' href='/p/about.html'>
    <b:class cond='data:blog.url contains "/p/about.html"' name='active'/>
    <i class='fas fa-user fa-fw me-2'/>
    About Me
  </a>
</li>

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