Hexo博客之主题美化

NexT
据说 NexT 是使用最多的Hexo主题,原因当然是比较漂亮啦!这个项目托管于github上,你可以fork一下,贡献代码。NexT官网上面给出了详细的主题配置过程,这里只是我的博客使用的一些配置以及NexT网站上配置中需要补充的部分。如果你是从头开始配置,请参考NexT官网。这篇文章介绍NexT主题的主题配置、第三方服务、内建标签、个性化设置等,通过这篇文章你就可以让你的博客个性十足奥!

站点配置文件:.config.yml 位置:站点根目录下(主要用于Hexo相关 配置的选项)
主题配置文件:.config.yml 位置:主题目录下 (主要用于配置主题相关的选项)

主题配置

显示RSS

NexT 中 RSS 有三个设置选项,满足特定的使用场景。 更改主题配置文件,设定rss字段的值:

false:禁用 RSS,不在页面上显示RSS连接。
留空:使用 Hexo 生成Feed链接。 你可以需要先安装 hexo-generator-feed插件。
具体的链接地址:适用于已经烧制过 Feed 的情形。

我们这里选择使用 Hexo 生成的 Feed 链接,进入博客所在文件夹,执行以下命令安装该插件:

npm install hexo-generator-feed --save

可能别的博客与我写的不一样,需要配置一些文件。但是我做过实验,只要安装好该插件,重新生成和部署,就可以显示RSS。

侧边栏社交图标设置

NexT网站已经告诉我们如何为博客添加社交链接并设定链接图标,但是我们国内一些常用的社交网站如知乎、豆瓣等在 Font Awesome 图标库中没有对应的图标,结果就是我们添加的这些社交链接图标都是默认的。在主题配置文件中,设定链接图标对应的字段是social_icons, 其键值格式是 匹配键名: 图标名称图标名称就是对应的 Font Awesome 图标的名字(不必带 fa- 前缀)。实现方法:到 Font Awesome 图标库中找寻找喜爱的图标,复制图标的名字替换下面代码箭头处的默认图标名字即可。如下所示:

social:
  GitHub: https://github.com/username
  知乎: https://www.zhihu.com/people/feng-di-54-18/activities

social_icons:
  enable: true
  icons_only: false
  transition: false
  # Icon Mappings.
  # KeyMapsToSocialItemKey: NameOfTheIconFromFontAwesome
  GitHub: github  <---
  知乎: heart-o   <---
更改内容区域宽度

浏览文章时发现页面两侧的空白太多,导致文章的宽度比较窄,一行代码如果显示不完整的话,就需要左右拖动才能查看整行代码,对于代码比较多的文章看起来就会比较累。因此可以改变内容区域的宽度,NexT 对于内容的宽度的设定如下:

700px,当屏幕宽度 < 1600px
900px,当屏幕宽度 >= 1600px
移动设备下,宽度自适应

如果你需要修改内容的宽度,需要编辑样式文件。 编辑主题的source/css/_variables/custom.styl文件,新增变量:

// 修改成你期望的宽度
$content-desktop = 700px   // 我的为800px,自己调整测试即可

// 当视窗超过 1600px 后的宽度
$content-desktop-large = 900px

此方法不适用于 Pisces Scheme,关于如何修改 Pisces Scheme 的宽度请参看 Issue

第三方服务

评论系统

NexT支持多款评论系统,其网站给了五个评论系统,除此之外还支持多说、畅言等评论系统。就网站给出的五个评论系统来说,推荐使用DISQUS或者来必力,设置都比较简单。网易云跟帖相当好用,而且在国内,加载速度较快,但是八月一日被官方关闭。

DISQUS

支持DISQUSGoogletwitterFacebook等账户登录评论,也可设置匿名评论,只需要输入名字和邮箱即可。

  • 登录 DISQUS ,网站会引导你添加一个站点进行配置,在其Settings中的General选项中,找到shortname

  • 编辑主题配置文件, 将 disqus 下的 enable 设定为 true,同时提供您的 shortnamecount 用于指定是否显示评论数量。

    disqus:
      enable: false
      shortname:
      count: true
    

来比力

韩国产品,支持QQ、微信、百度、微博、Github、Google、Facebook、twitter等多个国内外账户登录,无导入评论功能。

  • 登陆 来比力 ,选择安装 LiveRe City 版,添加站点,在其管理页面代码管理中获取你的 LiveRe UID 。

  • 编辑主题配置文件, 编辑 livere_uid 字段,设置如下:

    livere_uid: #your livere_uid
    
数据统计分析

NexT提供多种数据统计与分析系统,可以实现对网站的访客、流量、文章评论数及浏览量进行统计,推荐使用百度统计与LeanCloud。

百度统计

