点击任意处关闭

Fluid 主题美化汇总


谁不想有一个更漂亮的博客呢???

下面介绍我对 Fluid 主题的各种魔改。

滚动条

创建一个 css 文件:/source/css/fluid-extension.css,然后粘贴下面的代码。这里的样式参考 云游君

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    border-radius: 4px;
    background-color: rgba(255, 255, 255, .1);
}

::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0, 120, 231, .5);
}

::-webkit-scrollbar-thumb:window-inactive {
    background-color: rgba(0, 120, 231, .3)
}

::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 120, 231, .7)
}

::-webkit-scrollbar-thumb:active {
    background-color: rgba(0, 120, 231, .9)
}

打开主题的配置文件,在 custom_css 里添加刚才的文件。

custom_css:
  - "/css/fluid-extension.css"

赞赏按钮

创建一个 JavaScript 文件:/source/js/reward-button.js,然后粘贴下面的代码。

JavaScript
function RewardButton(config) { this.btnIcon = config.btnIcon; this.btnText = config.btnText; this.comment = config.comment; this.qrcodes = config.qrcodes; } RewardButton.prototype = { init: function () { let btnId = "reward-btn"; let qrcodesId = "reward-qrcodes"; var btn = document.createElement("a"); btn.className = "btn"; btn.id = btnId; if (this.btnIcon) { btn.className = `${this.btnIcon} ${btn.className}`; btn.innerHTML = " " + this.btnText; } else { btn.innerHTML = this.btnText; } var qrcodes = document.createElement("div"); qrcodes.id = qrcodesId; var div = document.createElement("div"); div.className = "markdown-body"; div.style.textAlign = "center" div.appendChild(btn); div.innerHTML += `<br><span class="image-caption">${this.comment}</span>`; div.appendChild(qrcodes); var postNav = document.querySelector('.post-prevnext'); postNav.parentNode.insertBefore(div, postNav); document.getElementById(btnId).onclick = (function () { var container = document.getElementById(qrcodesId); if (container.childNodes.length == 0) { for (var i = 0; i < this.qrcodes.length; i++) { var qrcode = document.createElement("p"); qrcode.className = "reward-qrcode"; var img = document.createElement("img"); img.src = this.qrcodes[i].src; img.title = this.qrcodes[i].title; img.alt = this.qrcodes[i].title; var caption = document.createElement("p"); caption.className = "image-caption"; caption.innerText = this.qrcodes[i].caption; qrcode.appendChild(img); qrcode.appendChild(caption); container.appendChild(qrcode); } } else if (container.style.display == "none") { container.style.removeProperty("display"); } else { container.style.display = "none"; } }).bind(this); } };

css 文件:/source/css/reward-button.css

#reward-btn {
    border-radius: 20px;
    margin-bottom: 0.625rem;
}

.reward-qrcode {
    display: inline-block;
    margin: 1.5rem !important;
    width: 10rem;
    height: 10rem;
    -webkit-animation: show_qrcodes .3s .1s ease both;
    -moz-animation: show_qrcodes .3s .1s ease both;
    -o-animation: show_qrcodes .3s .1s ease both;
    -ms-animation: show_qrcodes .3s .1s ease both;
    animation: show_qrcodes .3s .1s ease both;
}

.reward-qrcode img {
    margin-top: 0 !important;
}

@-moz-keyframes show_qrcodes {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-10px);
        -moz-transform: translateY(-10px);
        -o-transform: translateY(-10px);
        -ms-transform: translateY(-10px);
        transform: translateY(-10px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -o-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
}

@-webkit-keyframes show_qrcodes {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-10px);
        -moz-transform: translateY(-10px);
        -o-transform: translateY(-10px);
        -ms-transform: translateY(-10px);
        transform: translateY(-10px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -o-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
}

@-o-keyframes show_qrcodes {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-10px);
        -moz-transform: translateY(-10px);
        -o-transform: translateY(-10px);
        -ms-transform: translateY(-10px);
        transform: translateY(-10px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -o-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
}

