大羊的一天

hexo博客nexT主题优化

发表于 更新于
hexo 主题 next7.8 版本配置美化

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

网上next主题的配置大多为next5.+或next6.+，在最新版本中对之前的版![2](C:\Users\Lenovo\Pictures\Saved Pictures\2.jpg)本进行了高度的插件化，许多功能都集成在主题配置文件中，同时之前自定义样式配置文件的路径也有所改变，针对于此写下自己的配置记录

  • 设置博主文字描述和中文语言
    • 站点配置文件修改site
  • 设置next主题和主题样式
  • 设置首页不显示全文
  • 设置博客文章持久化连接
    • 安装hexo-abbrlink这个插件
    • 站点配置文件修改permalink添加如下内容
  • Menu增加关于、标签、分类页面
    • 站点配置文件修改menu
    • 新建相关页面
    • 修改生成页面的配置
  • 添加搜索功能
    • 安装hexo-generator-searchdb这个插件
    • 站点配置文件添加并修改local_search
  • 设置背景图片和透明度
    • 修改主题配置文件中的custom_file_path
    • 在博客主站目录下的source文件夹下新建_data文件夹并添加styles.styl文件
    • 在styles.styl中添加如下内容
  • 设置canvas_ribbon动态背景
    • 进入到 NexT 主题目录下
    • 安装模块到 source/lib 目录下
    • 编辑主题配置文件，启用 canvas_ribbon 模块，如下：
  • 设置左上角或右上角 github 图标
  • 设置侧栏阅读进度百分比
  • 设置阅读位置标记功能
    • 进入到 NexT 主题目录下
    • 安装模块到 source/lib 目录下：
    • 编辑主题配置文件，启用 bookmark 模块，如下：
  • 设置字数统计和预计阅读时间
    • 进入到博客主站目录下，安装 Hexo 插件：
    • 编辑站点配置文件，添加如下内容：
    • 此插件集成在 NexT 主题中，在 Hexo 站点配置文件中启用插件后，你可以调整 NexT 配置中的选项，查看主题配置文件，配置如下：
  • 添加文章分享按钮
    • 进入到 NexT 主题目录下
    • 安装模块到 source/lib 目录下：
    • 编辑主题配置文件，添加 needmoreshare2 模块，如下：
  • 设置网页底部信息
  • 网站底部添加网站运行时间
    • 修改主题下layout_partials\footer.swig，并添加内容如下：
  • 添加自定义404页面
  • 添加图片放大预览功能
  • 图片懒加载设置
  • 点击出现桃心效果(可选)
    • 在主题/source/js/下新建文件 clicklove.js，添加内容如下
    • 修改_layout.swig
  • 主页文章添加置顶图标(可选)
  • 标签云特效（可选）
  • 主页文章添加阴影效果
  • 设置代码块复制和代码高亮
  • 网站侧栏背景及主副标题颜色
  • 修改文章内链接文本样式
  • 修改文章底部标签样式
  • 在文章末尾添加“文章结束”标记
  • 修改分类页面样式
  • 设置头像
  • 网站底部加上访问量
  • 修改不蒜子颜色
  • 网站底部添加动态桃心
  • 网站底部添加备案信息(可选)
  • 侧边栏社交链接
  • 添加侧栏友情链接
  • 在文章底部增加版权信息
  • 关于页面样式的修改,回顶部按钮样式、底部页码等等

设置博主文字描述和中文语言

站点配置文件修改site

1
2
3
4
5
6
7
title: Kali
   subtitle: IT博客
   description: 没有目的，就做不成任何事情
   keywords:
   author: KaliAlbert
   language: zh-CN
   timezone: Asia/Shanghai

设置next主题和主题样式

站点配置文件

1
theme: next

主题配置文件 

1
2
3
4
5
#Schemes
#scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini

设置首页不显示全文

主题配置文件修改： 

1
2
3
4
5
6
# Automatically excerpt description in homepage as preamble text.
excerpt_description: true

# Read more button
# If true, the read more button will be displayed in excerpt section.
read_more_btn: true

方法一：写概述

​ 在文章的front-matter中添加description，其中description中的内容就会被显示在首页上，其余一律不显示。 

1
2
3
4
5
---
title: 让首页显示部分内容
date: 2020-02-23 22:55:10
description: 这是显示在首页的概述，正文内容均会被隐藏。
---

