[EasyHexo 专栏] #2 - 魔改 Next 不彻底教程

时间  2019-11-07 标签 easyhexo 专栏 不彻底 教程

easyhexo-宣传图.jpg

EasyHexo👉 轻松使用 Hexo 搭建你的博客javascript

EasyHexo GitHub Repo👉 EasyHexo/Easy-Hexocss

本篇做者：yi-yunhtml

前言

这篇文章并无划定适宜人群，只是但愿你能够经过此篇教程找到适合你的配置，或者经过个人博客找到一些灵感。这就是这篇教程的意义。java

另外，须要说明的是，个人博客使用的主题是 Next 6.3 版本。react

学习以前，还但愿你能先学一点 Yaml 基础知识 以及 Stylus 基础知识。不会的话多动手也能够作到，并不须要熟练掌握。git

约定

  • 通常提供方法，且按步骤。若是修改方法不少，我会以 • 方式区分
  • 仔细看清站点配置文件和主题配置文件
  • 博客文件目录为 root 目录，即包括你的 themes/ 、source/ 等文件夹的博客根目录。
  • 效果图在每一个教程最开头。（大部分都有，逃

个性化配置

修改打赏文字抖动

我的不喜欢这个设计因此改了github

  • 修改文件 themes\next\source\css\_common\components\post\post-reward.styl，将 hover 注释便可
  • 能够在 themes\next\source\css\_custom\custom.styl 中添加剧叠样式（推荐）
    //二维码不抖动
#wechat:hover p, #alipay:hover p {
    animation: none;
}
复制代码

修改打赏按钮

  1. 在 themes\next\source\css\_custom\custom.styl 中添加代码
    //打赏按钮修改
#rewardButton span {
    height: 35px;
    width: 35px;
    //line-height:30px; 
    font-size: 15px;
    font-family: "PingFang SC", "Microsoft YaHei", Georgia, sans-serif;
    background: #34495e;
    border-radius: 5px;
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    transition: 0.2s ease-out;

    &:hover {
        background: #649ab6;
        -webkit-box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
        -moz-box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
        box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
    }
}
复制代码
  2. 修改 themes\next\languages\zh-CN.yml 文件，将打赏字样改成
    reward:
donate: <i class="fa fa-qrcode fa-2x" style="line-height:35px;"></i>
wechatpay: 微信支付
alipay: 支付宝
复制代码

    PS: 这里语言文件的名字跟不一样主题有关系，有可能不是 zh-CN.ymlweb

修改 busuanzi 统计功能

  1. 主题配置文件中搜索 busuanzi 增长shell

    busuanzi_count:
enable: true
site_uv: true #total visitors
site_uv_icon: user
site_uv_header: 访问用户：
site_uv_footer: 人
site_pv: true #total views
site_pv_icon: eye
site_pv_header: 访问次数：
site_pv_footer: 次
post_views: true
post_views_icon: eye
复制代码

  2. themes\next\layout\_third-party\analytics\busuanzi-counter 变动为npm

    <i class="fa fa-{{ theme.busuanzi_count.site_uv_icon }}"></i>&nbsp
    {{ theme.busuanzi_count.site_uv_header }}
    <span class="busuanzi-value" id="busuanzi_value_site_uv"></span>
    {{ theme.busuanzi_count.site_uv_footer }}
    
<i class="fa fa-{{ theme.busuanzi_count.site_pv_icon }}"></i>&nbsp
    {{ theme.busuanzi_count.site_pv_header }}
    <span class="busuanzi-value" id="busuanzi_value_site_pv"></span>
    {{ theme.busuanzi_count.site_pv_footer }}
复制代码

PS: busuanzi 由于在 2018.10.12 左右七牛云域名过时，致使没法显示人数，若是你的主题是旧版本，请在第二步的文件中更新为 src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"

给文章底部加星星（点赞）

虽然是异步，但访问速度太慢，常常加载不出来

  1. 在主题配置文件中搜索 rating 便可

  2. 点击此连接注册帐号，设置站点后，点击左侧设置， site 建议选私人，rate 选择颜色保存便可

  3. 复制 ID 到配置文件，选择颜色

    星图

  4. 添加代码，搜索 rating，对比代码

    {% if theme.rating.enable %}
        <div class="wp_rating">
+           <div style="color: rgba(0, 0, 0, 0.75); font-size:13px; letter-spacing:3px">(&gt;看完记得五星好评哦&lt;)</div>
            <div id="wpac-rating"></div>
        </div>
        {% endif %}
复制代码

  5. 修改文章底部留白 添加以下代码：

    .post-widgets {
    padding-top: 0px;
}
.post-nav {
    margin-top: 30px;
}
复制代码

侧边栏近期文章

