hexo+Github部署博客

效果演示

0X001 简单介绍

搭建博客时遇到了各种各样的问题，经过各种失败后，终于搭建好了自己的博客，。本博客基于Hexo框架，采用hexo-theme-matery主题，在这里非常感谢作者洪卫的hexo-blog-fly博客开源，极大简化了构建博客的工作量和复杂度。在此开源博客的基础上做了改进，修复了一些bug，顺利搭建完成了我的个人博客。大家对此主题有兴趣的可以下载源代码，搭建属于自己的个性化博客。

0x002 HEXO初级搭建

1. 安装git

Git是目前世界上最先进的分布式版本控制系统，可以有效、高速的处理从很小到非常大的项目版本管理。Git的作用是将本地的网页文件传到github上。

windows： 到git官网上下载.exe文件,Download git,安装选项一路默认即可。

2. 安装nodejs

Hexo是基于node.js编写的，所以需要安装一下node.js和里面的npm工具。

windows： 到Node.js官网下载.exe文件，安装选项全部默认。安装好之后，按Win+R打开cmd命令提示符，输入node -v和npm -v，若出现版本号，则说明安装成功。

3. 添加npm国内源

使用阿里的国内镜像进行加速下载

npm config set registry https://registry.npm.taobao.org

4. 安装Hexo

前面git和nodejs安装好后，就可以安装hexo了，你可以先创建一个文件夹MyBlog，用来存放自己的博客文件，然后cd到这个文件夹下（或者在这个文件夹下直接右键git bash打开）。

比如我的博客文件都存放在D:\MyBlog目录下。

在该目录下右键点击Git Bash Here，打开git的控制台窗口，以后我们所有的操作都在git控制台进行，就不用Windows自带的cmd了。

定位到该目录下，输入一下代码安装Hexo。可能会有几个报错，不用理会。

npm install -g hexo-cli

安装完后输入hexo -v验证是否安装成功。

到此为止hexo就安装完了。

接下来初始化一下hexo,即初始化我们的网站，输入hexo init初始化文件夹

hexo init MyBlog

新建完成后，指定文件夹MyBlog目录下有：

  • node_modules: 依赖包
  • public：存放生成的页面
  • scaffolds：生成文章的一些模板
  • source：用来存放你的文章
  • themes：主题文件存放位置
  • _config.yml: 博客的配置文件

到此为止，本地的网站配置完成了。

输入hexo g生成静态网页，然后输入hexo s打开本地服务器

hexo g
hexo s

image

5. 注册Github账号创建个人仓库

接下来就去注册一个github账号，用来存放我们的网站。

打开https://github.com/，新建一个项目仓库New repository，如下所示：

image

然后如下图所示，输入自己的项目名字，后面一定要加.github.io后缀，注意图片上面的标注，红色框圈出来的内容必须一样，否则会报错。

image

注意：
要创建一个和你用户名相同的仓库，后面加.github.io，只有这样，将来要部署到GitHub page的时候，才会被识别，也就是https://xxxx.github.io，其中xxx就是你注册GitHub的用户名。
例如我的：https://Cx330Lm.github.io

6. 生成SSH添加到GitHub

生成SSH添加到GitHub，连接Github与本地。

右键打开git bash here，然后输入下面命令：

git config --global user.name "注册GitHub用户名"
git config --global user.email "注册GitHub的邮箱"

一下两条命令用于检查你设置的GitHub用户名和邮箱是否正确

git config user.name
git config user.email

然后创建SSH,一路回车即可

ssh-keygen -t rsa -C "注册GitHub的邮箱"

这个时候它会告诉你已经生成了.ssh的文件夹。你可以在git bash中输入一下命令进行查看

cat ~/.ssh/id_rsa.pub

将输出的内容复制到框中，点击确定保存。

打开github，在头像下面点击settings，再点击SSH and GPG keys，新建一个SSH，名字随便取一个都可以，把你的id_rsa.pub里面的信息粘贴进去。如图：

image

在git bash输入如下命令，如果出现你的用户名，那就成功了。

