自定义hexo下的next主题

发表于 更新于 分类于

　　很惭愧，就做了一点微小的工作。

重装系统后重新配置hexo连接github pages（需预先保存blog文件夹）

1
2
3
4
5
// Git Node.js 
npm install hexo-cli -g
git config --global user.name "yourname"
git config --global user.email "youremail"
ssh-keygen -t rsa -C "youremail"

打开.ssh文件夹，id_rsa.pub文件，
在GitHub账号的setting中，找到SSH keys的设置选项，
点击New SSH key，把id_rsa.pub里面的信息复制进去。

1
2
3
4
检查是否成功
ssh -T git@github.com  //这里要手动输入`yes`
// 安装部署工具
npm install hexo-deployer-git --save

可能出现的问题

Hexo每次部署到Github后都要重新设置域名

在博客根目录下的source文件夹中添加CNAME文件，保存时无后缀名。里面写上域名。

自定义配置&美化

去掉图片边框

打开themes\next\source\css\_custom\custom.styl
添加代码： 

1
2
3
4
5
6
7
.posts-expand .post-body img {
    border: none;
    padding: 0px;
}
.post-gallery .post-gallery-img img {
    padding: 0px;                //设置为0px
}

添加不蒜子统计

Hexo的NexT主题6.0，主题配置文件中已内置不蒜子访客统计代码。按需修改。

1
2
3
4
5
6
7
8
busuanzi_count:
  enable: true
  total_visitors: true
  total_visitors_icon: user
  total_views: false
  total_views_icon: eye
  post_views: false
  post_views_icon: eye

给不蒜子统计添加文字

在themes\next\layout\_third-party\analytics\busuanzi-counter.swig文件中可以添加文字。

1
共<span class="busuanzi-value" id="busuanzi_value_site_uv"></span>人次

添加多个标签的格式

1
2
3
4
5
6
7
8
---
title: 一点微小的工作
date: 2019-05-02 21:11:12
tags: 
    - 膜蛤
    - 笔记
categories: 笔记
---

把NexT主题中的标签从底部挪到顶部

打开文件blog\themes\next\layout\_macro\post.swig ,
把<footer class="post-footer">下的

1
2
3
4
5
6
7
{% if post.tags and post.tags.length and not is_index %}
  <div class="post-tags">
    {% for tag in post.tags %}
      <a href="{{ url_for(tag.path) }}" rel="tag"># {{ tag.name }}</a>
    {% endfor %}
  </div>
{% endif %}

插入到<div class="post-meta">下的任意位置。
可以随意修改样式。

树状文件目录

Windows打开cmd
输入：tree [path]
后面可加参数：/F /A

移动Hexo需要保存的文件

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
└─blog
    │  _config.yml            站点配置文件
    │
    ├─scaffolds
    │      post.md            新博文配置-添加默认分类等参数
    │
    ├─source
    │  │  404.html            404页面
    │  │  CNAME               部署到Github时不再修改域名
    │  │  robots.txt          Google爬虫
    │  │
    │  ├─about
    │  │      index.md        博客about页面
    │  │
    │  ├─categories
    │  │      index.md        博客categories页面
    │  │
    │  └─_posts               这里是你写的博客
    │
    └─themes
        └─next
            │  _config.yml    主题配置文件
            │
            └─source
                └─images      整个网站的图片

首页中文章显示图片

1
2
3
4
5
6
7
8
9
10
11
12
---
title: 
date: 2017-11-09 14:33:32
tags:
categories:
copyright: true
comments: false
description: 
top:
photos: 
    - "图片地址"
---

或者使用<!--more-->来分割图片和正文。

NexT主题去掉顶部黑线

部署的网页中：
在themes\next\layout\_layout.swig中把<div class="headband"></div>用{ # # }注释掉。

(此处{和#之间在md文档里不能紧挨着，否则在网页里无法显示)
本地(localhost:4000)：
在themes\next\source\css\_variables\base.styl中把headband-height的值改为0px。

更改手机端文章间距

打开文件blog\themes\next\source\css\_common\scaffolding\mobile.styl
修改下面位置的值。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.header-inner {
  margin-bottom: -8px  !important;  //这里可以改
}
.main-inner {
  margin-top: -8px  !important;   //这里可以改
}

  .content-wrap {
  padding: 8px  !important;    //这里可以改
}

.post-block {
  // Inside posts blocks content padding (default 40px).
  padding: $content-mobile-padding 0 !important;   //首页预览内容的缩进值。
  margin-top: initial !important;  //这里可以改
}

修改主页中post简介的空行

1
2
3
4
5
6
7
8
9
10
11
12
13
blog\themes\next\source\css\_common\components\post\post-header.styl

.post-meta {
	margin: 3px 0 60px 0;	// 下边距也改为3px
}


blog\themes\next\source\css\_common\components\post\post.styl

.post-button {
  margin-top: 40px;			// 上边距改为0px
  text-align: center;
}