Hexo NexT 主题美化记录

作者: 虹猫日志 | 来源:发表于2019-12-23 08:29 被阅读0次

Hexo NexT 主题美化记录
[转载]hexo-next主题安装看板娘（会说话，会拍照）
Hexo博客Next v7.X 主题升级,美化警示录
Hexo主题设置
Hexo 博客之简要美化
优雅的Hexo主题-NexT
Next主题美化
github hexo 博客搭建
为hexo添加站内搜索功能
Hexo主题修改Next.Mist

修改文内链接样式

未修改时，文内链接颜色和普通文本没有区别：

初始样式

为了突出区别性，我们在themes\next\source\css\_common\components\post\post.styl文件中添加下列的代码：

.post-body p a {
    color: #0593d3;
    border-bottom: none;
    border-bottom: 1px solid #0593d3;
    &:hover {
        color: #fc6423;
        border-bottom: none;
        border-bottom: 1px solid #fc6423;
    }
}

改后样式

主页文章添加阴影效果

打开themes\next\source\css\_common\components\post\post.styl文件，将post-block代码进行如下更改：

if (hexo-config('motion.transition.post_block')) {
    .post-block{
        margin-top: 60px;
        margin-bottom: 60px;
        padding: 25px;
        background:rgba(255,255,255,0.9) none repeat scroll !important; //添加透明效果
        -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
        -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
    }
    .pagination, .comments {
      opacity: 0;
    }
  }

首页文章折叠

这里通过文章模板进行实现：

---
title: Hexo美化
date: 2019-12-19
categories:
- Hexo
tags:
  - study
---
<img src="/img/haha.png" width = "900" height = "600" alt="git" align=center />
摘要内容......
<!-- more -->
以下为隐藏内容

回到顶部按钮显示百分比

找到themes\next\_config.yml修改如下配置：

back2top:
    # 回到顶部按钮
    enable: true
    # true，按钮显示在侧边栏；false，按钮显示在右下角
    sidebar: false
    # 按钮上显示百分比
    scrollpercent: true

点击小爱心特效

在themes\next\source\js\src下新建文件clicklove.js，接着把如下代码拷贝粘贴到clicklove.js文件中。

!function(e,t,a){function n(){c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),o(),r()}function r(){for(var e=0;e<d.length;e++)d[e].alpha<=0?(t.body.removeChild(d[e].el),d.splice(e,1)):(d[e].y--,d[e].scale+=.004,d[e].alpha-=.013,d[e].el.style.cssText="left:"+d[e].x+"px;top:"+d[e].y+"px;opacity:"+d[e].alpha+";transform:scale("+d[e].scale+","+d[e].scale+") rotate(45deg);background:"+d[e].color+";z-index:99999");requestAnimationFrame(r)}function o(){var t="function"==typeof e.onclick&&e.onclick;e.onclick=function(e){t&&t(),i(e)}}function i(e){var a=t.createElement("div");a.className="heart",d.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:s()}),t.body.appendChild(a)}function c(e){var a=t.createElement("style");a.type="text/css";try{a.appendChild(t.createTextNode(e))}catch(t){a.styleSheet.cssText=e}t.getElementsByTagName("head")[0].appendChild(a)}function s(){return"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"}var d=[];e.requestAnimationFrame=function(){return e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,1e3/60)}}(),n()}(window,document);

如没有src目录直接新建一个即可，这里只是为了后期统一进行管理。

在themes\next\layout\_layout.swig文件末尾添加如下代码：

<!-- 页面点击小红心 -->
{% if theme.clicklove %}
      <script type="text/javascript" src="/js/src/clicklove.js"></script>
{% endif %}

在主题配置文件_config.yml合适的位置（一般是最后一行）添加clicklove : true启用刚才的配置。

添加动态背景

找到themes\next\layout\_layout.swig文件，在 <body>里添加内容(不清楚放哪里就放最后吧)：

<div class="bg_content">
  <canvas id="canvas"></canvas>
</div>
{% if theme.canvas %}
   <script type="text/javascript" src="/js/src/dynamic_bg.js"></script>
{% endif %}

在themes\next\source\js\src中新建文件dynamic_bg.js，代码链接中可见：dynamic_bg.js
在themes\next\source\css\_custom\main.styl文件末尾添加内容：

.bg_content {
  position: fixed;
  top: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
}

在主题配置文件_config.yml合适的位置（一般是最后一行）添加canvas: true启用刚才的配置。

给每篇文章后添加结束标语

在themes\next\layout\_macro中新建passage-end-tag.swig文件，添加代码至该文件中：

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

打开themes\next\layout\_macro\post.swig文件，在post-body后，post-footer前，添加下面内容：

<div>
  {% if not is_index %}
    {% include 'passage-end-tag.swig' %}
  {% endif %}
</div>

大概位置

在主题配置文件_config.yml在末尾添加：

# 文章末尾添加“本文结束”标记
passage_end_tag:
  enabled: true

给网页title添加一些搞怪特效

在themes\next\source\js\src文件夹下创建funny_title.js，添加代码：

/*离开当前页面时修改网页标题，回到当前页面时恢复原来标题 */
window.onload = function () {
  let OriginTitle = document.title;
  let titleTime;
  document.addEventListener('visibilitychange', function () {
    if (document.hidden) {
      document.title = '╭(°A°`)╮ 页面崩溃啦 ~';
      clearTimeout(titleTime);
    } else {
      // $('[rel="icon"]').attr('href', "/uploads/favicon-32x32.png"); 换图测试失败
      document.title = '(ฅ>ω<*ฅ) 噫又好了鸭~' + OriginTitle;
      titleTime = setTimeout(function () {
        document.title = OriginTitle;
      }, 4000);
    }
  });
};

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

