如何修复Tumblr博客Submit与Ask页面的列数布局问题？

核心思路 #

利用Tumblr自动为不同页面添加的body专属类，仅针对Submit和Ask页面修改网格布局，不影响全站其他页面的6列展示。

具体操作步骤 #

1. 确认页面标识类
   Tumblr会自动在<body>标签上添加对应页面的专属类：

   • Ask页面：ask_page（部分主题可能用ask-page，以你的主题实际类名为准）
   • Submit页面：submit_page（部分主题可能用submit-page）

2. 添加针对性CSS规则
   在你的CSS代码末尾插入以下规则，覆盖这两个页面的网格布局：

/* 全局默认6列网格（保留你原有的相关样式） */
.grid section {
  column-count: 6;
  /* 保留你原有的其他样式，比如column-gap、padding等 */
}

/* 仅Ask和Submit页面单列居中显示 */
body.submit_page .grid section,
body.ask_page .grid section {
  column-count: 1;
  /* 设置合适的最大宽度，避免内容过宽 */
  max-width: 800px;
  /* 让内容水平居中 */
  margin: 0 auto;
  /* 可选：调整内边距，优化提交框的显示空间 */
  padding: 0 20px;
}

3. 检查body标签的类（若规则不生效时）
   如果上述CSS未生效，检查你的主题HTML中<body>标签是否包含Tumblr的页面识别block：

<body class="
  {block:IndexPage}index-page{/block:IndexPage}
  {block:PermalinkPage}permalink-page{/block:PermalinkPage}
  {block:AskPage}ask_page{/block:AskPage}
  {block:SubmitPage}submit_page{/block:SubmitPage}
">

确保{block:AskPage}和{block:SubmitPage}对应的类名与CSS中使用的完全一致。

效果说明 #

• 除Ask和Submit页面外，全站其他页面仍保持原有的6列网格布局
• Ask/Submit页面的内容会单列居中展示，提交框拥有足够宽度完整显示内容

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