@keyframes show_qrcodes {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-10px);
        -moz-transform: translateY(-10px);
        -o-transform: translateY(-10px);
        -ms-transform: translateY(-10px);
        transform: translateY(-10px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -o-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
}

编写注入器:/scripts/reward-button-injector.js

JavaScript
hexo.extend.injector.register('body_end', function () { const { enable, btn_icon, btn_text, comment, qrcodes, } = hexo.config.reward_button; if (!enable) { return null; } return ` <link defer rel="stylesheet" href="/css/reward-button.css"/> <script src="/js/reward-button.js"></script> <script> new RewardButton({ btnIcon: ${btn_icon ? `"${btn_icon}"` : "null"}, btnText: "${btn_text}", comment: "${comment}", qrcodes: ${JSON.stringify(qrcodes)} }).init(); </script> ` }, "post");

_config.yml 下添加配置。

reward_button:
  enable: true
  btn_icon: iconfont icon-love
  btn_text: 赞赏
  comment: 我很可爱,请给我钱!
  qrcodes:
    - src: /images/wechatpay.jpg
      caption: 微信
      title: 微信赞赏码

迷你版权声明

创建一个 JavaScript 文件:/source/js/mini-copyright.js,然后粘贴下面的代码。

JavaScript
function MiniCopyright(content) { this.content = content; } MiniCopyright.prototype = { init: function () { var copyright = document.createElement("span"); copyright.innerHTML = this.content; var div = document.createElement("div"); div.className = "markdown-body mini-copyright"; div.appendChild(copyright); var hr = document.querySelector(".post-metas.mb-3").parentNode.previousElementSibling; hr.parentNode.insertBefore(div, hr); } };

css 文件:/source/css/mini-copyright.css

.mini-copyright {
    margin-bottom: 0 !important;
}

.mini-copyright span {
    opacity: 0.75;
    font-size: 0.8rem;
}

编写注入器:/scripts/mini-copyright-injector.js

JavaScript
hexo.extend.injector.register('body_end', function () { const { enable, content } = hexo.config.mini_copyright; if (!enable) { return null; } return ` <link defer rel="stylesheet" href="/css/mini-copyright.css"/> <script src="/js/mini-copyright.js"></script> <script> new MiniCopyright(\`${content}\`).init(); </script> ` }, "post");

_config.yml 下添加配置。

mini_copyright:
  enable: true
  content: '本博客所有文章除特别声明外,均采用 <a href="https://creativecommons.org/licenses/by-sa/4.0/deed.zh" rel="nofollow noopener">CC BY-SA 4.0 协议</a> ,转载请注明出处!'

关闭主题原本的版权框。

copyright:
  enable: false
  content: '本博客所有文章除特别声明外,均采用 <a href="https://creativecommons.org/licenses/by-sa/4.0/deed.zh" rel="nofollow noopener">CC BY-SA 4.0 协议</a> ,转载请注明出处!'

Canvas Ribbon

创建一个 JavaScript 文件:/source/js/canvas-ribbon.js,然后粘贴下面的代码。代码来自 笔记

