前言

本篇文章记录了博客修改微调的一些记录，包括添加新功能、修改样式、优化代码等，主要是怕自己又忘了，记录一下。部分参考Akiler。

正文

代码块高亮样式修改

效果预览
  • 一个毛玻璃效果的代码块高亮样式，并适配暗色模式，配合 post 透明或毛玻璃背景效果较好。

  1. 在 [Blogroot]\_config.butterfly.yml 中找到 code_blocks 配置项，修改 theme 为 false 关闭默认高亮样式：
    1
    2
    3
    4
    5
    6
    7
    code_blocks:
      # Code block theme: darker / pale night / light / ocean / false
      theme: false
      macStyle: true
      # Code block height limit (unit: px)
      height_limit: 250
      word_wrap: false
  2. 在 [Blogroot]\_config.yml 中找到 highlight 配置项，修改 hljs 为 true ：
    1
    2
    3
    4
    5
    6
    highlight:
      line_number: true
      auto_detect: false
      tab_replace: ''
      wrap: true
      hljs: true
  3. 在 [Blogroot]\themes\butterfly\source\css\custom\ 目录下新建 highlight.css 文件：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    /* 新添加的內容
      ------------------------------------- 
      --hl-color                  代碼框字體顔色 【必須】 (把下面.hljs的 color複製到這裏來)
      --hl-bg                     代碼框背景色 【必須】 (把下面.hljs的 background複製到這裏來)
      --hltools-bg: #321a0f       代碼框頂部工具欄背景色 【可選】(如果你關掉了 copy、lang 和 shrink,可不用配置這個）
      --hltools-color: #fff       代碼框頂部工具欄字體顔色 【可選】(如果你關掉了 copy、lang 和 shrink,可不用配置這個）
      --hlnumber-bg: #221a0f      代碼框行數背景色 【可選】(如果已經關掉 line_number,可以不用配置這個)
      --hlnumber-color: #fff      代碼框行數字體顔色 【可選】 (如果已經關掉 line_number,可以不用配置這個)
      --hlscrollbar-bg: #d3af86   代碼框滾動條顔色 【可選】（默認為主題主顔色）
      --hlexpand-bg: #d3af86      代碼框底部展開背景色 【可選】(如果已經關掉 highlight_height_limit,可以不用配置這個)
    */

    :root {
        --hl-color: #d3af86;
        --hl-bg: rgba(255, 255, 255, 0.25);
        --hltools-bg: ;
        --hltools-color: #fff;
        --hlnumber-bg: transparent;
        --hlnumber-color: #fff;
        --hlscrollbar-bg: #fff;
        --hlexpand-bg: rgba(255, 255, 255, 0.15);
    }

    /* 代码块自定义样式 */
    .highlight {
        background: rgba(255, 255, 255, 0.25) !important;
        border-radius: 0.8rem !important;
        border: 1px solid rgba(255, 255, 255, 0.3);
        box-shadow:
            0 4px 30px rgba(0, 0, 0, 0.1),
            0 10px 20px rgba(0, 0, 0, 0.1) !important;
        /* backdrop-filter: blur(1px) saturate(170%);
        -webkit-backdrop-filter: blur(1px) saturate(170%); */
    }

    .container .highlight-tools {
        background: rgba(255, 255, 255, 0.4);
    }

    .container figure.highlight table td.gutter pre,
    .container figure.highlight table td.code pre {
        background: transparent !important;
    }

    .code-expand-btn {
        background: rgba(255, 255, 255, 0.05) !important;
        backdrop-filter: blur(1px) saturate(170%);
        -webkit-backdrop-filter: blur(1px) saturate(170%);
        box-shadow:
            0 4px 30px rgba(0, 0, 0, 0.1),
            0 10px 20px rgba(0, 0, 0, 0.1) !important;
    }

    [data-theme="dark"] .highlight {
        background: rgba(0, 0, 0, 0.25) !important;
    }

    [data-theme="dark"] .container .highlight-tools {
        background: rgba(0, 0, 0, 0.35);
        color: rgba(255, 255, 255, 0.7);
    }

    [data-theme="dark"] .code-expand-btn {
        background: rgba(0, 0, 0, 0.15) !important;
    }


    /* Kimbie Comment */
    .hljs-comment,
    .hljs-quote {
        color: #b7b7b7;
    }

    /* Kimbie Red */
    .hljs-variable,
    .hljs-template-variable,
    .hljs-tag,
    .hljs-name,
    .hljs-selector-id,
    .hljs-selector-class,
    .hljs-regexp,
    .hljs-meta {
        color: #ff657f;
    }

    /* Kimbie Orange */
    .hljs-number,
    .hljs-built_in,
    .hljs-builtin-name,
    .hljs-literal,
    .hljs-type,
    .hljs-params,
    .hljs-deletion,
    .hljs-link {
        color: #ffae51;
    }

    /* Kimbie Yellow */
    .hljs-title,
    .hljs-section,
    .hljs-attribute {
        color: #ff885d;
    }

    /* Kimbie Green */
    .hljs-string,
    .hljs-symbol,
    .hljs-bullet,
    .hljs-addition {
        color: #b3e766;
    }

    /* Kimbie Purple */
    .hljs-keyword,
    .hljs-selector-tag,
    .hljs-function {
        color: #76d8ff;
    }

    /* 更改的內容 把.hljs改為 #article-container figure.highlight .hljs *、
    /* ------------------------------------- */
    #article-container figure.highlight .hljs {
        display: block;
        overflow-x: auto;
        color: #ffffff;
        padding: 0.5em;
        text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
    }

    [data-theme="dark"] #article-container figure.highlight .hljs {
        background: transparent;
    }

    .hljs-emphasis {
        font-style: italic;
    }

    .hljs-strong {
        font-weight: bold;
    }
  4. 在 [Blogroot]\_config.butterfly.yml 的 inject 配置项引入 highlight.css:
    1
    2
    3
    4
    5
    6
    inject:
        head:
          # - <link rel="stylesheet" href="/xxx.css">
    +     - <link rel="stylesheet" href="/css/custom/highlight.css">
        bottom:
          # - <script src="xxxx"></script>

