从零写一个轻墨主题
从零写一个轻墨主题
轻墨的“主题”本质是一层皮肤：把一个文件夹放进
themes/，里面声明自己是谁、并给出一份style.css，前台就完全换了一副面孔。本文带你从复制默认主题开始，做出一套属于自己的界面，顺便讲清楚它能改什么、不能改什么。
主题到底是什么
先看轻墨的主题机制，其实只有两个文件是“必需”的：
themes/我的主题名/
├── theme.php # 主题的身份证：名字、介绍、版本、作者
└── style.css # 决定前台长什么样的样式表系统怎么决定前台用哪套 CSS？规则写死在 includes/functions.php 的 theme_css_url() 里：
- 后台启用了一个主题（存在
data/config.php的theme字段里）； - 如果该主题不是
default且它的文件夹里有style.css→ 前台引用themes/主题名/style.css； - 否则回退到
assets/style.css（也就是默认复古主题那套）。
换句话说：默认主题没有自己的 CSS，它“借用” assets/style.css；你自己写的主题只要带 style.css，就从零接管前台长相。
小提示：
theme.php不是必须的。缺了它系统也能把主题列出来，只是名字会显示成文件夹名。还是建议写上。
第一步：复制默认主题改个色
最稳的开局不是从空文件开始，而是复制一个现成主题改。打开：
themes/paper/ # 或 themes/modern、themes/sakura整文件夹复制一份，改名成你喜欢的 slug（只允许字母、数字、下划线、连字符），比如 themes/myfirst/。然后改 theme.php：
<?php
return [
'name' => '我的第一个主题',
'description' => '照着教程做的第一个轻墨主题。',
'version' => '1.0.0',
'author' => '你的名字',
// 以后想支持深色模式，就加这一行（详见下文）
// 'dark_support' => 1,
];保存后进后台「主题市场」，就能看到它并一键启用。到这一步你已经“做”了一个主题——接下来才是好玩的部分。
主题要打扮的舞台长什么样
CSS 只管“长得像”，页面结构还是核心模板给的。前台的结构大致是这样（includes/header.php 开个头，index.php 出内容，includes/footer.php 收尾）：
<body class="theme-myfirst">
<div class="container">
<div class="header">
<h1 class="site-title"><a>博客名</a></h1>
<p class="desc">站点描述</p>
<nav class="nav">
<a>首页</a><span class="nav-sep">|</span><a>归档</a>…
</nav>
<form class="search-box">
<input class="search-input"> <button class="search-btn">搜索</button>
</form>
</div>
<div class="main">
<!-- 首页：文章列表 -->
<div class="post-list">
<div class="post-item">
<h2><a>标题</a></h2>
<div class="post-meta">发表于… | 分类… | 评论… | 阅读…</div>
<div class="post-summary">摘要…</div>
<div class="tag-list"><a>标签</a></div>
</div>
</div>
<!-- 文章页：正文 + 页脚 -->
<div class="post-content">
<h1>标题</h1>
<div class="post-meta">…</div>
<div class="content">正文 HTML…</div>
<div class="tag-list">…</div>
<div class="post-footer">标题/链接/作者/协议</div>
</div>
<!-- 评论：单条 + 楼中楼 -->
<div class="comment-list">
<div class="comment-item" id="comment-1">
<div class="comment-meta"><strong>昵称</strong> 发表于…</div>
<div class="comment-content">内容（含 <span class="at-mention">@某人</span>）</div>
<button class="reply-btn">↩ 回复</button>
<div class="comment-children">…子回复…</div>
</div>
<div class="emoji-bar"><button class="em">😀</button>…</div>
<div class="comment-form">…输入框…</div>
</div>
<!-- 友链页 -->
<div class="links-page">
<div class="friend-links">
<div class="friend-link"><a class="friend-link-name">站名</a>
<p class="friend-link-desc">介绍</p></div>
</div>
</div>
</div>
<div class="sidebar">
<div class="box"><h3>分类</h3><ul>…</ul></div>
<div class="box"><h3>最新评论</h3><ul>…</ul></div>
</div>
<div class="clear"></div>
<div class="footer">版权区…</div>
</div>
</body>写样式时，从上到下把这些区块都照顾到，页面就不会“漏馅”：
- 外层与头：
.container、.header、.site-title、.desc、.nav、.nav a、.search-box / .search-input / .search-btn； - 两栏：
.main、.sidebar、.sidebar .box h3、.clear； - 文章列表：
.post-item、.post-item h2 a、.post-meta、.post-summary、.tag-list a； - 文章页：
.post-content、.content、.content pre/code/blockquote/img、.post-footer； - 评论：
.comment-list、.comment-item、.comment-meta、.comment-content、.comment-children、.reply-btn、.at-mention、.emoji-bar .em、.comment-form； - 杂项：
.pagination、.msg.success/.error、.friend-link、.footer。
有个实用细节：
.container内容区里.main和.sidebar是靠 float 排成两栏的。移动端记得在媒体查询里把两者都改成float:none; width:100%，否则手机上看会挤成一团（参考内置主题的@media段落）。
深色模式：一行声明 + 一套变量
轻墨 v2.0 的深色模式是“CSS 变量”方案，主题只要：
- 在
theme.php里加'dark_support' => 1。这一步会让系统自动：在页面<head>里读取用户偏好（跟随系统或上次手动选择），并在导航栏渲染出 🌓 切换按钮——你完全不用写 JS。 - 在
style.css里把所有颜色抽象成变量，再补一套深色值：
:root {
--bg: #faf8f5; --text: #2d2d2d; --card: #fff;
--accent: #e8a0bf;
color-scheme: light;
}
html[data-theme="dark"] {
--bg: #17121a; --text: #e7dce4; --card: #241c26;
--accent: #e8a0bf;
color-scheme: dark;
}
body { background: var(--bg); color: var(--text); }只要正文里全用 var(--xxx)，切到深色时整站自动跟着变。注意：如果某处偷懒写了十六进制硬色（尤其背景、输入框、边框），深色模式下就会“亮瞎眼”，所以从一开始就养成用变量的习惯最省事。
自己动手的参考：三种做法
- 换肤（推荐入门）：只写
style.css，保留系统给的结构。改字体、配色、圆角、卡片、hover 动效，一小时能出效果。 - 参考内置主题：
themes/paper/结构极简适合入门；themes/modern/展示了完整变量化 + 深色模式；themes/sakura/展示了全套组件都做粉彩化的写法。 - 想动结构怎么办：主题层目前只提供视觉皮肤，不能替换
header.php/index.php的标签结构。如果你确实需要不一样的整体布局，有两条路：
- 只改前台少量行为：可以发布插件（或直接改
includes/header.php）——但后者会影响所有主题； - 把它当作轻墨的一个长期定制版来维护（fork 模板文件）。
CSS 做不到的“注入”可以靠钩子：前台 <head> 有 qm_head 动作钩子（插件用它加字体、统计代码都很方便），详见《轻墨插件开发指南》。
发布你的主题
主题做完就是普通文件夹。分享给别人时：
- 保证里面有
theme.php（含 name/description）和style.css； - 把文件夹打包成
主题名.zip； - 对方解压到站点根目录
themes/下，刷新后台「主题市场」即可看到并启用。
对照检查清单：首页、归档、文章页、友链页、评论楼中楼、搜索框、移动端各看一遍，重点盯两栏布局在窄屏的收拢和深色下的输入框。
一句话版本：复制一个现成主题 → 改 theme.php 声明身份 → 用 CSS 变量重写 style.css → 后台主题市场启用。想支持深色，再加一个 dark_support => 1。
评论 (0)
还没有评论，来抢沙发吧~
发表评论