当前位置: 首页 > 最新文章 > 正文

个人博客美化1之全局字体与代码高亮

再者,自己网站当初也是过五关斩六将,选框架选主题才把它孵化出来的,不至于就不爱了。因此呢,为了解决内心的小波澜,稍微加点css,js美化一下,还是能做到的。ps:操作对象为hugo博客,理论静态博客或者H5都能使用。family=ZCOOL+KuaiLe&display=swap‘);*{font-family: ‘ZCOOL KuaiLe‘, cursive;}字体再这里找:https://fo

admin

再者,自己网站当初也是过五关斩六将,选框架选主题才把它孵化出来的,不至于就不爱了。因此呢,为了解决内心的小波澜,稍微加点css,js美化一下,还是能做到的。ps:操作对象为hugo博客,理论静态博客或者H5都能使用。family=ZCOOL+KuaiLe&display=swap');*{font-family: 'ZCOOL KuaiLe', cursive;}字体再这里找:https://fonts.google.com/效果如下:PS:有些字体英文辨识度比较模糊,你可以放置两个字体,英文在前面,中文在后面。

个人博客美化1之全局字体与代码高亮

一、前因

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

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

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

因此呢,为了解决内心的小波澜,稍微加点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/

效果如下:

个人博客美化1之全局字体与代码高亮

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 = truehighlightjsCDN = "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/

效果如下:

个人博客美化1之全局字体与代码高亮

四、代码块一键复制

新建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"]

效果:

个人博客美化1之全局字体与代码高亮

五、总结

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

收工。


上一篇: 1元活动怎么弄营销(1元活动怎么弄营销) 下一篇:腾讯视频崩了,大批网友无法看剧崩溃!官方紧急回应
返回顶部