百度统计是百度推出的一款免费的专业网站流量分析工具,可以帮助用户改善访客在用户的网站上的使用体验,不断提升网站的投资回报率。目前百度统计提供的功能包括:趋势分析、来源分析、页面分析、访客分析、定制分析等多种统计分析服务。实现方法:

登录 百度统计,定位到站点的代码获取页面
复制 hm.js? 后面那串统计脚本 id
编辑主题配置文件,修改字段 baidu_analytics,值设置成百度统计脚本 id

LeanCloud

通过 LeanCloud提供的JavaScript SDK 功能实现文章阅读量统计。

实现方法:请查看 为NexT主题添加文章阅读量统计功能

内容分享服务

推荐JiaThis,可以将文章分享到很多平台。

JiaThis

编辑主题配置文件,添加/修改字段 jiathis,值为 true

# JiaThis 分享服务
jiathis: true
搜索服务

Local Search

添加百度/谷歌/本地 自定义站点内容搜索,PC段表现正常,在手机端搜索框显示正常,点击无反应。

  • 安装 hexo-generator-searchdb,在站点的根目录下执行以下命令:

    npm install hexo-generator-searchdb --save
    
  • 编辑站点配置文件,新增以下内容到任意位置:

    search:
      path: search.xml
      field: post
      format: html
      limit: 10000
    
  • 编辑主题配置文件,启用本地搜索功能:

    # Local search
    local_search:
      enable: true
    

内建标签

文本居中的引用

此标签将生成一个带上下分割线的引用,同时引用内文本将自动居中。 文本居中时,多行文本若长度不等,视觉上会显得不对称,因此建议在引用单行文本的场景下使用。 例如作为文章开篇引用 或者 结束语之前的总结引用。

使用方式:

HTML方式:使用这种方式时,给 img 添加属性 class="blockquote-center" 即可。
标签方式:使用 centerquote 或者 简写 cq

<blockquote class="blockquote-center">blah blah blah</blockquote>
{% centerquote %}blah blah blah{% endcenterquote %}
{% cq %} blah blah blah {% endcq %}
Bootstrap Callout

这些样式出现在 Bootstrap 的官方文档中,效果很好看。使用方式:

{% note class_name %} Content (md partial supported) {% endnote %}

其中,class_name 可以是以下列表中的一个值:

default
primary
success
info
warning
danger

设置阅读全文

在文章中使用 手动进行截断,实现设置阅读全文功能。还有其他方法可以实现设置阅读全文功能,详情参考 NexT

建议使用 这种方式,除了可以精确控制需要显示的摘录内容以外, 这种方式也可以让 Hexo 中的插件更好的识别。

个性化设置

上面关于NexT主题有关的配置,都是NexT网站上有的配置,我只是总结了几个常用的而已,下面我们给大家几个NexT网站上没有的个性化配置,而且效果相当好。

添加热度

NexT主题集成leanCloud,打开/themes/next/layout/_macro/post.swig, 搜索leancloud-visitors-count, 添加以下内容:

<span class="leancloud-visitors-count"></span>  // 在此处后面添加
<span>℃</span>

打开/themes/next/languages/zh-Hans.yml, 将visitors的内容改为热度即可。

文章加密访问

打开/themes/next/layout/_partials/head.swig, 在meta标签后面插入这样一段代码:

<script>
    (function(){
        if('{{ page.password }}'){
            if (prompt('请输入文章密码') !== '{{ page.password }}'){
                alert('密码错误!');
                history.back();
            }
        }
    })();
</script>

然后文章中添加:password: 00000 如下图:

如果password后面为空,则表示不用密码。

添加顶部加载条

打开/themes/next/layout/_partials/head.swig文件,搜索maximum-scale=1, 在该行下面添加如下内容:

<script src="//cdn.bootcss.com/pace/1.0.2/pace.min.js"></script>
<link href="//cdn.bootcss.com/pace/1.0.2/themes/pink/pace-theme-flash.css" rel="stylesheet">

默认的是粉色的,要改变颜色可以接着上面添加如下代码:

<style>
    .pace .pace-progress {
        background: #1E92FB; /*进度条颜色*/
        height: 2px;
    }
    .pace .pace-progress-inner {
         box-shadow: 0 0 10px #1E92FB, 0 0 5px     #1E92FB; /*阴影颜色*/
    }
    .pace .pace-activity {
        border-top-color: #1E92FB;    /*上边框颜色*/
        border-left-color: #1E92FB;    /*左边框颜色*/
    }
</style>
修改文章底部标签图标

NexT主题中所有图标来源于Font Awesome图标,因此和更改侧边栏社交链接图标同样,不再赘述。

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

修改文章内链接样式

将链接文本设置为蓝色,鼠标划过时文字颜色加深,并显示下划线。

打开文件/themes/next/source/css/_custom/custom.styl,添加如下 css 样式:

