dcddc

西米大人的博客

0%

【探索】next主题高级定制

发表于 更新于 分类于 热度: ℃ 评论: ℃
字数： 2.5k 阅读时长 ≈ 4 分钟
NexT主题浅析与个性化定制

hexo站点配置文件

路径：_config.yml

站点基本信息

  • themes/next/languages/路径下定义了多个语言对应的翻译文件，修改zh-CN.yml，可以定制页面组件的中文文案
1
2
3
4
5
6
7
8
9
# Site
title: dcddc
subtitle: 西米大人的博客
description: <blockquote class="blockquote-center">优秀的人，不是不合群，而是他们合群的人里面没有你</blockquote>
keywords:
author: 西米大人
language: zh-CN
timezone:
emai: email here

域名

1
2
3
4
5
6
7
8
9
# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: http://dcbupt.github.io
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:
pretty_urls:
  trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
  trailing_html: true # Set to false to remove trailing '.html' from permalinks

目录配置

站点各个项目的目录配置，例如博文source目录、分类目录、标签目录，这个一般不用改

1
2
3
4
5
6
7
8
9
# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:

要想为博文分类、打标，且在categories、tags页能看到分类后的博文列表，需要编辑每篇博文的schema，示例如下：

1
2
3
4
5
6
7
8
9
10
---
categories: 折腾
date: 2017-02-28 14:09
description: '<blockquote class="blockquote-center">next主题浅析与个性化定制</blockquote>'
status: public
tags:
  - 前端
  - 测试
title: 【探索】next主题源码调研
---

另，以categories分类页配置为例，还需要创建对应的索引页
type hexo new page "categories"，这会创建source/categories/index.md，内容如下：

  • 分类页如果要关闭评论，comments: false
1
2
3
4
5
---
title: categories
type: "categories"
comments: false
---

分页配置

每页展示10篇文章，按文章更新顺序倒序，只包含系统学习系列分类下的文章

  • 这里使用使用hexo-index2-generator，比hexo自带index功能更加丰富
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# Home page setting
# path: Root path for your blogs index page. (default = '')
# per_page: Posts displayed per page. (0 = disable pagination)
# order_by: Posts order. (Order by date descending by default)
# index_generator:
#   path: ''
#   per_page: 10
#   order_by: -date
# index2 generator是否包含官方的hexo-generator-index，默认true（包含）
index2_include_index: true # defult is true
# 配置index2 generator，可以是数组或对象
index2_generator:
  per_page: 10
  order_by: -updated
  include:
    - category 系统学习系列 # 只包含Web分类下的文章
  # exclude:
    # - tag Hexo # 不包含标签为Hexo的文章

博客主题

1
2
3
4
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next

部署站点

1
2
3
4
5
6
7
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
      type: git
      repository: https://github.com/dcbupt/dcbupt.github.io.git
      branch: master
      message: 'Daily updated：{{now("YYYY-MM-DD HH:mm:ss")}} by Forwarddc personal PC'

站内搜索

1
2
3
4
5
6
# local search
search:
  path: search.xml
  field: post
  format: html
  content: true

NexT主题的目录结构

原文链接：https://blog.csdn.net/sunshine940326/article/details/69933696
直接拿过来了，写的挺不错的

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
29
30
31
32
33
34
35
36
37
38
├── .github            #git信息
├── languages          #多语言
|   ├── default.yml    #默认语言
|   └── zh-Hans.yml      #简体中文
|   └── zh-tw.yml      #繁体中文
├── layout             #布局，根目录下的*.ejs文件是对主页，分页，存档等的控制
|   ├── _custom        #可以自己修改的模板，覆盖原有模板
|   |   ├── _header.swig    #头部样式
|   |   ├── _sidebar.swig   #侧边栏样式
|   ├── _macro        #可以自己修改的模板，覆盖原有模板
|   |   ├── post.swig    #文章模板
|   |   ├── reward.swig    #打赏模板
|   |   ├── sidebar.swig   #侧边栏模板
|   ├── _partial       #局部的布局
|   |   ├── head       #头部模板
|   |   ├── search     #搜索模板
|   |   ├── share      #分享模板
|   ├── _script        #局部的布局
|   ├── _third-party   #第三方模板
|   ├── _layout.swig   #主页面模板
|   ├── index.swig     #主页面模板
|   ├── page           #页面模板
|   └── tag.swig       #tag模板
├── scripts            #script源码
|   ├── tags           #tags的script源码
|   ├── marge.js       #页面模板
├── source             #源码
|   ├── css            #css源码
|   |   ├── _common    #*.styl基础css
|   |   ├── _custom    #*.styl局部css
|   |   └── _mixins    #mixins的css
|   ├── fonts          #字体
|   ├── images         #图片
|   ├── uploads        #添加的文件
|   └── js             #javascript源代码
├── _config.yml        #主题配置文件
└── README.md          #用GitHub的都知道
————————————————

