如何为Blogger博客的首页和文章页自动添加唯一<body>标签类名

嘿，这个需求在Blogger里其实很好实现，利用它内置的条件模板标签就能搞定，不用额外的JS（当然用JS也能做，但原生模板标签更高效，加载更快）。我给你详细的步骤和代码示例：

实现步骤 #

1. 登录你的Blogger后台，进入目标博客，点击「主题」→「编辑HTML」（注意：编辑前最好先备份模板，防止出错）。
2. 在模板代码里找到<body>标签——不同模板的写法可能略有差异，比如有些模板会用expr:class绑定动态类（比如响应式的移动端类），有些就是纯静态的<body>标签。

情况1：模板已有动态类绑定（带expr:class） #

如果你的<body>标签是类似这样的：

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

直接修改成下面的代码，保留原有类的同时添加我们需要的页面类：

<body expr:class='&quot;loading&quot; + data:blog.mobileClass + 
  (&quot; &quot; + (data:blog.isHomepage ? &quot;homepage-page&quot; : &quot;&quot;)) + 
  (&quot; &quot; + (data:blog.pageType == &quot;item&quot; ? &quot;post-page&quot; : &quot;&quot;))'>

这段代码的逻辑是：

• 保留原有的loading和移动端类data:blog.mobileClass
• 如果是首页，追加homepage-page类
• 如果是文章详情页，追加post-page类

情况2：模板是纯静态的<body>标签 #

如果你的<body>就是简单的<body>，可以用条件判断分别输出不同的<body>标签：

<b:if cond='data:blog.isHomepage'>
  <body class='homepage-page'>
<b:elseif cond='data:blog.pageType == &quot;item&quot;'/>
  <body class='post-page'>
<b:else/>
  <body>
</b:if>

这样首页会输出<body class='homepage-page'>，文章页输出<body class='post-page'>，其他页面（比如分类页、归档页）则保持默认的<body>标签。

验证效果 #

修改完成后点击「保存主题」，然后分别访问你的博客首页和任意一篇文章页，右键查看页面源代码，找到<body>标签，就能看到对应的类名已经生效啦。

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