虽然 NexT 的主题很漂亮,但问题是太受欢迎了,都快烂大街了。 好在它是一个开源项目,我们可以通过修改它的代码来个性话你的博客。 这篇教程要涉及到一些前端知识,可能没有那么 Novice friendly。

因为涉及到对 NexT 代码的修改,搞不好,可能引起 Hexo 无法工作。所以强烈建议使用 Git 对 NexT 进行备份。 具体使用方法请自行 Google。

准备工作

  1. 一颗能折腾的心。
  2. 一定的前端知识。

正文

最简单的方法

美化你的 Hexo 的最简单方法 -> 安装我修改过的 NexT 在 Hexo 目录中使用命令

$ git clone https://github.com/Mogeko/hexo-theme-next.git themes/next

*记得删掉原来安装过的 NexT。

手动美化 Hexo

如果有能力,推荐跟我一起手动改代码。 最好能明白我给你的代码都是做什么的,将来万一出了问题,也有个找到问题的方向。

圆形头像(头像旋转)

NexT 默认的头像是方的。也不是说不好看,就是觉得不习惯,这个要看个人喜好。 在 /source/css/_custom/custom.styl 中添加一下代码就可以吧头像弄成圆的

// 圆形头像
.site-author-image {
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    transition: 1.4s all;
}

然后,添加以下代码可以让头像在鼠标停留时旋转 180°

// 头像旋转
.site-author-image:hover {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -transform: rotate(360deg);
}

点击头像跳转到 关于我 页面

第一次用 Next,习惯性点了一下头像,本以为会跳转到什么页面,结果什么都没有发生,才发现那根本不是超链接。加上 关于我 页面正好没地方放,(觉得官方把 关于我 页面放进 menu 里很蠢)所以决定为头像增加一个超链接,跳转到 关于我 页面。 首先需要新建一个 about 页面,在 Hexo 文件夹中使用一下命令

$ hexo new page "about"

[Hexo 文件夹]/source/about/index.md 中编辑介绍自己的内容。

然后在 /layout/_macro/sidebar.swig 中,用一个 <a> 标签把头像包起来就可以了 像这样

<!--只节选了一部分,忽略上面的内容-->
          <a href="/about/">
            <img class="site-author-image" itemprop="image"
               src="{{ url_for( theme.avatar | default(theme.images + '/avatar.gif') ) }}"
               alt="{{ theme.author }}" />
            <p class="site-author-name" itemprop="name">{{ theme.author }}</p>
          </a>
<!--忽略下面的内容-->

跳转到'关于我'页面 注意:href= 一定要填 "/about/"

修改侧边滚动条的样式

同样的,看个人喜好。你可以将侧边滚动条的样式修改得和我一样,(只对 webkit 内核的浏览器有效)只需要在 /source/css/_custom/custom.styl 中添加

// 更好的侧边滚动条
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-button {
  width: 0;
  height: 0;
}
::-webkit-scrollbar-button:start:increment,::-webkit-scrollbar-button:end:decrement {
  display: none;
}
::-webkit-scrollbar-corner {
  display: block;
}
::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background-color: rgba(0,0,0,.2);
}
::-webkit-scrollbar-thumb:hover {
  border-radius: 8px;
  background-color: rgba(0,0,0,.5);
}
::-webkit-scrollbar-track,::-webkit-scrollbar-thumb {
  border-right: 1px solid transparent;
  border-left: 1px solid transparent;
}
::-webkit-scrollbar-track:hover {
  background-color: rgba(0,0,0,.15);
}
::-webkit-scrollbar-button:start {
  width: 10px;
  height: 10px;
  background: url(../images/scrollbar_arrow.png"> no-repeat 0 0;
}
::-webkit-scrollbar-button:start:hover {
  background: url(../images/scrollbar_arrow.png"> no-repeat -15px 0;
}
::-webkit-scrollbar-button:start:active {
  background: url(../images/scrollbar_arrow.png"> no-repeat -30px 0;
}
::-webkit-scrollbar-button:end {
  width: 10px;
  height: 10px;
  background: url(../images/scrollbar_arrow.png"> no-repeat 0 -18px;
}
::-webkit-scrollbar-button:end:hover {
  background: url(../images/scrollbar_arrow.png"> no-repeat -15px -18px;
}
::-webkit-scrollbar-button:end:active {
  background: url(../images/scrollbar_arrow.png"> no-repeat -30px -18px;
}

顶部阅读进度条

这个要稍微复杂点,需要改动 4 个文件。 完成后就可以拥有向我一样的顶部阅读进度条。

首先,在/layout/_partials/header.swig 模板文件里加上进度条的 div

<div class="top-scroll-bar"></div>

在这个位置 顶部阅读进度条 然后在/source/css/_custom/custom.styl 文件中为我们的进度条添加样式

// 顶部阅读进度条
.top-scroll-bar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    display: none;
    width: 0;
    height: 2px;
    background: #6d6d6d;
}

再然后,新建一个 js脚本 文件 /source/js/src/custom/custom.js,来控制我们的进度条。

$(document).ready(function () {
  $(window).scroll(function(){
    $(".top-scroll-bar").attr("style", "width: " + ($(this).scrollTop() / ($(document).height() - $(this).height()) * 100) + "%; display: block;");
  });
});

最后,将我们新建的那个 js脚本引入到模板,使其生效。 在 /layout/_scripts/commons.swig 中,加入

'src/custom/custom.js'

在这个位置

顶部阅读进度条

相关文章


·End·