原理：去除友链，将友链换成近期文章

  1. 添加以下代码：

    {% if theme.recent_posts %}
    <div class="links-of-blogroll motion-element {{ "links-of-blogroll-" + theme.recent_posts_layout  }}">
    <div class="links-of-blogroll-title">
        <i class="fa fa-history fa-{{ theme.recent_posts_icon | lower }}" aria-hidden="true"></i>
        {{ theme.recent_posts_title }}
    </div>
    <ul class="links-of-blogroll-list">
        {% set posts = site.posts.sort('-date') %}
        {% for post in posts.slice('0', '5') %}
        <li>
            <a href="{{ url_for(post.path) }}" title="{{ post.title }}" target="_blank">{{ post.title }}</a>
        </li>
        {% endfor %}
    </ul>
    </div>
{% endif %}
复制代码

  2. 在主题配置文件中配置

    recent_posts_title: 近期文章
recent_posts_layout: block
recent_posts: true
复制代码

复制文本添加版权信息

  1. 在 themes\next\source\js\src 新建 copy.js，代码以下：

    function addLink() { 
    var body_element = document.body; var selection;
    selection = window.getSelection(); 
    if (window.clipboardData) { // Internet Explorer 
        var pagelink ="\r\n\r\n 原文出自[ Yi-Yun博客 ](yi-yun.github.io) \n除特别声明外，均采用CC BY-NC-SA 4.0许可协议\n转载请保留原文连接: "+document.location.href+""; 
        var copytext = selection + pagelink;
        window.clipboardData.setData ("Text", copytext); 
        return false; 
    }
    else {
        var pagelink = "<br/>原文出自[ Yi-Yun博客 ](yi-yun.github.io)<br/>除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议<br/>转载请保留原文连接: "+document.location.href+"";
        var copytext = selection + "<br/>"+pagelink;
        var newdiv = document.createElement('div');
        newdiv.style.position='absolute';
        newdiv.style.left='-99999px';
        body_element.appendChild(newdiv);
        newdiv.innerHTML = copytext;
        selection.selectAllChildren(newdiv);
        window.setTimeout(function() { body_element.removeChild(newdiv);},0);
    } 
} 
document.oncopy = addLink;
复制代码

  2. 在 next\layout\_layout.swig 文件中，添加引用（注：在 swig 文件末尾添加）：

    <script type="text/javascript" src="/js/src/copy.js"></script>
复制代码

添加 DaoVioce

不少灵感都是逛博客得到的

注册

首先在 DaoVoice 注册个帐号，点击->邀请码是 cbaf2df2。

获取 app_id

点击左侧应用设置->安装到网站

在代码中找到 app_id

修改 head.swig

在 themes\next\layout\_custom\head.swig 添加以下代码

{% if theme.daovoice %}
  <script> (function(i,s,o,g,r,a,m){i["DaoVoiceObject"]=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;a.charset="utf-8";m.parentNode.insertBefore(a,m)})(window,document,"script",('https:' == document.location.protocol ? 'https:' : 'http:') + "//widget.daovoice.io/widget/0f81ff2f.js","daovoice") daovoice('init', { app_id: "{{theme.daovoice_app_id}}" }); daovoice('update'); </script>
{% endif %}
复制代码

修改主题配置文件

文件末尾添加以下代码

# Online contact
daovoice: true
daovoice_app_id:   # 这里填你刚才得到的 app_id
复制代码

至此，网页的在线联系功能已经完成，hexo s 可查看页面，窗口和位置可自行配置

聊天窗口配置

个人配置

绑定微信

在用户界面点击右上角头像便可扫码绑定，即时通讯可在微信小程序中

添加吉祥物

  1. 安装依赖

    npm install --save hexo-helper-live2d
npm install --save live2d-widget-model-wanko
复制代码

  2. 站点配置

    # hexo-helper-live2d配置，参考https://github.com/EYHN/hexo-helper-live2d/blob/master/README.zh-CN.md
live2d:
enable: true
scriptFrom: local
pluginRootPath: live2dw/
pluginJsPath: lib/
pluginModelPath: assets/
tagMode: false
debug: false
model:
 scale: 1
 use: live2d-widget-model-wanko
display:
 superSample: 2 # 超采样等级
 width: 100 
 height: 100
 position: left # 位置
mobile:
 show: false
react:
 opacityDefault: 0.9 # 默认透明度
 opacityOnHover: 0.5 # 鼠标移上透明度
复制代码

网页标题崩溃欺骗

  1. 添加 JavaScript 代码 在 themes\next\source\js\src 文件夹下建立 crash_cheat.js，添加代码：

    var OriginTitle = document.title;
var titleTime;
document.addEventListener('visibilitychange', function () {
    if (document.hidden) {
        $('[rel="icon"]').attr('href', "/img/TEP.ico");
        document.title = '╭(°A°`)╮ 页面崩溃啦 ~';
        clearTimeout(titleTime);
    }
    else {
        $('[rel="icon"]').attr('href', "/favicon.ico");
        document.title = '(ฅ>ω<*ฅ) 噫又好了~' + OriginTitle;
        titleTime = setTimeout(function () {
            document.title = OriginTitle;
        }, 2000);
    }
});
复制代码

  2. 引用
    在themes\next\layout\_layout.swig文件中，添加引用（注：在swig末尾添加）：

    <script type="text/javascript" src="/js/src/crash_cheat.js"></script>