next主题的配置文件

themes/next/_config.yml

菜单栏

1
2
3
4
5
6
7
8
9
menu:
  home: /|| home
  #about: /about/ || user
  tags: /tags/|| tags
  categories: /categories/|| th
  archives: /archives/|| archive
  #schedule: /schedule/ || calendar
  #sitemap: /sitemap.xml || sitemap
  #commonweal: /404/ || heartbeat

字体

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
font:
  # enable: false
  enable: true

  # Uri of fonts host. E.g. //fonts.googleapis.com (Default).
  # host:
  host: https://fonts.cat.net

  # Font options:
  # `external: true` will load this font family from `host` above.
  # `family: Times New Roman`. Without any quotes.
  # `size: xx`. Use `px` as unit.

  # Global font settings used on <body> element.
  # 全局字体，应用在 body 元素上
  global:
    external: true
    family: Microsoft YaHei
    size: 14

  # Font settings for Headlines (h1, h2, h3, h4, h5, h6).
  # Fallback to `global` font settings.
  # 标题字体 (h1, h2, h3, h4, h5, h6)
  headings:
    external: true
    family: Roboto Slab
  #   size:

  # Font settings for posts.
  # Fallback to `global` font settings.
  # 文章字体
  posts:
    external: true
    family: Microsoft YaHei

  # Font settings for Logo.
  # Fallback to `global` font settings.
  # Logo 字体
  logo:
    external: true
    family: Lobster Two
    size: 24

  # Font settings for <code> and code blocks.
  # 代码字体，应用于 code 以及代码块
  codes:
    external: true
    family: Roboto Mono
  #   size:

本地搜索

1
2
3
4
5
6
7
local_search:
  enable: true
  # if auto, trigger search by changing input
  # if manual, trigger search by pressing enter key or search button
  trigger: auto
  # show top n results per article, show all results by setting to -1
  top_n_per_article: 1

博文schema

scaffolds/post.md

该文件负责定义每篇博文的schema。
hexo new的md博文会自动带上这里定义好的schema
tags用于打标签，categories用于给博文分类，description用于在首页展示博文的概要

1
2
3
4
5
6
7
---
title: {{ title }}
date: {{ date }}
tags: {{ tags }}
categories: {{ categories }}
description: {{ description }}
---

布局layout

根布局

themes/next/layout/_layout.swig
适用于每个页面的布局模板

head，页面最顶部

1
2
3
4
5
<head>
  {% include '_partials/head.swig' %}
  <title>{% block title %}{% endblock %}</title>
  {% include '_third-party/analytics/index.swig' %}
</head>

header，正文上面

1
2
3
<header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"> {%- include '_partials/header.swig' %} </div>
    </header>

main，正文

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<main id="main" class="main">
      <div class="main-inner">
        <div class="content-wrap">
          <div id="content" class="content">
            {% block content %}{% endblock %}
          </div>
          {% include '_third-party/duoshuo-hot-articles.swig' %}
          {% include '_partials/comments.swig' %}
        </div>
        {% if theme.sidebar.display !== 'remove' %}
          {% block sidebar %}{% endblock %}
        {% endif %}
      </div>
    </main>

footer，底部

1
2
3
4
5
6
7
<footer id="footer" class="footer">
      <div class="footer-inner">
        {% include '_partials/footer.swig' %}
        {% include '_third-party/analytics/analytics-with-widget.swig' %}
        {% block footer %}{% endblock %}
      </div>
    </footer>

增加页面特效

在next主题的根布局文件中，引入对应特效的js。
js路径：themes/next/source/js/src/

页面点击小红心

1
<script type="text/javascript" src="/js/src/love.js"></script>

js下载地址：https://github.com/Neveryu/Neveryu.github.io/blob/master/js/src/love.js

背景动画

1
<script type="text/javascript" src="/js/src/particle.js"></script>

js下载地址：https://github.com/Neveryu/Neveryu.github.io/blob/master/js/src/particle.js

header顶部

theme/next/layout/_partials/header.swig
这个文件用来模式页面顶部header的布局

增加页面特效

页面顶部，增加特效优秀的人，不是不合群，而是他们合群的人里面没有你样式

1
2
3
4
5
...
{% else %}
    <p class="site-subtitle">{{ config.subtitle }}</p>       
    <blockquote class="blockquote-center">优秀的人，不是不合群，而是他们合群的人里面没有你</blockquote>
{% endif %}

