Jimmy那些事儿

Next主题_定制

发表 | 更新 | 分类 ， ， | 阅读次数

对Next主题配置的补充。

所有的标签之后要有一个空格；date:(空一格) 2017/03/20

对于网站加载的具体问题，按F12(chrome浏览器)进行查看；

图片

背景图片

  1. 首先找到一个背景图片放到 hexo -> themes -> next -> source -> images 的路径下；

  2. hexo -> themes -> next -> source -> css -> _custom ，找到路径下的custom.styl文件，在文件的最上方加上一代码

    1
    2
    3
    4
    5
    // Custom styles.
    body {
      background:url(/images/background.jpeg);
      background-attachment: fixed;
    }

    ​

文章开头加入图片

  • 且支持点击放大功能
  • how ：开头匹配内容中假如photos字段，可以加图片链接列表：
1
2
3
4
5
6
7
8
---
title: Next主题的fancybox展示图片
date: 2016-09-03 17:15:22
tags:
photos:
- http://bruce.u.qiniudn.com/2013/11/27/reading/photos-0.jpg
- http://bruce.u.qiniudn.com/2013/11/27/reading/photos-1.jpg
---

或者使用 截断；将图片放到more之前即可；

更改显示标签

  • 在所选的语言中themes\hexo-theme-next\languages\zh-Hans.yml中修改
1
2
3
4
5
6
7
8
9
10
11
12
13
14
post:
  sticky: 置顶
  posted: 发表于
  modified: 更新于
  in: 分类于
  visitors: 阅读次数
  read_more: 阅读全文
  untitled: 未命名
  toc_empty: 此文章未包含目录
  
-------
# 示例，若将modified: 更新于
更改为 modified: 
在文章显示的标签就不再有"更新于"三个字，而是直接显示时间

显示更新日期

  • 主题配置文件

在hexo/themes/hexo-theme-next/_config.yml中将updated_at改为true

1
2
3
# Post meta display settings
post_meta:
  updated_at: true
  • 文章的前置设置
1
updated: 2015-12-13

updated的时间要晚于date的时间。

然后重新hexo g一下就可以看到效果了。


置顶设置

  • 修改站点文件夹下

node_modules/hexo-generator-index/lib/generator.js 添加以下代码

1
2
3
4
5
6
7
8
9
10
11
12
13
posts.data = posts.data.sort(function(a, b) {
    if(a.top && b.top) { // 两篇文章top都有定义
        if(a.top == b.top) return b.date - a.date; // 若top值一样则按照文章日期降序排
        else return b.top - a.top; // 否则按照top值降序排
    }
    else if(a.top && !b.top) { // 以下是只有一篇文章top有定义，那么将有top的排在前面（这里用异或操作居然不行233）
        return -1;
    }
    else if(!a.top && b.top) {
        return 1;
    }
    else return b.date - a.date; // 都没定义按照文章日期降序排
});
  • 以下为更改后的整体代码
    • 修改后只需要在front-matter中设置需要置顶文章的top值，将会根据top值大小来选择置顶顺序。
    • （数字大的在前面； 3 >2>1 ; 若top值一样则按照文章日期降序排）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
'use strict';
var pagination = require('hexo-pagination');
module.exports = function(locals){
  var config = this.config;
  var posts = locals.posts;
    posts.data = posts.data.sort(function(a, b) {
        if(a.top && b.top) { // 两篇文章top都有定义
            if(a.top == b.top) return b.date - a.date; // 若top值一样则按照文章日期降序排
            else return b.top - a.top; // 否则按照top值降序排
        }
        else if(a.top && !b.top) { // 以下是只有一篇文章top有定义，那么将有top的排在前面（这里用异或操作居然不行233）
            return -1;
        }
        else if(!a.top && b.top) {
            return 1;
        }
        else return b.date - a.date; // 都没定义按照文章日期降序排
    });
  var paginationDir = config.pagination_dir || 'page';
  return pagination('', posts, {
    perPage: config.index_generator.per_page,
    layout: ['index', 'archive'],
    format: paginationDir + '/%d/',
    data: {
      __index: true
    }
  });
};

评论系统

NexT 支持多款评论系统。

如需取消某个 页面/文章 的评论，在 md 文件的 front-matter 中增加 comments: false

分享系统

  1. 在站点配置文件中，添加字段baidushare，值为 true

  关于什么是站点配置文件，我相信大家应该清楚了，如果不知道的话请看我的上一篇博文中有所提及。

1
baidushare: true #百度分享功能
  1. 在主题配置文件中，找到baidushare字段，设置其展现方式
1
2
baidushare: 
  type: button #百度分享展示的方式button|slide

  做好上面两步后，在你的百度分享还没有出现的情况下，打开浏览器的F12,发现提示https访问http资源的问题。之后介绍怎么解决百度分享在https下的使用。

百度分享在https中的使用

  百度分享不能使用的主要原因是它会去请求http中的资源，一个share.js，既然这样，我们能想到的就是把这个资源放到非http上，或者干脆直接放到我们自己的目录下面。
  大家可以按照方案提供者hrwhisper依照他的博文百度分享不支持https的解决方案去做，在遇到问题的时候回到我的博文，或者可以直接按照我说的做。

  • 下载资源文件，并放到自己blog的目录下。

  Github地址：https://github.com/hrwhisper/baiduShare
  这里我要强调一下，在站点配置文件中，有一个source_dir字段，这个是你访问资源的根目录，比如我在sourc中放置了一个test.jpg的文件，那么访问它的路径就是/test.jpg

1
source_dir: source

  static 解压后丢到站点根目录，也就是source目录下面。然后将百度分享中的代码修改，我使用的是Next主题，这段代码在文件F:\myblog\themes\next\layout_partials\share\baidushare.swing中，(显示顺序的调整，可在该文件中)如果你找不到可以在你的主题文件夹中搜索baidushare。

1
2
3
.src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script>
改为
.src='/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script>

这样之后重启服务，看看百度分享是不是出现了，如果出现了，恭喜你，成功了。如果没有，请你继续往下看。

  • 在站点配置文件中设置skip_render字段
    在你发现百度分享还是没有出现的时候，打开F12，是不是发现share.js文件已经成功加载了，但是这个文件报错，你进入F:\myblog.deploy_git\static\api\js(我的就是这个目录，因为我把博客放在了F:\myblog下)，打开share.js文件，发现这个文件末尾并没有加载完，我我们下载下来的static\api\js\share.js是不一样的，为什么？   

原来，hexo会把/source下的文件全部渲染

怎么解决这个问题，有两种办法：你可以设置站点配置文件下的skip_rende字段，让hexo在渲染的时候跳过static之下的所有文件。

1
2
3
4
5
6
7
8
9
skip_rende: static/**
#单个文件夹下的全部文件：skip_render: test/*
#单个文件夹下的指定类型文件：skip_render: test/*.md
#单个文件夹下的全部文件以及子目录:skip_render: test/**
#多个文件夹：
#skip_render:
# test1/*.html #注意前面的空格，代表是skip_render之下的
# test2/**

  你也可以选择不设置这个属性，而是把static文件放在主题文件的source目录下，我的是（F:\myblog\themes\next\source）。做完这些操作后，你的百度分享应该已经出现在你的博客中了，just enjoy it。
（ps：除了以上解决百度在https下使用的方法以外，还有一个方法就是使用CDN，具体方式请参考巧用七牛CDN的镜像功能使百度分享支持HTTPS。再多说一句关于JiaThis不能支持https的问题个人觉得也可以用以上的方式来解决，这个大家可以自行研究。）
（ps plus：关于博客的搭建就暂时告一段落了。）