复制代码

文末添加结束标记

修改 themes\next\layout\_macro\passage-end-tag.swig 文件

<div> 
   {% if not is_index %}
        <div style="text-align:center;color: #ccc;font-size:14px;">-------------本文结束<i class="fa fa-paw"></i>感谢您的阅读-------------</div>
    {% endif %}
</div>
复制代码

修改网页底部的桃心

更改主题配置文件中的图标名字便可

icon:
 name: user  
 animated: true 
 color: "#808080"
复制代码

透明

找到本身相应的 Scheme 下的相关文件，个人是 Pisces。

  • themes\next\source\css\_schemes\Pisces\_layout.styl

    • 背景
      .content-wrap
    • 菜单栏
      .header-inner

  • themes\next\source\css\_schemes\Pisces\_sidebar.styl

    • 侧边栏
      .sidebar-inner

找到 background属性更改成 background: rgba(255,255,255,0.7) 即为透明度30%的白色

更改 sidebar 大小

找到 themes\next\source\js\src\util.js

function updateSidebarHeight(height) {
    height = height || 'auto';
    $('.site-overview, .post-toc').css('max-height', height);
  }
复制代码

可在 height 后加50

底部加上运行时间

在 hexo/themes/[your theme]/layout 文件夹下找到你的 footer 文件

<span id="timeDate">载入天数...</span>
<span id="times">载入时分秒...</span> 
<script> 
    var now = new Date(); 
    function createtime() {
    var grt= new Date("02/14/2018 12:49:00");
    //此处修改你的建站时间或者网站上线时间 
    now.setTime(now.getTime()+250); 
    days = (now - grt ) / 1000 / 60 / 60 / 24; 
    dnum = Math.floor(days); hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum); 
    hnum = Math.floor(hours); 
    if(String(hnum).length ==1 ){
        hnum = "0" + hnum;
    } 
    minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum);
    mnum = Math.floor(minutes); if(String(mnum).length ==1 )
    {
       mnum = "0" + mnum;
    } 
    seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum);
    snum = Math.round(seconds);
    if(String(snum).length ==1 ){snum = "0" + snum;} 
    document.getElementById("timeDate").innerHTML = "本站已安全运行 "+dnum+" 天 ";
    document.getElementById("times").innerHTML = hnum + " 小时 " + mnum + " 分 " + snum + " 秒";
} 
    setInterval("createtime()",250); 
</script>
复制代码

鼠标爆炸特效

注：这个脚本源于 anime.js 的官网，由 hexo-theme-melody 的开发者 Molunerfinn 最早引出。

  1. 下载这个脚本，放在 themes/next/source/js/src

  2. 修改代码

    {% if theme.fireworks %}
<canvas class="fireworks" style="position: fixed;left: 0;top: 0;z-index: 1; pointer-events: none;" ></canvas> 
<script type="text/javascript" src="//cdn.bootcss.com/animejs/2.2.0/anime.min.js"></script> 
<script type="text/javascript" src="/js/src/fireworks.js"></script>
{% endif %}
复制代码

  3. 打开主题配置文件，在里面最后写下：

    fireworks: true
复制代码

SEO 优化

看我的喜爱修改，不必定要改的如出一辙

首页 title 优化

更改 index.swig 文件 your-hexo-site\themes\next\layout

{% block title %} {{ config.title }} {% endblock %}
{% block title %} {{ theme.keywords }} - {{ config.title }}{{ theme.description }} {% endblock %}
{% block title %}{{ theme.description }}-{{ title }}{% if theme.index_with_subtitle and subtitle %} – {{ subtitle }}{% endif %}{% endblock %}
复制代码

修改文章连接

编辑站点配置文件，修改其中的 permalink 字段改成 permalink: :title.html 便可。

添加 "nofollow" 标签

  • 修改代码

    {{ __('footer.powered', '<a class="theme-link" href="http://hexo.io" rel="external nofollow">Hexo</a>') }}
<a class="theme-link" href="https://github.com/iissnan/hexo-theme-next" rel="external nofollow">
复制代码

  • 同理，sidebar.swig也做以下修改

    <a href="http://creativecommons.org/licenses/{{ theme.creative_commons }}/4.0" class="cc-opacity" target="_blank" rel="external nofollow">
<a href="{{ link }}" target="_blank" rel="external nofollow">{{ name }}</a>
复制代码

推荐工具

参考连接

好久之前的事情了...有些参考连接找不到了，并且找不到原创...

好了，本文就到这里。若是对 Hexo 有什么疑问，欢迎在评论区中提问，我会尽力回答。或者你也能够选择更优秀的方式 issue 提问！

若是你想学学 Hexo，能够到 EasyHexo 学习。

谢谢你们！

🎉🎉🎉

联系我们 沪ICP备13005482号-10