Hexo+NexT 进阶设置

HEXO 博客最近大更新, 页面与之前大不相同, 这里跟大家分享一下相关的设置方法

highlight.js

highlightjs 官方网站

Next 自带的代码高亮并不符合我的口味, 所以就采用了第三方的 highlight.js

Use

先禁用默认的高亮方式

编辑配置文件

./_config.yml

highlight:
    enable: false
line_number: true
autoi_detect: true
tab_replace:

引入第三方 highlight

编辑主题源文件

./themes/layout/_layout.swing

注意这边需要引入样式, 相关的样式以及支持的语言请查看 176 languages and 79 styles

因为个人比较喜欢 Atom 这款编辑器, 改编辑器用默认的样式为 atom-one-dark , 所以这里采用该样式

<link rel="stylesheet" href="//cdn.bootcss.com/highlight.js/9.12.0/styles/atom-one-dark.min.css">

除了引入样式, 还需初始化 highlightjs, 这里提供的代码是可以显示行号的

<script src="//cdn.bootcss.com/highlight.js/9.12.0/highlight.min.js"></script>
<script type="text/javascript">
    $(function() {
        hljs.initHighlighting();
        $('pre code').each(function() {
            var lines = $(this).text().split('\n').length - 1;
            var $numbering = $('<ul/>').addClass('pre-numbering');
            $(this)
                .addClass('has-numbering')
                .parent()
                .append($numbering);
            for (i = 1; i <= lines; i++) {
                $numbering.append($('<li/>'));
            }
        });
    });
</script>

可以看到以上的代码是有添加 class 样式的, 所以还需补上相关的样式表, 以下的样式表在小分辨率的情况下行号是不显示出来的, 优化效果请参照本博客代码高亮区块

<style>
    pre {
        position: relative;
        padding: 0;
    }

    code.has-numbering {
        margin-left: 2.5rem;
    }

    code.has-numbering::-webkit-scrollbar {
        display: none;
    }

    .pre-numbering {
        margin: 0;
        position: absolute;
        top: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 100%;
    }

    .pre-numbering li {
        list-style-type: decimal-leading-zero !important;
    }

    @media (max-width: 760px) {
        .post-body pre {
            padding: 0px;
        }

        .post-body .pre-numbering {
            display: none;
        }

        code.has-numbering {
            margin: 0;
        }
    }
</style>

Copy

<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.1/clipboard.min.js"></script>

这边不就贴关键代码了, , 请移步 clipboard.js _layout.swig

优化 blockquote

默认的引用 blockquote 样式比较丑, 写了一些样式优化它, 优化效果请参照本博客的引用区块

编辑主题源文件

./themes/layout/_layout.swing

<style>
    blockquote {
        color: #888;
        background-color: #eae6f3;
        border-left: 1rem solid #5236a0;
        padding: 0 1.5rem;
        position: relative;
        font-family: 'Roboto', sans-serif;
    }

    blockquote:before,
    blockquote:after {
        color: #392570;
        font-size: 2.5rem;
        position: absolute;
        line-height: 2.5rem;
    }

    blockquote:before {
        content: "\201C";
        left: -1rem;
        top: 0;
    }

    blockquote:after {
        content: "\201D";
        right: 0;
        bottom: -1rem;
    }
</style>

网站已运行时间

编辑主题源文件

./themes/layout/_parrials/footer.swing

找到以下代码区块

{% if theme.footer.theme.enable %}
/* ... */
{% endif %}

</div> 之前添加

<span> | </span>
<span id="showDays"></span>

在该文件末尾处添加

<script>
    var seconds = 1000;
    var minutes = seconds * 60;
    var hours = minutes * 60;
    var days = hours * 24;
    var years = days * 365;
    var birthDay = Date.UTC(2016, 07, 30, 00, 00, 00); // 这里设置建站时间
    setInterval(function() {
        var today = new Date();
        var todayYear = today.getFullYear();
        var todayMonth = today.getMonth() + 1;
        var todayDate = today.getDate();
        var todayHour = today.getHours();
        var todayMinute = today.getMinutes();
        var todaySecond = today.getSeconds();
        var now = Date.UTC(todayYear, todayMonth, todayDate, todayHour, todayMinute, todaySecond);
        var diff = now - birthDay;
        var diffYears = Math.floor(diff / years);
        var diffDays = Math.floor((diff / days) - diffYears * 365);
        var diffHours = Math.floor((diff - (diffYears * 365 + diffDays) * days) / hours);
        var diffMinutes = Math.floor((diff - (diffYears * 365 + diffDays) * days - diffHours * hours) / minutes);
        var diffSeconds = Math.floor((diff - (diffYears * 365 + diffDays) * days - diffHours * hours - diffMinutes * minutes) / seconds);
        document.getElementById('showDays').innerHTML = "本站已运行 " + diffYears + " 年 " + diffDays + " 天 " + diffHours + " 小时 " + diffMinutes + " 分钟 " + diffSeconds + " 秒";
    }, 1000);
</script>

开启页面动画效果

编辑主题配置文件

./themes/_config.yml

#
Canvas - nest
canvas_nest: true

vendors: #Internal version: 1.0 .0# https: //github.com/hustcc/canvas-nest.js
    canvas_nest: //cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js

新的评论系统

自从多说和网易云跟帖都挂了之后, Next 官方引入了 Valine 这一款评论系统

关于 Valine 的介绍

请移步 Valine — 一款极简的评论系统, 配置中出现 leancloud application appidleancloud application appkey 获取方法也请看此链接

相关的配置指南 https://valine.js.org/

我的配置

编辑主题配置文件

./themes/_config.yml

#
Valine.#You can get your appid and appkey from https: //leancloud.cn
    #more info please open https: //github.com/xCss/Valine
    valine:
    enable: true
appid: #your leancloud application appid
appkey: #your leancloud application appkey
notify: false# mail notifier, https: //github.com/xCss/Valine/wiki
    verify: false# Verification code
placeholder: ヾノ≧∀≦) o 亲爱的小主, 有何指教

使用最新的 Valine

修改主题源码文件

./themes/layout/_third-party/comments/valine.swig

<script src="//unpkg.com/valine/dist/Valine.min.js"></script>
<script type="text/javascript">
    new Valine({
        av: AV,
        el: '#comments',
        app_id: '{{ theme.valine.appid }}',
        app_key: '{{ theme.valine.appkey }}',
        placeholder: '{{ theme.valine.placeholder }}', // 默认 null
        notify: {
            {
                theme.valine.notify
            }
        }, // 默认 false
        verify: {
            {
                theme.valine.verify
            }
        }, // 默认 false
        path: {
            {
                theme.valine.path
            }
        }, // 默认 window.location.pathname
        avatar: '{{ theme.valine.avatar }}' // 默认 ''
    });
</script>