欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

hexo theme next7.8 主题美化

程序员文章站 2022-06-19 16:12:01
本篇文章是针对 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 的目录，这个目录就是主...

本篇文章是针对 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:yourname@gmail.com || 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

相关标签： next

上一篇： 前端-数组去重

下一篇： GD库实例1

推荐阅读