tech 2026年03月15日 · 阅读

昨天搞了下今天才发现手机上显示不正常😂 修好后记录下

一、把默认左边的导航栏设置到顶部下拉菜单里，减少阅读干扰。

image

二、主题和组件-安装-新建一个组件（不选主题）：

image

输入下面的css代码，保存：

/* 1. 基础变量设置 */
:root {
  /* 电脑端使用的宽度 */
  --desktop-max-width: 1450px;
  --desktop-body-width: 950px;
}

/* 2. 只有在屏幕宽度大于 1000px 时才执行加宽逻辑（针对电脑端） */
@media screen and (min-width: 1000px) {
  /* 强制容器加宽 */
  .wrap, 
  #main-outlet.wrap,
  body.graceful-layout .wrap {
    max-width: var(--desktop-max-width) !important;
    width: 100% !important;
  }

  /* 帖子正文加宽 */
  .topic-post .topic-body {
    width: var(--desktop-body-width) !important;
    flex-basis: var(--desktop-body-width) !important;
  }

  /* 顶部导航对齐 */
  .d-header .contents {
    max-width: var(--desktop-max-width) !important;
  }

  /* 时间轴（进度条）位置修正 */
  .timeline-container {
    left: calc(50% + (var(--desktop-body-width) / 2) + 20px) !important;
  }
}

/* 3. 针对手机端的修复（屏幕小于 1000px 时） */
@media screen and (max-width: 999px) {
  /* 强制重置所有宽度为自动，防止溢出 */
  .wrap, 
  #main-outlet.wrap,
  .topic-post .topic-body {
    max-width: 100% !important;
    width: 100% !important;
    flex-basis: auto !important;
    /* 解决你提到的右侧切掉的问题：确保左右有内边距 */
    padding-left: 10px !important;
    padding-right: 10px !important;
    box-sizing: border-box !important;
  }

  /* 解决 100vw 导致的横向滚动条 */
  :root {
    --topic-body-width: 100% !important;
    --d-max-width: 100% !important;
  }
}

三、安装一个新组件，输入地址：https://github.com/discourse/discourse-full-width-component

image

四、把组件加入你的主题（我用的是graceful theme）

image

五、如果你喜欢本站类似的‘卡片效果’而不是默认的标题列表，可以再装一个topic card组件。输入地址：https://github.com/discourse/discourse-topic-cards

留个截图，因为准备继续折腾改版。
image

六、为什么需要full-width，而只用 CSS 无效？

跟Discourse 渲染机制有关，不那么容易改。

  1. SCSS 编译与 CSS 变量的脱节： Discourse 的主题（如 Graceful）在服务器端使用 SCSS 编译。很多布局计算（比如：$container-width - $sidebar-width）是在编译时完成的。

    • 如果你只在 :root 修改 CSS 变量，那些已经“写死”在编译后代码里的像素计算值是不会动的。
    • Full Width 组件的作用： 它不仅修改了 CSS，还通过 JavaScript 在页面加载时向 <html> 或 <body> 标签注入了特定的类名（如 .full-width），并可能拦截了 Discourse 的布局计算函数。
  2. DOM 层级陷阱： Graceful 主题为了实现其独特的视觉效果，可能在 .wrap 之外又包了一层自定义的容器（例如 .graceful-layout）。普通 CSS 如果只针对 .wrap 修改，会被外层容器的 overflow: hidden 或 max-width 限制住。
  3. Topic Cards 的注入时机： Topic Cards 组件会动态计算网格宽度。如果它在你的 CSS 加载之后才运行 JS 脚本，它会根据它认为的“旧宽度”来生成网格。而 Full Width 组件通过更高的系统优先级，强制改变了计算环境。
web selfhosting