JavaScript
/** 静止彩色丝带 bynote.cn **/ /*jshint -W030 */ ! function () { function attr(node, attr, default_value) { return Number(node.getAttribute(attr)) || default_value; } // get user config var scripts = document.getElementsByTagName('script'), script = scripts[scripts.length - 1]; // 当前加载的script config = { z: attr(script, "zIndex", -1), // z-index a: attr(script, "alpha", 0.6), // alpha s: attr(script, "size", 90), // size }; var canvas = document.createElement('canvas'), g2d = canvas.getContext('2d'), pr = window.devicePixelRatio || 1, width = window.innerWidth, height = window.innerHeight, f = config.s, q, t, m = Math, r = 0, pi = m.PI * 2, cos = m.cos, random = m.random; canvas.width = width * pr; canvas.height = height * pr; g2d.scale(pr, pr); g2d.globalAlpha = config.a; canvas.style.cssText = 'opacity: ' + config.a + ';position:fixed;top:0;left:0;z-index: ' + config.z + ';width:100%;height:100%;pointer-events:none;'; // create canvas document.getElementsByTagName('body')[0].appendChild(canvas); function redraw() { g2d.clearRect(0, 0, width, height); q = [{ x: 0, y: height * 0.7 + f }, { x: 0, y: height * 0.7 - f }]; while (q[1].x < width + f) draw(q[0], q[1]); } function draw(i, j) { g2d.beginPath(); g2d.moveTo(i.x, i.y); g2d.lineTo(j.x, j.y); var k = j.x + (random() * 2 - 0.25) * f, n = line(j.y); g2d.lineTo(k, n); g2d.closePath(); r -= pi / -50; g2d.fillStyle = '#' + (cos(r) * 127 + 128 << 16 | cos(r + pi / 3) * 127 + 128 << 8 | cos(r + pi / 3 * 2) * 127 + 128).toString(16); g2d.fill(); q[0] = q[1]; q[1] = { x: k, y: n }; } function line(p) { t = p + (random() * 2 - 1.1) * f; return (t > height || t < 0) ? line(p) : t; } document.onclick = redraw; // document.ontouchstart = redraw; redraw(); }();

打开主题的配置文件,在 custom_js 里添加刚才的文件。

custom_js:
  - "/js/canvas-ribbon.js"

Mac 样式代码框

这里偷个懒,直接在刚才的 /source/css/fluid-extension.css 文件里添加下面的代码。这里的样式参考 AIGISSS

figure.highlight {
    background: #21252b;
    border-radius: 5px;
    box-shadow: 0 4px 7px 0 rgba(0, 0, 0, .4);
    padding-top: 30px
}

figure.highlight::before {
    background: #fc625d;
    border-radius: 50%;
    box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
    content: ' ';
    height: 12px;
    left: 12px;
    margin-top: -20px;
    position: absolute;
    width: 12px;
}

表格样式优化

在刚才的 /source/css/fluid-extension.css 文件里添加下面的代码。

.table-container {
    overflow: auto;
    margin-bottom: 16px;
}

/* Avoid affecting the style of codeblock */
.markdown-body .table-container table {
    display: table !important;
    margin-bottom: 0 !important;
}

导航栏子菜单动画

在刚才的 /source/css/fluid-extension.css 文件里添加下面的代码。这里的动画参考 guole

#navbar {
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}

div.dropdown-menu {
    min-width: inherit !important;
    text-align: center !important;
    background-color: var(--navbar-bg-color) !important;
    right: 0;
    left: initial !important;
    box-shadow: 0 4px 7px 0 rgba(0, 0, 0, .5);
    -webkit-animation: sub_menus .3s .1s ease both;
    -moz-animation: sub_menus .3s .1s ease both;
    -o-animation: sub_menus .3s .1s ease both;
    -ms-animation: sub_menus .3s .1s ease both;
    animation: sub_menus .3s .1s ease both;
}

@-moz-keyframes sub_menus {
    0% {
        opacity: 0;
        -webkit-transform: translateY(10px);
        -moz-transform: translateY(10px);
        -o-transform: translateY(10px);
        -ms-transform: translateY(10px);
        transform: translateY(10px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -o-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
}

@-webkit-keyframes sub_menus {
    0% {
        opacity: 0;
        -webkit-transform: translateY(10px);
        -moz-transform: translateY(10px);
        -o-transform: translateY(10px);
        -ms-transform: translateY(10px);
        transform: translateY(10px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -o-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
}

@-o-keyframes sub_menus {
    0% {
        opacity: 0;
        -webkit-transform: translateY(10px);
        -moz-transform: translateY(10px);
        -o-transform: translateY(10px);
        -ms-transform: translateY(10px);
        transform: translateY(10px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -o-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
}

@keyframes sub_menus {
    0% {
        opacity: 0;
        -webkit-transform: translateY(10px);
        -moz-transform: translateY(10px);
        -o-transform: translateY(10px);
        -ms-transform: translateY(10px);
        transform: translateY(10px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -o-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
}

番剧页面

详见:hexo-bilibili-bangumi

说说页面

详见:Artitalk.js 使用文档

明日方舟小人

这个比较复杂,我单独写了一篇文章:法老的传送门


Title
Subtitle
00:00 / 00:00
播放列表