抱歉,您的浏览器无法访问本站

本页面需要浏览器支持(启用)JavaScript


了解详情 >

哀悼日-全站变灰的实现

前言

作为一个关心家国大事的青年,在国家有难时因争相出手付出举手之劳,虽然现在时和平年代,但是也会经历 918公祭日、哀悼日等。

每到这些日子,警报响彻神州, 江水呜咽,山川悲鸣; 大江南北,长城内外,国家以最高的祭奠向英雄哀悼,人民以最深的怀念为英雄送行。

除了现场祭奠,线上我们也想表达自己对那些烈士、英雄和逝世同胞的深切哀悼,那么可以通过全站变灰的方式,遮去往日绚烂的色彩,跳脱的动效为他们沉寂。

下面将介绍如何让全站变灰。

青铜操作

作为 铂金CV工程师

先来一顿 青铜段 操作:

  1. 用最广告的引擎搜索: 全站变灰
  2. 点进广告最多的论坛, 将关键代码进行数据读取: Ctrl + C
  3. 来到自己的站点启动全站检测: F12
  4. 找到html标签, 在style面板中进行数据写入: Ctrl + V

完美~

全站变灰

白银操作

接下来就要进行 白银段 操作了:

这里我用的是Volantis这个主题, 你要找到你自己主题里生成 <head></head>标签的那个文件.

  1. 进入网站根目录, 找到 themes\volantis\layout_partial\head.ejs

  2. <head></head> 标签内添加

    themes\volantis\layout\_partial\head.ejs
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <style>
    html {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    _filter: none;
    }
    </style>
  3. 保存,推送: hexo g -d

做到这里其实就够了. 但是你也可以进阶一下

黄金操作

再来顿 黄金段 操作:

  1. 在刚刚添加 <style>...</style> 标签外面再套上一句ejs的判断语句

    themes\volantis\layout\_partial\head.ejs
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <% if (theme.style.mourn) { %>
    <style>
    html {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    _filter: none;
    }
    </style>
    <% } %>
  2. 在你的主题目录的配置文件 themes\volantis\_config.yml 中,

  3. 添加 mourn: true

    themes\volantis\_config.yml
    1
    2
    3
    style:
    ...
    mourn: true # 哀悼: 全站变灰
  4. 保存,推送: hexo g -d

这样当你要关掉的时候就不用再跑去head.ejs中删除了, 直接在主题配置文件中把mourn: false 就行了.

开启 -> mourn: true 关闭 -> mourn: false

也可以把mourn放到最外层, 只要让 mourn字段 前面没有空格就行, 相应的 <% if (theme.style.mourn) { %> 要改成 <% if (theme.mourn) { %>

这是yaml的语法, 不懂的出门左转

铂金操作

最后是 铂金段 操作

推送毕竟需要时间, 如果我们想要实现准时准点时间一到自动全站变灰,那就要升级下操作了.
只需要把刚刚的代码修改一下.

themes\volantis\layout\_partial\head.ejs
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<% if (theme.style.mourn.switch){ %>
<% var startTime = Date.parse(theme.style.mourn.startTime.replace(/-/g, "/")); %>
<% var endTime = Date.parse(theme.style.mourn.endTime.replace(/-/g, "/")); %>
<% var currentTime = Date.now(); %>
<% } %>
<% if (currentTime > startTime && currentTime < endTime) { %>
<style>
html {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
_filter: none;
}
</style>
<% } %>

然后配置中改成:

themes\volantis\_config.yml
1
2
3
4
5
6
style:
...
mourn: # 哀悼: 全站变灰
switch: true
startTime: '2020-4-4 0:0:0'
endTime: '2020/4/5 0:0:0'

这样只需要填写好开启关闭的时间, 然后打开开关switch: true即可

  1. 日期用-或者/分隔都可以, 因为ejs中有做格式化
  2. 时间一定要用(英文)冒号:分隔
  3. 日期和时间之间要有空格隔开
  4. 个位数不要添加前缀, 比如凌晨三点要写 3:0:0, 不要写成 03:00:00

心得

之前配置主题的时候小心翼翼, 生怕一不小心弄错了就头大.
折腾了一段时间积攒了一些经验

一. 边预览边修改

1. 可以使用命令hexo s 开启本地预览, 在浏览器输入localhost:4000开启本地预览2. 开启后cmd窗口放在一旁, 在编辑器中做修改, hexo server 一直监听着变化, 每次保存都会自动编译3. 只需要在浏览器里刷新一下就可以看到结果. 有什么编译错误cmd窗口里也会实时的显示出来.

二. 学会看报错信息

Debug
Debug

常见的报错信息就那么几个单词, 不懂的翻译一下, 知道错在哪里, 然后思考为什么会错误, 一步步修改, 慢慢的一点点积累就会成长.

三. YAML是个好东西

掌握了yaml语法以后, 就可以自由的添加自己想要的配置.就上面的修改全站变灰为例, 说白了就是找到自己想要的效果的代码, 然后在ejs里做判断, ejs和yaml配合, 就可以作出自己想要的效果了.

哔哔