ssh -T git@github.com

7. 将hexo部署到GitHub

将hexo生成的文章部署到GitHub上，打开博客根目录下的_config.yml文件，这是博客的配置文件，在这里你可以修改与博客配置相关的各种信息。

找到如下配置进行修改：

deploy:
  type: git
  repository: https://github.com/Cx330Lm/Cx330Lm.github.io
  branch: master

repository修改为你自己的github项目地址即可，就是部署时，告诉工具，将生成网页通过git方式上传到你对应的链接仓库中。

这个时候需要先安装deploy-git ，也就是部署的命令,这样你才能用命令部署到GitHub。

npm install hexo-deployer-git --save

然后就可以部署提交到github，过一会儿就可以在http://yourname.github.io 这个网站看到你的博客了

hexo clean
hexo generate
hexo deploy

其中hexo clean清除了你之前生成的东西。 hexo generate，生成静态文章，可以用 hexo g缩写 ，hexo deploy部署文章，可以用hexo d缩写

注意: deploy 可能要你输入GitHub的username和password。

8. 写文章和发布文章

首先在博客根目录下右键打开git bash here，安装一个扩展npm i hexo-deployer-git。

npm i hexo-deployer-git

然后输入hexo new post "article title"，新建一篇文章。

hexo new post "article title"

然后打开D:\MyBlog\source\_posts的目录，可以发现下面多了一个文件夹和一个.md文件，一个用来存放你的图片等数据，另一个就是你的文章文件。

另外推荐直接使用有道云编写markdown文章，不仅可以实时预览，还可以快捷的生成markdown语法格式，或者也可以去 MarkDown教程 查看用法。

编写完markdown文件后，根目录下输入hexo g生成静态网页，然后输入hexo s可以本地预览效果，最后输入hexo d上传到github上。这时打开你的github.io主页就能看到发布的文章了。

到此为止，Hexo初级搭建就已经完成了。

0x003 个性化定制

1. Hexo相关目录文件

1.1 博客目录构成介绍

node_modules是node.js各种库的目录，public是生成的网页文件目录，scaffolds里面就三个文件，存储着新文章和新页面的初始设置，source是我们最常用到的一个目录，里面存放着文章、各类页面、图像等文件，themes存放着主题文件，一般也用不到。

我们平时写文章只需要关注source/_posts这个文件夹就行了。

- node_modules
- public
- scaffolds
- source
    - _data
    - _posts
    - about
    - archives
    - categories
    - friends
    - tags
- themes
1.2 Hexo基本设置

在文件根目录下的_config.yml，就是整个hexo框架的配置文件了。可以在里面修改大部分的配置。详细可参考官方的配置描述。

1.2.1 网站

参数描述title网站标题subtitle网站副标题description网站描述author您的名字language网站使用的语言timezone网站时区。Hexo 默认使用您电脑的时区。时区列表。比如说：America/New_York, Japan 和 UTC 。

其中，description主要用于SEO，告诉搜索引擎一个关于您站点的简单描述，通常建议在其中包含您网站的关键词。author参数用于主题显示文章的作者。

1.2.2 网址

参数描述url网址root网站根目录 permalink文章的永久链接格式permalink_defaults永久链接中各部分的默认值

在这里，你需要把url改成你的网站域名。

permalink，也就是你生成某个文章时的那个链接格式。

比如我新建一个文章叫temp.md，那么这个时候他自动生成的地址就是http://yoursite.com/2018/09/05/temp。

以下是官方给出的示例，关于链接的变量还有很多，需要的可以去官网上查找永久链接 。

参数结果
:year/:month/:day/:title       /2019/08/10/hello-world 
:year-:month-:day-:title.html  2019-08-10-hello-world.html 
:category/:titlefoo            /bar/hello-world

2. 定制主题

这里推荐作者洪卫的hexo-blog-fly博客主题，该主题是基于hexo-theme-matery优化的，需要把博客相关信息换成您自己的就可以部署了，极大简化了构建博客的工作量和复杂度。

