美文网首页
NexT主题配置与美化

NexT主题配置与美化

作者: 归棹远 | 来源:发表于2017-09-28 23:20 被阅读0次

    NexT主题是Hexo博客框架中非常简洁美观的一个主题,用的人很多,网上的教程也非常丰富。我在设置博客的时候参照了很多优秀的博客教程,过程算是顺利,但也遇到了很多坑。所以写这一篇文章来回顾遇到的一些问题,把我看过的解决方法整合一下。

    • 添加「标签」页面
    • 添加「分类」页面
    • 添加打赏功能
    • 添加动态背景
    • 增加评论框服务

    1.NexT主题基本设置

    可以参照NexT使用文档,来进行NexT主题的下载安装,以及设置界面语言、菜单、侧栏、头像、作者昵称和站点描述等。NexT主题的官方文档非常详细,认真看的话完全能够完成基本的的设置。不过我在搭建的时候对标签和分类的使用没有理解,在这个上边浪费了一些时间。

    添加「标签」页面

    新建「标签」页面,并在菜单中显示「标签」链接。「标签」页面将展示站点的所有标签。


    在文章开头输入相关代码

    tags: 
    - hexo
    - next
    - github
    categories: 博客搭建与美化
    

    然后在hexo/source/tags中打开index.md,如果没有的话新建文件即可。输入以下代码

    title: 标签
    date: 2017-07-19 22:56:27
    type: "tags"
    comments: false
    ---
    

    如果加入了第三方评论插件的话,comments: false可以避免在标签界面加载评论。

    添加「分类」页面

    分类界面与标签相同,打开hexo/source/category/index.md,改为:

    title: 分类
    date: 2017-07-19 22:56:27
    type: "categories"
    comments: false
    ---
    

    然后文章中加入categories这一项即可。

    添加打赏功能

    修改Next的主题配置文件hexo/themes/next/_config.yml,搜索如下代码并修改

    reward_comment: 生活不易,求打赏~
    wechatpay: /images/wechat.png
    #alipay: /images/alipay.jpg
    #bitcoin: /images/bitcoin.png
    

    把图片放入相应的文件夹即可,在这里我只加入了微信打赏。不过在我后来安装最新版本的NexT后,发现原来的“赏”字变成了英文的“Donate”,让我非常不爽。在Google了好几个网页也没有发现解决办法后(原谅我拙劣的信息检索能力-_-||),我神奇的发现了解决办法。
    打开hexo\themes\next\layout\_macro\reward.swig,修改以下代码即可

      <button id="rewardButton" disable="enable" onclick="var qr = 
    document.getElementById('QR'); if (qr.style.display === 'none') 
    {qr.style.display='block';} else {qr.style.display='none'}">
        <span>赏</span>
      </button>
    

    2.NexT主题美化

    完成NexT主题的基本配置后,你就可以开始快乐地写作啦,毕竟博客的内容才是王道。不过如果你像我一样喜欢瞎鼓捣一些有的没的,你可能还会想让网站更好看一些。

    添加动态背景

    如果next主题在5.1.1以上的话,直接在主题配置文件中找到canvas_nest: false,把它改为canvas_nest: true就行了(注意分号后面要加一个空格)。这样背景中会有很多飞舞的线条,还会随着鼠标移动,效果是非常不错的。

    增加评论框服务

    评论功能是个巨坑!!!本来像我这种小水文是不会有人评论的,我还是义无反顾的想要加一个评论功能,结果试了好久-_-||
    第三方评论服务本来有挺多的,比如多说,disqus,网易云跟帖,畅言,友言,来必力。
    但是因为某些不可抗力,多说和网易云跟帖都挂掉了。
    disqus是外国网站,需要翻墙。
    畅言注册之后发现要备案,否则只能用15天,但是我用的是外国的免费域名啊摔。
    然后友言注册成功了捣鼓半天就是没法评论,最后发现我博客好像用的github二级域名,所以无法被识别。
    最后灰头土脸的我选择了名字看起来很奇怪的来比利,不,是来必力。
    来必力在官方配置里有,所以倒是没费什么事。注册完之后(可能会需要科学上网),把提供给你的uid输入到hexo\themes\next\_config.yml中,简单快捷。

    # Support for LiveRe comments system.
    # You can get your uid from https://livere.com/insight/myCode (General web site)
    livere_uid: youruid
    

    以上的设置都是基于NexT的5.1.2版本,其他版本的操作可能略有差别。

    建博客,其实是就是为了能够多写点东西,所以没必要在美化上花费太多时间,毕竟像某游戏广告中说的那样,你的时间非常值钱。
    上一篇博客是七月份写的,转眼间十一假期就要到了。这两个月没学多少东西,荒废了很多时间,结果现在感觉时间不够用了...希望在接下来的三个月里一切都顺利吧,希望未来一年的付出会给我一份满意的答卷。

    相关文章

      网友评论

          本文标题:NexT主题配置与美化

          本文链接:https://www.haomeiwen.com/subject/nrivextx.html