hexo theme next7.8 主题美化

本篇文章是针对 7.8.0 版本的美化笔记。

参考

小丁的个人博客

hexo 主题 next7.8 版本配置美化

1. 下载主题

最简单的安装方式就是直接克隆整个仓库：

# 进入你的博客目录
cd hexo

# 将仓库复制到博客目录的 themes/next 文件夹中
git clone https://github.com/theme-next/hexo-theme-next themes/next

下载完成之后，可以在博客的 themes 文件夹中看到多了一个名为 next 的目录，这个目录就是主题仓库。

2. 基本设置

2.1 next.yml

自从 NexT-7.3.0 开始，官方推荐使用数据文件将配置和主题分离，这样可以在不修改主题源码的情况下完成主题的配置，便于后续 next 版本更新。

我们将所有的主题配置都放在 hexo/source/_data/next.yml 中，所有的修改都将在这个文件中进行，不修改主题配置文件 next/_config.yml 。

具体步骤：

• 在 hexo/source/_data 目录下新建 next.yml 文件，如果 _data 目录不存在，则创建 _data 目录；
• 将主题配置文件 next/_config.yml 所有内容复制到 hexo/source/_data/next.yml 文件中；
• 将 hexo/source/_data/next.yml 文件中 override 选项设置为 true 。

2.2 使用主题

在站点配置文件 hexo/_config.yml 中，通过改变 theme 选项的值来选择主题。

# 选择 next 主题
theme: next

在 next.yml 中通过改变 scheme 来选择主题样式。

scheme: Gemini

预览，输入下面命令后，在 http://localhost:4000/ 查看效果。

hexo clean && hexo g && hexo s

2.3 设置博客文字描述和语言

站点配置文件 hexo/_config.yml 修改 site 。

# Site
title: orduster 学习笔记 # 网站的标题
subtitle: '' # 子标题
description: '' 
keywords: # 网站关键字
author: orduster # 网站作者
language: zh-CN # 网站采用语言，要跟/theme/***/languages/**.yml下的文件名对应
timezone: '' # 网站的时区

3. 主题美化

3.1 显示本地图片

安装 hexo-asset-image 插件。

npm install https://github.com/CodeFalling/hexo-asset-image --save  

站点配置文件 hexo/_config.yml 中设置 post_asset_folder 的值为 true ，这样新建文章时，hexo 会自动建立一个与文章同名的目录，可以将这篇文章所有的图片放入。

# 文章资源文件夹
post_asset_folder: true

# 使用这种方式引用图片
![](文件夹名/图片名称)

3.2 添加图片放大预览功能

next.yml 文件 fancybox 选项。

fancybox: true

3.3 设置博客文章持久化链接

安装 hexo-abbrlink 插件 。

npm install hexo-abbrlink --save

站点配置文件 hexo/_config.yml 修改 permalink 选项，添加下面内容。

permalink: post/:abbrlink/
abbrlink:
  alg: crc32   # 算法：crc16(default) and crc32
  rep: hex # 进制：dec(default) and hex

需要注意，如果 permalink 设置为 post/:abbrlink.html 可能导致本地图片加载失败

3.4 增加关于、标签、分类页面

主题配置文件 next.yml 修改 menu，将 about、tags、categories 的注释去除。

menu:
  home: / || fa fa-home
  about: /about/ || fa fa-user
  tags: /tags/ || fa fa-tags
  categories: /categories/ || fa fa-th
  archives: /archives/ || fa fa-archive

执行下面命令新建相关文件。

hexo new page "about"
hexo new page "tags"
hexo new page "categories"

修改生成页面所在位置和相关配置。

source\about\index.md
source\tags\index.md
source\categories\index.md

---
title: 关于
type: "about"
---

---
title: 标签
type: "tags"
---

---
title: 分类
type: "categories"
---

3.5 添加搜索功能

安装 exo-generator-searchdb 插件 。

npm install hexo-generator-searchdb --save

主题配置文件 next.yml 添加 search 选项，修改 local_search 选项。

search:
  path: search.xml
  field: post
  format: html
  limit: 10000
local_search:
  enable: true

3.6 回到顶部按钮

修改主题配置文件 next.yml back2top 选项。

back2top:
  enable: true
  # 将返回按钮设置在侧边栏
  sidebar: false
  # 按钮上显示进度百分比
  scrollpercent: true

3.7 设置字数统计和预计阅读时间

安装 hexo-symbols-count-time 插件。

npm install hexo-symbols-count-time --save

编辑站点配置文件 hexo/_config.yml，添加如下内容：

symbols_count_time:
  symbols: true 
  time: true 
  total_symbols: true 
  total_time: true 

修改主题配置文件 next.yml 中 symbols_count_time 选项。

symbols_count_time:
  separated_meta: true 
  item_text_post: true 
  item_text_total: true 
  awl: 2
  wpm: 275

3.8 标签云特效

安装 hexo-tag-cloud 插件。