2.1 简单使用方法
  1. 安装Git, 安装nodeJS，安装Hexo
  2. 你可以直接fork一份源码到你的仓库，clone到本地博客文件夹内
  3. 在本地博客仓库运行npm i命令安装依赖包
  4. 直接修改配置信息，改成自己的信息
  5. 运行命令hexo clean（清除生成文件），hexo g（生成网页）， hexo s（本地预览），hexo d（部署）

这里我不推荐使用简单方法设置主题，Hexo版本之间的兼容性较差，如果不清楚博主使用的哪个版本的hexo，我建议还是手动进行设置主题。

2.2 原主题特性
  • 简单漂亮，文章内容美观易读
  • Material Design 设计
  • 响应式设计，博客在桌面端、平板、手机等设备上均能很好的展现
  • 首页轮播文章及每天动态切换 Banner 图片
  • 瀑布流式的博客文章列表（文章无特色图片时会有 24 张漂亮的图片代替）
  • 时间轴式的归档页
  • 词云的标签页和雷达图的分类页
  • 丰富的关于我页面（包括关于我、文章统计图、我的项目、我的技能、相册等）
  • 可自定义的数据的友情链接页面
  • 支持文章置顶和文章打赏
  • 支持 MathJax
  • TOC 目录
  • 可设置复制文章内容时追加版权信息
  • 可设置阅读文章时做密码验证
  • Gitalk、Gitment、Valine 和 Disqus 评论模块（推荐使用 Gitalk）
  • 集成了不蒜子统计、谷歌分析（Google Analytics）和文章字数统计等功能
  • 支持在首页的音乐播放和视频播放功能
2.3 新增加特性
  • 修改了原主题的一些很多bug
  • 加入图片懒加载功能，在根目录配置文件开启和关闭
  • 增加留言板功能
  • 在关于板块,加入简历功能页
  • 增加视听[视觉听觉影音]板块
  • 支持emoji表情，用markdown emoji语法书写直接生成对应的能跳跃的表情。
  • 增加网站运行时间显示
  • 增加动漫模型
  • 整体替换Banner图片和文章特色图片
  • 增加分类相册功能
  • 修改了一些控件的参数
  • 修改部分样式,比如: 文章卡片,固定高度,使其不至于因为文章摘要的长短不同导致卡片大小不一使页面布局很不美观,类似的还有友链卡片,优化了页面内容布局,视觉更整齐美观
  • 解决首页文章列表卡片上方 border-radius圆角失效的bug
  • 添加页面樱花飘落动效
  • 添加鼠标点击烟花爆炸动效
  • 加入天气接口控件
  • 加入鼠标点击文字特效
  • 添加页面雪花飘落动效
  • 添加在线聊天插件
  • 调整线聊天插件参数，使之能够随着鼠标滑动位置自适应调整
2.4 切换主题

如果想自己动手对hexo-theme-matery优化的话，可以修改Hexo根目录下的_config.yml的 theme 的值

theme: hexo-theme-matery

_config.yml 文件的其它修改建议:

  • 请修改 _config.yml 的 url 的值为你的网站主 URL（如：http://xxx.github.io）。
  • 建议修改两个 per_page 的分页条数值为 6 的倍数，如：12、18 等，这样文章列表在各个屏幕下都能较好的显示。
  • 如果你是中文用户，则建议修改 language 的值为 zh-CN。
2.5 新建页面

例如：tags 页是用来展示所有标签的页面，如果在你的博客 source 目录下还没有 tags/index.md 文件，那么你就需要新建一个，命令如下：

hexo new page "tags"

编辑你刚刚新建的页面文件 /source/tags/index.md，至少需要以下内容：

---
title: tags
date: 2018-09-30 18:23:38
type: "tags"
layout: "tags"
---

其他页面的创建方法也是一样，这里就不多阐述

2.6 代码高亮

由于 Hexo 自带的代码高亮主题显示不好看，所以主题中使用到了 hexo-prism-plugin 的 Hexo 插件来做代码高亮，安装命令如下：