<!--搞怪欺骗-->
<script type="text/javascript" src="/js/src/funny_title.js"></script>

给代码块添加复制功能

打开themes\next\_config.yml主题配置文件，搜索codeblock,开启复制，如下图：

开启代码块复制

文章底部的#号标签改为字体图标

打开themes\next\_config.yml主题配置文件，搜索tag_icon将false改成true

开启不蒜子访问统计

打开themes\next\_config.yml主题配置文件，修改如下配置：

busuanzi_count:
  enable: true  #开启不蒜子访问统计，默认是false
  total_visitors: true
  total_visitors_icon: user
  total_views: true
  total_views_icon: eye
  post_views: true
  post_views_icon: eye

找到themes\next\layout\_third-party\statistics\busuanzi-counter.swig，添加如下提示文字：

显示优化

最终效果：

文章阅读统计

底部访问统计

设置网站启用时间

找到主题配置文件themes\next\_config.yml，修改since后的值即可。

去除底部页脚`powered By Hexo / 强力驱动......`

打开themes/next/layout/_partials/footer.swig删除或者注释掉<div class="powered-by">、<span class="post-meta-divider">、<div class="theme-info">，如下图：

注释页脚

底部跳动爱心

效果图：

跳动爱心

前往图标库找到心仪的图标(我这里选择heartbeat)
打开主题配置文件themes\next\_config.yml，搜索 footer → 将 name 后面的 user 替换成 fa-heartbeat → 将 animated 设置成 true → 将 color 修改为 #ff0000，如下图：

爱心设置

页脚增加网站运行时间统计

打开themes\next\layout\_partials\footer.swig文件，在如下图位置加入代码：

{%- if theme.footer.powered.enable and theme.footer.theme.enable %}
  {#<span class="post-meta-divider">|</span>#}
{%- endif %}

//此位置插入代码

{%- if theme.footer.theme.enable %}
......
{%- endif %}

倒计时代码：

<span id="sitetime"></span>
<script language=javascript>
    function siteTime(){
        window.setTimeout("siteTime()", 1000);
        var seconds = 1000;
        var minutes = seconds * 60;
        var hours = minutes * 60;
        var days = hours * 24;
        var years = days * 365;
        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();
        /* Date.UTC() -- 返回date对象距世界标准时间(UTC)1970年1月1日午夜之间的毫秒数(时间戳)
        year - 作为date对象的年份，为4位年份值
        month - 0-11之间的整数，做为date对象的月份
        day - 1-31之间的整数，做为date对象的天数
        hours - 0(午夜24点)-23之间的整数，做为date对象的小时数
        minutes - 0-59之间的整数，做为date对象的分钟数
        seconds - 0-59之间的整数，做为date对象的秒数
        microseconds - 0-999之间的整数，做为date对象的毫秒数 */
        var t1 = Date.UTC(2017,01,04,00,00,00); //你的建站时间
        var t2 = Date.UTC(todayYear,todayMonth,todayDate,todayHour,todayMinute,todaySecond);
        var diff = t2-t1;
        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("sitetime").innerHTML=" Run for "+diffYears+" Year "+diffDays+" Days "+diffHours+" Hours "+diffMinutes+" m "+diffSeconds+" s";
    }
    siteTime();
</script>

在themes\next\source\css\main.styl文件中给倒计时添加样式

#sitetime {
  background-image: -webkit-linear-gradient(left, #aa4b6b, #6b6b83, #3b8d99);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

添加版权信息

开启版权

在博客根目录的source目录下，新建_data目录，创建styles.styl文件添加如下代码（美化可选）：

//版权声明侧边栏颜色
.post-copyright {
    margin: 2em 0 0;
    padding: 0.5em 1em;
    border-left: 3px solid #81a6ed;
    background-color: #f9f9f9;
    list-style: none;
}

回到主题配置文件中搜索custom_file_path:开启加载自定义样式文件：

加载自定义样式

Hexo NexT 主题美化记录
修改文内链接样式未修改时，文内链接颜色和普通文本没有区别：为了突出区别性，我们在themes\next\sou...
[转载]hexo-next主题安装看板娘（会说话，会拍照）
Hexo博客NexT主题美化之新增看板娘(能说话、能换装) 效果图：教程：小白水平： hexo的官方是支持看板...
Hexo博客Next v7.X 主题升级,美化警示录
文章转载于：Hexo博客Next v7.X 主题升级,美化警示录丨奥怪的小栈本教程适用于Next主题 V7.X以...
Hexo主题设置
hexo默认主题是landscape，hexo官方也提供了许多主题。推荐使用Next和Yelee。Next简洁美观...
Hexo 博客之简要美化
写在前面这是关于 Hexo 博客三篇博文的第二篇。关于 Hexo 博客 NexT 主题的简要美化和一些简单插件的...
优雅的Hexo主题-NexT
NexT是一个优雅的Hexo主题，主题作者很努力，NexT已经很完善了，现在版本是5.1.0。我这里只记录下简单的...
Next主题美化
写作目的网上关于Hexo的主题美化的博客已经很多也很全面了，但是在作者去一一尝试的时候，却发现有很多博客中提供的...
github hexo 博客搭建
环境准备： hexo next 主题：https://theme-next.iissnan.com/getting...
为hexo添加站内搜索功能
前言最近发现超赞的hexo主题，next! 。喜欢之余，又在上面做了些修改.本文主要写为Hexo-Next主题增...
Hexo主题修改Next.Mist
修改Hexo主题及问题记录昨晚试着将段时间搭建的hexo改一下主题，觉得NexT.Mist看起来挺简洁，挺喜欢这...