《next主题自用的相关配置及使用》

发表于 分类于 Valine：

本文基于 hexo 框架下的 next 主题，写一下从无到有的搭建过程，里面都是自用配置；

对于小白小白来说，首先就是安装环境的搭建：

环境搭建

node 和 git 安装

首先你要安装 Node,git 这两个基本工具，具体安装自行百度，网上讲的很明白。

  • 安装好 node 后配置 npm 淘宝镜像：

永久使用：

1
npm config set registry https://registry.npm.taobao.org

检测是否配置成功：

1
npm config get registry

安装 Hexo 脚手架及创建项目

  • 安装脚手架
1
npm install hexo-cli -g
  • 创建 hexo 项目
1
hexo init 文件夹名
1
2
3
4
5
6
7
8
.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes
  • 安装next主题：

在项目的 root 目录下

1
git clone https://github.com/theme-next/hexo-theme-next themes/next

主题配置

我们在配置主题的时候要修改的是根目录的_config.yml和themes/next下的_config.yml。

在根目录下_config.yml中：

1
2
3
4
5
6
7
title: # 你的站名
subtitle: #子标题
description: #相关描述
keywords: # 关键字
author: #作者
language: #语言设置
timezone: #时区设置

在themes/next/_config.yml中：

1
2
3
4
5
6
# 设置网站的图标
favicon:
  small: /images/favicon-16x16-next.png
  medium: /images/favicon-32x32-next.png
  apple_touch_icon: /images/apple-touch-icon-next.png
  safari_pinned_tab: /images/logo.svg
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# 网站底部设置
footer:
  # Specify the date when the site was setup. If not defined, current year will be used.
  #建站时间
  since: 2018

  # Icon between year and copyright info.
  icon:
    # Icon name in Font Awesome. See: https://fontawesome.com/icons
    name: fa fa-heart
    # If you want to animate the icon, set it to true.
    animated: true
    # Change the color of icon, using Hex Code.
    color: "#ff0000"

  # If not defined, `author` from Hexo `_config.yml` will be used.
  copyright:

  # Powered by Hexo & NexT
  powered: false
1
2
3
4
5
6
# 版权声明
creative_commons:
  license: by-nc-sa
  sidebar: false
  post: true
  language: deed.zh
1
2
3
4
5
6
# next推荐四种风格，推荐用最后一种
# Schemes
# scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini
1
2
# 夜间模式
darkmode: false
1
2
3
4
sidebar:
  # 侧边栏位置设置
  position: left
  #position: right
1
2
3
4
5
6
7
8
9
# 侧边栏头像设置
avatar:
  # Replace the default image and set the url here.
  url: /img/avatar.png
  # 设置圆形头像
  rounded:
    true
    # 设置hover旋转
  rotated: true
1
2
3
4
5
6
7
8
9
# 侧边栏超链接设置
links_settings:
  icon: fa fa-link
  title: Links
  # Available values: block | inline
  layout: inline

links:
#   name:url
1
2
3
4
5
6
7
8
#文章开头显示信息
post_meta:
  item_text: true
  created_at: true
  updated_at:
    enable: false
    another_day: true
  categories: true
1
2
3
4
5
6
7
8
9
10
11
12
13
# 代码风格
codeblock:
  # Code Highlight theme
  # Available values: normal | night | night eighties | night blue | night bright | solarized | solarized dark | galactic
  # See: https://github.com/chriskempson/tomorrow-theme
  highlight_theme: solarized
  # Add copy button on codeblock
  copy_button:
    enable: true
    # Show text copy result.
    show_result: true
    # Available values: default | flat | mac
    style: flat