npm install hexo-tag-cloud@^2.0.* --save

在 hexo/source/_data 目录下新建 sidebar.swig 文件，输入下面内容。

{% if site.tags.length > 1 %}
<script type="text/javascript" charset="utf-8" src="/js/tagcloud.js"></script>
<script type="text/javascript" charset="utf-8" src="/js/tagcanvas.js"></script>
<div class="widget-wrap">
    <h3 class="widget-title">标签云</h3>
    <div id="myCanvasContainer" class="widget tagcloud">
        <canvas width="250" height="250" id="resCanvas" style="width=100%">
            {{ list_tags() }}
        </canvas>
    </div>
</div>
{% endif %}

主题配置文件 next.yml 去除 sidebar.swig 的注释。

sidebar: source/_data/sidebar.swig

主题配置文件 next.yml 添加下面内容。

# 标签云
tag_cloud:
    textFont: Trebuchet MS, Helvetica
    textColor: '#333'
    textHeight: 25
    outlineColor: '#E2E1D1'
    maxSpeed: 0.1

3.9 设置代码块复制和代码高亮

主题配置文件 next.yml 中修改 codeblock 选项。

codeblock:
  # 代码高亮
  highlight_theme: night bright
  # 复制
  copy_button:
    enable: true
    # 显示文本复制结果
    show_result: true
    # 可以选择的样式: default | flat | mac
    style: mac

3.10 修改文章内链接文本样式

在 hexo/source/_data 目录下新建 styles.styl 文件，填入下面内容。

// 修改链接样式
.post-body p a{
  color: #0593d3;
  border-bottom: none;
  &:hover {
    color: #ff106c;
  }
}

a, span.exturl {
  border-bottom: none;
  &:hover {
    color: #ff106c;
  }
}

主题配置文件 next.yml 去除 styles.styl 的注释。

style: source/_data/styles.styl

3.10 在文章底部增加版权信息

主题配置文件 next.yml 修改 creative_commons 选项。

creative_commons:
  license: by-nc-sa
  sidebar: false # 不显示在侧边栏
  post: true
  language:

3.11 修改文章底部 tag 图标

主题配置文件 next.yml，打开底部标签 。

tag_icon: true

3.12 目录设置

主题配置文件 next.yml，修改 toc 属性。

toc:
  enable: true
  # 自动编号
  number: false
  # 超出宽度跨行
  wrap: true
  # 展开所有
  expand_all: true
  # 最大标题深度
  max_depth: 6

3.13 修改主题页面布局为圆角

在 hexo/source/_data 目录下新建 variables.styl 文件，填写下面内容。

// 圆角设置
$border-radius-inner     = 20px 20px 20px 20px;
$border-radius           = 20px;

主题配置文件 next.yml 去除 variables.styl 的注释。

variable: source/_data/variables.styl

3.14 隐藏底部的强力驱动

主题配置文件 next.yml 修改 footer 选项下的 powered 。

footer:
  # Powered by Hexo & NexT
  powered: false

3.15 文章加密

请注意，可能导致文章目录不显示。

安装 hexo-blog-encrypt 插件。

npm install hexo-blog-encrypt --save

在需要加密的文章中添加下面内容。

password: 123456
abstract: 加密文章，请输入密码 123456 查看
message: 请输入密码

3.16 提示块 - note

主题配置文件 next.yml 中 note 选项。

note:
  style: simple
  # 是否显示图标
  icons: true 
  light_bg_offset: 0

3.17 设置博客背景图片

新建 hexo/source/images 目录，将想要设置的背景图片放入，除了设置背景图片，还需要设置博客文章博客文章透明度才能看到背景图片。

在 hexo/source/_data/style.styl 文件中写入下面代码。

// 设置背景图片
body {
    background:url(/images/background.png);
    background-repeat: no-repeat;
    background-attachment:fixed; //不重复
    background-size: cover;      //填充
    background-position:50% 50%;
}

• background:url 为图片路径，也可以直接使用链接。
• background-repeat：若果背景图片不能全屏，那么是否平铺显示，充满屏幕
• background-attachment：背景是否随着网页上下滚动而滚动，fixed 为固定
• background-size：图片展示大小，这里设置 100%，100% 的意义为：如果背景图片不能全屏，那么是否通过拉伸的方式将背景强制拉伸至全屏显示。

3.18 设置博客文章透明度

next 主题的博客文章都是不透明的，这样即使设置了背景图片也无法看到，在 hexo/source/_data/styles.styl 中写入下面内容，使博客文章透明化。

//博客内容透明化
//文章内容的透明度设置
.content-wrap {
  opacity: 0.9;
}

//侧边框的透明度设置
.sidebar {
  opacity: 0.9;
}

//菜单栏的透明度设置
.header-inner {
  background: rgba(255,255,255,0.9);
}

//搜索框（local-search）的透明度设置
.popup {
  opacity: 0.9;
}

