指定日期网页自动变灰

前言：

又快到国家公祭日了，就把指定日期网站变灰给加上了

可能方法比较笨拙，欢迎大佬指出或提供更好的方案🤣

【转载说明】本文优先发布于我的个人博客www.226yzy.com ，转载请注明出处并注明作者：星空下的YZY。

本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0许可协议。

js

以Hexo的Butterfly主题为例（其他的其实引入js即可）

在themes\butterfly\source\js\下新建grayscale.js

if (mourning()) {
    document.getElementsByTagName("html")[0].setAttribute("style", "filter:gray !important;filter:grayscale(100%);-webkit-filter:grayscale(100%);-moz-filter:grayscale(100%);-ms-filter:grayscale(100%);-o-filter:grayscale(100%);");
}

function mourning() {
    var Days = new Array("0512", "1213");
    var currentdate = new Date();
    var str = "";
    var mm = currentdate.getMonth() + 1;
    if (currentdate.getMonth() > 9) {
        str += mm;
    } else {
        str += "0" + mm;
    }
    if (currentdate.getDate() > 9) {
        str += currentdate.getDate();
    } else {
        str += "0" + currentdate.getDate();
    }
    if (Days.indexOf(str) > -1) {
        return 1;
    } else {
        return 0;
    }
}

其中var Days = new Array("0512", "1213");可以增添合适日期，如"1213"表示每年的12月13日（即国家公祭日）

然后，就是引入js，butterfly主题的话就在——config.yml中的inject的配置项bottom中添加

1	- <script async src="/js/grayscale.js"></script>

但其实这有一个缺点，就是这样是全站变灰，色彩的缺失可能导致一些必要的阅读受到影响

所以最好是仅在首页页面引入

Butterfly主题仅首页变灰

我目前是通过修改主题源码的方式实现的

另外我目前Butterfly主题版本为4.1.0

增改源码在themes\butterfly\layout\includes\header\index.pug

整个改后如下

if !theme.disable_top_img && page.top_img !== false
  if is_post()
    - var top_img = page.top_img || page.cover || page.randomcover
  else if is_page()
    - var top_img = page.top_img || theme.default_top_img
  else if is_tag()
    - var top_img = theme.tag_per_img && theme.tag_per_img[page.tag] 
    - top_img = top_img ? top_img : (theme.tag_img !== false ? theme.tag_img || theme.default_top_img : false)
  else if is_category()
    - var top_img = theme.category_per_img && theme.category_per_img[page.category]
    - top_img = top_img ? top_img : (theme.category_img !== false ? theme.category_img || theme.default_top_img : false)
  else if is_home()
    - var top_img = theme.index_img !== false ? theme.index_img || theme.default_top_img : false
  else if is_archive()
    - var top_img = theme.archive_img !== false ? theme.archive_img || theme.default_top_img : false
  else
    - var top_img = page.top_img || theme.default_top_img

  if top_img !== false
    - var imgSource = top_img && top_img.indexOf('/') !== -1 ? `background-image: url('${url_for(top_img)}')` : `background: ${top_img}`
    - var bg_img = top_img ? imgSource : ''
    - var site_title = is_archive() ? fragment_cache('findArchivesTitle', function(){return findArchivesTitle(theme.menu);}) : page.title || page.tag || page.category || config.title
    - var isHomeClass = is_home() ? 'full_page' : 'not-home-page'
    - is_post() ? isHomeClass = 'post-bg' : isHomeClass
  else
    - var isHomeClass = 'not-top-img'
else
  - var top_img = false
  - var isHomeClass = 'not-top-img'

header#page-header(class=isHomeClass style=bg_img)
  !=partial('includes/header/nav', {}, {cache: true})
  script(type='text/javascript').
    document.getElementsByTagName("html")[0].setAttribute("style", "filter:grayscale(0%);-webkit-filter:grayscale(0%);-moz-filter:grayscale(0%);-ms-filter:grayscale(0%);-o-filter:grayscale(0%);");
  if top_img !== false
    if is_post()
      include ./post-info.pug
    else if is_home() 
      #site-info
        h1#site-title=site_title
        if theme.subtitle.enable
          - var loadSubJs = true
          #site-subtitle
            span#subtitle
        if(theme.social)
          #site_social_icons
            !=fragment_cache('social', function(){return partial('includes/header/social')})
      #scroll-down
        i.fas.fa-angle-down.scroll-down-effects
      script(src="/js/grayscale.js")
    else
      #page-site-info
        h1#site-title=site_title

增改的内容在第33-34行和第50行

首先是第50行的（去掉第33-34行可能在48行）

1	script(src="/js/grayscale.js")

这个就是在首页引入js

这里为止我测试的效果是，直接访问非首页不变灰，访问首页变灰

通过首页访问其他页面，其他页面还是灰，但可刷新后颜色正常

通过首页访问其他页面颜色正常

在33行的位置增加

1
2

script(type='text/javascript').
    document.getElementsByTagName("html")[0].setAttribute("style", "filter:grayscale(0%);-webkit-filter:grayscale(0%);-moz-filter:grayscale(0%);-ms-filter:grayscale(0%);-o-filter:grayscale(0%);");

可能必交笨拙就是在其他页面将grayscale的参数条为0%

最后

暂时就写到这了，如有错误，欢迎大佬留言指出😆

欢迎访问我的小破站https://www.226yzy.com/ 或者GitHub版镜像 https://226yzy.github.io/ 或Gitee版镜像https://yzy226.gitee.io/

我的Github：226YZY (星空下的YZY) (github.com)

【转载说明】本文优先发布于我的个人博客www.226yzy.com ，转载请注明出处并注明作者：星空下的YZY。

本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0许可协议。

推荐订阅源

星空下的YZY

前言：

js

Butterfly主题仅首页变灰

最后