站点动态title

效果预览
  • 站点动态title是通过js监测是否聚焦于当前页面，从而替换标签显示内容。
  1. 在 [Blogroot]\themes\butterfly\source\js\ 目录下新建 diytitle.js 文件：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    //动态标题
    var OriginTitile = document.title;
    var titleTime;
    document.addEventListener('visibilitychange', function () {
        if (document.hidden) {
            //离开当前页面时标签显示内容
            document.title = 'w(ﾟДﾟ)w 不要走！再看看嘛！😢';
            clearTimeout(titleTime);
        }
        else {
            //返回当前页面时标签显示内容
            document.title = '♪(^∇^*)欢迎回来！😘' + OriginTitile;
            //两秒后变回正常标题
            titleTime = setTimeout(function () {
                document.title = OriginTitile;
            }, 2000);
        }
    });
  2. 在 [Blogroot]\_config.butterfly.yml 的 inject 配置项引入 diytitle.js，此处因为这是个体量极小的独立js，所以可以添加 async 异步加载标签：
    1
    2
    3
    4
    5
    6
    inject:
        head:
          # - <link rel="stylesheet" href="/xxx.css">
        bottom:
          # - <script src="xxxx"></script>
    +     - <script async src="/js/custom/diytitle.js"></script>
    • 我的自定义文件存放在 css/custom/ 和 js/custom/ 目录下，根据实际情况修改路径。

随机背景及渐显加载

