Tumblr默认主题Optica：调整网格列数并添加侧边栏标签云求助

我帮你搞定Optica主题的这两个核心问题——调整网格列数+侧边栏不被覆盖/错位，其实不用复杂的jQuery，针对性的CSS调整就能解决，咱们一步步来：

一、先把网格列数改成2-3列 #

Optica主题的默认网格是用CSS Grid或Flex布局实现的，之前改不动大概率是默认样式优先级太高，咱们用更具体的选择器或者!important强制覆盖：

方案1：CSS Grid布局（如果主题用的是Grid） #

在主题的自定义CSS里添加这段代码：

/* 桌面端改成3列，给侧边栏留空间 */
@media screen and (min-width: 768px) {
  .post-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px; /* 可选，调整单元格之间的间距 */
    margin-right: 300px; /* 关键：给右侧侧边栏留出宽度+间距的空间 */
  }
}

/* 移动端适配成2列，去掉侧边栏空间 */
@media screen and (max-width: 767px) {
  .post-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    margin-right: 0;
  }
}

方案2：Flex布局（如果主题用的是Flex） #

如果主题的网格是Flex实现的，换这段代码：

@media screen and (min-width: 768px) {
  .post-grid {
    display: flex;
    flex-wrap: wrap;
    margin-right: 300px; /* 同样给侧边栏留空间 */
    gap: 20px;
  }
  .post-grid .post {
    flex: 0 0 calc(33.333% - 13.333px) !important; /* 3列，减去gap的一半 */
  }
}

@media screen and (max-width: 767px) {
  .post-grid .post {
    flex: 0 0 calc(50% - 10px) !important; /* 移动端2列 */
  }
  .post-grid {
    margin-right: 0;
  }
}

二、侧边栏定位：避免被覆盖/错位 #

之前的问题要么是侧边栏在导航和文章之间，要么被网格覆盖，咱们通过固定定位+层级控制解决：

1. 插入侧边栏HTML结构 #

进入Tumblr后台的「编辑HTML」模式，找到主内容区（比如<div class="post-grid">或者<main>标签）的闭合位置，插入这段自定义侧边栏代码：

<!-- 自定义侧边栏：放在主内容区之后 -->
<div class="custom-sidebar">
  <!-- 最近点赞组件 -->
  <div class="sidebar-widget">
    <h3>最近点赞</h3>
    <!-- 这里放Tumblr最近点赞组件的代码，或者你自己实现的内容 -->
  </div>
  <!-- 相似文章组件 -->
  <div class="sidebar-widget">
    <h3>相似文章</h3>
    <!-- 相似文章组件代码 -->
  </div>
  <!-- 标签云容器 -->
  <div class="sidebar-widget">
    <h3>标签云</h3>
    <div id="tag-cloud"></div> <!-- 你的JS生成标签云的容器，放在这里就会显示在侧边栏 -->
  </div>
</div>

2. 添加侧边栏CSS样式 #

在自定义CSS里添加这段代码，控制侧边栏的位置和层级：

/* 侧边栏核心样式 */
.custom-sidebar {
  position: fixed; /* 固定在右侧，滚动时跟着页面走 */
  top: 80px; /* 距离顶部的距离，对应Optica主题标题栏的高度，避免被遮挡 */
  right: 20px;
  width: 280px; /* 宽度要和主内容区的margin-right对应（300px=280px+20px间距） */
  background: #fff; /* 背景色和主题保持一致 */
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  z-index: 100; /* 关键：确保侧边栏在网格上方，不会被覆盖 */
}

/* 侧边栏组件之间的间距 */
.sidebar-widget {
  margin-bottom: 25px;
}

.sidebar-widget h3 {
  margin-top: 0;
  font-size: 1.2em;
  color: #333; /* 文字颜色匹配主题 */
}

/* 移动端适配：把侧边栏移到页面底部 */
@media screen and (max-width: 767px) {
  .custom-sidebar {
    position: relative;
    width: 100%;
    top: auto;
    right: auto;
    margin: 20px 0;
    box-shadow: none;
    border-top: 1px solid #eee;
    padding-top: 20px;
  }
}

最后调整细节 #

1. 预览时如果侧边栏还是被标题栏遮挡，调整top的值（比如改成90px），和Optica的标题栏高度匹配；
2. 如果网格和侧边栏间距不合适，微调margin-right和right的数值；
3. 你的JS标签云代码不用改，只要容器#tag-cloud在侧边栏里，生成的标签云就会自动显示在侧边栏中。

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