一、前因

攻破技术难点时，总会随机进入到别人的网站中，有时看到别人的博客那叫一个养眼悦目，心里难免有点小波澜。

虽然知道它要么买的，要么用的动态博客，但没人家美就没人家美，咱不能失了风度。

再者，自己网站当初也是过五关斩六将，选框架选主题才把它孵化出来的，不至于就不爱了。

因此呢，为了解决内心的小波澜，稍微加点css，js美化一下，还是能做到的。

ps：操作对象为hugo博客，理论静态博客或者H5都能使用。

二、全局字体

先把字体改下，找到css或者新建个custom.css把下面代码扔进去。

@import url('https://fonts.googleapis.com/css2?family=ZCOOL+KuaiLe&display=swap');
*{font-family: 'ZCOOL KuaiLe', cursive;}

字体再这里找：https://fonts.google.com/

效果如下：

PS：有些字体英文辨识度比较模糊，你可以放置两个字体，英文在前面，中文在后面。

@import url('https://fonts.googleapis.com/css2?family=ZCOOL+KuaiLe&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kadwa&display=swap');
*{font-family: 'Kadwa','ZCOOL KuaiLe';}

三、代码块高亮

hugo配置文件config.toml中甩入下列代码

[markup]
  [markup.highlight]
    anchorLineNos = false
    codeFences = true
    guessSyntax = true
    hl_Lines = ''
    lineAnchors = ''
    lineNoStart = 1
    lineNos = false
    lineNumbersInTable = true
    noClasses = true
    style = 'murphy'
    tabWidth = 4

解释几个常用的:

guessSyntax：猜测语法，针对代码块没有写语言的

lineNos：是否显示行号

style：高亮样式，从在里找 https://xyproto.github.io/splash/docs/all.html

如果你的主题集成了highlightjs，可以使用它，不过你得把上面的注释掉，免得互相渲染了。

config.toml中加入下列代码

highlightjs = true
highlightjsCDN = "https://cdn.jsdelivr.net/gh/highlightjs/cdn-release/build/highlight.min.js"
highlightjsExtraLanguages = ["ocaml"]
highlightjsTheme = "gradient-light"
highlightjsThemeDark = "paraiso-dark"

主题在这里找: https://highlightjs.org/static/demo/

效果如下：

四、代码块一键复制

新建css或者放入已有的css中

/*start copy-to-clipboard */

.highlight {
    position: relative;
}

.highlight pre {
    padding-right: 75px;
    background-color:#f8f8f8 !important;
}

.highlight-copy-btn {
    position: absolute;
    top: 7px;
    right: 7px;
    border: 0;
    border-radius: 4px;
    padding: 1px;
    font-size: 0.8em;
    line-height: 1.8;
    color: #fff;
    background-color: #777;
    min-width: 55px;
    text-align: center;
}

.highlight-copy-btn:hover {
    background-color: #666;
}

/*end copy-to-clipboard */

新建js或者放入已有js中

// start copy-to-clipboard

(function() {
  'use strict';

  if(!document.queryCommandSupported('copy')) {
    return;
  }

  function flashCopyMessage(el, msg) {
    el.textContent = msg;
    setTimeout(function() {
      el.textContent = "Copy";
    }, 1000);
  }

  function selectText(node) {
    var selection = window.getSelection();
    var range = document.createRange();
    range.selectNodeContents(node);
    selection.removeAllRanges();
    selection.addRange(range);
    return selection;
  }

  function addCopyButton(containerEl) {
    var copyBtn = document.createElement("button");
    copyBtn.className = "highlight-copy-btn";
    copyBtn.textContent = "Copy";

    var codeEl = containerEl.firstElementChild;
    copyBtn.addEventListener('click', function() {
      try {
        var selection = selectText(codeEl);
        document.execCommand('copy');
        selection.removeAllRanges();

        flashCopyMessage(copyBtn, 'Copied!')
      } catch(e) {
        console && console.log(e);
        flashCopyMessage(copyBtn, 'Failed :\'(')
      }
    });

    containerEl.appendChild(copyBtn);
  }

  // Add copy button to code blocks
  var highlightBlocks = document.getElementsByClassName('highlight');
  Array.prototype.forEach.call(highlightBlocks, addCopyButton);
})();

//end copy-to-clipboard

加入config.toml配置文件中

[params.advanced]
  customCSS = ["css/custom.css"]
  customJS = ["js/custom.js"]

效果：

五、总结

前端的玩意太多了，互相替换的也多，我也不太喜欢侵入式强的框架，只能慢慢整了，先完成再完美。

收工。