版式指导

关于如何制定一份自己的黑标笔版式,黑标笔版式是目前在站内以及SCPWIKI中高大上的版式,设计者以及创始人为WoedenazWoedenaz。黑标笔采用了全新的理念代替了原本站内的sigma-9版式,在某些情况下会相对比制作sigma-9版式更轻松些。那么,废话少说。

首先,引入黑标笔版式如

[[module CSS]]
@import url("https://nu-scptheme.github.io/Black-Highlighter/stable/styles/normalize.min.css");
@import url("https://nu-scptheme.github.io/Black-Highlighter/stable/styles/chinese/black-highlighter_ch.min.css");
[[/module]]

之后我们需要知道的是每一个元素属性中所代表的含义。

[[module CSS]]
/*↓ 所有变量 ↓ */

:root {
            /*↓ S-CSS-P 集成 ↓ */
            /*↓ 如果你正在制作一个新的CSS主题版式,请至少添加以下三个变量。 ↓ */
            /*↓ 每一个变量的说明在其下方 ↓ */

                  --theme-base: "黑色标记笔";
            /*↑ 必须为“黑色标记笔”或者“sigma9” ↑*/
                  --theme-id: "unnamed";
            /*↑ 你的版式页面的URL地址 - 例如“component:ar-theme”,则设置为“ar-theme” ↑*/
                  --theme-name: "未命名";
            /*↑ 你的版式的名字 ↑*/

            /*↓ 页眉 ↓ */

                  --logo-image: url("https://nu-scptheme.github.io/Black-Highlighter/img/logo.svg");
            /*↑ 页眉Logo ↑*/
                  --header-title: "SCP基金会";
            /*↑ 大标题 ↑*/
                  --header-subtitle: "控制,收容,保护";
            /*↑ 副标题 ↑*/

            /*↓ 字体 - 字体的数量可以任意增加,之间以半角逗号隔开,系统会根据设备是否安装了该字体从前往后依次渲染 ↓ */

                  --body-font: "Noto Sans SC", sans-serif;
            /*↑ 正文字体 ↑*/
                  --header-font: "Noto Sans SC", sans-serif;
            /*↑ 页眉字体 ↑*/
                  --title-font: "Noto Sans SC", sans-serif;
            /*↑ 标题字体 ↑*/
                  --mono-font: "ZCOOL QingKe HuangYou", "Andale Mono", "Courier New", Courier, monospace;
            /*↑ 等宽字 ↑*/

            /*↓ 标准颜色 ↓ */
            /*↓ 颜色格式为 RGB 红、绿、蓝 ↓ */

                  --white-monochrome: 252, 252, 252;
            /*↑ 白色 ↑*/
                  --pale-gray-monochrome: 244, 244, 244;
            /*↑ 非常浅的灰色,用于引用块 ↑*/
                  --light-pale-gray-monochrome: 244, 244, 244;
            /*↑ 浅灰色 ↑*/
                  --very-light-gray-monochrome: 215, 215, 215;
            /*↑ 浅灰色 ↑*/
                  --light-gray-monochrome: 160, 160, 160;
            /*↑ 浅灰色 ↑*/
                  --gray-monochrome: 66, 66, 72;
            /*↑ 灰色 ↑*/
                  --dark-gray-monochrome: 48, 48, 52;
            /*↑ 深灰色 ↑*/
                  --black-monochrome: 12, 12, 12;
            /*↑ 黑色 ↑*/
                  --pale-accent: 230, 40, 60;
            /*↑ 浅红色,链接颜色 ↑*/
                  --bright-accent: 133, 0, 5;
            /*↑ 亮红色 ↑*/
                  --medium-accent: 100, 46, 44;
            /*↑ 红色 - 基准颜色 ↑*/
                  --dark-accent: 100, 3, 15;
            /*↑ 深红色 ↑*/
                  --alt-accent: 221, 102, 17;
            /*↑ 橘色,页面不存在的链接颜色 ↑*/

            /*↓ 背景及页眉颜色 ↓ */

                  --background-gradient-color: var(--very-light-gray-monochrome);
                  --header-gradient-color-bottom: var(--medium-accent);
            /*↑ 页眉渐变 - 底端 ↑*/
                  --header-gradient-color-middle: var(--black-monochrome);
            /*↑ 页眉渐变 - 中间 ↑*/
                  --header-gradient-color-top: var(--black-monochrome);
            /*↑ 页面渐变 - 顶端 ↑*/

            /*↓ 主要版式颜色 - 一般无需修改 ↓ */

                  --swatch-background: var(--white-monochrome);
                  --swatch-primary: var(--bright-accent);
                  --swatch-primary-darker: var(--medium-accent);
                  --swatch-primary-darkest: var(--dark-accent);

            /*↓ 主要文字颜色 - 一般无需修改 ↓ */

                  --swatch-text-dark: var(--black-monochrome);
                  --swatch-text-light: var(--white-monochrome);
                  --swatch-important-text: var(--bright-accent);

            /*↓ 主要菜单颜色 - 一般无需修改 ↓ */

                  --swatch-menubg-color: var(--white-monochrome);
                  --swatch-menubg-light-color: var(--pale-gray-monochrome);
                  --swatch-menubg-medium-color: var(--light-gray-monochrome);
                  --swatch-menubg-medium-dark-color: var(--gray-monochrome);
                  --swatch-menubg-dark-color: var(--dark-gray-monochrome);
                  --swatch-menubg-black-color: var(--black-monochrome);
                  --swatch-menubg-hover-color: var(--black-monochrome);
                  --swatch-menutxt-dark-color: var(--black-monochrome);
                  --swatch-menutxt-light-color: var(--white-monochrome);
                  --swatch-border-color: var(--black-monochrome);

            /*↓ 主要页眉颜色 ↓ */

                  --swatch-headerh1-color: var(--white-monochrome);
            /*↑ 大标题颜色 - 即“SCP基金会” ↑*/
                  --swatch-headerh2-color: var(--white-monochrome);
            /*↑ 副标题颜色 - 即“控制,收容,保护” ↑*/
                  --swatch-topmenu-border-color: var(--black-monochrome);
            /*↑ 顶栏的边框颜色 ↑*/
                  --swatch-topmenu-bg-color: var(--gray-monochrome);
            /*↑ 顶栏的背景颜色 ↑*/

            /*↓ 链接颜色 ↓ */

                  --link-color: var(--pale-accent);
            /*↑ 一般链接颜色 ↑*/
                  --visited-link-color: var(--swatch-primary);
            /*↑ 已访问的链接颜色 ↑*/
                  --hover-link-color: var(--swatch-primary);
            /*↑ 高亮的链接颜色 - 鼠标悬停时 ↑*/
                  --newpage-color: var(--alt-accent);
            /*↑ 页面不存在的链接颜色 ↑*/
                  --sidebar-links-text: var(--swatch-menutxt-dark-color);
            /*↑ 侧边栏的链接颜色 ↑*/

            /*↓ 评分模块颜色 ↓ */

                  --rating-module-button-color: var(--black-monochrome);
            /*↑ 评分模块字体颜色 ↑*/
                  --rating-module-button-plus-color: 0, 200, 0;
            /*↑ 好评背景颜色 - 绿色 ↑*/
                  --rating-module-button-negative-color: 200, 0, 0;
            /*↑ 差评背景颜色 - 红色 ↑*/
                  --rating-module-button-cancel-color: 200, 200, 200;
            /*↑ 取消评分背景颜色 - 白色 ↑*/
                  --rating-module-button-credit-color: 50, 50, 50;
            /*↑ 著作信息模块中字母“i”的颜色 ↑*/
                  --rating-module-text-color: var(--swatch-menutxt-dark-color);
            /*↑ 评分模块字体颜色 ↑*/
                  --rating-module-text-hover-color: var(--swatch-menutxt-light-color);
            /*↑ 评分模块字体鼠标悬停时颜色 ↑*/

            /*↓ 页眉渐变 - 一般无需修改 ↓ */

                  --gradient-header: linear-gradient(
                  to top,
                        rgb(var(--header-gradient-color-bottom)) 0%,
                        rgb(var(--header-gradient-color-middle)) 90%,
                        rgb(var(--header-gradient-color-top)) 100%
            );
                  --gradient-topmenu: linear-gradient(
                  to bottom,
                  rgba(255, 255, 255, 0) 0%,
                        rgba(255, 255, 255, 0) var(--header-height-on-desktop),
                        rgba(var(--swatch-topmenu-border-color),1) var(--header-height-on-desktop),
                        rgba(var(--swatch-topmenu-bg-color), 1) calc(var(--header-height-on-desktop) + 0.125rem),
                        rgba(var(--swatch-topmenu-bg-color), 0.95) calc(100% - 0.125rem),
                        rgba(var(--swatch-topmenu-bg-color), 1) calc(100% - 0.125rem),
                        rgba(var(--swatch-topmenu-border-color), 1) 100%);
                  --gradient-topmenu-mobile: linear-gradient(
                  to bottom,
                        rgba(var(--swatch-topmenu-border-color),1) 0,
                        rgba(var(--swatch-topmenu-bg-color), 1) 0.125rem,
                        rgba(var(--swatch-topmenu-bg-color), 1) calc(var(--topbar-height-on-mobile) - 0.125rem),
                        rgba(var(--swatch-topmenu-bg-color), 1) calc(var(--topbar-height-on-mobile) - 0.125rem),
                        rgba(var(--swatch-topmenu-border-color),1) var(--topbar-height-on-mobile));
                  --diagonal-stripes: repeating-linear-gradient(
                  45deg,
                  hsla(0, 0%, 100%, 0),
                  hsla(0, 0%, 100%, 0) 0.25vh,
                  rgba(88, 88, 88, 0.1) 0.35vh,
                  rgba(88, 88, 88, 0.2) 0.5vh
            );
                  --gradient-sidemenu-header: linear-gradient(10deg,
                        rgba(var(--medium-accent), 0.45) 0%,
                        rgba(var(--medium-accent), 0.55) 100%
            );
                  --background-gradient-distance: 40rem;
                  --gradient-background: linear-gradient(
                  to bottom,
                        rgba(var(--background-gradient-color),1) 0,
                        rgba(var(--background-gradient-color),0.987) calc(0.008 * var(--background-gradient-distance)),
                        rgba(var(--background-gradient-color),0.951) calc(0.029 * var(--background-gradient-distance)),
                        rgba(var(--background-gradient-color),0.896) calc(0.064 * var(--background-gradient-distance)),
                        rgba(var(--background-gradient-color),0.825) calc(0.110 * var(--background-gradient-distance)),
                        rgba(var(--background-gradient-color),0.741) calc(0.166 * var(--background-gradient-distance)),
                        rgba(var(--background-gradient-color),0.648) calc(0.231 * var(--background-gradient-distance)),
                        rgba(var(--background-gradient-color),0.550) calc(0.304 * var(--background-gradient-distance)),
                        rgba(var(--background-gradient-color),0.450) calc(0.383 * var(--background-gradient-distance)),
                        rgba(var(--background-gradient-color),0.352) calc(0.467 * var(--background-gradient-distance)),
                        rgba(var(--background-gradient-color),0.259) calc(0.554 * var(--background-gradient-distance)),
                        rgba(var(--background-gradient-color),0.175) calc(0.644 * var(--background-gradient-distance)),
                        rgba(var(--background-gradient-color),0.104) calc(0.735 * var(--background-gradient-distance)),
                        rgba(var(--background-gradient-color),0.049) calc(0.825 * var(--background-gradient-distance)),
                        rgba(var(--background-gradient-color),0.013) calc(0.914 * var(--background-gradient-distance)),
                        rgba(var(--background-gradient-color),0) var(--background-gradient-distance));

            /*↓ 页面排版 - 一般无需修改 ↓ */

            /*↓ 页眉排版 - 一般无需修改 ↓ */
                  --header-height-on-desktop: 7.5rem;
                  --header-height-on-mobile: 7.5rem;
                  --topbar-height-on-desktop: 1.875rem;
                  --topbar-height-on-mobile: 3rem;
                  --header-background-image-size: 100% var(--header-height-on-desktop);

                  --body-width-on-desktop: 44.25rem;
                  --sidebar-width-on-desktop: calc((var(--base-font-size) * (14/15)) * 19);
                  --sidebar-width-on-mobile: calc((var(--base-font-size) * (14/15)) * 16);
                  --scrollbar-width: 1rem;
                  --border-styling: solid 0.0625rem rgb(var(--swatch-border-color));
                  --border-radius-width: 0.0625rem;

            /*↓ 阴影 - 一般无需修改 ↓ */
                  --box-border-bottom: 0 0.0625rem 0 0 rgb(var(--swatch-border-color));
                  --box-border-top: 0 -0.0625rem 0 0 rgb(var(--swatch-border-color));
                  --box-border-left: -0.0625rem 0 0 0 rgb(var(--swatch-border-color));
                  --box-border-right: 0.0625rem 0 0 0 rgb(var(--swatch-border-color));
                  --box-border-all: 0 0 0 0.0625rem rgb(var(--swatch-border-color));

            /*↓ 侧边栏 ↓ */
                  --sidebar-transition-timing: 0.5s ease-in-out 0.1s;
            /*↑ 侧边栏动画效果 - 持续时间、速度曲线、延迟时间 ↑*/
                  --sidebar-internal-border-thickness: 0.125rem;
            /*↑ 侧边栏项目的高度 ↑*/

            /*↓ 杂项 ↓ */
                  --base-font-size: 0.9375rem;
            /*↑ 基准字体大小 ↑*/
                  --base-line-height: 1.313rem;
                  --final-header-height-on-desktop: calc(var(--header-height-on-desktop) + var(--topbar-height-on-desktop));
                  --final-header-height-on-mobile: calc(var(--header-height-on-mobile) + var(--topbar-height-on-mobile));
}
[[/module]]