npm i -S hexo-prism-plugin

然后，修改 Hexo 根目录下 _config.yml 文件中 highlight.enable 的值为 false，并新增 prism 插件相关的配置，主要配置如下：

highlight:
  enable: false

prism_plugin:
  mode: 'preprocess'    # realtime/preprocess
  theme: 'tomorrow'
  line_number: false    # default false
  custom_css:
2.7 搜索

本主题中还使用到了 hexo-generator-search 的 Hexo 插件来做内容搜索，安装命令如下：

npm install hexo-generator-search --save

在 Hexo 根目录下的 _config.yml 文件中，新增以下的配置项：

search:
  path: search.xml
  field: post
2.8 文章字数统计插件（建议安装）

如果你想要在文章中显示文章字数、阅读时长信息，可以安装 hexo-wordcount 插件。

安装命令如下：

npm i --save hexo-wordcount

然后只需在本主题下的 _config.yml 文件中，将各个文章字数相关的配置激活即可：

postInfo:
  date: true
  update: false
  wordCount: false # 设置文章字数统计为 true.
  totalCount: false # 设置站点文章总字数统计为 true.
  min2read: false # 阅读时长.
  readCount: false # 阅读次数.
2.9 添加emoji表情支持（可选的）

本主题新增了对emoji表情的支持，使用到了 hexo-filter-github-emojis 的 Hexo 插件来支持 emoji表情的生成，把对应的markdown emoji语法（::,例如：:smile:）转变成会跳跃的emoji表情，安装命令如下：

npm install hexo-filter-github-emojis --save

在 Hexo 根目录下的 _config.yml 文件中，新增以下的配置项：

githubEmojis:
  enable: true
  className: github-emoji
  inject: true
  styles:
  customEmojis:
2.10 添加 RSS 订阅支持（可选的）

本主题中还使用到了hexo-generator-feed 的 Hexo 插件来做 RSS，安装命令如下：

npm install hexo-generator-feed --save

在 Hexo 根目录下的 _config.yml 文件中，新增以下的配置项：

feed:
  type: atom
  path: atom.xml
  limit: 20
  hub:
  content:
  content_limit: 140
  content_limit_delim: ' '
  order_by: -date

执行 hexo clean && hexo g 重新生成博客文件，然后在 public 文件夹中即可看到 atom.xml 文件，说明你已经安装成功了。

2.11 修改页脚

页脚信息可能需要做定制化修改，而且它不便于做成配置信息，所以可能需要你自己去再修改和加工。修改的地方在主题文件的 /layout/_partial/footer.ejs 文件中，包括站点、使用的主题、访问量等。

2.12 添加动漫人物

安装插件

npm install --save hexo-helper-live2d

安装喜欢的看板娘

#安装下载动画人物库, 动画人物有很多, 可以网上查询资料, 下面推荐几种.
npm install --save live2d-widget-model-shizuku #课桌女孩
npm install --save live2d-widget-model-hibiki  #御姐
npm install --save live2d-widget-model-wanko   #狗狗
npm install --save live2d-widget-model-haruto  #海军服女孩
npm install --save live2d-widget-model-miku    #萝莉

然后打开博客根目录下的 _config.yml文件，添加如下代码：

使用本地模型方式：

## 添加动画live2d模块  npm install --save hexo-helper-live2d
## 下载动画人物库 npm install live2d-widget-model-z16 -D
live2d:
  enable: true
  scriptFrom: local # 默认
  pluginRootPath: live2dw/ # 插件在站点上的根目录(相对路径)
  pluginJsPath: lib/ # 脚本文件相对与插件根目录路径
  pluginModelPath: assets/ # 模型文件相对与插件根目录路径
  tagMode: false # 标签模式, 是否仅替换 live2d tag标签而非插入到所有页面中
  debug: false # 调试, 是否在控制台输出日志
  model:
    use: live2d-widget-model-miku
  display:
    position: right #动画位置
    width: 150
    height: 190
    # 位置配置，这个在左侧边栏位置很居中
    hOffset: 50  # 调节水平位置
    vOffset: -5  # 调节垂直位置
  mobile:
    show: false # 是否在移动设备上显示
    scale: 0.5 # 移动设备上的缩放
  react:
    opacityDefault: 0.7
    opacityOnHover: 0.8

