易写作自定义主题样式的代码改动位置

易写作的界面样式由两部分文件控制：CSS 样式文件负责颜色、间距、字体和响应式规则；模板文件负责页面输出结构和 class 类名。自定义样式时，建议先备份这两个文件，再按“定位元素→检查 CSS 引用路径→追加覆盖规则→清理缓存”的顺序操作。

改动位置不固定：不同安装环境、不同主题版本，文件目录可能不一致，不能靠猜。正确判断入口是页面实际加载的 CSS 文件路径，操作动作是在文件末尾追加覆盖规则，必要时调整模板结构；验证方式是强制刷新浏览器并清理服务端缓存。边界：自有主题可改，官方默认主题升级时可能被覆盖。

用浏览器开发者工具找到目标元素的选择器

在易写作页面中，对着标题、正文段落、按钮等要改的元素，右键并选择“检查”（部分浏览器显示为“检查元素”）。开发者工具会直接跳到对应的 DOM 节点，面板中可以看到该元素上的 class 和 id。注意不要只盯着元素自身，还要看面板里的“样式”和“计算样式”区域，那里会列出当前生效的 CSS 规则，以及这些规则来自哪个文件和哪一行。

把目标元素的关键类名记录下来。例如页面标题可能显示为 post-title，正文显示为 post-content，按钮可能显示为 btn 或 submit-btn。这些类名就是后续写自定义 CSS 时要用到的选择器，先记录再动手，避免盲目全局搜索。

定位易写作的主题目录和 CSS 文件

选中刚才记录的元素，在开发者工具的 Elements 面板里展开 head 区域，找到 link 标签。页面引用 CSS 文件时会给出相对或绝对路径，若 href 末尾带版本参数，去掉 ?v=xxx 之后再作为实际路径去查找。

易写作的静态资源通常安装在程序根目录下的 static、assets 或 public 目录中，每个主题使用独立子目录。在服务器或本机文件管理器中沿该路径找到 CSS 文件，打开后搜索刚才记录的类名，能搜到说明这个文件就是控制当前元素的样式表。不同版本的易写作对主题目录的命名不一定相同，在预期位置找不到时，直接在安装目录中按文件名搜索。

在 CSS 中追加自定义覆盖规则

找到样式文件后，不要直接改动主题原有的规则，尤其不要逐行修改。推荐在 CSS 文件末尾追加一段自定义代码，方便以后单独删除或调整。优先考虑主题是否支持 CSS 变量：如果文件开头有 :root 中定义的变量，直接改变量值即可：

:root {
  `--main-color`: #2b6cb0;
  `--font-family`: 'Noto Sans SC', 'Microsoft YaHei', sans-serif;
}
body {
  color: var(`--main-color`);
  font-family: var(`--font-family`);
}

如果主题没有提供变量，就使用开发者工具记录的类名，用更高特异性或 !important 覆盖默认规则：

.post-title, .entry-title {
  color: #2b6cb0 !important;
}
.btn, .submit-btn, .button {
  background-color: #2b6cb0 !important;
  border-color: transparent;
  color: #fff !important;
}

写在文件末尾而不是修改原行，是因为主题升级时更容易识别自定义部分；若升级机制会自动覆盖 CSS 文件，则需要把自定义代码单独保存一份，升级后重新追加。

修改模板文件中的结构元素（可选）

如果只调颜色、字体和间距，改 CSS 就够；需要调整布局或增加页面区块时，就需要找到模板文件。主题目录下通常能找到 .html、.tmpl、.tpl 或 .php 后缀的文件，文章页、列表页、首页对应的文件名常包含 post、article、entry、index、footer 等关键词。

以文章正文容器为例，打开对应模板后，找到包裹内容输出的 div。下面只是通用改动思路，实际标签和输出变量名需要按你的模板引擎调整：

<!-- 修改前 -->
<div class='article-content'>{content}</div>

<!-- 修改后 -->
<div class='article-content custom-readable-width'>{content}</div>

保存模板后，页面不一定立即变化。易写作如果启用模板缓存，需先在后台清理模板缓存；动态渲染服务还需要重启对应服务进程；如果模板经过构建步骤，需要重新构建静态资源。这些操作取决于部署方式，需要结合环境确认。

清理缓存并验证自定义结果

改完文件但页面没变化，先解决缓存问题，不要急着改代码。浏览器强刷的快捷键：Windows 用 Ctrl+F5 或 Ctrl+Shift+R，macOS 用 Cmd+Shift+R。强刷后，在开发者工具的 Network 面板中看 CSS 文件名对应的请求：如果返回 200 且 Response 内容包含刚才追加的代码，说明浏览器已经拿到新文件；如果仍返回 304 或旧内容，说明浏览器或服务端缓存层仍在服务旧版本。

CSS 改动还要检查 CDN 或反向代理缓存：如果站点部署了这类缓存，需要手动刷新 CSS 路径的缓存。模板改动除了浏览器缓存，还需要留意服务端模板编译目录，某些系统会把模板编译成临时文件，清理临时文件并重启应用后才能读取新结构。

最终验证标准：在开发者工具中选择目标元素，查看“计算样式”面板，确认 color、background-color、font-family 等属性值与自定义规则一致。若仍不一致，检查是否有更高优先级或加载顺序更靠后的其他 CSS 规则在覆盖。

易写作 自定义主题样式的代码改动位置