.post-body p a {
  color: #0593d3;
  border-bottom: none;
  &:hover {
    color: #0477ab;
    text-decoration: underline;
  }
}
实现点击出现桃心效果

这个是我最喜欢的功能,不信你配置完成看一下。

打开/themes/next/source/js/src , 新建love.js文件,复制此处的代码到love.js里面。打开/themes/next/layout/_layout.swig文件, 在head标签内最后位置添加以下代码:

<script type="text/javascript" src="/js/src/love.js"></script>
文章底部添加版权信息

打开next\layout/_macro/, 删除post-copyright.swig,新建my-copyright.swig

{% if page.copyright %}
<div class="my_post_copyright">
  <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>

  <!-- JS库 sweetalert 可修改路径 -->
  <script type="text/javascript" src="http://jslibs.wuxubj.cn/sweetalert_mini/jquery-1.7.1.min.js"></script>
  <script src="http://jslibs.wuxubj.cn/sweetalert_mini/sweetalert.min.js"></script>
  <link rel="stylesheet" type="text/css" href="http://jslibs.wuxubj.cn/sweetalert_mini/sweetalert.mini.css">
  <p><span>文章作者:</span><a href="/" title="访问 {{ theme.author }} 的个人博客">{{ theme.author }}</a></p>
  <p><span>最后更新:</span>{{ page.updated.format("YYYY年MM月DD日 HH:MM:ss") }}</p>
  <p><span>原始链接:</span><a href="{{ url_for(page.path) }}" title="{{ page.title }}">{{ page.permalink }}</a></p>
  <p><span>版权声明:</span>本博客所有文章除特别声明外,均采用 <i class="fa fa-creative-commons"></i> <a rel="license" href="https://creativecommons.org/licenses/by-nc-sa/3.0/" target="_blank" title="Attribution-NonCommercial-ShareAlike 3.0 Unported (CC BY-NC-SA 3.0)"> BY-NC-SA 3.0 许可协议</a>,转载请注明出处!</p>  
</div>
{% endif %}

打开/next/source/css/_common/components/post/, 删除post-copyright.styl, 添加my-post-copyright.styl

.my_post_copyright {
  width: 96%;
  max-width: 65em;
  margin: 2.8em auto 0;
  padding: 0.5em 1.0em;
  border-left: 3px solid #FF0000;
  font-size: 0.85rem;
  line-height: 1.6em;
  word-break: break-all;
  background: rgb(246,246,246);
}
.my_post_copyright p{margin:0;}
.my_post_copyright span {
  display: inline-block;
  width: 5.2em;
  color: #000000;
  font-weight: normal;
}
.my_post_copyright .raw {
  margin-left: 1em;
  width: 5em;
}
.my_post_copyright a {
  color: #808080;
  border-bottom:0;
}
.my_post_copyright a:hover {
  color: #a3d2a3;
  text-decoration: underline;
}
.my_post_copyright:hover .fa-clipboard {
  color: #000;
}
.my_post_copyright .post-url:hover {
  font-weight: normal;
}
.my_post_copyright .copy-path {
  margin-left: 1em;
  width: 1em;
  +mobile(){display:none;}
}
.my_post_copyright .copy-path:hover {
  color: #808080;
  cursor: pointer;
}

修改next/layout/_macro/post.swig,在代码

{% if theme.wechat_subscriber.enabled and not is_index %}
      <div>
        {% include 'wechat-subscriber.swig' %}
      </div>
{% endif %}

之前添加增加如下代码:

<div>
      {% if not is_index %}
        {% include 'my-copyright.swig' %}
      {% endif %}
</div>

修改 next/source/css/_common/components/post/post.styl文件,在最后一行增加代码:

@import "my-post-copyright"

如果要在该博文下面增加版权信息的显示,需要在文章头部中增加copyright: true的设置,类似:

---
title: 
date: 
tags: 
categories: 
copyright: true
---

如果你感觉每次新建文章都要添加比较麻烦,可以直接更改文章的模板文件,这样新建文章时就会自动添加copyright: true。 打开根目录/scaffolds/post.md, 做类似设置:

title: {{ title }}
date: {{ date }}
tags:
categories:
comments: 
password: 
copyright: true

上面内容对v5.1.1版本NexT主题适用,其他版本未测试过。因为主题版本的原因,参考文章中的部分配置与我的不同,请仔细阅读。

参考文章:
Hexo搭建博客教程
hexo的next主题个性化教程: 打造炫酷网站

注意:所有文章除特别说明外均属原创,转载请注明出处!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,547评论 6 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,399评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,428评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,599评论 1 274
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,612评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,577评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,941评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,603评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,852评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,605评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,693评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,375评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,955评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,936评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,172评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,970评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,414评论 2 342

推荐阅读更多精彩内容