使用网络模型方式：

# Live2D
## https://github.com/EYHN/hexo-helper-live2d
live2d:
  enable: true
  # enable: false
  pluginRootPath: live2dw/ # Root path of plugin to be on the site (Relative)
  pluginJsPath: lib/ # JavaScript path related to plugin's root (Relative)
  pluginModelPath: assets/ # Relative model path related to plugin's root (Relative)
  scriptFrom: local # Default
  # scriptFrom: jsdelivr # jsdelivr CDN
  # scriptFrom: unpkg # unpkg CDN
  # scriptFrom: https://cdn.jsdelivr.net/npm/live2d-widget@3.x/lib/L2Dwidget.min.js # Your custom url
  tagMode: false # Whether only to replace live2d tag instead of inject to all pages
  log: false # Whether to show logs in console
  model:
    #use: live2d-widget-model-lwet # npm-module package name
    # use: wanko # folder name in (hexo base dir)/live2d_models/
    # use: ./wives/wanko # folder path relative to hexo base dir
    # 模型：https://huaji8.top/post/live2d-plugin-2.0/
    use: https://cdn.jsdelivr.net/npm/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json # Your custom url
  display:
    position: left
    width: 300
    height: 400
    hOffset: 50
    vOffset: 10
  mobile:
    show: false

效果见右下角

image

更强大的看板娘

2.13 添加夜间模式切换
2.13.1 设置基础样式

参考其他优秀产品的黑夜模式，得出共性：

那就是黑夜模式的背景一般不会是纯黑（#000）；而是淡黑色，字体也不是纯白（#fff）而浅白色
图片亮度降低
下面就开始贴代码了

在 themes>hexo-theme-matery>source>css>matery.css 中加上下面的代码

/* 字体颜色变灰白色 */
body.DarkMode .fas,
body.DarkMode .title,
body.DarkMode .row .text,
body.DarkMode article .article-content .summary,
body.DarkMode .card .card-image .card-title,
body.DarkMode .fa-moon-o:before,
body.DarkMode .fa-lightbulb-o:before,
body.DarkMode article .article-tags .chip,
body.DarkMode .chip-container .tag-title,
body.DarkMode div.jqcloud a,
body.DarkMode .friends-container .tag-title,
body.DarkMode .frind-ship .title h1,
body.DarkMode .card .card-content p,
body.DarkMode .card .card-content .dss,
body.DarkMode .v[data-class='v'] .vcount,
body.DarkMode .v[data-class='v'] .vcount .vnum,
body.DarkMode pre code,
body.DarkMode h1,
body.DarkMode h2,
body.DarkMode h3,
body.DarkMode h4,
body.DarkMode h5,
body.DarkMode h6,
body.DarkMode li,
body.DarkMode p,
body.DarkMode header .side-nav .mobile-head .logo-name,
body.DarkMode header .side-nav .mobile-head .logo-desc,
body.DarkMode header .side-nav .menu-list a,
body.DarkMode .bg-cover .post-title,
body.DarkMode.read .bg-cover .description {
    color: 
rgba(255, 255, 255, 0.6);
}

/* 背景颜色变灰色 */
body.DarkMode .card,
body.DarkMode .block-with-text:after {
    background-color: 
#282c34;
}

/* 背景颜色变黑色 */
body.DarkMode,
body.DarkMode .v[data-class='v'] .vcount,
body.DarkMode #rewardModal .modal-content,
body.DarkMode .modal,
body.DarkMode header .side-nav,
body.DarkMode header .side-nav .menu-list .m-nav-show {
    background-color: 
#12121c;
}

/* 改变透明度 */
body.DarkMode .aplayer {
    background: 
#2f3742 !important;
}

body.DarkMode img,
body.DarkMode strong {
    filter: brightness(0.7);
}