效果预览
  • butterfly 主题使用 id 为 web_bg 的 div 来存放背景图片，只需要通过重设这个 div 的背景图片属性就可以替换背景图片。
  1. 在 [Blogroot]\themes\butterfly\source\js\ 目录下新建 randombg.js 文件：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    //随机背景图片数组,图片可以换成图床链接，注意最后一条后面不要有逗号
    var backimg =[
      "url(/img/bg1.JPG)",
      "url(/img/bg2.jpg)",
      "url(/img/bg3.jpg)",
      "url(/img/bg4.jpg)"
    ];
    //获取背景图片总数，生成随机数
    var bgindex =Math.floor(Math.random() * backimg.length);
    //重设背景图片
    document.getElementById("web_bg").style.backgroundImage = backimg[bgindex];
    • 这里适合一图流使用，不涉及更换banner。
  2. 在 custom.css 中添加如下代码，实现渐显加载效果：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    /*3s为加载动画的时间，1为加载动画的次数，ease-in-out为动画效果*/
    #web_bg {
        -webkit-animation: imgblur 3s 1 ease-in-out;
        animation: imgblur 3s 1 ease-in-out;
    }
    @keyframes imgblur {
      0% {
        filter: blur(5px);
      }
      100% {
        filter: blur(0px);
      }
    }
    /*适配使用-webkit内核的浏览器 */
    @-webkit-keyframes imgblur {
      0% {
        -webkit-filter: blur(5px);
      }
      100% {
        -webkit-filter: blur(0px);
      }
    }
    • 如果还没有 custom.css 文件，就在 [Blogroot]\themes\butterfly\source\css\ 目录下新建一个。
  3. 在 [Blogroot]\_config.butterfly.yml 的 inject 配置项引入 randombg.js：
    1
    2
    3
    4
    5
    inject:
      head:
        - <link rel="stylesheet" href="/css/custom/custom.css"  media="defer" onload="this.media='all'">
      bottom:
        - <script async data-pjax src="/js/custom/randombg.js"></script>
    • 我的自定义文件存放在 css/custom/ 和 js/custom/ 目录下，根据实际情况修改路径；其中 async 属性提供异步加载减少 Html 阻塞。

公祭日自动变灰

效果预览
  • 站点公祭日自动变灰判定是通过 js 监测当前日期是否为公祭日，从而调整 html 的 filter 属性使站点变灰。
  1. 在 [Blogroot]\themes\butterfly\source\js\ 目录下新建 grayscale.js 文件：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    if(PublicSacrificeDay()){
      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 PublicSacrificeDay(){
        var PSFarr=new Array("0403","0404","0405","0406","0414","0512","0707","0807","0814","0909","0918","0930","1025","1213");
        //2020年4月4日 新冠肺炎哀悼日，清明节
        //2010年4月14日，青海玉树地震
        //2008年5月12日，四川汶川地震
        //1937年7月7日,七七事变 又称卢沟桥事变
        //2010年8月7日，甘肃舟曲特大泥石流
    	  //8月14日，世界慰安妇纪念日
        //1976年9月9日，毛主席逝世
      	//1931年9月18日，九一八事变
      	//烈士纪念日为每年9月30日
        //1950年10月25日，抗美援朝纪念日
        //1937年12月13日，南京大屠杀
        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(PSFarr.indexOf(str)>-1){
            return 1;
        }else{
            return 0;
        }
    }
  2. 在 [Blogroot]\_config.butterfly.yml 的 inject 配置项引入 grayscale.js，此处因为这是个体量极小的独立js，所以可以添加 async 异步加载标签：
    1
    2
    3
    4
    5
    6
      inject:
        head:
          # - <link rel="stylesheet" href="/xxx.css">
        bottom:
          # - <script src="xxxx"></script>
    +     - <script async src="/js/custom/grayscale.js"></script>
    • 我的自定义文件存放在 css/custom/ 和 js/custom/ 目录下，根据实际情况修改路径。

后记

后续还会有一些其他的微调记录，再补充。