自定义Next主题

发表于 | 分类于 | 阅读次数

1.前言

由于想在原来new-vno的主题上能实现一行多图并排显示以及加入Gitment评论功能，但是发现一直没成功，所以直接换回Next主题了。然后这篇文章就是把Next主题的一些配置以及拓展功能记录下来。

2.博文图片问题

由于有些时候希望博文中的图片能够一行多张并排显示，然后我发现主题默认是一行一张的显示，然后找到了Next其中的一个Issues，里面有提供解决方法。

2.1设好布局

不管你是新建的是post还是page，一定要指定布局样式才能使用这个多图并排显示功能。因为我当时想在新的page中用到这个功能，但是发现死活不成功，后来把布局设成post就成功了。

1
2
3
4
5
---
layout: post
title: XXXX
date: XXXX
---

2.2修复文章展示

因为我们在首页看到显示的图片排列是没问题的，但是到了文章详情页排版就有问题，所以要调整其中一个样式文件，在Next主题/source/css/_common/components/tags/group-pictures.styl中改成以下样式：

1
2
3
4
5
6
.page-post-detail .post-body .group-picture-column {
  //float: none;
  margin-top: 10px;
  //width: auto !important;
  img { margin: 0 auto; }
}

2.3使用多图

在Next主题/scripts/tags/group-pictures.js目录中，有说明怎么使用，具体可以点进去看看，比如我们先实现一个一行三张图片并排的样式。

1
2
3
4
5
{% gp 3-1 %}
<img src="CusNext/icon.png">
<img src="CusNext/icon.png">
<img src="CusNext/icon.png">
{% endgp %}

但你会发现跑起来却是一行一个的效果。

其实进去group-pictures.js调一下3-1的那段代码就好了，把pictures包成数组就好了，然后再运行看看效果。

1
2
3
4
5
6
7
8
9
10
/**
 * 3-1
 *
 * □ □ □
 *
 * @param pictures
 */
group3Layout1: function (pictures) {
  return this.getHTML([pictures]);
},

但是我是希望能做到的是一行五个图，但是group-pictures.js里面没提供，所以我自己添加了新的样式。

1
2
3
4
5
6
7
8
9
10
11
12
13
/**
 * 5-5
 *
 * □ □ □ □ □
 *  
 *
 * @param pictures
 */
group5Layout5: function (pictures) {
  return this.getHTML([
    pictures.slice(0, 5)
  ]);    
},

3.Gitment评论

由于希望能在每篇文章中添加一个评论功能，所以找了一下能用的。发现有多说、Disqus、畅言、Gitment等。但是发现大家常用的多说倒闭了，Disqus需要翻墙，畅言没用过，所以直接就用Gitment了。

3.1注册OAuth Application

因为Gitment需要获得GitHub授权应用中的Client ID与Client Secret，所以需要自己新建一个OAuth Application，配置上有一点要注意的是Authorization callback URL，是回调自己博客的链接，其他的可以随便填。

3.2开启Next下的Gitment

在Next的主题配置文件_config.yml中添加以下代码

1
gitment: true

3.3配置Gitment信息

在Next主题layout/_partials/comments.swig文件中以下代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{% endif theme.gitment %}
<link rel="stylesheet" href="https://imsun.github.io/gitment/style/default.css">
<script src="https://imsun.github.io/gitment/dist/gitment.browser.js"></script>
<script>
  var gitment = new Gitment({
    id: '{{page.articleId}}',
    owner: 'xxxx',
    repo: 'xxxx',
    oauth: {
      client_id: 'xxxx',
      client_secret: 'xxxx',
    },
  })
  gitment.render('comments')
</script>
id(articleId) owner repo client_id client_secret
文章中添加 GitHub的用户名 GitHub中存放博客的目录 3.1注册后的信息 3.1注册后的信息

3.4博文配置

在我们的博文(.md)文件中添加以下代码

1
2
3
4
5
---
comments: true
.....
articleId: 自定义Next主题
---

4.不蒜子统计

在Next的主题配置文件_config.yml中修改busuanzi的内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# Show PV/UV of the website/page with busuanzi.
# Get more information on http://ibruce.info/2015/04/04/busuanzi/
busuanzi_count:
  # count values only if the other configs are false
  enable: ture
  # custom uv span for the whole site
  site_uv: true
  site_uv_header: <i class="fa fa-user"></i> 访问人数
  site_uv_footer: 人次
  # custom pv span for the whole site
  site_pv: true
  site_pv_header: <i class="fa fa-eye"></i> 总访问量
  site_pv_footer: 次
  # custom pv span for one page only
  page_pv: true
  page_pv_header: <i class="fa fa-file-o"></i> 浏览
  page_pv_footer: 次

5.LeanCloud

可以直接参考官方推荐教程

不蒜子是统计网页uv、pv，显示在网页的底部，而文章的pv则显示在文章中。LeanCloud可以统计单篇文章的阅读量，也可以在首页显示。然后我现在是把不蒜子文章的pv关掉，用LeanCloud来统计。

6.自定义布局

发现在Next主题中source/css/_custom/custom.styl添加自己的样式可以覆盖原来的样式。我就稍微调了一些小布局。

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
//首页头部样式
.header {
    background: #E6E6FA;
}
//首页阅读全文样式  
.post-button {
    margin-top: 30px;
    text-align: center;
}
.post-button .btn {
    color: #555;
    font-size: 15px;
    background: #fff;
    line-height: 2;
    padding: 0 20px;
    margin: 0 0 0 0 !important;
    border-bottom: 0;
    border-radius: 2px;
    border: 2px solid #555;
}
.post-button .btn:hover {
  border-color: #222;
  color: #fff;
  background: #222;
}