/*toc目录滤镜*/
body.DarkMode .toc-widget {
    filter: invert(0.8);
}

body.DarkMode .toc-widget .toc-list-item {
    color: 
#000
}

/* Skill bar text color */
body.DarkMode .skillbar .skill-bar-percent {
    color: 
#000;
}
2.13.2 切换按钮

完成了背景、字体、图片的样式，就需要黑夜白天切换按钮了

在 themes>hexo-theme-matery>layout>_widget 中创建一个新的文件 day-night.ejs，在新建的文件中加入下面的代码

<!-- 白天和黑夜主题 -->
<div class="sum-moon-box">
  <a class="btn-floating btn-large waves-effect waves-light" onclick="switchNightMode()" title="切换主题" >
    <i id="sum-moon-icon" class="fas fa-sun" style="width:48px; height:48px; font-size: 28px;"></i>
  </a>
</div>

<script>
  function switchNightMode() {
    $('<div class="Cuteen_DarkSky"><div class="Cuteen_DarkPlanet"></div></div>').appendTo($('body')),
      setTimeout(function () {
        $('body').hasClass('DarkMode') 
        ? ($('body').removeClass('DarkMode'), localStorage.setItem('isDark', '0'), $('#sum-moon-icon').removeClass("fa-sun").addClass('fa-moon')) 
        : ($('body').addClass('DarkMode'), localStorage.setItem('isDark', '1'), $('#sum-moon-icon').addClass("fa-sun").removeClass('fa-moon')),
          
        setTimeout(function () {
          $('.Cuteen_DarkSky').fadeOut(1e3, function () {
            $(this).remove()
          })
        }, 2e3)
      })
  }
</script>

再在 themes>hexo-theme-matery>layout>layout.ejs 文件中引用一下

<%- partial('_widget/day-night.ejs') %>

需要在 body 标签内部插入下面代码

2.13.3 按钮样式

完成上面操作以后，就需要添加按钮样式和切换动画了，同样是在 themes>hexo-theme-matery>source>css>matery.css 中

/* 黑夜模式动画 */
.Cuteen_DarkSky,
.Cuteen_DarkSky:before {
    content: '';
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 8888;
}