body

theme/next/layout/_macro/post.swig
这个文件用来描述页面body的布局

Index页 or 博文页，标题下方展示发表于xxx|更新于xxx|分类于xxx的代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="post-meta">
          <span class="post-time">
            {% if theme.post_meta.created_at %}
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              {% if theme.post_meta.item_text %}
                <span class="post-meta-item-text">{{ __('post.posted') }}</span>
              {% endif %}
              <time title="{{ __('post.created') }}" itemprop="dateCreated datePublished" datetime="{{ moment(post.date).format() }}">
                {{ date(post.date, config.date_format) }}
              </time>
            {% endif %}
            ...

默认next配置文件，是不会在标题下方展示更新于xxx，可以修改配置文件，updated_at: true使其展示

1
2
3
4
5
6
# Post meta display settings
post_meta:
  item_text: true
  created_at: true
  updated_at: true
  categories: true

如果是index页，展示description、阅读全文的代码：

1
2
3
4
5
6
7
8
9
10
{% if is_index %}
        {% if post.description and theme.excerpt_description %}
          {{ post.description }}
          <!--noindex-->
          <div class="post-button text-center">
            <a class="btn" href="{{ url_for(post.path) }}">
              {{ __('post.read_more') }} &raquo;
            </a>
          </div>
          ...

增加每篇文章阅读量统计

文章标题下方，展示阅读量
参考：https://blog.csdn.net/weixin_39345384/article/details/80787998

追文章标题下方展示发布于xxx的代码，发现next主题可以支持文章阅读量的配置
1、去leancloud申请一个应用：https://leancloud.cn/dashboard/login.html#/signin
2、修改next配置文件，开启阅读量统计，填入应用的appid和appKey

1
2
3
4
leancloud_visitors:
  enable: false
  app_id: #<app_id>
  app_key: #<app_key>

3、leancloud为应用创建一张用于存储阅读量的表，命名为Counter
4、自己博客的域名绑定到应用的web安全设置域名中（防止其他域名拿到app信息）

增加页面特效

在每篇博文的末尾，增加特效完样式

1
2
3
4
5
...
{% else %}
    {{ post.content }}
    <blockquote class="blockquote-center">完</blockquote>
{% endif  %}

添加本地搜索功能

1、在本地博客路径下：npm install hexo-generator-searchdb --save
2、在站点配置文件_config.yml里添加search字段

1
2
3
4
5
search:
  path: search.xml
  field: post
  format: html
  limit: 10000

3、修改next主题的_config.yml，将local_search改为true

字数统计功能

1、安装wordcount插件 npm install hexo-wordcount --save
2、修改NexT的配置文件

1
2
3
4
post_wordcount:
  item_text: true
  wordcount: true
  min2read: true

隐藏博文

https://github.com/prinsss/hexo-hide-posts/blob/master/README_ZH.md

加密访问

npm install --save hexo-blog-encrypt

博文的meta中增加：password: xxx

主页只展示指定类目下的博文

https://github.com/Jamling/hexo-generator-index2/blob/master/README_zh.md

文章按更新时间排序，修改hexo的config.yml：
order_by: -updated

css

首页背景色：
themes/next/source/css/_variables/Gemini.styl，设置$body-bg-color

  • 这里我使用的next风格是Gemini

文章背景色：
themes/next/source/css/_variables/base.styl，设置$content-bg-color

打开themes/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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
// 文章边框
.post {
  // height: 300px;
  margin-top: 0px;
  margin-bottom: 60px;
  padding: 20px 40px;
  box-shadow: 0 0 25px rgba(202, 203, 203, .5);
  -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
  -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
  background-color: #f9f9f9;
  //background-color: #f3f9f1;
  //background-color: #edd1d8;
}

// 文章末尾分割线
.posts-expand .post-eof {
  display: block;
  margin: 80px auto 60px;
  width: 0px;
  height: 0px;
  background: #555;
  text-align: center;
}

// 阅读全文按钮
.post-button {
  margin-top: 90px;
}

// 代码边框
code {
    color: #ff7600;
    background: #fbf7f8;
    margin: 2px;
    
}
.highlight, pre {
    margin: 5px 0 30px 0;
    padding: 1px;
    border-radius: 3px;
}
.highlight, code, pre {
    border: 1px solid #d6d6d6;
}

// 段落边距
p {
  margin: 0 0 10px 0;
}

调整文章的行宽，修改：themes/next/source/css/_variables/base.styl

1
$content-desktop-large          = 1150px

相关推荐

NexT主题优化：
https://www.jianshu.com/p/3ff20be8574c