网站一键置灰


背景:
某些时候,需要让网站一键变灰。只需要短短几行代码就能做到。

1.直接上代码

直接在 html 上加上此样式,搞定。

<style>
  html {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: url("data:image/svg+xml;utf8,#grayscale");
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    -webkit-filter: grayscale(1);
  }
</style>

###

2.hexo 博客一键置灰(按博主的实际情况来)

image.png

1>找到 head.ejs

首先找到 hexo 博客 theme 下当前使用的主题文件,/themes/halo/layout/_partial/head.ejs(针对自己的),加入以下

<!-- 网站置灰,做成可配置的文件 -->
<% if (theme.graywebsite.enable) { %>
<link
  rel="stylesheet"
  type="text/css"
  href="<%- theme.jsDelivr.url %>/css/gray.css"
/>
<% } %>

2>新建 gray.css

在 /themes/halo/source/css/ 下新建 gray.css 文件,并写入以下代码:

html {
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: url("data:image/svg+xml;utf8,#grayscale");
  filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
  -webkit-filter: grayscale(1);
}

3>.配置 _config.yml

image.png

# 网站一键置灰
graywebsite:
  enable: false

4>大工告成

访问网站 http://www.leader755.com, 只会在特定的时间开启哦。


文章作者:   leader755
版权声明:   本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 leader755 !
评论
 上一篇
开源的git 服务器 开源的git 服务器
1、GitLab 开源版本简介:GitLab 是一个利用 Ruby on Rails 开发的开源应用程序,实现一个自托管的Git项目仓库,可通过 Web 界面进行访问公开的或者私人项目。它拥有与Github类似的功能,能够浏览源代码,管理缺
2021-06-20
下一篇 
linux 的定时任务crontab linux 的定时任务crontab
背景:本人博客的评论为 valine 评论,为了及时知道评论,设置了邮件通知。奈何 leancloud 的每天活跃状态为 16 小时,且半小时内无人访问,则自动进入休眠状态。为了解决这一问题,研究了下 linux 系统自带的 cronta
2021-05-16
  目录