注意：
其中 header-inner 不能使用 opacity 进行配置。因为 header-inner 包含 header.swig 中的所有内容。若使用 opacity 进行配置，子结点会出很多问题。

3.19 顶部阅读进度条

主题配置文件 next.yml 中修改 reading_progress 选项。

reading_progress:
  enable: true
  # 显示在顶部
  position: top
  color: "#06d633"
  height: 3px

3.20 文章阴影

在 hexo/source/_data/styles.styl 中添加下面内容。

// 文章阴影
.post {
   margin-top: 50px;
   margin-bottom: 50px;
   padding: 25px;
   -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
   -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
}

3.21 修改分类页面样式

在 hexo/source/_data/styles.styl 添加下面内容。

// 分类&&标签 页面样式
.post-block.page {
    margin-top: 40px;
}
// 分类页面page
.category-all-page {
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
    background-color: #797D7F;
    padding: 20px 30px 60px 30px;
    border-radius: 25px 25px 25px 25px;
}
.category-all-title {
    font-family: Impact;
    font-size: 24px;
    color: aqua;
}
.category-list {
    overflow: auto;
}
.category-list li {
    height: 100%;
    float: left;
    border-right: 3px solid #222;
    padding: 0 20px;
}
.category-all ul li {
    list-style: none!important;
}
.category-list li:last-child {
    border-right: none;
}
.category-list li a {
    font-size: 16px;
    text-decoration: none;
    color: chartreuse;
    font-family: Helvetica, Verdana, sans-serif;
    // text-transform: uppercase;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.category-list li a:hover {
    color: black;
}
.category-list li.active a {
    font-weight: bold;
    color: black;
}

3.22 设置头像和图标

将需要设置的头像和图标放入到 hexo/source/images 文件中，然后修改主题配置文件 next.yml 中 avatar 和 favicon 选项。

# Sidebar Avatar
avatar:
  url: /images/avatar.png
  # 圆角显示，如果图片长宽比例差距过大，显示的是椭圆
  rounded: true
  # 方形显示
  rotated: false

# 填写自己的图片
favicon:
  small: /images/favicon.ico
  medium: /images/favicon.ico
  apple_touch_icon: /images/favicon.ico
  safari_pinned_tab: /images/favicon.ico

3.23 侧边栏社交链接

修改主题配置文件 next.yml 中 social 选项 。

social:
  GitHub: https://github.com/yourname || fab fa-github
  E-Mail: mailto:[e-mail] || fa fa-envelope

3.24 阅读全文按钮样式

next 在需要显示摘要的地方加上 <!--more--> ，就不会显示全文，在 hexo/source/_data/styles.styl 中写入下面内容，修改默认的 Read More 按钮样式。样式来源：点击此处查看 。

// [Read More]按钮样式
.post-button .btn {
    color: #555 !important;
    background-color: rgb(255, 255, 255);
    border-radius: 3px;
    font-size: 15px;
    box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.35);
    border: none !important;
    transition-property: unset;
    padding: 0px 15px;
}

.post-button .btn:hover {
    color: rgb(255, 255, 255) !important;
    border-radius: 3px;
    font-size: 15px;
    box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.35);
    background-image: linear-gradient(90deg, #a166ab 0%, #ef4e7b 25%, #f37055 50%, #ef4e7b 75%, #a166ab 100%);
}

3.25 更改新建文章的模板

默认新建文章没有分类这个选项，需要自己填写，现在修改 hexo/scaffolds/post.md 文件 。

---
title: {{ title }}
date: {{ date }}
categories:
tags:
---

3.26 去掉顶部黑线

在 hexo/source/_data/styles.styl 文件加入下面样式。

  //去掉顶部黑线：
.headband {display:none;}

3.27 选中颜色

修改选择文字的颜色，在 hexo/source/_data/styles.styl 文件加入下面样式。

// 修改选中字符的颜色
/* webkit, opera, IE9 */
::selection { 
    background: #06d633;
    color: #f7f7f7; 
}
/* firefox */
::-moz-selection { 
    background: #06d633;
    color: #f7f7f7;    
}

// 代码块选中颜色
.highlight *::selection {
    background: #06d633;
}

3.28 设置标题栏背景图片

在 hexo/source/_data/styles.styl 文件加入下面样式。

// 标题栏背景图片
.site-brand-container { 
  background-image: url(/images/log-small.png);
  background-size: 100% 100%;
  opacity: 0.9;
}

2.29 标签页面样式

在 hexo/source/_data/styles.styl 文件加入下面样式。

.tag-cloud a {
    box-shadow: 0 1px 3px #6f42c1, 0 1px 2px #d9534f;
    padding: 2px 10px;
    margin: 8px;
    background: rgba(193,66,92,0);
    border-bottom: none;
    border-radius: 20px;
}

2.30 代码行美化

在 hexo/source/_data/styles.styl 文件加入下面样式。

// 代码行样式
code{
  background: #555;
  color: #fff;
}

本文地址：https://blog.csdn.net/tuckEnough/article/details/107383201