Hexo 静态博客 完整支持特殊日子黑白悼念,愿生者坚强,逝者安息!
方法 1
静态方法,直接在模板文件中添加 CSS 样式:
<style>
html {
FILTER: gray;
-webkit-filter: grayscale(100%);
}
</style>
方法 2
动态方法,可在 _config.yml 中进行配置多个日期:
grieve:
- '5-12'
- '9-18'
- '2020-4-4'
页面模板如 footer.ejs 中:
<script type="text/javascript" src="/js/grieve.js"></script>
<% if (config.grieve) { %>
<script>
grieveIfNeed('<%= config.grieve %>')
</script>
<% } %>
创建 JS 文件 grieve.js 放到 js 文件夹下:
grieveIfNeed = function (dateList) {
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth() + 1;
var day = date.getDate();
var dateArray = dateList.split(',')
for(i = 0; i < dateArray.length; i++){
if(year + '-' + month +'-' + day === dateArray[i] || month +'-' + day === dateArray[i]){
var style = document.createElement("style");
style.type = "text/css";
try{
style.appendChild(document.createTextNode("html{FILTER:gray;-webkit-filter:grayscale(100%);}"));
}catch(ex){
style.styleSheet.cssText = "html{FILTER:gray;-webkit-filter:grayscale(100%);}";
}
var head = document.getElementsByTagName("head")[0];
head.appendChild(style);
}
}
}
最后
团结让我们的民族延绵不息,缅怀让我们的英雄永垂不朽!