版式的基础修改：Logo和页眉文本
你好！我是wackdog。这是我可能即将推出的系列基础指南的第一篇，教你如何根据自身需求修改版式，小到单个页面上的应用、大到完整的版式创建。
本系列指南将完全聚焦于快速实现特定修改。如果你想要学习更多有关CSS的一般知识，请查看鱼的纯新手CSS指南。
这篇指南将讲解 Logo 和 页眉标题（header titles） 的修改。
这些修改的具体实现方法会因基础版式1不同而异，每个基础版式都将在它们各自的章节中讲到。
辨识基础版式
第一步是弄清楚你正在使用什么基础版式，或者如果你使用的已经是自定义版式了，那就要弄清楚它是基于什么基础版式搭建的。以下是一些简单的判断方法：
Sigma
版式页上通常会直接告诉你这是一个Sigma版式。例如：
如果没有相关说明，或者它不要求include黑色标记笔（Black Highlighter）或玄武岩（Basalt），那它很可能就是Sigma。
黑色标记笔
黑色标记笔的版式页上会有它标志性的Logo，也会有一段黑标的include代码：
玄武岩
玄武岩的版式页上会有它标志性的Logo，也会有一段include代码：
修改Sigma
以下所有针对Sigma的修改方法也将适用于Sigma+。
Logo
在Sigma的CSS中，Logo是页眉的背景图像，可以通过如下方法进行更改：
[[module CSS]] #header { background-image: url(https://图片链接.png); } [[/module]]
将“https://图片链接.png”替换为你图片的URL，这一URL应为你将图片上传到SCP维基页面后获得的链接。
页眉
标题1：“SCP基金会”
此标题对应的代码及其修改方式如下：
[[module CSS]] #header h1 a span { line-height: 0px; max-height: 0px; color: transparent; text-shadow: none; } #header h1 a::before { content: "你的基金会"; } [[/module]]
标题2：“控制，收容，保护”
此标题对应的代码及其修改方式如下：
[[module CSS]] #header h2 span { line-height: 0px; max-height: 0px; color: transparent; text-shadow: none; } #header h2 span::before { content: "你的，其它，标语"; color: #f0f0c0; text-shadow: 1px 1px 1px rgba(0, 0, 0, .8); } [[/module]]
修改黑色标记笔
黑标使用了能让我们更加便捷地定位所需元素的变量：
Logo
用于改变Logo的变量是：
[[module CSS]] :root:lang(cn) { --logo-image: url("https://图片链接.png"); [[/module]]
页眉
用于改变页眉的变量是：
[[module CSS]] :root:lang(cn) { --header-title: "你的基金会"; --header-subtitle: "你的，其它，标语"; [[/module]]
修改玄武岩
玄武岩也使用了能让我们更加便捷地定位所需元素的变量：
Logo
用于改变Logo的变量是：
[[module CSS]] :root { --logo: url("https://图片链接.png"); [[/module]]
页眉
用于改变页眉的变量是：
[[module CSS]] :root { --title: "你的基金会"; --subtitle: "你的 - 其它 - 标语"; [[/module]]
篇末说明
快速提示与解决方案。
- 你不需要为每个修改都创建一个新的CSS模块（module CSS）。它们可以共用一个CSS模块。
- 请确保你的CSS模块位于你的版式include代码之后。
- 尽量不要让你的页眉标题们过长，因为可能会引发移动设备的换行问题。如需帮助设置以避免移动设备产生问题，你可以联系SCP官方Discord2中#writing-technical频道的成员。
下次见！下次我们将讲解版式颜色的修改以及调色盘！
页面版本: 3, 最后编辑于: 15 Mar 2026 11:20