船说 CMS 夜间阅读模式怎么添加

学完这篇，你能给船说 CMS 站点加一个「点一下变暗、刷新还记得」的夜间阅读模式，全程只改模板文件，不用装插件。

第一步：确认当前模板目录，找到要改的文件

先确定改哪个模板。登录后台，左侧菜单进入「模板」→「模板管理」（部分版本叫「模板风格」），看「当前模板」这一列显示的名字，船说 CMS 默认是 default。

接着打开服务器文件管理器（宝塔面板的「文件」、或用 FTP 工具），进入站点根目录下的：

/template/default/

在这个目录里找三个文件：header.html（公共头部）、foot.html（公共底部）、index.html（首页）。如果 index.html 里出现 {include file="header"} 这类写法，说明公共头部就是 header.html，接下来所有修改都以它为准。

注意：改之前先把 header.html 和 foot.html 复制一份改名备份，比如 header.html.bak，模板改崩了能立刻还原。

第二步：在 header.html 的 <head> 最前面插入防闪烁脚本

这一步解决「刷新页面时先白一下再变黑」的问题。打开 header.html，找到 </head> 标签，在 <head> 开头的第一个位置插入：

<script>
(function(){
  try{
    if(localStorage.getItem('cs_night')==='1'){
      document.documentElement.classList.add('night');
    }
  }catch(e){}
})();
</script>

必须放在 <head> 最前面，早于任何 CSS 和 body 内容执行，页面才会一上来就是暗色。

第三步：在同一个文件里定义夜间配色

继续在 header.html，在 </head> 前插入这段样式：

<style>
  :root{
    --bg:#ffffff; --text:#222222; --card:#f7f7f7;
    --border:#e5e5e5; --link:#1a73e8;
  }
  html.night{
    --bg:#16181d; --text:#c9ccd1; --card:#1f2229;
    --border:#2c3038; --link:#6ba8ff;
  }
  body{background:var(--bg);color:var(--text);transition:background .2s,color .2s;}
  a{color:var(--link);}
  html.night img{filter:brightness(.85);}
</style>

这段只是给整站定了底色和文字色。你模板里原本硬编码颜色（比如 color:#333、background:#fff）的地方不会自动变色，需要逐个替换成 var(--text)、var(--bg)。搜一下模板 CSS 文件里的 #fff、#000、#333，改一批测一批。

注意：船说 CMS 的模板是 ThinkPHP 模板语法，<style> 里的 { } 如果是纯 CSS 没问题；但如果你在 CSS 里写了 {$xxx} 变量，记得让它和 CSS 大括号分隔开，否则模板引擎可能报错。

第四步：在导航栏放切换按钮

在 header.html 里找到导航菜单的位置，通常是 <nav> 或 <ul class="nav">，在它的结束标签后面加一个按钮：

<button id="nightBtn" type="button" title="切换夜间模式">🌙</button>

按钮默认显示月亮图标，白天模式点它进夜间，夜间模式点它回白天。

第五步：在 foot.html 里写点击逻辑

打开 foot.html，在 </body> 前插入：

<script>
(function(){
  var root=document.documentElement;
  var b=document.getElementById('nightBtn');
  if(!b) return;
  b.textContent = root.classList.contains('night') ? '☀️' : '🌙';
  b.addEventListener('click',function(){
    var on = root.classList.toggle('night');
    b.textContent = on ? '☀️' : '🌙';
    try{ localStorage.setItem('cs_night', on?'1':'0'); }catch(e){}
  });
})();
</script>

localStorage 负责记住用户选择，下次访问自动恢复。

注意：按钮写在 header.html、脚本写在 foot.html，两者通过 id 关联，所以 id="nightBtn" 全站只能出现一次，别在列表页循环里重复输出。

第六步：清缓存并验证

回到后台，点右上角「更新缓存」（或「系统」→「缓存管理」→ 提交）。然后浏览器按 Ctrl + F5 强制刷新首页，点按钮应能立刻切换，再刷新页面应保持暗色不变。

如果没生效，先检查模板是否被缓存：删除 /runtime/ 目录下的缓存文件夹再刷新。

注意：手机上如果样式错位，多半是按钮宽度撑破了导航栏，给按钮加 flex-shrink:0; 试试。

小结

1. 改的是 /template/default/ 下的 header.html 和 foot.html，动手前先备份。
2. 防闪烁脚本必须放在 <head> 最前面，早于 CSS 执行。
3. 用 html.night 加 CSS 变量换色，比给每个元素单独写样式好维护。
4. 状态存 localStorage，刷新和二次访问都能记住。
5. 老模板里硬编码的 #fff、#333 要手动替换成变量，这一步最花时间。
6. 改完记得后台「更新缓存」并强制刷新浏览器。