准备工作
版本
Halo：1.4.11
说明
由于深度定制涉及修改主题配置文件，而这些文件放在服务器中，且 Halo 后台自带的页面编辑器并不能满足主题美化的需求。我们可以选择两种方法，一种是在本地编辑器上修改相应主题文件，然后将修改后的主题打包成压缩包上传至 Halo 后台以更新主题；另一种则是选择一款能连接服务器的 IDE，实时编辑主题文件。这里我选择的是后一种方法，利用 Vscode 来使用 ssh 远程连接服务器并同步修改主题上的文件，这样我们也能在浏览器中及时观查修改后的效果。
为了满足我们的需求：连接服务器、编辑 ftl 文件、编辑压缩 css 和js 文件，我们还需对 Vscode 进行一些配置，不得不说，Vscode 丰富的插件系统为我们修改主题配置文件提供了绝佳的效率和便利。
Vscode 的安装及使用
这里可以参考 Sanarous 的 halo 博客深度定制与美化教程-Vscode 的安装及使用。
Vscode 的安装
点击如下图中的按钮搜索需要安装的扩展然后安装：
涉及主题美化插件：
- Remote Development：打开服务器中的文件夹。
- Remote - Containers：远程服务支持。
- Remote -SSH：用于 ssh 连接远程服务器。
- Remote - SSH: Editing Configuration Files：远程 ssh 连接服务器的配置文件。
- FreeMarker：halo 主题的模板文件都是 ftl 结尾的，也就是用的 FreeMarker 模板引擎，所以需要安装对应的插件支持。
- JS & CSS Minifier：JS 和 CSS 压缩插件。
- Prettier - Code formatter：格式化插件
Vscode 的使用
安装好上述插件后，开始用 ssh 连接服务器，先编辑 ssh 配置文件。
按 F1 打开功能区，输入 ssh，选择 Remote - SSH: Editing Configuration Files：
然后选择如下列第一行路径，打开本机 ssh 的配置文件：
在这个配置文件中编辑信息，其中 Host 后面填写服务器别名，HostName 填写 ip 地址，User 就是登录服务器的用户名。其中后面填写的字段与前面的属性名之间需要间隔一个空格。如下：
Host 腾讯云服务器
HostName 127.0.0.1
User root
如图，点击连接，然后输入密码即可。
连接时的问题
我在连接时遇到问题：Vscode 提示过程试图写入的管道不存在。
网络上有多样的解决方法，我尝试这种方法成功。
- 修改提示中 C 盘路径下的文件夹权限：右键点击名为 config 的文件，
属性=>安全=>高级。 - 禁用继承。弹出删除所有继承权限，
确认。 添加=>高级=>立即查找=>选择你的用户名。- Vscode 的设置中，扩展 remote-SSH 的 config file 中加上 config 文件路径。
Halo 结构
具体查看此文档：开源 Java 博客系统 Halo 文档
系统目录结构
默认配置下，Halo 是工作在 ~/.halo 目录下的。
├── application.yaml // 用户自定义配置文件，默认是不存在的
├── db // H2 Database 数据库文件，可能还会有 halo.trace.db
│ ├── halo.mv.db
├── logs // 日志目录
│ ├── spring.log
├── templates
│ └── themes // Halo 主题目录
│ ├── anatole
│ ├── LIlGG_Sakura
└── upload // 通过本地上传的文件所在目录
主题目录结构
开发文档给出的结构为：
├── module // 公共模板目录
│ ├── comment.ftl // 比如：评论模板
│ ├── layout.ftl // 比如：布局模板
├── source // 静态资源目录
│ ├── css // 样式目录
│ ├── images // 图片目录
│ ├── js // JS 脚本目录
│ └── plugins // 前端库目录
├── index.ftl // 首页
├── post.ftl // 文章页
├── sheet.ftl // 自定义页面
├── sheet_xxx.ftl // 自定义模板，如：sheet_search.ftl、sheet_author.ftl。在后台新建自定义页面可选择。
├── archives.ftl // 归档页
├── categories.ftl // 分类目录页
├── category.ftl // 单个分类的所属文章页
├── tags.ftl // 标签页面
├── tag.ftl // 单个标签的所属文章页
├── search.ftl // 搜索结果页
├── links.ftl // 内置页面：友情链接
├── photos.ftl // 内置页面：图库
├── journals.ftl // 内置页面：日志
├── 404.ftl // 404 页
├── 500.ftl // 500 页
├── README.md // README，一般用于主题介绍或说明
├── screenshot.png // 主题预览图
├── settings.yaml // 主题选项配置文件
└── theme.yaml // 主题描述文件
LIlGG_Sakura 主题的目录结构大致如下：
├── inc
├── languages // 国际化
│ ├── zh.yml // 语言配置文件
│ ├── README.md // 说明文件
├── layouts // 布局模板
│ ├── authorprofile.ftl // 作者信息模板
│ ├── post-nextprev.ftl // 文末上下文信息模板
│ └── nav.ftl // 菜单栏模板
│ └── ...
├── mail_template // 邮件回复模板
│ ├── mail_reply.ftl
├── plugins // 插件
│ ├── mathjax // mathjax 数学公式插件
│ ├── aplayer // Aplayer 插件
│ └── live2d // Live2D 插件
├── script // js 文件
│ ├── app.js // 站点主 js 文件
│ ├── i18n.js // 国际化 js
│ └── utils.js // 工具类 js
├── source // 静态资源目录
│ ├── css // 样式目录
│ ├── images // 图片目录
│ ├── js // JS 脚本目录
│ └── lib // 库目录
│ ├── fonts // 字体文件目录
│ └── cursor // 鼠标样式目录
├── styles // 主题主样式目录
│ ├── style.css // 主题主样式文件
├── tpl // 内容模板
│ ├── content-thumb.ftl // 主页信息块模板
│ ├── content-single.ftl // 文章内容模板
│ ├── ...
├── index.ftl // 站点主页
├── post.ftl // 文章页
├── sheet.ftl // 自定义页面
├── sheet_xxx.ftl // 自定义模板，如：sheet_links.ftl
├── archives.ftl // 归档页
├── categories.ftl // 分类目录页
├── tags.ftl // 标签页面
├── comments.ftl // 评论区模板
├── header.ftl // <head> 部分
├── footer.ftl // <footer> 部分
├── settings.yaml // 主题选项配置文件
├── ...
注意：由于站点引入的是min.js以及min.css，因而当我们修改完app.js、style.css这些文件后应使用插件将其压缩。修改、压缩并保存完成后，在浏览器刷新网页即可查看效果。若无效果，可F12打开控制台，Application=>Storage=>Clear site data，这样清理完站点缓存后，然后刷新即可。
接下来进入正题。
主题美化教程
参考 Sanarous 文章 halo 博客深度定制与美化教程-主题基本美化教程。
由于 Sakura 主题后台允许我们添加自定义 CSS 内容，为方便调试，可先将需添加的 CSS 内容放入：Halo 后台=>主题=>LIlGG_Sakura=>设置=>基本设置=>自定义 CSS 样式 方框中。添加完后保存，再刷新页面即可看到效果。当样式 CSS 基本修改完成后，即可将其加入 style.css 中并将其压缩。
1.美化分隔符样式
由于该样式使用了 FontAwesome 图标，故需要引入相关 CSS 文件，Sakura 已引入，因此直接加入以下代码即可：
/* 美化 hr 样式 */
.entry-content hr#special{
position: relative;
margin: 2rem auto;
width: calc(100% - 4px);
border: 2px dashed #a4d8fa;
background: #fff;
}
.entry-content hr#special{
box-sizing: content-box;
height: 0;
overflow: visible;
}
.entry-content hr#special:before {
position: absolute;
top: -10px;
left: 5%;
z-index: 1;
color: #49b1f5;
content: '\f0c4';
font: normal normal normal 14px/1 FontAwesome;
font-size: 20px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
.entry-content hr#special:hover::before{
left: 95%;
}
此处我加入限定词special，即特殊的分割线才启用改形式，写法如下：
<hr id="special">
2.note 与 tag 标签
风格一
该样式同样使用 FontAwesome 图标，这里也直接加入即可：
/* note 标签 风格一 */
.note {
position: relative;
padding: 15px;
margin-top: 10px;
margin-bottom: 10px;
border: initial;
border-left: 3px solid #eee;
background-color: #f9f9f9;
border-radius: 3px;
font-size: var(--content-font-size);
}
.note p{
margin-bottom: .5rem;
margin-top: .5rem;
}
.note ol,
.note ul{
margin: unset
}
.note:not(.no-icon):before {
position: absolute;
font-family: FontAwesome;
font-size: larger;
top: 13px;
left: 15px;
}
.note:not(.no-icon) {
padding-left: 45px;
}
.note.info {
background-color: #eef7fa;
border-left-color: #428bca;
}
.note.info:not(.no-icon):before {
content: "\f05a";
color: #428bca;
}
.note.warning {
background-color: #fdf8ea;
border-left-color: #f0ad4e;
}
.note.warning:not(.no-icon):before {
content: "\f06a";
color: #f0ad4e;
}
.note.primary {
background-color: #f5f0fa;
border-left-color: #6f42c1;
}
.note.primary:not(.no-icon):before {
content: "\f055";
color: #6f42c1;
}
.note.danger {
background-color: #fcf1f2;
border-left-color: #d9534f;
}
.note.danger:not(.no-icon):before {
content: "\f056";
color: #d9534f;
}
/* 夜间适配：note 字体 */
body.dark .note p, body.dark .note ol, body.dark .note ul{
color: #232125 !important;
}
使用方法如下：
<div class="note info">这里是 info 标签样式</div>
<div class="note info no-icon">这里是不带符号的 info 标签样式</div>
<div class="note primary">这里是 primary 标签样式</div>
<div class="note primary no-icon">这里是不带符号的 primary 标签样式</div>
<div class="note warning">这里是 warning 标签样式</div>
<div class="note warning no-icon">这里是不带符号的 warning 标签样式</div>
<div class="note danger">这里是 danger 标签样式</div>
<div class="note danger no-icon">这里是不带符号的 danger 标签样式</div>
效果为：
这里是 info 标签样式
这里是 primary 标签样式
这里是 warning 标签样式
这里是 danger 标签样式
风格二
加入以下代码：
/* note 与 tag 标签 风格二 */
span.inline-tag {
display: inline;
padding: .2em .6em .3em;
font-size: 90%;
font-weight: 400;
line-height: 1;
color: #fff;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: .1rem;
border-radius: 6px;
background-color: var(--Color)
}
p.red,
span.red {
--Color: rgb(233, 30, 100);
--ColorA: rgba(233, 30, 100, 0.2);
}
p.green,
span.green {
--Color: rgb(139, 195, 74);
--ColorA: rgba(139, 195, 74, 0.2);
}
p.blue,
span.blue {
--Color: rgb(3, 169, 244);
--ColorA: rgba(3, 169, 244, 0.2);
}
p.yellow,
span.yellow {
--Color: rgb(255, 193, 7);
--ColorA: rgba(255, 193, 7, 0.2);
}
p.grey,
span.grey {
--Color: rgb(76, 76, 76);
--ColorA: rgba(76, 76, 76, 0.2);
}
p.div-border {
padding: 10px;
border: 1px solid var(--Color,#333);
border-radius: 0.4rem;
background-color: var(--ColorA, transparent);
}
p.left {
border-left-width: 5px;
border-left-color: var(--Color);
}
p.bottom {
border-bottom-width: 5px;
border-bottom-color: var(--Color);
}
p.right {
border-right-width: 5px;
border-right-color: var(--Color);
}
p.top {
border-top-width: 5px;
border-top-color: var(--Color);
}
使用方法：
/* note语法示例 */
<p class='div-border green'>绿色</p>
<p class='div-border red'>红色</p>
<p class='div-border yellow'>黄色</p>
<p class='div-border grey'>灰色</p>
<p class='div-border blue'>蓝色</p>
/* 小tag标签语法示例 */
<span class="inline-tag red">红色小标签</span>
<span class="inline-tag green">绿色小标签</span>
<span class="inline-tag blue">蓝色小标签</span>
<span class="inline-tag yellow">黄色小标签</span>
<span class="inline-tag grey">灰色小标签</span>
效果：
绿色
红色
黄色
灰色
蓝色
红色小标签 绿色小标签 蓝色小标签 黄色小标签 灰色小标签风格三
该风格使用了 FontAwesome v5.0+ 以上的图标，这里我们需要引入 FontAwesome v5.0+ 以上的 CSS 文件，否则图标不会展示。
用 Vscode 找到 LIlGG_Sakura/header.ftl文件并打开，在<head></head>内插入如下代码：
<!-- 引入 FontAwesome v5.0+ -->
<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet">
引入 CSS 文件后，加入以下代码：
样式代码
/* 渐变 note 标签样式 */
.tip {
position: relative;
color: #fff;
background: #20a0ff;
background: -webkit-gradient(linear,left top,right top,from(#20a0ff),to(#20b8ff));
background: -webkit-linear-gradient(left,#20a0ff,#20b8ff);
background: linear-gradient(90deg,#20a0ff,#20b8ff);
padding: 6px 20px;
border-radius: 10px;
-webkit-box-shadow: 0 3px 5px rgba(32,160,255,.5);
box-shadow: 0 3px 5px rgba(32,160,255,.5);
margin-bottom: 20px
}
.tip p {
margin: 5px 0!important
}
.tip:before {
background: #20a0ff;
background: -webkit-gradient(linear,left bottom,left top,from(#0092ff),to(#20b8ff));
background: -webkit-linear-gradient(bottom,#0092ff,#20b8ff);
background: linear-gradient(0deg,#0092ff,#20b8ff);
border-radius: 50%;
color: #fff;
content: "\f129";
font-size: 12px;
position: absolute;
width: 24px;
height: 24px;
line-height: 24.5px;
left: -12px;
top: -12px;
-webkit-box-shadow: 0 0 0 2.5px #fff;
box-shadow: 0 0 0 2.5px #fff;
font-weight: 600;
font-family: "Font Awesome 5 Free";
text-align: center
}
.btn,.getit a {
position: relative
}
.well .tip:before {
-webkit-box-shadow: 0 0 0 2.5px #f7f8f9;
box-shadow: 0 0 0 2.5px #f7f8f9
}
.tip ol {
margin: 0
}
.tip.success {
background: #61be33;
background: -webkit-gradient(linear,left top,right top,from(#61be33),to(#8fce44));
background: -webkit-linear-gradient(left,#61be33,#8fce44);
background: linear-gradient(90deg,#61be33,#8fce44);
text-shadow: 0 -1px #61be33;
-webkit-box-shadow: 0 3px 5px rgba(104,195,59,.5);
box-shadow: 0 3px 5px rgba(104,195,59,.5)
}
.tip.success:before {
background: -webkit-gradient(linear,left bottom,left top,from(#52bb1d),to(#95d34b));
background: -webkit-linear-gradient(bottom,#52bb1d,#95d34b);
background: linear-gradient(0deg,#52bb1d,#95d34b);
content: "\f00c";
text-shadow: 0 -1px #61be33
}
.tip.warning {
background: #ff953f;
background: -webkit-gradient(linear,left top,right top,from(#ff953f),to(#ffb449));
background: -webkit-linear-gradient(left,#ff953f,#ffb449);
background: linear-gradient(90deg,#ff953f,#ffb449);
text-shadow: 0 -1px #ff953f;
-webkit-box-shadow: 0 3px 5px rgba(255,154,73,.5);
box-shadow: 0 3px 5px rgba(255,154,73,.5)
}
.tip.warning:before {
background: -webkit-gradient(linear,left bottom,left top,from(#ff8f35),to(#ffc149));
background: -webkit-linear-gradient(bottom,#ff8f35,#ffc149);
background: linear-gradient(0deg,#ff8f35,#ffc149);
content: "\f12a";
text-shadow: 0 -1px #ff953f
}
.tip.error {
background: #ff4949;
background: -webkit-gradient(linear,left top,right top,from(#ff4949),to(#ff7849));
background: -webkit-linear-gradient(left,#ff4949,#ff7849);
background: linear-gradient(90deg,#ff4949,#ff7849);
text-shadow: 0 -1px #ff4949;
-webkit-box-shadow: 0 3px 5px rgba(255,73,73,.5);
box-shadow: 0 3px 5px rgba(255,73,73,.5)
}
.tip.error:before {
background: -webkit-gradient(linear,left bottom,left top,from(#ff3838),to(#ff7849));
background: -webkit-linear-gradient(bottom,#ff3838,#ff7849);
background: linear-gradient(0deg,#ff3838,#ff7849);
content: "\f00d";
text-shadow: 0 -1px #ff4949
}
使用方法：
<div class='tip'><p>default<p></div>
<div class='tip success'><p>success<p></div>
<div class='tip error'><p>error<p></div>
<div class='tip warning'><p>warning<p></div>
default
success
error
warning
3.仿知乎超链接卡片
效果如下：
打开文件：LIlGG_Sakura/script/app.js，可直接在末尾加入该 文件 中代码。
注：可自定义卡片图片，CTRL + F 定位 linkcard.webp，将对应两处的图片链接修改为你自己的图片即可。
添加完后，左键点击选择app.js，按下F1打开功能区，点击Minify以压缩得到app.min.js。
然后再添加样式：
/* 类知乎卡片 */
a.LinkCard::after{
background-color: unset;
}
.LinkCard-image {
border-radius: inherit !important;
margin-bottom: 0px !important;
}
4.修改主页信息及图标
iconfont 图标
站点各处图标基本可以自定义，前往 阿里巴巴矢量库 ，选择图标添加入库，然后点击右上角购物车图标，将所有选择的图标添加至项目（没有项目则新建）。
随后将跳转至项目处（资源管理 => 我的项目），此时可选择『查看在线链接』或『下载至本地』。有三种方式引入，这里我们选择第二种 Font class。
在LIlGG_Sakura/header.ftl的 <head></head> 块内加入如下行代码（其中链接可换成自己的）：
<link rel="stylesheet" href="//at.alicdn.com/t/font_2728362_clkhw59l078.css" media="noexist" onload="this.media='all'">
文字信息
站点全局文字信息位于:LIlGG_Sakura/languages/zh.yml,相关用法查看languages目录下的README.md文档。
修改文件对应内容即可，修改后需清除浏览器缓存后再刷新才可看见效果。
如上图，聚焦图部分可直接在主题的聚焦图区设置，聚焦图标可填入：iconfont icon-hot list-brands。再加入如下样式：
.list-brands{
margin-right:5px;
color:red
}
主页信息布局在 index.ftl 中，找到 fa fa-envira，将其修改为：iconfont icon-sakura rotating 即可。
置顶、标签、分类
信息模板位于：LIlGG_Sakura/tpl/content-thumb.ftl，定位至<div class="post-content-wrap"></div>，修改如下：
置顶样式
<#if post.topPriority?? && post.topPriority!=0> <span class="tag tag-primary">置顶</span></#if>
添加样式：
.tag {
padding: .16em .4em;
font-weight: 400;
line-height: 1;
text-align: center;
white-space: nowrap;
vertical-align: 1px;
border-radius: .25rem;
transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out
}
.tag.tag-primary {
color: #fff;
background-color: red;
font-size: 11px
}
浏览量
找到此行并修改：
<span><i class="iconfont icon-attention"></i><span class="i18n" data-iname="postlist.heat" data-ivalue="${post.visits?c}"></span></span>
修改为：
<span class="viewcount" title="浏览量">
<svg id="icon-huo" viewBox="0 0 1024 1024" width="14" height="14" style="vertical-align: -2px;"><path d="M14.656 512a497.344 497.344 0 1 0 994.688 0 497.344 497.344 0 1 0-994.688 0z" fill="#ff0000"></path><path d="M374.976 872.64c-48.299-100.032-22.592-157.44 14.421-211.37 40.448-58.966 51.115-117.611 51.115-117.611s31.659 41.386 19.115 106.005c56.149-62.72 66.816-162.133 58.325-200.405 127.317 88.746 181.59 281.002 108.181 423.381C1016 652.501 723.093 323.2 672.277 285.867c16.939 37.333 20.054 100.032-14.101 130.474-58.027-219.84-201.664-265.002-201.664-265.002 16.96 113.536-61.781 237.397-137.344 330.24-2.816-45.163-5.632-76.544-29.483-119.808-5.333 82.176-68.373 149.269-85.29 231.445-22.912 111.637 17.237 193.173 170.581 279.424z" fill="#FFFFFF"></path></svg>
<span class="i18n" data-iname="postlist.heat" data-ivalue="${post.visits?c}"></span>
</span>
标签
在分类信息即<#if post.categories?? && post.categories?size gt 0>的上面加入代码：
<#if post.tags?? && post.tags?size gt 0>
<span class="tagcontent" title="标签" style="margin-left: 5px;">
<svg id="icon-biaoqian" viewBox="0 0 1024 1024" width="14" height="14" style="vertical-align: -2px;"><path d="M512 512m-509.26933333 0a509.26933333 509.26933333 0 1 0 1018.53866666 0 509.26933333 509.26933333 0 1 0-1018.53866666 0Z" fill="#1e9969"></path><path d="M307.2 220.04622222c-35.04355555 0-64.62577778 29.696-64.62577778 64.62577778v148.36622222c0 35.04355555 21.61777778 83.62666667 45.85244445 107.86133333l253.38311111 253.38311112c24.23466667 24.23466667 64.62577778 24.23466667 88.97422222 0l186.02666667-186.02666667c24.23466667-24.23466667 24.23466667-64.62577778 0-88.97422222L563.31377778 265.89866667c-24.23466667-24.23466667-72.81777778-45.85244445-107.86133333-45.85244445H307.2z m83.51288889 212.992c-35.04355555 0-64.62577778-29.696-64.62577778-64.62577777 0-35.04355555 29.696-64.62577778 64.62577778-64.62577778 35.04355555 0 64.62577778 29.696 64.62577778 64.62577778 0.11377778 34.92977778-29.58222222 64.62577778-64.62577778 64.62577777z" fill="#FFFFFF"></path></svg>
<a href="${post.tags[0].fullPath!}">${post.tags[0].name!}</a>
</span>
</#if>
分类
找到此行并修改：
<span><i class="iconfont icon-file"></i><a href="${post.categories[0].fullPath!}">${post.categories[0].name!}</a></span>
修改为：
<span title="分类" style="margin-left: 5px;">
<svg t="1595123832012" class="icon" viewBox="0 0 1024 1024" width="14" height="14" style="vertical-align: -2px;"><path d="M974.99592797 774.77400863H49.00407203V220.36641817h857.08789887c38.11120672 0 69.04204115 30.93083443 69.04204115 69.04204115v485.36554931h-0.13808408zM627.71446098 220.36641817c0-63.9329301-51.78153086-115.71446098-115.71446098-115.71446098H49.00407203v115.71446098h578.71038895" fill="#CE9F06" p-id="4639"></path><path d="M164.718533 620.25792053V273.11453762h694.562934v347.14338291h-694.562934z" fill="#FFFFFF" p-id="4640"></path><path d="M974.99592797 848.09665633V398.49488435c0-31.89742302-25.95980747-57.85723049-57.85723049-57.85723048H106.86130252c-31.89742302 0-57.85723049 25.95980747-57.85723049 57.85723048v449.4636879c0 39.35396347 31.89742302 71.38947055 71.38947055 71.38947056h783.35099891c39.35396347 0.13808409 71.25138647-31.89742302 71.25138648-71.25138648z" fill="#FFCD2C" p-id="4641"></path></svg>
<a href="${post.categories[0].fullPath!}">${post.categories[0].name!}</a>
</span>
说明
此外若不想展示文章评论数量，可将对应信息注释或删去，如下：
<#--
<span class="comments-number">
<#if !settings.keep_record_mode!false>
<i class="iconfont icon-mark"></i>
<span class="i18n" data-iname="postlist.comments" data-ivalue="${post.commentCount!0}">
</span>
</#if>
</span>
-->
若想自定义信息前的小图标，则可前往阿里巴巴矢量库挑选心仪图标，下载 => 复制 SVG 代码，然后将代码取代对应位置的 SVG 图标即可，有需要还可调整样式。
5.文章内容过期提示信息
打开文件：LIlGG_Sakura/tpl/content-single.ftl，定位至：<div class="entry-content">，在该行下面加入：
<#if (.now?long-86400000*60)?number_to_datetime gte post.editTime?datetime>
<div class='note warning'>请注意，本文编写于 ${(((.now?long) - (post.createTime?long)) / 86400000)?int} 天前，最后编辑于 ${(((.now?long) - (post.editTime?long)) / 86400000)?int} 天前，其中某些信息可能已经过时。</div><hr id="special"/>
</#if>
默认当前时间与文章最后修改时间相差天数大于 60 天，才会出现此信息。可通过修改.now?long-86400000*60中的 60 来改变控制天数。
6.分类-书本展示
效果如下：
打开LIlGG_Sakura/categories.ftl，在</@header>后加入如下代码：
<div class="mycategory-content">
<span class="flex-category">
<a href="${categories[3].fullPath!}" title="${categories[3].name!}: ${categories[3].postCount!} 篇文章">
<div class="moleskine-wrapper">
<div class="moleskine-notebook">
<div class="notebook-cover">
<div class="notebook-skin">${categories[3].name!}</div>
</div>
<div class="notebook-page"></div>
</div>
</div>
</a>
<a href="${categories[1].fullPath!}" title="${categories[1].name!}: ${categories[1].postCount!} 篇文章">
<div class="moleskine-wrapper">
<div class="moleskine-notebook">
<div class="notebook-cover blue">
<div class="notebook-skin">${categories[1].name!}</div>
</div>
<div class="notebook-page ruled"></div>
</div>
</div>
</a>
<a href="${categories[2].fullPath!}" title="${categories[2].name!}: ${categories[2].postCount!} 篇文章">
<div class="moleskine-wrapper">
<div class="moleskine-notebook">
<div class="notebook-cover green">
<div class="notebook-skin">${categories[2].name!}</div>
</div>
<div class="notebook-page squared"></div>
</div>
</div>
</a>
<a href="${categories[0].fullPath!}" title="${categories[0].name!}: ${categories[0].postCount!} 篇文章">
<div class="moleskine-wrapper">
<div class="moleskine-notebook">
<div class="notebook-cover yellow">
<div class="notebook-skin">${categories[0].name!}</div>
</div>
<div class="notebook-page dotted"></div>
</div>
</div>
</a>
</span>
</div>
还需添加相关样式：
样式代码
/* 分类书本 */
.moleskine-wrapper {
max-width: calc(100% / 4);
min-width: 10em;
margin-bottom: 10px;
}
.dark .moleskine-wrapper {
-webkit-filter: brightness(.7)!important;
filter: brightness(.7)!important
}
.moleskine-notebook {
height: 200px;
position: relative;
transition: .5s linear;
border-radius: 5px 15px 15px 5px;
transform-origin: left center 0
}
.moleskine-notebook:hover {
transform: rotateZ(-10deg)
}
.moleskine-notebook:hover .notebook-cover {
transform: rotateY(-50deg);
z-index: 999;
box-shadow: 20px 10px 50px rgba(0,0,0,.2)
}
.notebook-cover {
background: #cc4b48;
height: 200px;
width: 140px;
position: absolute;
border-radius: 5px 15px 15px 5px;
z-index: 10;
transition: .5s linear;
transform-style: preserve-3d;
transform-origin: left center 0
}
.notebook-cover:before {
content: "";
position: absolute;
width: 10px;
height: calc(100% + 2px);
top: -1px;
z-index: 100;
border-radius: 2px;
right: 25px;
transition: 2s ease;
background: linear-gradient(to right,#9c2e2b 0,#cc4b48 12%,#9c2e2b 25%,#cc4b48 37%,#9c2e2b 50%,#cc4b48 62%,#9c2e2b 75%,#cc4b48 87%,#9c2e2b 100%)
}
.notebook-cover.blue {
background: #2e95aa
}
.notebook-cover.blue:before {
background: linear-gradient(to right,#1e606e 0,#2e95aa 12%,#1e606e 25%,#2e95aa 37%,#1e606e 50%,#2e95aa 62%,#1e606e 75%,#2e95aa 87%,#1e606e 100%)
}
.notebook-cover.green {
background: #abc3b5
}
.notebook-cover.green:before {
background: linear-gradient(to right,#7ea38e 0,#abc3b5 12%,#7ea38e 25%,#abc3b5 37%,#7ea38e 50%,#abc3b5 62%,#7ea38e 75%,#abc3b5 87%,#7ea38e 100%)
}
.notebook-cover.yellow {
background: #fed754
}
.notebook-cover.yellow:before {
background: linear-gradient(to right,#ebb501 0,#fed754 12%,#ebb501 25%,#fed754 37%,#ebb501 50%,#fed754 62%,#ebb501 75%,#fed754 87%,#ebb501 100%)
}
.notebook-skin {
height: 60px;
background: #e8e8e0;
margin-top: 60px;
padding: 10px 15px 15px 10px;
font-size: 19px;
position: relative;
z-index: 10;
color: #222;
text-align: left;
box-shadow: 0 1px 1px rgba(0,0,0,.2)
}
.notebook-skin:before {
content: '';
position: absolute;
width: 100%;
height: 15px;
left: 0;
bottom: 0;
background: #cddc39
}
.notebook-page {
height: 100%;
width: 140px;
position: absolute;
background-color: #fbfae8;
z-index: 0;
border-radius: 5px 16px 16px 5px;
overflow: hidden
}
.notebook-page.ruled {
background: linear-gradient(to bottom,#fbfae8 9px,#e4e4e4 1px);
background-size: 100% 10px
}
.notebook-page.squared {
background-image: linear-gradient(#e4e4e4 1px,transparent 1px),linear-gradient(90deg,#e4e4e4 1px,transparent 1px);
background-size: 10px 10px,10px 10px,2px 2px,2px 2px
}
.notebook-page.dotted {
background: linear-gradient(90deg,#fbfae8 10px,transparent 1%) center,linear-gradient(#fbfae8 10px,transparent 1%) center,#999;
background-size: 11px 11px
}
.mycategory-content {
margin-top: 50px;
margin-bottom: 50px
}
.mycategory-content .flex-category {
display: flex;
flex-wrap: wrap;
justify-content: space-around
}
7.tabs 标签 与 checkbox
tabs 标签
该标签需引入 js 文件，且引入应在使用之前，故而选择放在 head 部分，此外需要用到 jquery 库，为不与主题所使用的 jquery 库冲突，选择将原本于<footer>中引入的 lib.js 提前至 </head> 中。
打开LIlGG_Sakura/header.ftl，在 上方加入：
<script type="text/javascript" src="${res_base_url!}/source/js/lib.js"></script>
<script type='text/javascript' src='//willcai2020.gitee.io/files/js/tabs.min.js'></script>
用法：
<style type="text/css">
.tab_menu li{
width: 34%;
}
</style>
<div class="tab linkTabs">
<ul class="tab_menu">
<li class="current">第一栏</li>
<li>第二栏</li>
<li>第三栏</li>
</ul>
<div class="tab_box">
<div style="font-size: 16px;">
<p style="font-size:16px">第一栏</p>
</div>
<div style="font-size: 16px;" class="hide">
<p style="font-size:16px">第三栏</p>
</div>
<div style="font-size: 16px;" class="hide">
<p style="font-size:16px">第三栏</p>
</div>
</div>
</div>
<script>
$('.linkTabs').Tabs({
event: 'click'
});
</script>
效果：
第一栏
第三栏
第三栏
checkbox
引入样式：
样式代码
/* checkbox 样式 */
.checkbox {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center
}
.checkbox input {
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
position: relative;
height: 16px;
width: 16px;
transition: all .15s ease-out 0s;
cursor: pointer;
display: inline-block;
outline: 0;
border-radius: 2px;
-ms-flex-negative: 0;
flex-shrink: 0;
margin-right: 8px
}
.checkbox input[type=checkbox]:after,.checkbox input[type=checkbox]:before {
position: absolute;
content: "";
background: #fff
}
.checkbox input[type=checkbox]:before {
left: 1px;
top: 5px;
width: 0;
height: 2px;
transition: all .2s ease-in;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg)
}
.checkbox input[type=checkbox]:after {
right: 7px;
bottom: 3px;
width: 2px;
height: 0;
transition: all .2s ease-out;
transform: rotate(40deg);
-webkit-transform: rotate(40deg);
-moz-transform: rotate(40deg);
-ms-transform: rotate(40deg);
-o-transform: rotate(40deg);
transition-delay: .25s
}
.checkbox input[type=checkbox]:checked:before {
left: 0;
top: 7px;
width: 6px;
height: 2px
}
.checkbox input[type=checkbox]:checked:after {
right: 3px;
bottom: 1px;
width: 2px;
height: 10px
}
.checkbox.minus input[type=checkbox]:before {
transform: rotate(0);
left: 1px;
top: 5px;
width: 0;
height: 2px
}
.checkbox.minus input[type=checkbox]:after {
transform: rotate(0);
left: 1px;
top: 5px;
width: 0;
height: 2px
}
.checkbox.minus input[type=checkbox]:checked:before {
left: 1px;
top: 5px;
width: 10px;
height: 2px
}
.checkbox.minus input[type=checkbox]:checked:after {
left: 1px;
top: 5px;
width: 10px;
height: 2px
}
.checkbox.plus input[type=checkbox]:before {
transform: rotate(0);
left: 1px;
top: 5px;
width: 0;
height: 2px
}
.checkbox.plus input[type=checkbox]:after {
transform: rotate(0);
left: 5px;
top: 1px;
width: 2px;
height: 0
}
.checkbox.plus input[type=checkbox]:checked:before {
left: 1px;
top: 5px;
width: 10px;
height: 2px
}
.checkbox.plus input[type=checkbox]:checked:after {
left: 5px;
top: 1px;
width: 2px;
height: 10px
}
.checkbox.times input[type=checkbox]:before {
transform: rotate(45deg);
left: 3px;
top: 1px;
width: 0;
height: 2px
}
.checkbox.times input[type=checkbox]:after {
transform: rotate(135deg);
right: 3px;
top: 1px;
width: 0;
height: 2px
}
.checkbox.times input[type=checkbox]:checked:before {
left: 1px;
top: 5px;
width: 10px;
height: 2px
}
.checkbox.times input[type=checkbox]:checked:after {
right: 1px;
top: 5px;
width: 10px;
height: 2px
}
.checkbox input[type=radio] {
border-radius: 50%
}
.checkbox input[type=radio]:before {
content: "";
display: block;
width: 8px;
height: 8px;
border-radius: 50%;
margin: 2px;
transform: scale(0);
transition: all .25s ease-out
}
.checkbox input[type=radio]:checked:before {
transform: scale(1)
}
.checkbox input {
border: 2px solid #2196f3
}
.checkbox input[type=checkbox]:checked {
background: #2196f3
}
.checkbox input[type=radio]:checked:before {
background: #2196f3
}
.checkbox.red input {
border-color: #fe5f58
}
.checkbox.red input[type=checkbox]:checked {
background: #fe5f58
}
.checkbox.red input[type=radio]:checked:before {
background: #fe5f58
}
.checkbox.green input {
border-color: #3dc550
}
.checkbox.green input[type=checkbox]:checked {
background: #3dc550
}
.checkbox.green input[type=radio]:checked:before {
background: #3dc550
}
.checkbox.yellow input {
border-color: #ffbd2b
}
.checkbox.yellow input[type=checkbox]:checked {
background: #ffbd2b
}
.checkbox.yellow input[type=radio]:checked:before {
background: #ffbd2b
}
.checkbox.cyan input {
border-color: #1bcdfc
}
.checkbox.cyan input[type=checkbox]:checked {
background: #1bcdfc
}
.checkbox.cyan input[type=radio]:checked:before {
background: #1bcdfc
}
.checkbox.blue input {
border-color: #2196f3
}
.checkbox.blue input[type=checkbox]:checked {
background: #2196f3
}
.checkbox.blue input[type=radio]:checked:before {
background: #2196f3
}
.checkbox p {
display: inline-block;
margin-top: 2px!important;
margin-bottom: 0!important
}
用法：
<div class="checkbox checked">
<input type="checkbox" checked="">
<p>默认</p>
</div>
<div class="checkbox blue checked">
<input type="checkbox" checked="">
<p>这是蓝色</p>
</div>
<div class="checkbox green checked">
<input type="checkbox" checked="">
<p>这是绿色</p>
</div>
<div class="checkbox yellow checked">
<input type="checkbox" checked="">
<p>这是黄色</p>
</div>
<div class="checkbox times red checked">
<input type="checkbox" checked="">
<p>打个红色 × </p>
</div>
<div class="checkbox plus green checked">
<input type="checkbox" checked="">
<p>来个 “+” </p>
</div>
<div class="checkbox minus yellow checked">
<input type="checkbox" checked="">
<p>还有个 “-” </p>
</div>
效果：
默认
这是蓝色
这是绿色
这是黄色
打个红色 ×
来个 “+”
还有个 “-”
9.折叠样式
Markdown 支持折叠语句写法，如：
<details>
<summary>折叠文本</summary>
此处可书写文本
嗯，是可以书写文本的
</details>
<details>
<summary>折叠代码块</summary>
<pre><code>
System.out.println("虽然可以折叠代码块");
System.out.println("但是代码无法高亮");
</code></pre>
</details>
<details>
<summary>折叠代码块</summary>
<pre><blockcode>
System.out.println("虽然可以折叠代码块");
System.out.println("但是代码无法高亮");
</blockcode></pre>
</details>
可以添加样式如下：
样式代码
/* details 标签 */
details {
display: block;
padding: 16px;
margin: .5rem 0;
border-radius: 4px;
font-size: 16px;
transition: all .28s ease;
-moz-transition: all .28s ease;
-webkit-transition: all .28s ease;
-o-transition: all .28s ease;
border: 1px solid #f6f6f6;
line-height: 1.3
}
details summary {
display: list-item;
cursor: pointer;
padding: 16px;
margin: -16px;
border-radius: 4px;
color: rgba(85,85,85,.7);
font-size: 16px;
font-weight: 700;
position: relative
}
details summary>h1,details summary>h2,details summary>h3,details summary>h4,details summary>h5,details summary>h6,details summary>p {
display: inline;
border-bottom: none!important
}
details summary:hover {
color: #555
}
details summary:hover:after {
position: absolute;
content: "+";
text-align: center;
top: 50%;
transform: translateY(-50%);
right: 16px
}
details>summary {
background: #f6f6f6
}
details[blue] {
border-color: #e8f4fd
}
details[blue]>summary {
background: #e8f4fd
}
details[cyan] {
border-color: #e8fafe
}
details[cyan]>summary {
background: #e8fafe
}
details[green] {
border-color: #ebf9ed
}
details[green]>summary {
background: #ebf9ed
}
details[yellow] {
border-color: #fff8e9
}
details[yellow]>summary {
background: #fff8e9
}
details[red] {
border-color: #feefee
}
details[red]>summary {
background: #feefee
}
details[open] {
border-color: rgba(85,85,85,.2)
}
details[open]>summary {
border-bottom: 1px solid rgba(85,85,85,.2);
border-bottom-left-radius: 0;
border-bottom-right-radius: 0
}
details[open][blue] {
border-color: rgba(33,150,243,.3)
}
details[open][blue]>summary {
border-bottom-color: rgba(33,150,243,.3)
}
details[open][cyan] {
border-color: rgba(27,205,252,.3)
}
details[open][cyan]>summary {
border-bottom-color: rgba(27,205,252,.3)
}
details[open][green] {
border-color: rgba(61,197,80,.3)
}
details[open][green]>summary {
border-bottom-color: rgba(61,197,80,.3)
}
details[open][yellow] {
border-color: rgba(255,189,43,.3)
}
details[open][yellow]>summary {
border-bottom-color: rgba(255,189,43,.3)
}
details[open][red] {
border-color: rgba(254,95,88,.3)
}
details[open][red]>summary {
border-bottom-color: rgba(254,95,88,.3)
}
details[open]>summary {
color: #555;
margin-bottom: 0
}
details[open]>summary:hover:after {
content: "-"
}
details[open]>div.content {
font-size: 1.1rem;
line-height: var(--content-line-height);
padding: 16px;
margin: -16px;
margin-top: 0
}
details[open]>div.content>.fancybox:first-child,details[open]>div.content>.highlight:first-child,details[open]>div.content>.snote:first-child,details[open]>div.content>.tabs:first-child,details[open]>div.content>ol:first-child,details[open]>div.content>p:first-child,details[open]>div.content>ul:first-child {
margin-top: 0
}
details[open]>div.content>.fancybox:last-child,details[open]>div.content>.highlight:last-child,details[open]>div.content>.snote:last-child,details[open]>div.content>.tabs:last-child,details[open]>div.content>ol:last-child,details[open]>div.content>p:last-child,details[open]>div.content>ul:last-child {
margin-bottom: 0
}
使用方法：
<details cyan="">
<summary>
<p>折叠块</p>
</summary>
<div class="content">
折叠内容：
```
代码内容
```
</div>
</details>
其中 cyan 可换为：blue、green、yellow、red。
效果如下：
折叠块
折叠内容：
代码内容
折叠块
折叠内容：
代码内容
折叠块
折叠内容：
代码内容
折叠块
折叠内容：
代码内容
折叠块
折叠内容：
代码内容
10.文末信息
效果：
文章主部分布局即：LIlGG_Sakura\tpl\content-single.ftl，内容属于entry-content块，因此在<!-- .entry-content -->后加入如下代码：
<div class="article-copyright-info full-copyright-info">
<p style="font-size:16px;margin:0">
<svg id="icon-touxiang" viewBox="0 0 1024 1024" width="17" height="17" style="vertical-align: -2px;"><path d="M614.72 554.538c-49.086-6.399-100.27-2.1-149.256-2.1-119.465 0-209.04 95.972-206.84 215.437 0 17.095 8.498 31.99 23.493 40.488 14.896 10.697 34.09 14.896 53.285 17.095 61.882 6.398 123.664 6.398 198.342 6.398 40.488 0 93.872-2.1 142.858-4.298 27.692 0 53.284-4.3 78.877-14.896 19.194-8.498 29.89-19.194 31.99-40.488 8.498-104.57-72.478-204.84-172.75-217.636zM680.8 375.39c0-87.474-74.678-162.053-164.251-162.053-89.574 0-162.053 74.679-162.053 162.053-2.1 87.474 74.678 164.252 162.053 164.252 89.673 0 164.252-74.678 164.252-164.252z" fill="#FFFFFF"></path><path d="M512.35 0C228.733 0 0.5 228.233 0.5 511.85s228.233 511.85 511.85 511.85 511.85-228.233 511.85-511.85S795.967 0 512.35 0z m275.12 772.074c-2.1 21.294-12.797 31.99-31.991 40.488-25.593 10.697-51.185 14.896-78.877 14.896-49.086 2.099-102.37 4.298-142.858 4.298-74.678 0-136.46 0-198.342-6.398-19.195-2.1-38.389-6.398-53.285-17.095-14.895-8.497-23.493-23.493-23.493-40.488-2.1-119.465 87.475-215.437 206.84-215.437 49.085 0 100.27-4.299 149.256 2.1 100.27 12.896 181.247 113.166 172.75 217.636zM354.495 375.39c0-87.474 72.479-162.053 162.053-162.053S680.8 288.016 680.8 375.39c0 89.574-74.679 164.252-164.252 164.252-87.375 0-164.152-76.778-162.053-164.252z" fill="#249FF8"></path></svg>
本文由 <a href="https://crcrc.cn" target="_blank">ruchan</a> 创作，如果您觉得本文不错，请随意赞赏<br>
<svg id="icon-fenxiang" viewBox="0 0 1024 1024" width="17" height="17" style="vertical-align: -2px;"><path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#F3B243"></path><path d="M630.784 323.584m-90.112 0a90.112 90.112 0 1 0 180.224 0 90.112 90.112 0 1 0-180.224 0Z" fill="#FFFFFF"></path><path d="M630.784 688.128m-90.112 0a90.112 90.112 0 1 0 180.224 0 90.112 90.112 0 1 0-180.224 0Z" fill="#FFFFFF"></path><path d="M319.488 512m-90.112 0a90.112 90.112 0 1 0 180.224 0 90.112 90.112 0 1 0-180.224 0Z" fill="#FFFFFF"></path><path d="M341.037056 480.370688l257.343488-175.7184 27.713536 40.59136-257.339392 175.7184z" fill="#FFFFFF"></path><path d="M349.052928 488.452096l252.854272 182.10816-28.725248 39.886848-252.874752-182.10816z" fill="#FFFFFF"></path></svg>
采用 <a href="https://creativecommons.org/licenses/by/4.0/" target="_blank" rel="external nofollow">知识共享署名4.0</a> 国际许可协议进行许可，转载前请务必署名 <i class="fab fa-creative-commons" aria-hidden="true"></i><br>
<svg id="icon-ziyuan" viewBox="0 0 1024 1024" width="17" height="17" style="vertical-align: -2px;"><path d="M511.854421 0a511.854421 511.854421 0 1 0 512.145579 511.854421A511.854421 511.854421 0 0 0 511.854421 0z" fill="#39B54A"></path><path d="M576.491328 630.355417l-116.462895 116.462894a129.56497 129.56497 0 0 1-182.555587 0l-2.0381-2.038101a128.982656 128.982656 0 0 1 0-182.26443l81.232868-81.232868a179.644015 179.644015 0 0 0 13.102076 70.460051l-52.69946 52.408302a69.877737 69.877737 0 0 0 0 98.702303l2.038101 2.038101a70.168894 70.168894 0 0 0 98.702303 0l116.462895-116.462894a69.877737 69.877737 0 0 0 0-98.702304l-2.038101-2.0381a69.586579 69.586579 0 0 0-13.975547-10.772818l42.508956-42.508956a128.109184 128.109184 0 0 1 13.102076 11.355132l2.0381 2.0381a129.273813 129.273813 0 0 1 0 182.26443z" fill="#FFFFFF"></path><path d="M746.235997 460.901905l-81.232869 81.232869a179.352858 179.352858 0 0 0-13.102076-70.460051l52.69946-52.408303a69.877737 69.877737 0 0 0 0-98.702303l-2.038101-2.038101a69.877737 69.877737 0 0 0-98.702303 0l-116.462894 116.462895a69.877737 69.877737 0 0 0 0 98.702303l2.0381 2.038101a68.421951 68.421951 0 0 0 13.975548 10.772817l-42.508957 42.508957a136.552744 136.552744 0 0 1-13.102076-11.355132l-2.0381-2.038101a128.982656 128.982656 0 0 1 0-182.26443l116.462894-116.462894a129.56497 129.56497 0 0 1 182.555587 0l2.038101 2.0381a128.982656 128.982656 0 0 1 0 182.26443z" fill="#FFFFFF"></path></svg>
本文链接：<a href="${post.fullPath!}" target="_blank">https://crcrc.cn${post.fullPath!}</a><br>
<svg viewBox="0 0 1024 1024" p-id="3887" width="17" height="17" style="vertical-align: -2px;"><path d="M512 0C230.4 0 0 230.4 0 512s230.4 512 512 512 512-230.4 512-512-230.4-512-512-512z m102.4 294.4l19.2-38.4c19.2-32 44.8-6.4 44.8-6.4L768 396.8c19.2 32-19.2 38.4-19.2 38.4l-166.4 38.4c-57.6 6.4-38.4-32-38.4-32l19.2-44.8C320 307.2 236.8 480 236.8 480c76.8-300.8 377.6-185.6 377.6-185.6z m-198.4 435.2l-19.2 38.4c-19.2 32-44.8 6.4-44.8 6.4L256 627.2c-19.2-25.6 19.2-38.4 19.2-38.4l166.4-38.4c57.6-12.8 38.4 32 38.4 32l-19.2 44.8c249.6 83.2 320-89.6 320-89.6-57.6 294.4-364.8 192-364.8 192z m0 0" fill="#6190E8" p-id="3888"></path></svg>
最后更新于：${post.editTime?string('yyyy-MM-dd HH:mm:ss')}
</p>
</div>
还可添加样式：
/* 版权声明 */
.article-copyright-info {
font-size: 16px;
line-height: 2rem;
padding: 20px 16px;
color: #7b7b7b;
margin: 1rem auto
}
.full-copyright-info {
background-color: rgba(189,189,189,.2);
border-left: 2px solid #354b58;
border-radius: 5px;
max-width: 800px;
margin: 0;
letter-spacing: 0;
margin-top: 30px
}
以上内容以及样式请自行修改调整。
深入定制
主题模式切换
Sakura 主题自带多主题切换，其中包括深色模式，具体实现请见LIlGG_Sakura/script/app.js，切换主题部分：CBG: function()。
动态深色背景
编辑 LIlGG_Sakura/header.ftl，在 </header> 下加入：
<div class="stars-con">
<div id="stars"></div>
<div id="stars2"></div>
<div id="stars3"></div>
</div>
然后添加样式：
样式代码
/* 动态深色背景 */
/* 主题适配 */
body.dark .site-content,
body.dark .wrapper,
body.dark #main-container,
body.dark .site-footer,
body.dark .comments{
background-color: unset !important;
}
body.dark .headertop,
body.dark .pattern-center{
opacity: .7;
}
.dark .stars-con {
position: fixed;
height: 100vh;
width: 100vw;
overflow: hidden;
z-index: -111;
background: linear-gradient(#15151b,#1b1b2e,#231832)
}
.dark #stars {
width: 1px;
height: 1px;
background: 0 0;
box-shadow: 1804px 1265px #fff,365px 332px #fff,86px 1888px #fff,1888px 484px #fff,199px 1489px #fff,1459px 1010px #fff,807px 388px #fff,855px 558px #fff,83px 1095px #fff,1418px 377px #fff,677px 886px #fff,862px 1709px #fff,1058px 1085px #fff,50px 1772px #fff,1941px 1544px #fff,377px 900px #fff,184px 712px #fff,1797px 1928px #fff,507px 1861px #fff,1849px 19px #fff,1399px 200px #fff,972px 497px #fff,795px 1109px #fff,746px 970px #fff,1524px 972px #fff,1631px 389px #fff,1026px 1016px #fff,1295px 862px #fff,1258px 1876px #fff,791px 189px #fff,1519px 45px #fff,592px 1405px #fff,620px 130px #fff,1044px 1171px #fff,37px 1578px #fff,1589px 86px #fff,1024px 528px #fff,1613px 568px #fff,912px 1175px #fff,1177px 133px #fff,67px 1641px #fff,1168px 357px #fff,310px 1873px #fff,1187px 573px #fff,308px 1839px #fff,565px 24px #fff,1691px 1555px #fff,1384px 1551px #fff,179px 861px #fff,1850px 1966px #fff,1169px 1979px #fff,1182px 1522px #fff,616px 751px #fff,1083px 908px #fff,684px 766px #fff,67px 955px #fff,1813px 1714px #fff,1256px 1413px #fff,332px 803px #fff,1670px 1921px #fff,362px 211px #fff,1513px 423px #fff,1304px 1145px #fff,1292px 1168px #fff,611px 802px #fff,1297px 575px #fff,540px 1289px #fff,1551px 1678px #fff,1545px 237px #fff,423px 138px #fff,1088px 28px #fff,642px 1637px #fff,429px 1293px #fff,1276px 1900px #fff,1168px 1696px #fff,847px 837px #fff,151px 1395px #fff,1490px 75px #fff,1588px 131px #fff,1739px 1358px #fff,709px 624px #fff,343px 502px #fff,1342px 1690px #fff,175px 1722px #fff,964px 1299px #fff,892px 1326px #fff,519px 1142px #fff,1014px 193px #fff,1181px 360px #fff,325px 139px #fff,482px 1199px #fff,613px 8px #fff,1976px 1125px #fff,346px 60px #fff,1565px 818px #fff,268px 1590px #fff,213px 1666px #fff,800px 464px #fff,974px 1825px #fff,1066px 23px #fff,1995px 1499px #fff,666px 1130px #fff,1074px 1710px #fff,1636px 1483px #fff,1379px 1509px #fff,1221px 887px #fff,1857px 964px #fff,1046px 993px #fff,1875px 643px #fff,1504px 1607px #fff,1065px 641px #fff,1095px 752px #fff,566px 1737px #fff,1972px 1778px #fff,146px 1517px #fff,1923px 588px #fff,557px 881px #fff,1885px 1950px #fff,1739px 1598px #fff,1048px 501px #fff,1316px 705px #fff,1900px 1697px #fff,1187px 917px #fff,1688px 1025px #fff,648px 1634px #fff,1002px 572px #fff,603px 1995px #fff,215px 693px #fff,688px 1374px #fff,1389px 1166px #fff,1310px 1140px #fff,245px 587px #fff,845px 63px #fff,296px 1646px #fff,792px 350px #fff,756px 1493px #fff,1553px 1079px #fff,850px 66px #fff,963px 1904px #fff,81px 207px #fff,1776px 1634px #fff,1759px 521px #fff,1761px 1536px #fff,601px 1485px #fff,898px 153px #fff,48px 648px #fff,1644px 1109px #fff,1974px 60px #fff,1278px 653px #fff,616px 432px #fff,1179px 1849px #fff,739px 677px #fff,808px 1850px #fff,1104px 827px #fff,984px 888px #fff,1027px 44px #fff,1462px 1105px #fff,902px 1486px #fff,769px 441px #fff,431px 1195px #fff,4px 764px #fff,562px 7px #fff,952px 1744px #fff,822px 971px #fff,1016px 1804px #fff,1429px 1161px #fff,328px 1568px #fff,101px 746px #fff,649px 1484px #fff,1903px 569px #fff,733px 871px #fff,1554px 505px #fff,1076px 642px #fff,609px 641px #fff,996px 149px #fff,1595px 758px #fff,14px 1083px #fff,261px 767px #fff,1274px 1517px #fff,1412px 215px #fff,1651px 879px #fff,284px 1633px #fff,1439px 287px #fff,1717px 270px #fff,1107px 1063px #fff,1521px 1831px #fff,656px 1702px #fff,25px 230px #fff,1958px 1615px #fff,646px 675px #fff,1201px 343px #fff,1918px 1064px #fff,1932px 609px #fff,1203px 900px #fff,10px 575px #fff,1582px 1828px #fff,1184px 462px #fff,1px 1619px #fff,1440px 1071px #fff,1844px 1913px #fff,376px 1054px #fff,1883px 1236px #fff,571px 493px #fff,354px 1701px #fff,747px 60px #fff,11px 1142px #fff,1136px 1891px #fff,1682px 473px #fff,1537px 1520px #fff,902px 836px #fff,1313px 395px #fff,534px 341px #fff,230px 1614px #fff,14px 1387px #fff,1296px 1765px #fff,1064px 1270px #fff,761px 975px #fff,1855px 335px #fff,198px 110px #fff,1660px 598px #fff,1022px 933px #fff,518px 356px #fff,19px 865px #fff,471px 830px #fff,758px 358px #fff,541px 1652px #fff,320px 926px #fff,425px 1826px #fff,659px 353px #fff,708px 778px #fff,862px 641px #fff,475px 1362px #fff,1326px 1449px #fff,446px 802px #fff,391px 1169px #fff,496px 39px #fff,1534px 934px #fff,1822px 1809px #fff,1454px 237px #fff,187px 1555px #fff,1069px 1977px #fff,1880px 1508px #fff,279px 418px #fff,1938px 1980px #fff,1304px 530px #fff,1763px 187px #fff,1945px 1642px #fff,311px 1490px #fff,770px 1598px #fff,263px 330px #fff,1733px 1771px #fff,978px 34px #fff,325px 1776px #fff,873px 1460px #fff,365px 33px #fff,913px 1999px #fff,667px 1021px #fff,27px 572px #fff,950px 1858px #fff,448px 1205px #fff,1302px 1138px #fff,1269px 932px #fff,480px 132px #fff,770px 1871px #fff,952px 654px #fff,623px 90px #fff,419px 1683px #fff,930px 794px #fff,1327px 1651px #fff,769px 1536px #fff,895px 90px #fff,599px 1268px #fff,1645px 919px #fff,1672px 1080px #fff,1637px 1259px #fff,243px 1182px #fff,1509px 457px #fff,1374px 1469px #fff,751px 137px #fff,1097px 1008px #fff,1979px 1381px #fff,981px 1825px #fff,928px 1930px #fff,632px 422px #fff,812px 341px #fff,1077px 1832px #fff,203px 1452px #fff,664px 1531px #fff,1203px 57px #fff,1654px 1203px #fff,491px 174px #fff,1507px 735px #fff,964px 896px #fff,52px 1718px #fff,1435px 26px #fff,753px 635px #fff,890px 1847px #fff,42px 1353px #fff,717px 72px #fff,1845px 1212px #fff,344px 867px #fff,418px 855px #fff,899px 1124px #fff,1798px 1582px #fff,1774px 760px #fff,908px 1567px #fff,1647px 1210px #fff,299px 82px #fff,1179px 1317px #fff,938px 1580px #fff,82px 921px #fff,657px 1596px #fff,892px 1264px #fff,1161px 819px #fff,607px 1447px #fff,605px 679px #fff,1642px 595px #fff,1963px 525px #fff,1656px 1591px #fff,1467px 1743px #fff,167px 1420px #fff,471px 492px #fff,1077px 932px #fff,774px 1282px #fff,799px 701px #fff,400px 258px #fff,235px 1937px #fff,894px 562px #fff,1277px 907px #fff,435px 1360px #fff,507px 1253px #fff,1022px 833px #fff,351px 773px #fff,1126px 1969px #fff,1382px 1620px #fff,411px 59px #fff,187px 906px #fff,644px 1364px #fff,1721px 1451px #fff,1879px 1390px #fff,1396px 318px #fff,1002px 891px #fff,1930px 1454px #fff,1952px 496px #fff,1308px 1325px #fff,343px 475px #fff,285px 373px #fff,1329px 1591px #fff,901px 1875px #fff,966px 254px #fff,1624px 1577px #fff,371px 589px #fff,1918px 1494px #fff,841px 589px #fff,873px 1657px #fff,970px 1697px #fff,1354px 975px #fff,807px 1099px #fff,384px 1608px #fff,1600px 1739px #fff,110px 1310px #fff,687px 1611px #fff,324px 394px #fff,1267px 224px #fff,1122px 1919px #fff,1753px 578px #fff,611px 479px #fff,1494px 475px #fff,1595px 368px #fff,304px 1379px #fff,1663px 87px #fff,1789px 1471px #fff,941px 1861px #fff,287px 657px #fff,1882px 217px #fff,1766px 1960px #fff,144px 966px #fff,872px 943px #fff,1705px 1909px #fff,1318px 1173px #fff,1856px 1549px #fff,1722px 1482px #fff,196px 594px #fff,355px 1182px #fff,1242px 112px #fff,226px 344px #fff,674px 895px #fff,210px 2px #fff,1224px 488px #fff,220px 617px #fff,1857px 1348px #fff,426px 1026px #fff,1370px 720px #fff,109px 440px #fff,1940px 1575px #fff,978px 1443px #fff,308px 614px #fff,1392px 1351px #fff,635px 1231px #fff,1132px 616px #fff,756px 342px #fff,1968px 765px #fff,1020px 1877px #fff,1998px 1325px #fff,1296px 1303px #fff,1817px 223px #fff,1184px 907px #fff,546px 845px #fff,51px 705px #fff,1421px 735px #fff,1255px 700px #fff,249px 1908px #fff,1701px 351px #fff,173px 1658px #fff,1088px 1476px #fff,1930px 1787px #fff,689px 1312px #fff,615px 1006px #fff,1870px 1229px #fff,1900px 546px #fff,1416px 141px #fff,1983px 945px #fff,1104px 1351px #fff,426px 701px #fff,431px 1597px #fff,893px 456px #fff,1976px 1914px #fff,1538px 673px #fff,916px 1386px #fff,304px 138px #fff,1038px 681px #fff,1349px 1740px #fff,1231px 552px #fff,35px 1435px #fff,588px 652px #fff,793px 575px #fff,542px 926px #fff,1252px 25px #fff,831px 332px #fff,718px 283px #fff,1327px 1952px #fff,1019px 704px #fff,888px 1117px #fff,1107px 1378px #fff,532px 505px #fff,1070px 552px #fff,346px 645px #fff,63px 1783px #fff,775px 879px #fff,165px 160px #fff,788px 1225px #fff,1562px 1520px #fff,56px 1522px #fff,439px 498px #fff,1988px 1521px #fff,254px 1363px #fff,1162px 816px #fff,219px 386px #fff,1789px 1315px #fff,1090px 1415px #fff,1361px 315px #fff,825px 1306px #fff,92px 548px #fff,1501px 1946px #fff,350px 1735px #fff,459px 1533px #fff,1417px 931px #fff,1849px 174px #fff,220px 1084px #fff,1357px 209px #fff,1974px 358px #fff,90px 808px #fff,1247px 765px #fff,1878px 725px #fff,1415px 87px #fff,1253px 943px #fff,1455px 1919px #fff,1321px 337px #fff,1210px 1600px #fff,1855px 1575px #fff,325px 936px #fff,1118px 892px #fff,703px 294px #fff,89px 891px #fff,239px 1548px #fff,280px 262px #fff,1401px 555px #fff,1092px 1638px #fff,673px 1207px #fff,1469px 1358px #fff,1253px 1986px #fff,1249px 1040px #fff,253px 484px #fff,1163px 775px #fff,426px 162px #fff,721px 1761px #fff,369px 510px #fff,702px 1599px #fff,1883px 483px #fff,680px 1604px #fff,870px 1599px #fff,976px 1808px #fff,916px 477px #fff,1223px 1636px #fff,506px 993px #fff,898px 1284px #fff,1013px 290px #fff,1189px 78px #fff,25px 588px #fff,960px 861px #fff,28px 526px #fff,959px 681px #fff,1426px 1329px #fff,294px 557px #fff,1907px 1320px #fff,1289px 1627px #fff,124px 451px #fff,967px 653px #fff,892px 1460px #fff,537px 1385px #fff,197px 1954px #fff,1543px 302px #fff,747px 1953px #fff,995px 1630px #fff,1423px 1221px #fff,1075px 983px #fff,1556px 1739px #fff,1068px 1425px #fff,81px 550px #fff,1668px 523px #fff,1158px 438px #fff,401px 1795px #fff,537px 1072px #fff,1px 326px #fff,249px 118px #fff,832px 1544px #fff,240px 153px #fff,651px 1077px #fff,1656px 542px #fff,1102px 606px #fff,1583px 788px #fff,1205px 1842px #fff,1657px 1793px #fff,1848px 1464px #fff,1285px 1395px #fff,662px 1227px #fff,1790px 134px #fff,577px 263px #fff,383px 702px #fff,1728px 1953px #fff,417px 57px #fff,1390px 574px #fff,1024px 287px #fff,1969px 753px #fff,1239px 1036px #fff,1063px 1313px #fff,1784px 1519px #fff,1665px 682px #fff,806px 1437px #fff,394px 917px #fff,904px 666px #fff,801px 1280px #fff,1392px 1930px #fff,1611px 1386px #fff,1809px 1507px #fff,1720px 1300px #fff,1721px 1287px #fff,969px 240px #fff,3px 1070px #fff,1198px 538px #fff,1416px 1001px #fff,1665px 1265px #fff,1010px 1275px #fff,772px 978px #fff,1980px 980px #fff,1283px 1573px #fff,444px 516px #fff,875px 737px #fff,258px 716px #fff,1698px 758px #fff,644px 238px #fff,19px 876px #fff,355px 1327px #fff,1602px 1846px #fff,548px 534px #fff,1498px 1473px #fff,1389px 1136px #fff,174px 771px #fff,955px 1931px #fff,403px 371px #fff,1502px 794px #fff,117px 876px #fff,536px 778px #fff,67px 393px #fff,119px 1918px #fff,1912px 1663px #fff,1141px 245px #fff,1105px 130px #fff,1218px 1608px #fff,662px 1502px #fff,1907px 927px #fff,521px 109px #fff,1885px 362px #fff,1785px 1935px #fff,781px 427px #fff,1446px 1991px #fff,164px 1539px #fff,1807px 1795px #fff,1922px 890px #fff,1245px 933px #fff,446px 450px #fff,1743px 79px #fff,1959px 310px #fff,1348px 749px #fff,1954px 128px #fff,1980px 1030px #fff,1850px 302px #fff,1074px 922px #fff,174px 403px #fff,1579px 733px #fff,653px 1958px #fff,1511px 1943px #fff,1037px 741px #fff,602px 1384px #fff,103px 402px #fff,1722px 1417px #fff,1732px 1916px #fff,1743px 1803px #fff,381px 721px #fff,964px 1700px #fff,1070px 341px #fff,1376px 1258px #fff,1884px 570px #fff,940px 280px #fff,1484px 1658px #fff,1806px 1875px #fff,1054px 917px #fff,1672px 103px #fff,783px 574px #fff,98px 347px #fff,555px 1136px #fff,1403px 1237px #fff,1203px 339px #fff,572px 35px #fff,932px 1783px #fff,1527px 1850px #fff,1959px 1109px #fff,892px 623px #fff,211px 1388px #fff,1581px 1806px #fff,868px 1053px #fff,1243px 1997px #fff,1004px 522px #fff,1241px 1707px #fff,376px 282px #fff,537px 878px #fff,1948px 979px #fff,532px 688px #fff,273px 958px #fff,581px 927px #fff,1060px 887px #fff,486px 1467px #fff,1122px 1834px #fff,1650px 1763px #fff,532px 302px #fff,314px 1111px #fff,1888px 683px #fff,1856px 1040px #fff,1780px 1338px #fff,24px 1564px #fff,1096px 1808px #fff,1202px 1968px #fff,214px 992px #fff,728px 515px #fff,247px 278px #fff,1670px 45px #fff,442px 1579px #fff,1143px 30px #fff,612px 72px #fff,1177px 1303px #fff,1898px 1255px #fff,378px 1667px #fff,326px 1929px #fff,1257px 766px #fff,1363px 1170px #fff,1090px 1667px #fff,711px 293px #fff,249px 1406px #fff,1589px 565px #fff,1451px 29px #fff,1171px 1459px #fff,1294px 1214px #fff,342px 942px #fff,1945px 353px #fff,741px 1185px #fff,894px 1453px #fff,593px 1584px #fff,518px 630px #fff,393px 756px #fff,34px 608px #fff;
animation: animStar 50s linear infinite
}
.dark #stars:after {
content: " ";
position: absolute;
top: 2000px;
width: 1px;
height: 1px;
background: 0 0;
box-shadow: 1804px 1265px #fff,365px 332px #fff,86px 1888px #fff,1888px 484px #fff,199px 1489px #fff,1459px 1010px #fff,807px 388px #fff,855px 558px #fff,83px 1095px #fff,1418px 377px #fff,677px 886px #fff,862px 1709px #fff,1058px 1085px #fff,50px 1772px #fff,1941px 1544px #fff,377px 900px #fff,184px 712px #fff,1797px 1928px #fff,507px 1861px #fff,1849px 19px #fff,1399px 200px #fff,972px 497px #fff,795px 1109px #fff,746px 970px #fff,1524px 972px #fff,1631px 389px #fff,1026px 1016px #fff,1295px 862px #fff,1258px 1876px #fff,791px 189px #fff,1519px 45px #fff,592px 1405px #fff,620px 130px #fff,1044px 1171px #fff,37px 1578px #fff,1589px 86px #fff,1024px 528px #fff,1613px 568px #fff,912px 1175px #fff,1177px 133px #fff,67px 1641px #fff,1168px 357px #fff,310px 1873px #fff,1187px 573px #fff,308px 1839px #fff,565px 24px #fff,1691px 1555px #fff,1384px 1551px #fff,179px 861px #fff,1850px 1966px #fff,1169px 1979px #fff,1182px 1522px #fff,616px 751px #fff,1083px 908px #fff,684px 766px #fff,67px 955px #fff,1813px 1714px #fff,1256px 1413px #fff,332px 803px #fff,1670px 1921px #fff,362px 211px #fff,1513px 423px #fff,1304px 1145px #fff,1292px 1168px #fff,611px 802px #fff,1297px 575px #fff,540px 1289px #fff,1551px 1678px #fff,1545px 237px #fff,423px 138px #fff,1088px 28px #fff,642px 1637px #fff,429px 1293px #fff,1276px 1900px #fff,1168px 1696px #fff,847px 837px #fff,151px 1395px #fff,1490px 75px #fff,1588px 131px #fff,1739px 1358px #fff,709px 624px #fff,343px 502px #fff,1342px 1690px #fff,175px 1722px #fff,964px 1299px #fff,892px 1326px #fff,519px 1142px #fff,1014px 193px #fff,1181px 360px #fff,325px 139px #fff,482px 1199px #fff,613px 8px #fff,1976px 1125px #fff,346px 60px #fff,1565px 818px #fff,268px 1590px #fff,213px 1666px #fff,800px 464px #fff,974px 1825px #fff,1066px 23px #fff,1995px 1499px #fff,666px 1130px #fff,1074px 1710px #fff,1636px 1483px #fff,1379px 1509px #fff,1221px 887px #fff,1857px 964px #fff,1046px 993px #fff,1875px 643px #fff,1504px 1607px #fff,1065px 641px #fff,1095px 752px #fff,566px 1737px #fff,1972px 1778px #fff,146px 1517px #fff,1923px 588px #fff,557px 881px #fff,1885px 1950px #fff,1739px 1598px #fff,1048px 501px #fff,1316px 705px #fff,1900px 1697px #fff,1187px 917px #fff,1688px 1025px #fff,648px 1634px #fff,1002px 572px #fff,603px 1995px #fff,215px 693px #fff,688px 1374px #fff,1389px 1166px #fff,1310px 1140px #fff,245px 587px #fff,845px 63px #fff,296px 1646px #fff,792px 350px #fff,756px 1493px #fff,1553px 1079px #fff,850px 66px #fff,963px 1904px #fff,81px 207px #fff,1776px 1634px #fff,1759px 521px #fff,1761px 1536px #fff,601px 1485px #fff,898px 153px #fff,48px 648px #fff,1644px 1109px #fff,1974px 60px #fff,1278px 653px #fff,616px 432px #fff,1179px 1849px #fff,739px 677px #fff,808px 1850px #fff,1104px 827px #fff,984px 888px #fff,1027px 44px #fff,1462px 1105px #fff,902px 1486px #fff,769px 441px #fff,431px 1195px #fff,4px 764px #fff,562px 7px #fff,952px 1744px #fff,822px 971px #fff,1016px 1804px #fff,1429px 1161px #fff,328px 1568px #fff,101px 746px #fff,649px 1484px #fff,1903px 569px #fff,733px 871px #fff,1554px 505px #fff,1076px 642px #fff,609px 641px #fff,996px 149px #fff,1595px 758px #fff,14px 1083px #fff,261px 767px #fff,1274px 1517px #fff,1412px 215px #fff,1651px 879px #fff,284px 1633px #fff,1439px 287px #fff,1717px 270px #fff,1107px 1063px #fff,1521px 1831px #fff,656px 1702px #fff,25px 230px #fff,1958px 1615px #fff,646px 675px #fff,1201px 343px #fff,1918px 1064px #fff,1932px 609px #fff,1203px 900px #fff,10px 575px #fff,1582px 1828px #fff,1184px 462px #fff,1px 1619px #fff,1440px 1071px #fff,1844px 1913px #fff,376px 1054px #fff,1883px 1236px #fff,571px 493px #fff,354px 1701px #fff,747px 60px #fff,11px 1142px #fff,1136px 1891px #fff,1682px 473px #fff,1537px 1520px #fff,902px 836px #fff,1313px 395px #fff,534px 341px #fff,230px 1614px #fff,14px 1387px #fff,1296px 1765px #fff,1064px 1270px #fff,761px 975px #fff,1855px 335px #fff,198px 110px #fff,1660px 598px #fff,1022px 933px #fff,518px 356px #fff,19px 865px #fff,471px 830px #fff,758px 358px #fff,541px 1652px #fff,320px 926px #fff,425px 1826px #fff,659px 353px #fff,708px 778px #fff,862px 641px #fff,475px 1362px #fff,1326px 1449px #fff,446px 802px #fff,391px 1169px #fff,496px 39px #fff,1534px 934px #fff,1822px 1809px #fff,1454px 237px #fff,187px 1555px #fff,1069px 1977px #fff,1880px 1508px #fff,279px 418px #fff,1938px 1980px #fff,1304px 530px #fff,1763px 187px #fff,1945px 1642px #fff,311px 1490px #fff,770px 1598px #fff,263px 330px #fff,1733px 1771px #fff,978px 34px #fff,325px 1776px #fff,873px 1460px #fff,365px 33px #fff,913px 1999px #fff,667px 1021px #fff,27px 572px #fff,950px 1858px #fff,448px 1205px #fff,1302px 1138px #fff,1269px 932px #fff,480px 132px #fff,770px 1871px #fff,952px 654px #fff,623px 90px #fff,419px 1683px #fff,930px 794px #fff,1327px 1651px #fff,769px 1536px #fff,895px 90px #fff,599px 1268px #fff,1645px 919px #fff,1672px 1080px #fff,1637px 1259px #fff,243px 1182px #fff,1509px 457px #fff,1374px 1469px #fff,751px 137px #fff,1097px 1008px #fff,1979px 1381px #fff,981px 1825px #fff,928px 1930px #fff,632px 422px #fff,812px 341px #fff,1077px 1832px #fff,203px 1452px #fff,664px 1531px #fff,1203px 57px #fff,1654px 1203px #fff,491px 174px #fff,1507px 735px #fff,964px 896px #fff,52px 1718px #fff,1435px 26px #fff,753px 635px #fff,890px 1847px #fff,42px 1353px #fff,717px 72px #fff,1845px 1212px #fff,344px 867px #fff,418px 855px #fff,899px 1124px #fff,1798px 1582px #fff,1774px 760px #fff,908px 1567px #fff,1647px 1210px #fff,299px 82px #fff,1179px 1317px #fff,938px 1580px #fff,82px 921px #fff,657px 1596px #fff,892px 1264px #fff,1161px 819px #fff,607px 1447px #fff,605px 679px #fff,1642px 595px #fff,1963px 525px #fff,1656px 1591px #fff,1467px 1743px #fff,167px 1420px #fff,471px 492px #fff,1077px 932px #fff,774px 1282px #fff,799px 701px #fff,400px 258px #fff,235px 1937px #fff,894px 562px #fff,1277px 907px #fff,435px 1360px #fff,507px 1253px #fff,1022px 833px #fff,351px 773px #fff,1126px 1969px #fff,1382px 1620px #fff,411px 59px #fff,187px 906px #fff,644px 1364px #fff,1721px 1451px #fff,1879px 1390px #fff,1396px 318px #fff,1002px 891px #fff,1930px 1454px #fff,1952px 496px #fff,1308px 1325px #fff,343px 475px #fff,285px 373px #fff,1329px 1591px #fff,901px 1875px #fff,966px 254px #fff,1624px 1577px #fff,371px 589px #fff,1918px 1494px #fff,841px 589px #fff,873px 1657px #fff,970px 1697px #fff,1354px 975px #fff,807px 1099px #fff,384px 1608px #fff,1600px 1739px #fff,110px 1310px #fff,687px 1611px #fff,324px 394px #fff,1267px 224px #fff,1122px 1919px #fff,1753px 578px #fff,611px 479px #fff,1494px 475px #fff,1595px 368px #fff,304px 1379px #fff,1663px 87px #fff,1789px 1471px #fff,941px 1861px #fff,287px 657px #fff,1882px 217px #fff,1766px 1960px #fff,144px 966px #fff,872px 943px #fff,1705px 1909px #fff,1318px 1173px #fff,1856px 1549px #fff,1722px 1482px #fff,196px 594px #fff,355px 1182px #fff,1242px 112px #fff,226px 344px #fff,674px 895px #fff,210px 2px #fff,1224px 488px #fff,220px 617px #fff,1857px 1348px #fff,426px 1026px #fff,1370px 720px #fff,109px 440px #fff,1940px 1575px #fff,978px 1443px #fff,308px 614px #fff,1392px 1351px #fff,635px 1231px #fff,1132px 616px #fff,756px 342px #fff,1968px 765px #fff,1020px 1877px #fff,1998px 1325px #fff,1296px 1303px #fff,1817px 223px #fff,1184px 907px #fff,546px 845px #fff,51px 705px #fff,1421px 735px #fff,1255px 700px #fff,249px 1908px #fff,1701px 351px #fff,173px 1658px #fff,1088px 1476px #fff,1930px 1787px #fff,689px 1312px #fff,615px 1006px #fff,1870px 1229px #fff,1900px 546px #fff,1416px 141px #fff,1983px 945px #fff,1104px 1351px #fff,426px 701px #fff,431px 1597px #fff,893px 456px #fff,1976px 1914px #fff,1538px 673px #fff,916px 1386px #fff,304px 138px #fff,1038px 681px #fff,1349px 1740px #fff,1231px 552px #fff,35px 1435px #fff,588px 652px #fff,793px 575px #fff,542px 926px #fff,1252px 25px #fff,831px 332px #fff,718px 283px #fff,1327px 1952px #fff,1019px 704px #fff,888px 1117px #fff,1107px 1378px #fff,532px 505px #fff,1070px 552px #fff,346px 645px #fff,63px 1783px #fff,775px 879px #fff,165px 160px #fff,788px 1225px #fff,1562px 1520px #fff,56px 1522px #fff,439px 498px #fff,1988px 1521px #fff,254px 1363px #fff,1162px 816px #fff,219px 386px #fff,1789px 1315px #fff,1090px 1415px #fff,1361px 315px #fff,825px 1306px #fff,92px 548px #fff,1501px 1946px #fff,350px 1735px #fff,459px 1533px #fff,1417px 931px #fff,1849px 174px #fff,220px 1084px #fff,1357px 209px #fff,1974px 358px #fff,90px 808px #fff,1247px 765px #fff,1878px 725px #fff,1415px 87px #fff,1253px 943px #fff,1455px 1919px #fff,1321px 337px #fff,1210px 1600px #fff,1855px 1575px #fff,325px 936px #fff,1118px 892px #fff,703px 294px #fff,89px 891px #fff,239px 1548px #fff,280px 262px #fff,1401px 555px #fff,1092px 1638px #fff,673px 1207px #fff,1469px 1358px #fff,1253px 1986px #fff,1249px 1040px #fff,253px 484px #fff,1163px 775px #fff,426px 162px #fff,721px 1761px #fff,369px 510px #fff,702px 1599px #fff,1883px 483px #fff,680px 1604px #fff,870px 1599px #fff,976px 1808px #fff,916px 477px #fff,1223px 1636px #fff,506px 993px #fff,898px 1284px #fff,1013px 290px #fff,1189px 78px #fff,25px 588px #fff,960px 861px #fff,28px 526px #fff,959px 681px #fff,1426px 1329px #fff,294px 557px #fff,1907px 1320px #fff,1289px 1627px #fff,124px 451px #fff,967px 653px #fff,892px 1460px #fff,537px 1385px #fff,197px 1954px #fff,1543px 302px #fff,747px 1953px #fff,995px 1630px #fff,1423px 1221px #fff,1075px 983px #fff,1556px 1739px #fff,1068px 1425px #fff,81px 550px #fff,1668px 523px #fff,1158px 438px #fff,401px 1795px #fff,537px 1072px #fff,1px 326px #fff,249px 118px #fff,832px 1544px #fff,240px 153px #fff,651px 1077px #fff,1656px 542px #fff,1102px 606px #fff,1583px 788px #fff,1205px 1842px #fff,1657px 1793px #fff,1848px 1464px #fff,1285px 1395px #fff,662px 1227px #fff,1790px 134px #fff,577px 263px #fff,383px 702px #fff,1728px 1953px #fff,417px 57px #fff,1390px 574px #fff,1024px 287px #fff,1969px 753px #fff,1239px 1036px #fff,1063px 1313px #fff,1784px 1519px #fff,1665px 682px #fff,806px 1437px #fff,394px 917px #fff,904px 666px #fff,801px 1280px #fff,1392px 1930px #fff,1611px 1386px #fff,1809px 1507px #fff,1720px 1300px #fff,1721px 1287px #fff,969px 240px #fff,3px 1070px #fff,1198px 538px #fff,1416px 1001px #fff,1665px 1265px #fff,1010px 1275px #fff,772px 978px #fff,1980px 980px #fff,1283px 1573px #fff,444px 516px #fff,875px 737px #fff,258px 716px #fff,1698px 758px #fff,644px 238px #fff,19px 876px #fff,355px 1327px #fff,1602px 1846px #fff,548px 534px #fff,1498px 1473px #fff,1389px 1136px #fff,174px 771px #fff,955px 1931px #fff,403px 371px #fff,1502px 794px #fff,117px 876px #fff,536px 778px #fff,67px 393px #fff,119px 1918px #fff,1912px 1663px #fff,1141px 245px #fff,1105px 130px #fff,1218px 1608px #fff,662px 1502px #fff,1907px 927px #fff,521px 109px #fff,1885px 362px #fff,1785px 1935px #fff,781px 427px #fff,1446px 1991px #fff,164px 1539px #fff,1807px 1795px #fff,1922px 890px #fff,1245px 933px #fff,446px 450px #fff,1743px 79px #fff,1959px 310px #fff,1348px 749px #fff,1954px 128px #fff,1980px 1030px #fff,1850px 302px #fff,1074px 922px #fff,174px 403px #fff,1579px 733px #fff,653px 1958px #fff,1511px 1943px #fff,1037px 741px #fff,602px 1384px #fff,103px 402px #fff,1722px 1417px #fff,1732px 1916px #fff,1743px 1803px #fff,381px 721px #fff,964px 1700px #fff,1070px 341px #fff,1376px 1258px #fff,1884px 570px #fff,940px 280px #fff,1484px 1658px #fff,1806px 1875px #fff,1054px 917px #fff,1672px 103px #fff,783px 574px #fff,98px 347px #fff,555px 1136px #fff,1403px 1237px #fff,1203px 339px #fff,572px 35px #fff,932px 1783px #fff,1527px 1850px #fff,1959px 1109px #fff,892px 623px #fff,211px 1388px #fff,1581px 1806px #fff,868px 1053px #fff,1243px 1997px #fff,1004px 522px #fff,1241px 1707px #fff,376px 282px #fff,537px 878px #fff,1948px 979px #fff,532px 688px #fff,273px 958px #fff,581px 927px #fff,1060px 887px #fff,486px 1467px #fff,1122px 1834px #fff,1650px 1763px #fff,532px 302px #fff,314px 1111px #fff,1888px 683px #fff,1856px 1040px #fff,1780px 1338px #fff,24px 1564px #fff,1096px 1808px #fff,1202px 1968px #fff,214px 992px #fff,728px 515px #fff,247px 278px #fff,1670px 45px #fff,442px 1579px #fff,1143px 30px #fff,612px 72px #fff,1177px 1303px #fff,1898px 1255px #fff,378px 1667px #fff,326px 1929px #fff,1257px 766px #fff,1363px 1170px #fff,1090px 1667px #fff,711px 293px #fff,249px 1406px #fff,1589px 565px #fff,1451px 29px #fff,1171px 1459px #fff,1294px 1214px #fff,342px 942px #fff,1945px 353px #fff,741px 1185px #fff,894px 1453px #fff,593px 1584px #fff,518px 630px #fff,393px 756px #fff,34px 608px #fff
}
.dark #stars2 {
width: 2px;
height: 2px;
background: 0 0;
box-shadow: 114px 658px #fff,236px 768px #fff,1130px 1503px #fff,486px 592px #fff,1353px 1407px #fff,1583px 1741px #fff,450px 1479px #fff,1845px 327px #fff,1520px 361px #fff,580px 1699px #fff,1277px 1233px #fff,1697px 943px #fff,568px 1135px #fff,1273px 263px #fff,788px 126px #fff,1834px 1911px #fff,1147px 1652px #fff,651px 567px #fff,79px 1897px #fff,1590px 666px #fff,1362px 566px #fff,275px 367px #fff,556px 479px #fff,1063px 476px #fff,1337px 1119px #fff,1780px 1109px #fff,1323px 1655px #fff,1740px 1165px #fff,525px 60px #fff,1513px 1484px #fff,708px 280px #fff,429px 475px #fff,563px 1360px #fff,1580px 697px #fff,1702px 1164px #fff,1649px 1952px #fff,1580px 1812px #fff,70px 1190px #fff,1100px 98px #fff,1232px 1896px #fff,851px 1047px #fff,851px 30px #fff,596px 1486px #fff,666px 526px #fff,1855px 1342px #fff,80px 531px #fff,248px 1804px #fff,1990px 263px #fff,1796px 1640px #fff,1502px 862px #fff,1780px 488px #fff,1881px 1191px #fff,1063px 876px #fff,1614px 1073px #fff,1414px 666px #fff,1865px 289px #fff,687px 352px #fff,1329px 1312px #fff,279px 136px #fff,475px 756px #fff,1177px 435px #fff,1264px 921px #fff,467px 1496px #fff,391px 1359px #fff,666px 1083px #fff,1526px 1251px #fff,594px 564px #fff,991px 525px #fff,1511px 875px #fff,1935px 1049px #fff,1471px 1430px #fff,959px 604px #fff,1685px 72px #fff,1505px 1876px #fff,509px 1627px #fff,1065px 978px #fff,1860px 884px #fff,1038px 464px #fff,1051px 106px #fff,1056px 728px #fff,1953px 45px #fff,1483px 638px #fff,559px 845px #fff,1184px 922px #fff,1320px 1117px #fff,1572px 747px #fff,1971px 43px #fff,665px 13px #fff,1457px 1153px #fff,848px 154px #fff,1039px 1837px #fff,878px 795px #fff,1286px 1705px #fff,1946px 1143px #fff,1114px 1166px #fff,1747px 874px #fff,1894px 636px #fff,1316px 541px #fff,1953px 1620px #fff,1446px 1773px #fff,974px 833px #fff,1814px 1211px #fff,102px 335px #fff,327px 1868px #fff,348px 548px #fff,353px 1540px #fff,1212px 1872px #fff,1968px 129px #fff,1531px 644px #fff,1939px 559px #fff,1397px 1876px #fff,1446px 1446px #fff,1721px 603px #fff,924px 1171px #fff,1086px 1954px #fff,1798px 310px #fff,21px 1595px #fff,1462px 1948px #fff,149px 1752px #fff,804px 318px #fff,1262px 636px #fff,1051px 100px #fff,392px 560px #fff,654px 1236px #fff,1889px 1159px #fff,498px 394px #fff,522px 1889px #fff,1198px 579px #fff,1437px 1866px #fff,1049px 1064px #fff,286px 921px #fff,993px 1790px #fff,1557px 1997px #fff,1525px 532px #fff,481px 1561px #fff,790px 683px #fff,141px 17px #fff,1202px 28px #fff,518px 1927px #fff,90px 1677px #fff,1258px 370px #fff,1379px 1536px #fff,607px 474px #fff,163px 139px #fff,1025px 1359px #fff,815px 845px #fff,231px 1212px #fff,192px 806px #fff,313px 1946px #fff,1132px 1808px #fff,624px 767px #fff,379px 722px #fff,733px 1847px #fff,628px 1517px #fff,1559px 929px #fff,234px 397px #fff,1230px 1231px #fff,849px 726px #fff,1148px 786px #fff,546px 1533px #fff,477px 822px #fff,1325px 480px #fff,972px 383px #fff,334px 958px #fff,1032px 664px #fff,1781px 40px #fff,38px 1335px #fff,1634px 1691px #fff,1061px 680px #fff,1319px 304px #fff,82px 1776px #fff,1302px 509px #fff,1231px 746px #fff,1264px 1509px #fff,980px 495px #fff,1153px 1381px #fff,1981px 1918px #fff,70px 113px #fff,390px 736px #fff,1882px 1925px #fff,1380px 1326px #fff,257px 1681px #fff,860px 998px #fff,518px 1136px #fff,168px 905px #fff,500px 1882px #fff,1012px 1572px #fff,349px 1916px #fff,905px 1339px #fff,1940px 1803px #fff,23px 1159px #fff,9px 1559px #fff,1658px 776px #fff,820px 1361px #fff,171px 983px #fff,580px 1902px #fff,1268px 263px #fff,1734px 994px #fff,1872px 29px #fff,1475px 435px #fff;
animation: animStar 100s linear infinite
}
.dark #stars2:after {
content: " ";
position: absolute;
top: 2000px;
width: 2px;
height: 2px;
background: 0 0;
box-shadow: 114px 658px #fff,236px 768px #fff,1130px 1503px #fff,486px 592px #fff,1353px 1407px #fff,1583px 1741px #fff,450px 1479px #fff,1845px 327px #fff,1520px 361px #fff,580px 1699px #fff,1277px 1233px #fff,1697px 943px #fff,568px 1135px #fff,1273px 263px #fff,788px 126px #fff,1834px 1911px #fff,1147px 1652px #fff,651px 567px #fff,79px 1897px #fff,1590px 666px #fff,1362px 566px #fff,275px 367px #fff,556px 479px #fff,1063px 476px #fff,1337px 1119px #fff,1780px 1109px #fff,1323px 1655px #fff,1740px 1165px #fff,525px 60px #fff,1513px 1484px #fff,708px 280px #fff,429px 475px #fff,563px 1360px #fff,1580px 697px #fff,1702px 1164px #fff,1649px 1952px #fff,1580px 1812px #fff,70px 1190px #fff,1100px 98px #fff,1232px 1896px #fff,851px 1047px #fff,851px 30px #fff,596px 1486px #fff,666px 526px #fff,1855px 1342px #fff,80px 531px #fff,248px 1804px #fff,1990px 263px #fff,1796px 1640px #fff,1502px 862px #fff,1780px 488px #fff,1881px 1191px #fff,1063px 876px #fff,1614px 1073px #fff,1414px 666px #fff,1865px 289px #fff,687px 352px #fff,1329px 1312px #fff,279px 136px #fff,475px 756px #fff,1177px 435px #fff,1264px 921px #fff,467px 1496px #fff,391px 1359px #fff,666px 1083px #fff,1526px 1251px #fff,594px 564px #fff,991px 525px #fff,1511px 875px #fff,1935px 1049px #fff,1471px 1430px #fff,959px 604px #fff,1685px 72px #fff,1505px 1876px #fff,509px 1627px #fff,1065px 978px #fff,1860px 884px #fff,1038px 464px #fff,1051px 106px #fff,1056px 728px #fff,1953px 45px #fff,1483px 638px #fff,559px 845px #fff,1184px 922px #fff,1320px 1117px #fff,1572px 747px #fff,1971px 43px #fff,665px 13px #fff,1457px 1153px #fff,848px 154px #fff,1039px 1837px #fff,878px 795px #fff,1286px 1705px #fff,1946px 1143px #fff,1114px 1166px #fff,1747px 874px #fff,1894px 636px #fff,1316px 541px #fff,1953px 1620px #fff,1446px 1773px #fff,974px 833px #fff,1814px 1211px #fff,102px 335px #fff,327px 1868px #fff,348px 548px #fff,353px 1540px #fff,1212px 1872px #fff,1968px 129px #fff,1531px 644px #fff,1939px 559px #fff,1397px 1876px #fff,1446px 1446px #fff,1721px 603px #fff,924px 1171px #fff,1086px 1954px #fff,1798px 310px #fff,21px 1595px #fff,1462px 1948px #fff,149px 1752px #fff,804px 318px #fff,1262px 636px #fff,1051px 100px #fff,392px 560px #fff,654px 1236px #fff,1889px 1159px #fff,498px 394px #fff,522px 1889px #fff,1198px 579px #fff,1437px 1866px #fff,1049px 1064px #fff,286px 921px #fff,993px 1790px #fff,1557px 1997px #fff,1525px 532px #fff,481px 1561px #fff,790px 683px #fff,141px 17px #fff,1202px 28px #fff,518px 1927px #fff,90px 1677px #fff,1258px 370px #fff,1379px 1536px #fff,607px 474px #fff,163px 139px #fff,1025px 1359px #fff,815px 845px #fff,231px 1212px #fff,192px 806px #fff,313px 1946px #fff,1132px 1808px #fff,624px 767px #fff,379px 722px #fff,733px 1847px #fff,628px 1517px #fff,1559px 929px #fff,234px 397px #fff,1230px 1231px #fff,849px 726px #fff,1148px 786px #fff,546px 1533px #fff,477px 822px #fff,1325px 480px #fff,972px 383px #fff,334px 958px #fff,1032px 664px #fff,1781px 40px #fff,38px 1335px #fff,1634px 1691px #fff,1061px 680px #fff,1319px 304px #fff,82px 1776px #fff,1302px 509px #fff,1231px 746px #fff,1264px 1509px #fff,980px 495px #fff,1153px 1381px #fff,1981px 1918px #fff,70px 113px #fff,390px 736px #fff,1882px 1925px #fff,1380px 1326px #fff,257px 1681px #fff,860px 998px #fff,518px 1136px #fff,168px 905px #fff,500px 1882px #fff,1012px 1572px #fff,349px 1916px #fff,905px 1339px #fff,1940px 1803px #fff,23px 1159px #fff,9px 1559px #fff,1658px 776px #fff,820px 1361px #fff,171px 983px #fff,580px 1902px #fff,1268px 263px #fff,1734px 994px #fff,1872px 29px #fff,1475px 435px #fff
}
.dark #stars3 {
width: 3px;
height: 3px;
background: 0 0;
box-shadow: 519px 875px #fff,1497px 751px #fff,1256px 88px #fff,1168px 1791px #fff,1884px 109px #fff,1465px 451px #fff,450px 370px #fff,1560px 703px #fff,1788px 1997px #fff,1047px 963px #fff,1281px 119px #fff,439px 96px #fff,164px 1956px #fff,1360px 930px #fff,1387px 347px #fff,1073px 1970px #fff,1296px 284px #fff,25px 1602px #fff,455px 944px #fff,1177px 738px #fff,633px 1142px #fff,1730px 1079px #fff,1283px 1606px #fff,674px 1186px #fff,513px 166px #fff,1077px 636px #fff,1811px 580px #fff,971px 1789px #fff,694px 1756px #fff,703px 1138px #fff,1290px 942px #fff,351px 1509px #fff,1904px 790px #fff,68px 819px #fff,1097px 362px #fff,1035px 331px #fff,180px 940px #fff,1776px 1229px #fff,1487px 781px #fff,1131px 1765px #fff,1684px 536px #fff,939px 367px #fff,1102px 1481px #fff,741px 887px #fff,167px 1132px #fff,1756px 529px #fff,608px 758px #fff,541px 1025px #fff,1976px 505px #fff,1349px 1257px #fff,815px 1388px #fff,505px 1351px #fff,33px 1945px #fff,861px 1695px #fff,678px 1360px #fff,1615px 727px #fff,1138px 726px #fff,30px 293px #fff,1624px 1044px #fff,683px 1242px #fff,1781px 1758px #fff,906px 1328px #fff,1066px 1764px #fff,1568px 664px #fff,1027px 1876px #fff,775px 1099px #fff,1605px 208px #fff,730px 837px #fff,1475px 1482px #fff,871px 1759px #fff,1240px 15px #fff,1987px 705px #fff,302px 1049px #fff,475px 1015px #fff,1843px 1296px #fff,493px 631px #fff,1613px 164px #fff,1863px 156px #fff,1479px 423px #fff,202px 1499px #fff,886px 969px #fff,904px 930px #fff,1853px 535px #fff,726px 914px #fff,435px 1205px #fff,1732px 1824px #fff,1212px 667px #fff,499px 31px #fff,552px 594px #fff,1715px 1814px #fff,775px 908px #fff,1949px 921px #fff,1267px 718px #fff,1830px 1960px #fff,338px 1325px #fff,466px 1120px #fff,140px 1675px #fff,1919px 664px #fff,1136px 771px #fff,1888px 1302px #fff;
animation: animStar 150s linear infinite
}
.dark #stars3:after {
content: " ";
position: absolute;
top: 2000px;
width: 3px;
height: 3px;
background: 0 0;
box-shadow: 519px 875px #fff,1497px 751px #fff,1256px 88px #fff,1168px 1791px #fff,1884px 109px #fff,1465px 451px #fff,450px 370px #fff,1560px 703px #fff,1788px 1997px #fff,1047px 963px #fff,1281px 119px #fff,439px 96px #fff,164px 1956px #fff,1360px 930px #fff,1387px 347px #fff,1073px 1970px #fff,1296px 284px #fff,25px 1602px #fff,455px 944px #fff,1177px 738px #fff,633px 1142px #fff,1730px 1079px #fff,1283px 1606px #fff,674px 1186px #fff,513px 166px #fff,1077px 636px #fff,1811px 580px #fff,971px 1789px #fff,694px 1756px #fff,703px 1138px #fff,1290px 942px #fff,351px 1509px #fff,1904px 790px #fff,68px 819px #fff,1097px 362px #fff,1035px 331px #fff,180px 940px #fff,1776px 1229px #fff,1487px 781px #fff,1131px 1765px #fff,1684px 536px #fff,939px 367px #fff,1102px 1481px #fff,741px 887px #fff,167px 1132px #fff,1756px 529px #fff,608px 758px #fff,541px 1025px #fff,1976px 505px #fff,1349px 1257px #fff,815px 1388px #fff,505px 1351px #fff,33px 1945px #fff,861px 1695px #fff,678px 1360px #fff,1615px 727px #fff,1138px 726px #fff,30px 293px #fff,1624px 1044px #fff,683px 1242px #fff,1781px 1758px #fff,906px 1328px #fff,1066px 1764px #fff,1568px 664px #fff,1027px 1876px #fff,775px 1099px #fff,1605px 208px #fff,730px 837px #fff,1475px 1482px #fff,871px 1759px #fff,1240px 15px #fff,1987px 705px #fff,302px 1049px #fff,475px 1015px #fff,1843px 1296px #fff,493px 631px #fff,1613px 164px #fff,1863px 156px #fff,1479px 423px #fff,202px 1499px #fff,886px 969px #fff,904px 930px #fff,1853px 535px #fff,726px 914px #fff,435px 1205px #fff,1732px 1824px #fff,1212px 667px #fff,499px 31px #fff,552px 594px #fff,1715px 1814px #fff,775px 908px #fff,1949px 921px #fff,1267px 718px #fff,1830px 1960px #fff,338px 1325px #fff,466px 1120px #fff,140px 1675px #fff,1919px 664px #fff,1136px 771px #fff,1888px 1302px #fff
}
@keyframes animStar {
from {
transform: translateY(0)
}
to {
transform: translateY(-2000px)
}
}
添加完后发现深色模式下并无效果，这是因为主题切换黑夜模式后，将为html设置背景颜色。所以需要修改 app.js。打开并定位到『主题部分渲染』函数部分（changeSkinSecter），找到以下两行并将其删除或注释：
// $("html").css("background", "#31363b");
// $(".site-content").css("background-color", "#fff");
自定义切换
我参考大佬 Sanarous 对该部分进行自定义。此部分包括菜单栏（移动端与电脑端）增加黑夜模式切换按钮以及站点字体样式切换。
首先是添加切换按钮。打开header.ftl，在<div class="lower-cantiner">上方加入：
<div class="nightMode-top"><i class="far fa-moon night-mode" id="nightMode" aria-hidden="true"></i></div>
同时可添加样式对其进行调整，如：
切换按钮样式
/* 顶部切换 */
#nightMode {
float: right;
height: 75px;
line-height: 75px;
margin-left: 20px;
margin-right: 20px;
animation: searchbox 1s;
-webkit-animation: searchbox 1s,
}
#nightMode {
cursor: pointer;
font-size: 18px;
transition: all .3s ease-in-out
}
.night-mode:hover {
cursor: pointer;
color: var(--base-color)
}
.searchbox{
margin-right: 20px;
}
然后打开 footer.ftl，在 <#include "layouts/nav.ftl"> 下方加入下行代码来为移动端菜单添加黑夜模式切换。
<div class="nightMode-nav"><i class="far fa-moon night-mode" id="nightModeSmall" aria-hidden="true"></i></div>
接着修改footer.ftl以下内容以添加字体切换按钮：
<div class="skin-menu no-select">
<div class="theme-controls row-container">
<ul class="menu-list">
<#list 0..7 as i>
<#assign iconStr="settings.bg_icon_${i}" icon = (iconStr?eval)?default("fa fa-television") />
<#assign descStr="settings.bg_desc_${i}" desc = (descStr?eval)?default("") />
<li id="bg_${i}" data-text="${desc}">
<i class="${icon}" aria-hidden="true" ></i>
</li>
</#list>
</ul>
</div>
<div class="font-family-controls row-container">
<button type="button" class="control-btn-serif selected changefont" data-mode="serif">Serif</button>
<button type="button" class="control-btn-sans-serif changefont" data-mode="sans-serif">Sans Serif</button>
</div>
</div>
相关样式主题已集成😅。
接下来编辑 app.js 以实现切换功能。
此处我参考 寒山主题 的黑暗模式实现，结合所使用 Sakura 主题进行修改，由于我对 javascript 并不是很熟悉，因此修改后的代码较为难看🙃。
由于使用了寒山主题的工具类，其次还需定义全局参数，因而将下面代码加入footer.ftl中：
<#-- 暗夜模式 -->
<#if settings.auto_night_mode!true>
<script type="text/javascript">
var nightModeStartTime = ${settings.night_mode_start_time?default('18')};
var nightModeEndTime = ${settings.night_mode_end_time?default('12')};
</script>
<script type='text/javascript' src='//image.crcrc.cn/site/js/utils.min.js'></script>
</#if>
再在定义全局属性中加入：
var fontfamilyId = "serif";
var nightModeId = "nightMode";
然后编辑settings.yaml，在site_custom_style上方加入（注意缩进）：
auto_night_mode:
name: auto_night_mode
label: 暗夜模式总开关
type: radio
data-type: bool
default: true
options:
- value: true
label: 开启
- value: false
label: 关闭
night_mode_start_time:
name: night_mode_start_time
label: 暗夜模式开始时间
type: text
placeholder: '暗夜模式开始时间 默认18'
description: '注意：24小时制的小时. 比如:18'
night_mode_end_time:
name: night_mode_end_time
label: 暗夜模式结束时间
type: text
placeholder: '暗夜模式结束时间, 默认6'
description: '注意：24小时制的小时. 比如:6'
settings.yaml 对应 halo 后台中的主题设置，添加完上方代码后，即可在设置中控制黑夜模式的开关以及时间。
最后编辑app.js，修改后的 CBG 函数如下：
点击显/隐内容
// 主题切换
CBG: function() {
var themeConfig = {};
/**
* 检查并回显主题
*/
var checkBgImgEcho = function() {
var configTag = Util.getCookie("bgTagClass");
if (!configTag) {
configTag = Poi.defaultTheme;
}
var bgConfigTags = Object.keys(bgConfig);
// 默认为bg_0
bgConfigTags.includes(configTag) ? configTag : Poi.defaultTheme;
// 切换主题
changeBg(configTag);
};
/**
* 切换主题开关 已修改
*/
var changeSkinGear = function() {
// 这里使用off来解决匿名空间的问题
$(".changeSkin-gear")
.off("click")
.on("click", function() {
$(".skin-menu").toggleClass("show");
});
//绑定主题子项点击事件
Object.keys(bgConfig).forEach(function(currBg) {
$(".skin-menu " + "#" + currBg).off("click").on("click", function() {
changeBg(currBg, function() {
Util.setCookie("bgTagClass", currBg, 30);
if (currBg == "bg_7") {
$(".theme-controls").find("#bg_7").children("i").addClass("clicked");
}
// 绑定完之后隐藏主题开关
$(".skin-menu").removeClass("show");
setTimeout(function() {
$(".changeSkin-gear").css("visibility", "visible");
}, 300);
});
});
});
// 显示切换主题功能
$(".changeSkin-gear").css("visibility", "visible");
};
/**
* 自动黑夜模式 新增
*/
var autoNightMode = function() {
var nightModes = $(".night-mode");
var day = new Date();
var D = day.getHours();
//寒山主题工具类
var isNightMode = hanUtils.getLocalStorage(nightModeId);
if (D <= nightModeStartTime && D > nightModeEndTime) {
// 白天
if (isNightMode === true) {
// 是暗黑模式
changeNightMode(nightModes);
return;
}
changeLightMode(nightModes);
} else {
// 晚上
if (isNightMode === false) {
// 不是暗黑模式
changeLightMode(nightModes);
return;
}
changeNightMode(nightModes);
}
};
/**
* 切换为浅色模式 新增
*/
var changeLightMode = function(nightModes) {
$(document.body).removeClass("dark");
for (var i = 0; i < nightModes.length; i++) {
var nightMode = $(nightModes[i]);
nightMode.addClass("fa-moon");
nightMode.removeClass("fa-lightbulb");
}
var comments = document.getElementsByTagName("halo-comment");
for (var i = 0; i < comments.length; i++) {
var shadowDom = comments[i].shadowRoot.getElementById("halo-comment");
$(shadowDom).removeClass("dark")
}
// 删除以 theme_ 开头的 class
Util.removeClassByPrefix($("body")[0], "theme_");
// 增加 class
$("body").addClass("theme_0");
// 缓存
hanUtils.setLocalStorage(nightModeId, false);
Util.setCookie("bgTagClass", "bg_0", 30);
};
/**
* 切换为深色模式 新增
*/
var changeNightMode = function(nightModes) {
$(document.body).addClass("dark");
for (var i = 0; i < nightModes.length; i++) {
var nightMode = $(nightModes[i]);
nightMode.addClass("fa-lightbulb");
nightMode.removeClass("fa-moon");
}
var comments = document.getElementsByTagName("halo-comment");
for (var i = 0; i < comments.length; i++) {
var shadowDom = comments[i].shadowRoot.getElementById("halo-comment");
$(shadowDom).addClass("dark")
}
// 删除以 theme_ 开头的 class
Util.removeClassByPrefix($("body")[0], "theme_");
// 增加 class
$("body").addClass("theme_7");
// 缓存
hanUtils.setLocalStorage(nightModeId, true);
Util.setCookie("bgTagClass", "bg_7", 30);
};
/**
* 黑夜模式 新增
*/
var nightModeFuc = function() {
var nightModes = $(".night-mode");
if (!nightModes) {
return;
}
var nightModeBtn = $(".night-mode");
var comments = document.getElementsByTagName("halo-comment");
if ($(document.body).hasClass("dark")) {
nightModeBtn.addClass("fa-lightbulb");
nightModeBtn.removeClass("fa-moon");
//切换主题部分
$(".theme-controls").find("#bg_7").children("i").removeClass("fa-moon");
$(".theme-controls").find("#bg_7").children("i").addClass("fa-lightbulb");
} else {
nightModeBtn.addClass("fa-moon");
nightModeBtn.removeClass("fa-lightbulb");
//切换主题部分
$(".theme-controls").find("#bg_7").children("i").addClass("fa-moon");
$(".theme-controls").find("#bg_7").children("i").removeClass("fa-lightbulb");
}
for (var i = 0; i < nightModes.length; i++) {
var nightMode = $(nightModes[i]);
nightMode
.off("click")
.on("click", function() {
// 点击时才获取缓存以判断
var isNightMode = hanUtils.getLocalStorage(nightModeId);
if (isNightMode == null) {
isNightMode = false;
}
if (isNightMode == true) {
$(document.body).removeClass("dark");
nightModeBtn.addClass("fa-moon");
nightModeBtn.removeClass("fa-lightbulb");
//切换主题部分
$(".theme-controls").find("#bg_7").children("i").addClass("fa-moon");
$(".theme-controls").find("#bg_7").children("i").removeClass("fa-lightbulb");
// 删除以 theme_ 开头的 class
Util.removeClassByPrefix($("body")[0], "theme_");
// 增加 class
$("body").addClass("theme_0");
$(".site-content").css("background-color", "rgba(255, 255, 255, .8)");
for (var i = 0; i < comments.length; i++) {
var shadowDom = comments[i].shadowRoot.getElementById("halo-comment");
$(shadowDom).removeClass("dark")
}
hanUtils.setLocalStorage(nightModeId, false);
} else if (isNightMode == false) {
$(document.body).addClass("dark");
nightModeBtn.addClass("fa-lightbulb");
nightModeBtn.removeClass("fa-moon");
//切换主题部分
$(".theme-controls").find("#bg_7").children("i").removeClass("fa-moon");
$(".theme-controls").find("#bg_7").children("i").addClass("fa-lightbulb");
for (var i = 0; i < comments.length; i++) {
var shadowDom = comments[i].shadowRoot.getElementById("halo-comment");
$(shadowDom).addClass("dark")
}
// 删除以 theme_ 开头的 class
Util.removeClassByPrefix($("body")[0], "theme_");
// 增加 class
$("body").addClass("theme_7");
hanUtils.setLocalStorage(nightModeId, true);
}
});
}
};
/**
* 根据tagClass切换主题 已修改
* @param {*} tagClass
*/
var changeBg = function(tagClass, callback) {
var bgAttr = bgConfig[tagClass];
if (!bgAttr) return;
themeConfig.bgAttr = bgAttr;
$("body").removeAttr("style");
$("body").css(
"background-image",
bgAttr["url"] == "" ? "none" : "url(" + bgAttr["url"] + ")"
);
// 回调切换主题方法 先回调再渲染主题
!callback || typeof callback == "undefined" || callback == undefined ?
false :
callback(bgAttr["isNight"]);
changeSkinSecter();
};
/**
* 主题部分渲染 已修改
*/
var changeSkinSecter = function() {
// 渲染主题，如果配置不存在则直接返回
if (Object.getOwnPropertyNames(themeConfig).length == 0) {
return;
}
var bgAttr = themeConfig.bgAttr;
// 如果为黑夜模式，也会影响到评论组件
var comments = document.getElementsByTagName("halo-comment");
// 删除以 theme_ 开头的 class
Util.removeClassByPrefix($("body")[0], "theme_");
// 增加 class
$("body").remove("theme_" + bgAttr["id"]);
$("body").addClass("theme_" + bgAttr["id"]);
var nightModes = $(".night-mode");
var nightModeBtn = $(".night-mode");
var isNightMode = hanUtils.getLocalStorage(nightModeId);
if (isNightMode == null) {
isNightMode = false;
}
if (bgAttr["isNight"]) {
// 确保 bg_7 点击
if ($(".theme-controls").find("#bg_7").children("i").hasClass("clicked")) {
$(".theme-controls").find("#bg_7").children("i").removeClass("clicked");
if (isNightMode == true) {
$(document.body).removeClass("dark");
nightModeBtn.addClass("fa-moon");
nightModeBtn.removeClass("fa-lightbulb");
//切换主题部分
$(".theme-controls").find("#bg_7").children("i").addClass("fa-moon");
$(".theme-controls").find("#bg_7").children("i").removeClass("fa-lightbulb");
// 删除以 theme_ 开头的 class
Util.removeClassByPrefix($("body")[0], "theme_");
// 增加 class
$("body").addClass("theme_0");
$(".site-content").css("background-color", "rgba(255, 255, 255, .8)");
for (var i = 0; i < comments.length; i++) {
var shadowDom = comments[i].shadowRoot.getElementById("halo-comment");
$(shadowDom).removeClass("dark")
}
hanUtils.setLocalStorage(nightModeId, false);
console.log("isNightMode === true");
} else if (isNightMode == false) {
$(document.body).addClass("dark");
nightModeBtn.addClass("fa-lightbulb");
nightModeBtn.removeClass("fa-moon");
//切换主题部分
$(".theme-controls").find("#bg_7").children("i").removeClass("fa-moon");
$(".theme-controls").find("#bg_7").children("i").addClass("fa-lightbulb");
for (var i = 0; i < comments.length; i++) {
var shadowDom = comments[i].shadowRoot.getElementById("halo-comment");
$(shadowDom).addClass("dark")
}
// 删除以 theme_ 开头的 class
Util.removeClassByPrefix($("body")[0], "theme_");
// 增加 class
$("body").addClass("theme_7");
hanUtils.setLocalStorage(nightModeId, true);
console.log("isNightMode === false");
}
} else {
autoNightMode();
}
} else {
// 其余主题模式
if (isNightMode == true) {
$(document.body).removeClass("dark");
nightModeBtn.addClass("fa-moon");
nightModeBtn.removeClass("fa-lightbulb");
$(".site-content").css("background-color", "rgba(255, 255, 255, .8)");
for (var i = 0; i < comments.length; i++) {
var shadowDom = comments[i].shadowRoot.getElementById("halo-comment");
$(shadowDom).removeClass("dark")
}
hanUtils.setLocalStorage(nightModeId, false);
}
}
// 图片处理策略
switch (bgAttr["strategy"]) {
case "no-repeat":
$("body").css("background-repeat", "no-repeat");
break;
case "repeat":
$("body").css("background-repeat", "repeat");
break;
case "cover":
$("body").css("background-size", "cover");
break;
default:
break;
}
// 增加字体主题切换
var local_fontfamily = hanUtils.getLocalStorage(fontfamilyId);
switch (local_fontfamily) {
case "null":
hanUtils.setLocalStorage(fontfamilyId, "serif");
break;
case "serif":
$("body").css(
"font-family",
"'Noto Serif SC',Helvetica,Arial,Tahoma,monospace,sans-serif");
$(".control-btn-serif").addClass("selected");
$(".control-btn-sans-serif").removeClass("selected");
break;
case "sans-serif":
$("body").css(
"font-family",
"'Merriweather Sans',Helvetica,Tahoma,Arial,'PingFang SC','Hiragino Sans GB','Microsoft Yahei','WenQuanYi Micro Hei',sans-serif");
$(".control-btn-sans-serif").addClass("selected");
$(".control-btn-serif").removeClass("selected");
break;
default:
break;
}
//绑定字体主题点击切换事件
$(".changefont").click(function() {
if ($(this).hasClass("control-btn-serif")) {
$("body").css(
"font-family",
"'Noto Serif SC',Helvetica,Arial,Tahoma,monospace,sans-serif"
);
$(this).addClass("selected");
$(".control-btn-sans-serif").removeClass("selected");
hanUtils.setLocalStorage(fontfamilyId, "serif");
} else if ($(this).hasClass("control-btn-sans-serif")) {
$("body").css(
"font-family",
"'Merriweather Sans',Helvetica,Tahoma,Arial,'PingFang SC','Hiragino Sans GB','Microsoft Yahei','WenQuanYi Micro Hei',sans-serif"
);
$(this).addClass("selected");
$(".control-btn-serif").removeClass("selected");
hanUtils.setLocalStorage(fontfamilyId, "sans-serif");
}
$(".skin-menu").removeClass("show");
setTimeout(function() {
$(".changeSkin-gear").css("visibility", "visible");
}, 300);
});
};
// 检查cookie并回显
if (document.body.clientWidth > 640) {
checkBgImgEcho();
// 切换主题开关
changeSkinGear();
}
autoNightMode();
nightModeFuc();
return {
changeSkinSecter: changeSkinSecter,
};
},
其中主题切换中的字体可自定义，前提是需要引入相应字体文件。
修改完成后，切记压缩成 app.min.js。
至此主题切换自定义已完成😁。
移动端顶栏
仿造桌面端实现。编辑 app.js，定位到『显示&隐藏导航栏』函数部分（NH: function()）,修改如下：
// 显示&隐藏导航栏
NH: function() {
var h1 = 0,
h2 = 50,
ss = $(document).scrollTop();
$(window).scroll(function() {
var s = $(document).scrollTop();
// 屏幕剩余的高度
var surplus =
document.documentElement.scrollHeight -
document.documentElement.clientHeight;
// 当前位置小数
var coorY = s / surplus;
NProgress.set(coorY);
if (s == h1) {
$(".site-header").removeClass("yya");
$(".openNav").removeClass("yyaNav");
}
if (s > h1) {
$(".site-header").addClass("yya");
$(".openNav").addClass("yyaNav");
}
if (s > h2) {
$(".site-header").addClass("gizle");
$(".openNav").addClass("gizleNav");
if (s > ss) {
$(".site-header").removeClass("sabit");
$(".openNav").removeClass("sabitNav");
} else {
$(".site-header").addClass("sabit");
$(".openNav").addClass("sabitNav");
}
ss = s;
}
});
},
然后添加相应样式：
样式代码
/* 移动端 */
.yyaNav {
position: fixed;
background: rgba(255,255,255,.95);
border-bottom: 1px solid rgba(30,35,42,.06);
}
.openNav.open{
background: 0 0;
}
.openNav .site-branding {
line-height: 50px;
margin-right: 6px;
}
/* 黑夜 */
.dark .yyaNav{
background: var(--night-background);
box-shadow: 0 1px 3px 0 rgba(6,6,6,.28)
}
Q.E.D.
