2018最新版Hexo博客Next主题6.0配置优化

前言

或许是对默认的东西没有好感,总觉得默认的主题是很丑很丑的,完美控是接受不了这个东东的,还好hexo是可以修改主题的。这里首推NexT主题,精于心,简于形标语说的是真的不错。使用NexT主题的人比较多,这也说明这个主题确实很成熟了。优化,配置,扩展很多都集成了,比较简单。博文重质量,弄的太花哨确实没啥用。。。

读者可以在https://hexo.io/themes/可以查看你喜欢的主题。 这里我主要说下NexT主题的相关配置。其他主题可以多看看官方文档。

安装主题

安装的过程就一行代码,你需要在博客根目录出打开命令行输入以下命令:

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

以上代码的意思是从 https://github.com/iissnan/hexo-theme-next将next下载到当前目录下的themes里面的next文件夹中。

启用主题

修改站点配置文件_config.yml

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next

主题设定

选择 Scheme

Scheme 是 NexT 提供的一种特性,借助于 Scheme,NexT 为你提供多种不同的外观。同时,几乎所有的配置都可以 在 Scheme 之间共用。目前 NexT 支持三种 Scheme,他们是:

  • Muse - 默认 Scheme,这是 NexT 最初的版本,黑白主调,大量留白
  • Mist - Muse 的紧凑版本,整洁有序的单栏外观
  • Pisces - 双栏 Scheme,小家碧玉似的清新
  • Gemini - 左侧网站信息及目录,块+片段结构布局
    cheme 的切换通过更改 主题配置文件,搜索 scheme 关键字。 你会看到有四行 scheme 的配置,将你需用启用的 scheme 前面注释 # 去除即可。

设置 语言

编辑站点配置文件, 将 language 设置成你所需要的语言。建议明确设置你所需要的语言,例如选用简体中文,配置如下:

language: zh-Hans  

PS:这里提一下,你使用hexo s预览的时候,你会发现是设置了语言之后界面还是英文,这个时候不要慌,使用hexo clean清理下database文件夹以及public文件夹就行了。然后再使用hexo s 预览。事实上,这个方法在遇到很多问题的时候都是通用的。

设置 菜单

菜单配置包括三个部分,第一是菜单项(名称和链接),第二是菜单项的显示文本,第三是菜单项对应的图标。 NexT 使用的是 Font Awesome 提供的图标, Font Awesome 提供了 600+ 的图标,可以满足绝大的多数的场景,同时无须担心在 Retina 屏幕下 图标模糊的问题。

编辑 主题配置文件,修改以下内容:

设定菜单内容,对应的字段是 menu。 菜单内容的设置格式是:item name: link。其中 item name 是一个名称,这个名称并不直接显示在页面上,它将用于匹配图标以及翻译。

设置标签、分类的界面

设置菜单那里,我设置了显示标签、分类、关于几个选项。如图:

但是点击进去,却报错:Cannot GET /tags/,不要慌,不能获取tags,创建一个就OK!

这里介绍创建page的语法:

hexo new page 'name' # name分别为tags、categories  

这样就创建了pages。
在控制台输入以下命令:

hexo new page 'tags' #创建tags子目录
hexo new page 'categories' #创建categories子目录

在你的网站根目录下面的source文件夹会分别生成tags、categories以及about文件夹。

分别修改这tags和categories文件夹中的index.md文件,新增type属性,如下:

---
title: tags
date: 2018-01-04 11:45:41
type: tags
---

categories的修改类似。

当你新建一篇博文的时候,增加上tags和categories属性值,就能在tags和categories界面检索到你的文章了。

个性化定制

添加fork me on github

http://tholman.com/github-corners/或者https://github.com/blog/273-github-ribbons选择合适的样式复制代码到themes/next/layout/_layout.swig,在<div class="headband"></div>下面:

动态背景

实现效果之一:

目前NexT主题最新的是V6.0版本,这个版本中可以有4种动态背景:

  • Canvas-nest
  • three_waves
  • canvas_lines
  • canvas_sphere

设置方法也很简单,直接设置里需要的动态背景为true

点击出现桃心效果

浏览器输入:http://7u2ss1.com1.z0.glb.clouddn.com/love.js

拷贝所有代码,在/themes/next/source/js/src里面新建love.js,然后在\themes\next\layout\_layout.swig文件末尾添加以下代码:

<!-- 页面点击小红心 --> <script type="text/javascript" src="/js/src/love.js"></script>

文章底部带#号的标签

去掉文章后面的标签前面的#号。

修改模板/themes/next/layout/_macro/post.swig,搜索 rel="tag">#,将#换成<i class="fa fa-tag"></i>

在每篇文章末尾统一添加“本文结束”标记

在路径 \themes\next\layout\_macro 中新建 passage-end-tag.swig 文件,并添加以下内容:

<div>
{% if not is_index %}
        
-------------本文结束感谢您的阅读-------------
{% endif %} </div>

接着打开\themes\next\layout\_macro\post.swig文件,在post-body 之后, 添加以下代码:

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

添加位置如图:

然后打开主题配置文件(_config.yml),在末尾添加:

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

完成以上设置之后,在每篇文章之后都会添加如上效果图的样子。

侧边栏社交小图标设置

实现效果:

打开主题配置文件_config.yml,搜索social:, ||之后是在图标库中对应的图标。注意空格就行。

图标库链接:http://fontawesome.io/icons/

主页文章加阴影

具体实现方法
打开\themes\next\source\css\_custom\custom.styl,向里面加入:

// 主页文章添加阴影效果
 .post {
   margin-top: 60px;
   margin-bottom: 60px;
padding: 25px;
-webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
-moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
}

添加热度

具体实现方法
next主题集成leanCloud,打开/themes/next/layout/_macro/post.swig

<span class="leancloud-visitors-count"></span>下添加一句:

<span>℃</span>

然后打开,/themes/next/languages/zh-Hans.yml

visitors: 阅读次数改为visitors: 热度

设置网站图标

默认的网站图标是一个N,当然是需要制定一个图了,在网上找到图后,将其放在/themes/next/source/images里面,然后在主题配置文件中修改下图所示图片位置

还有一些就不详细说了,另外注意下好多的东西已经过时了。比如next主题已经换了域了。很多教程还停留在3.0时代,但是现在next的版本是V6.0,截止我这篇教程发布的时期。

设置文章浏览数(热度)

{mdFileName}-201821323114

如上图所示

首先需要在leancloud上注册一个账号,注册的过程省略。

{mdFileName}-2018213231335

点击访问控制台

点击创建应用
{mdFileName}-2018213231512

这里选择开发版就行,应用名称随意。

随后进入设置界面

{mdFileName}-2018213231716

{mdFileName}-2018213231754

在next主题的配置文件中填写以下信息:

{mdFileName}-201821323191

随后在主题文件的languages目录下找到你设置的语言yml下,把visitors后面的字符改为热度,到此大功告成。

总结

这篇文章就只是简单的介绍了下NexT主题,关于这个主题呢,要达到个性化定制的话,还是需要再花点功夫的。还有就是这个hexo s预览效果确实不好,修改了网站内容之后,需要重新hexo cleanhexo s才能看到效果,有同样问题的兄dei就不需要担心自己的修改是错的。

-------------The End-------------

本文标题:2018最新版Hexo博客Next主题6.0配置优化

文章作者:Dimple

发布时间:2018年01月04日 - 21:01

最后更新:2018年06月03日 - 18:06

原始链接:http://www.bianxiaofeng.com/2018/01/04/2018-01-04 213124/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

na,给我一个棒棒糖!
0%