.Cuteen_DarkSky {
    background: linear-gradient(
#feb8b0, 
#fef9db);
}

.Cuteen_DarkSky:before {
    transition: 2s ease all;
    opacity: 0;
    background: linear-gradient(
#4c3f6d, 
#6c62bb, 
#93b1ed);
}

.DarkMode .Cuteen_DarkSky:before {
    opacity: 1;
}

.Cuteen_DarkPlanet {
    z-index: 9999;
    position: fixed;
    left: -50%;
    top: -50%;
    width: 200%;
    height: 200%;
    -webkit-animation: CuteenPlanetMove 2s cubic-bezier(0.7, 0, 0, 1);
    animation: CuteenPlanetMove 2s cubic-bezier(0.7, 0, 0, 1);
    transform-origin: center bottom;
}

@-webkit-keyframes CuteenPlanetMove {
    0% {
        transform: rotate(0);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes CuteenPlanetMove {
    0% {
        transform: rotate(0);
    }
    to {
        transform: rotate(360deg);
    }
}

.Cuteen_DarkPlanet:after {
    position: absolute;
    left: 35%;
    top: 40%;
    width: 9.375rem;
    height: 9.375rem;
    border-radius: 50%;
    content: '';
    background: linear-gradient(
#fefefe, 
#fffbe8);
}

/*黑夜模式按钮*/
.sum-moon-box {
    width: 48px;
    height: 48px;
    text-align: center;
    border-radius: 50%;
    position: fixed;
    right: 15px;
    bottom: 195px;
    margin-bottom: 0;
    z-index: 900;
}

.sum-moon-box .btn-floating {
    width: 48px;
    height: 48px;
}

.sum-moon-box i {
    font-size: 1.8rem;
    line-height: 48px !important;
}
2.13.4 定时提示切换黑夜模式

在 themes>hexo-theme-matery>source>js>matery.js 中添加下列代码

//黑夜模式提醒开启功能
setTimeout(function () {
    if ((new Date().getHours() >= 19 || new Date().getHours() < 7) && !$('body').hasClass('DarkMode')) {
        let toastHTML = '<span style="color:#97b8b2;border-radius: 10px;>' + '<i class="fa fa-bellaria-hidden="true"></i>晚上使用黑夜模式阅读能够减轻视觉疲劳。</span>'
        M.toast({ html: toastHTML })
    }
}, 2000)
2.13.5 黑夜模式持久化

在 themes>hexo-theme-matery>layout>layout.ejs 中添加下列代码（最好插入在 <%- partial('_partial/day-night.ejs') %> 下面）

/* 模式判断 */
<script>
    /* 模式判断 */
    if (localStorage.getItem('isDark') === '1') {
        document.body.classList.add('DarkMode');
        $('#sum-moon-icon').addClass("fa-sun").removeClass('fa-moon')
    } else {
        document.body.classList.remove('DarkMode');
        $('#sum-moon-icon').removeleClass("fa-sun").addClass('fa-moon')
    }
</script>

注意：此处插入的位置不同，在页面上显示的位置就会不同。

2.13.6 黑夜白天切换的动态背景

下面这是黑夜白天切换的动态背景，在你新建的 day-night.ejs 文件中加入下列代码

<div class="stars-con">
  <div id="stars"></div>
  <div id="stars2"></div>
  <div id="stars3"></div>  
</div>

在 themes>hexo-theme-matery>source>css>matery.css 中加上下面的代码

/*黑夜模式背景*/
body.DarkMode {
    background: linear-gradient(
#15151b, 
#1b1b2e, 
#231832) !important;
}

@keyframes animStar {
    from {
        transform: translateY(0)
    }
    to {
        transform: translateY(-2000px)
    }
}

body.DarkMode .stars-con {
    position: fixed;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    z-index: -111;
    background: linear-gradient(
#15151b, 
#1b1b2e, 
#231832);
}

body.DarkMode #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;
}

body.DarkMode #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;
}

body.DarkMode #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;
}

body.DarkMode #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;
}

body.DarkMode #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;
}

body.DarkMode #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;
}

到此，黑夜模式算是真正完成了。

2.14 配置音乐播放器（可选）

要支持音乐播放，在主题的 _config.yml 配置文件中激活music配置即可

# 是否在首页显示音乐
music:
  enable: true
  title:     	    #非吸底模式有效
    enable: true
    show: 听听音乐
  server: netease   #require music platform: netease, tencent, kugou, xiami, baidu
  type: playlist    #require song, playlist, album, search, artist
  id: 503838841     #require song id / playlist id / album id / search keyword
  fixed: false      # 开启吸底模式
  autoplay: false   # 是否自动播放
  theme: '#42b983'
  loop: 'all'       # 音频循环播放, 可选值: 'all', 'one', 'none'
  order: 'random'   # 音频循环顺序, 可选值: 'list', 'random'
  preload: 'auto'   # 预加载，可选值: 'none', 'metadata', 'auto'
  volume: 0.7       # 默认音量，请注意播放器会记忆用户设置，用户手动设置音量后默认音量即失效
  listFolded: true  # 列表默认折叠

提示：
    server可选netease（网易云音乐），tencent（QQ音乐），kugou（酷狗音乐），xiami（虾米音乐），baidu（百度音乐）。

    type可选song（歌曲），playlist（歌单），album（专辑），search（搜索关键字），artist（歌手）

    id获取示例: 浏览器打开网易云音乐，点击我喜欢的音乐歌单，地址栏有一串数字，playlist的id即为这串数字。
2.15 文章 Front-matter 介绍

Front-matter 选项中的所有内容均为非必填的。但我仍然建议至少填写 title 和 date 的值。

配置选项 默认值 描述
title Markdown 的文件标题 文章标题，强烈建议填写此选项
date 文件创建时的日期时间 发布时间，强烈建议填写此选项，且最好保证全局唯一
author 根 _config.yml 中的 author 文章作者
img featureImages 中的某个值 文章特征图，推荐使用图床(腾讯云、七牛云、又拍云等)来做图片的路径.如: http://xxx.com/xxx.jpg
top true 推荐文章（文章是否置顶），如果 top 值为 true，则会作为首页推荐文章
cover false v1.0.2版本新增，表示该文章是否需要加入到首页轮播封面中
coverImg 无 v1.0.2版本新增，表示该文章在首页轮播封面需要显示的图片路径，如果没有，则默认使用文章的特色图片
password 无 文章阅读密码，如果要对文章设置阅读验证密码的话，就可以设置 password 的值，该值必须是用 SHA256 加密后的密码，防止被他人识破。前提是在主题的 config.yml 中激活了 verifyPassword 选项
toc true 是否开启 TOC，可以针对某篇文章单独关闭 TOC 的功能。前提是在主题的 config.yml 中激活了 toc 选项
mathjax false 是否开启数学公式支持 ，本文章是否开启 mathjax，且需要在主题的 _config.yml 文件中也需要开启才行
summary 无 文章摘要，自定义的文章摘要内容，如果这个属性有值，文章卡片摘要就显示这段文字，否则程序会自动截取文章的部分内容作为摘要
categories 无 文章分类，本主题的分类表示宏观上大的分类，只建议一篇文章一个分类
tags 无 文章标签，一篇文章可以多个标签
keywords 文章标题 文章关键字，SEO 时需要
reprintPolicy cc_by 文章转载规则， 可以是 cc_by, cc_by_nd, cc_by_sa, cc_by_nc, cc_by_nc_nd, cc_by_nc_sa, cc0, noreprint 或 pay 中的一个

注意:
如果 img 属性不填写的话，文章特色图会根据文章标题的 hashcode 的值取余，然后选取主题中对应的特色图片，从而达到让所有文章都的特色图各有特色。
date 的值尽量保证每篇文章是唯一的，因为本主题中 Gitalk 和 Gitment 识别 id 是通过 date 的值来作为唯一标识的。
如果要对文章设置阅读验证密码的功能，不仅要在 Front-matter 中设置采用了 SHA256 加密的 password 的值，还需要在主题的 _config.yml 中激活了配置。有些在线的 SHA256 加密的地址，可供你使用：开源中国在线工具、chahuo、站长工具。
您可以在文章md文件的 front-matter 中指定 reprintPolicy 来给单个文章配置转载规则

2.16 修改 banner 图和文章特色图

你可以直接在 /source/medias/banner 文件夹中更换你喜欢的 banner 图片，主题代码中是每天动态切换一张，只需 7 张即可。如果你会 JavaScript 代码，可以修改成你自己喜欢切换逻辑，如：随机切换等，banner 切换的代码位置在 /layout/_partial/bg-cover-content.ejs 文件的 <script></script> 代码中:

$('.bg-cover').css('background-image', 'url(/medias/banner/' + new Date().getDay() + '.jpg)');

在 /source/medias/featureimages 文件夹中默认有 24 张特色图片，你可以再增加或者减少，并需要在 _config.yml 做同步修改。

2.17 优化目录栏

在 themes\Matery\layout\_partial\post-detail-toc.ejs，修改内容如下：

.toc-widget {
    padding-left: 20px;
    width: 345px;
    background-color: rgb(255, 255, 255,0.7);
    border-radius: 10px;
    box-shadow: 0 10px 35px 2px rgba(0, 0, 0, .15), 0 5px 15px rgba(0, 0, 0, .07), 0 2px 5px -5px rgba(0, 0, 0, .1) !important;
}

#toc-content {
    margin-bottom: 20px;
}

0x004 更多详细教程

以下几篇文章都是基于Hexo框架和hexo-theme-matery主题优化的教程，大家如果遇到问题，可以参考其中的方法。

posted @ 2022-11-17 21:15  Axion11  阅读(176)  评论(0)    收藏  举报