next主题的简单美化

首先不得不说next挺好看的，但是有些地方我们可以再深入美化下。
然后本next主题选用的是Gemini v7.2.0样式，博文为块状显示。所以下面就按照Gemini样式从上到下，由外到内的美化下（不限于美化）

文章置顶

文章置顶属于hexo层面，首先需要安装插件
插件的github地址：https://github.com/amlove2/hexo-generator-topindex
到hexo根执行安装命令

$ npm install hexo-generator-topindex --save

安装完成后，在文章头部添加top属性，top值越大文章越靠前

title: next主题的美化
date: 2019-07-13 21:29:55
tags: hexo
categories: [编程,hexo]
top: 1 # 值越大越靠前

这样后就可以置顶文章了，但是不看时间，这篇文章是看不出是置顶文章的，所以要加些样式

themes/hexo-theme-next/layout/_macro/post.swig
在<div class="post-meta">大约近70行，下添加

{% if post.top %}
  <i class="fa fa-thumb-tack"></i>
  <font color=7D26CD>置顶</font>
  <span class="post-meta-divider">|</span>
{% endif %}

文章加密

文章加密也属于hexo层面，安装插件
插件的github地址：https://github.com/MikeCoder/hexo-blog-encrypt/blob/master/ReadMe.zh.md
到hexo根执行安装命令

npm install --save hexo-blog-encrypt
或者 yarn add hexo-blog-encrypt (需要安装 Yarn)

首先, 你需要确保你的文章中含有内容（不能为空，或者只包含空格）
然后在hexo配置的文件 _config.yml 中启用该插件:

# Security
##
encrypt:
    enable: true

然后在文章头部添加

title: next主题的美化
date: 2019-07-13 21:29:55
tags: hexo
categories: [编程,hexo]
password: 123456 # 该博客加密使用的密码
abstract: 改文章存在一定权限 # 该博客的摘要，会显示在博客的列表页
message: 请输入密码 # 博客查看时，密码输入框上面的描述性文字

菜单上显示数目

在next的主题配置文件中找到下面内容，设置为true即可

menu_settings:
  icons: true
  badges: true # 显示文章数开关

模块圆角化

themes/hexo-theme-next/source/css/_variables/Gemini.styl
追加内容

// 修改主题页面布局为圆角
$border-radius-inner            = 15px 15px 15px 15px;
$border-radius                  = 15px;

自定义css

/themes/hexo-theme-next/source/css/_custom/custom.styl

// 添加背景图片
body {
  background: url(https://source.unsplash.com/random/1600x900?simple);
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: 50% 50%;
}

// 修改主体透明度
.main-inner {
  opacity: 0.9;
}

// 修改菜单栏透明度
.header-inner {
  background-color: rgba(255,255,255,0.9);
}
#sidebar {
    border-radius: 15px;
}

// 标题栏
.site-meta {
  background-image: url(/images/brand.jpg);
  background-position: 50% 50%;
  background-size: 100% 100%;
  opacity: 0.9;
}

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar{
  width: 8px;
  height: 8px;
  background-color: rgba(255, 255, 255, 0.2);
}

/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track{
  -webkit-box-shadow: inset 0 0 8px rgb(1, 64, 118);
  border-radius: 2px;
  background-color: rgba(245, 245, 245, 0.2);
}

/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb{
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 8px #014076;
  background-color: #555;
}

文章内超链接样式

更改的链接颜色和选中颜色
效果—>https://wjup.top

themes/hexo-theme-next/source/css/_common/components/post/post.styl
追加内容

// 文章内链接文本样式
.post-body p a{
  color: #ff4081;
  border-bottom: none;
  // border-bottom: 1px solid #0593d3;
  &:hover {
    color: #ff92b7;
    border-bottom: none;
    // border-bottom: 1px solid #fc6423;
  }
}

网站尾部添加运行时间

themes/hexo-theme-next/layout/_partials/footer.swig
在if theme.footer.powered.enable约40行左右，前面追加

<span id="timeDate">载入天数...</span>
<span id="times">载入时分秒...</span><br>
<script>
  var now = new Date();
  function createtime() {
      var grt= new Date("04/28/2019 13:14:21");//此处修改你的建站时间或者网站上线时间
      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>