你只需要修改“:root”中的少许变量,就能改变整个版式的渲染。黑色标记笔使用的是 RGB 十进制编码,即三个 0 ~ 255 的数字表示红、绿、蓝三原色,之间以半角逗号隔开,例如:- -medium-accent: 100, 46, 44;,相当于十六进制的#642E2C。

基本上,你只需要改动- -pale-accent,- -bright-accent,- -medium-accent,- -dark-accent,- -alt-accent几个变量即可改变整个版式的基础色调。

这些内容的注解转自SCP中文WIKI中的一个帖子,对每个部位都进行了详细的说明,通过修改每一个子属性来更改网站内的版式。

黑标笔版式相对来说只需要更改根部选择器内的子元素即可做到修改版式的效果,或许可以让人轻轻松松的就能学会。当然如果学不会的话就尝试修改基准色中的颜色,这些颜色被修改就可以使得捆绑在黑标笔中的其他区块颜色被修改。

在“预览”的情况下是无法看到网站内的版式修改效果的,这时候你需要按下“保存”完成你的修改,只有这样版式的神奇才会为你而显现。

那么做完版式之后,想将版式发布该怎么做呢?

  • 在主页的新页面中创建一个新页面,并按下页面底部的标签按钮输入“原创”“版式”。
  • 用以下格式来表达你的代码。
[[code type="css"]]
你的代码
[[/code]]
  • 例如:
[[code type="css"]]
@import url("https://nu-scptheme.github.io/Black-Highlighter/stable/styles/normalize.min.css");
@import url("https://nu-scptheme.github.io/Black-Highlighter/stable/styles/chinese/black-highlighter_ch.min.css");
[[/code]]
  • 并在页面内引用你的版式
[[module CSS]]
@import url("http://scpsandboxcn.wikidot.com/collab:zimo/code/1");
[[/module]]

最后本次的指导到此结束如有问题或者是相关的建议可以向Whlie rockWhlie rock提出,感谢你的阅读,并祝愿你能创造出属于自己的黑标笔版式。
除非特别注明,本页内容采用以下授权方式: Creative Commons Attribution-ShareAlike 3.0 License