比较不方便的是还得写一下概述，很多时候会懒得写概述，于是就需要第二种方法了。

方法二：文章截断

在需要截断的地方加入：

设置canvas_ribbon动态背景

进入到 NexT 主题目录下

安装模块到 source/lib 目录下

1
git clone https://github.com/theme-next/theme-next-canvas-ribbon source/lib/canvas-ribbon

编辑主题配置文件，启用 canvas_ribbon 模块，如下：

1
2
3
4
5
canvas_ribbon:
  enable: true
  size: 300
  alpha: 0.6
  zIndex: -1

设置侧栏阅读进度百分比

编辑站点配置文件，修改 back2top 部分如下 

1
2
3
4
5
6
back2top:
  enable: true
  # Back to top in sidebar.
  sidebar: true
  # Scroll percent label in b2t button.
  scrollpercent: true

设置阅读位置标记功能

进入到 NexT 主题目录下

安装模块到 source/lib 目录下：

1
git clone https://github.com/theme-next/theme-next-bookmark.git source/lib/bookmark

编辑主题配置文件，启用 bookmark 模块，如下：

1
2
3
4
5
6
7
8
# Bookmark Support
bookmark:
  enable: true
  # Customize the color of the bookmark.
  color: "#222"
  # If auto, save the reading progress when closing the page or clicking the bookmark-icon.
  # If manual, only save it by clicking the bookmark-icon.
  save: auto

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

进入到博客主站目录下，安装 Hexo 插件

1
cnpm install hexo-symbols-count-time --save

编辑主题配置文件，添加如下内容：

1
2
3
4
5
symbols_count_time:
  symbols: true 
  time: true 
  total_symbols: true 
  total_time: true

添加图片放大预览功能

在主题配置文件，启用 fancybox，修改配置如下：

1
fancybox: true

图片懒加载设置

在主题配置文件中启用lazyload 

1
lazyload: true

点击出现桃心效果(可选)

在主题/source/js/下新建文件 clicklove.js，添加内容如下

1
!function(e,t,a){function n(){c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),o(),r()}function r(){for(var e=0;e<d.length;e++)d[e].alpha<=0?(t.body.removeChild(d[e].el),d.splice(e,1)):(d[e].y--,d[e].scale+=.004,d[e].alpha-=.013,d[e].el.style.cssText="left:"+d[e].x+"px;top:"+d[e].y+"px;opacity:"+d[e].alpha+";transform:scale("+d[e].scale+","+d[e].scale+") rotate(45deg);background:"+d[e].color+";z-index:99999");requestAnimationFrame(r)}function o(){var t="function"==typeof e.onclick&&e.onclick;e.onclick=function(e){t&&t(),i(e)}}function i(e){var a=t.createElement("div");a.className="heart",d.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:s()}),t.body.appendChild(a)}function c(e){var a=t.createElement("style");a.type="text/css";try{a.appendChild(t.createTextNode(e))}catch(t){a.styleSheet.cssText=e}t.getElementsByTagName("head")[0].appendChild(a)}function s(){return"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"}var d=[];e.requestAnimationFrame=function(){return e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,1e3/60)}}(),n()}(window,document);

修改_layout.swig

在主题\layout_layout.swig文件末尾添加：

1
2
<!-- 页面点击小红心 -->
<script type="text/javascript" src="/js/clicklove.js"></script>

主页文章添加置顶图标(可选)

修改主题的/layout/_macro/post.swig 文件，在

下加入 “置顶” 标识，如图标和文字描述：

1
2
3
4
5
{% if post.top %}
<i class="fa fa-thumb-tack"></i>
<font color=7D26CD>{{ __('post.sticky') }}</font>
<span class="post-meta-divider">|</span>
{% endif %}

标签云特效（可选）

给博客添加fork github

在GitHub Ribbons或GitHub Corners选择一款你喜欢的挂饰，拷贝方框内的代码：

将刚刚复制的挂饰代码，添加到Blog/themes/next/layout/_layout.swig文件中，添加位置如下图所示(放在``下方)： 

1
2
3
<div class="headband"></div>//第14行
    <a href="你的GitHub地址" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
    <header class="header" itemscope itemtype="http://schema.org/WPHeader">

修改链接的样式

-------------本文结束感谢您的阅读-------------