目录
- 前言
- 如何下载?
- 配置文件的分类
- 基本信息配置
- 修改主题
- Next主题样式设置
- 添加动态背景
- 修改链接的样式
- 添加文章搜索功能
- 修改文章底部标签的
#
的样式 - 修改作者头像并旋转
- 修改``的样式
- 添加全文阅读的按钮
- 添加站点访问人数计数
- 去掉文章目录标题的自动编号
- 主页文章添加阴影卡片效果
- 网站底部字数统计
- 设置网站的图标Favicon
- 添加文章字数统计功能
- 添加顶部动态加载条
- 文章设置置顶
- 文章加密访问
- 总结
前言
陈某的独立博客搭建已经有三年多时间了,使用Hexo
+Git
,一直使用的主题是jacman
,前几天女票看到说太LOW了,这哪能忍,必须换一个逼格高点的。
其实的三年前看到jacman
这个主题还是挺喜欢的,但是现在的看看确实不怎地,哎,老了....
今天这篇文章来介绍下一款简洁的主题NEXT
以及配置方式。先来上一张个人的博客的截图,如下:
如何下载?
NEXT
这款主题源码都直接托管在GitHub上,可以直接搜索,下载地址:https://github.com/theme-next/hexo-theme-next.git
。
下载源码之后,直接解压到博客的themes
的目录下,比如我的主题目录就是G:\hexo\themes\next
。
配置文件的分类
hexo搭建的博客有两个yml
配置文件,一个称之为站点配置文件
,是根目录下的_config.yml
,另一个是主题配置文件
,是主题目录下的_config.yml
文件。
基本信息配置
基本信息包括:博客标题、作者、描述、语言等等。这些基本信息的配置都在站点配置文件中。如下:
title: 标题 subtitle: 副标题 description: 描述 author: 作者 language: 语言(简体中文是zh-Hans) timezone: 网站时区(Hexo 默认使用您电脑的时区,不用写)
比如我的站点配置文件以上的配置如下:
# Site title: 不才陈某技术博客 subtitle: 微信公众号:码猿技术专栏 description: 本站是不才陈某的技术分享博客。内容涵盖Java后端技术、Spring Boot、微服务架构、系统安全、前端、系统监控等相关的研究与知识分享。 author: 不才陈某 language: zh-Hans timezone:
修改主题
hexo博客的主题很多,想要切换也是很简单,直接在站点配置文件
中设置即可,如下:
# 切换next主题 theme: next
Next主题样式设置
Next主题提供了4种风格供我们选择,分别为Muse
、Mist
、Pisces
、Gemini
。
以上4种风格大同小异,作者博客的风格是Gemini
,大家可以根据自己的喜好任意切换,在主题配置文件
中找到Scheme Settings
,如下:
# 设置自己喜欢的风格 scheme: Gemini
添加动态背景
动态背景能瞬间提升博客的逼格,实现的效果如下:
配置起来也是很简单,在主题配置文件
中,修改如下:
# 设置为true canvas_nest: true
修改链接的样式
默认的超链接的样式是灰色的,可以修改成如下效果:
修改文件 themes\next\source\css\_common\components\post\post.styl
,在末尾添加如下css样式:
// 文章内链接文本样式 .post-body p a{ color: #0593d3; border-bottom: none; border-bottom: 1px solid #0593d3; &:hover { color: #fc6423; border-bottom: none; border-bottom: 1px solid #fc6423; } }
其中选择.post-body
是为了不影响标题,选择p
是为了不影响首页阅读全文
的显示样式,颜色可以自己定义。
添加文章搜索功能
搜索这个功能是很非常重要的,文章很多的情况下怎样才能快速筛选想要的文章呢?搜索的功能是少不了的。实现的效果如下:
Next主题添加搜索的功能很简单,首先安装搜索插件:
npm install hexo-generator-searchdb --save
插件安装完成之后在站点配置文件
中找到Extensions
,在其下面添加如下内容:
# 搜索 search: path: search.xml field: post format: html limit: 10000
搜索功能很强大,但是第一次加载可能有点慢,大概十几秒的时间才能出来搜索框,没办法,毕竟是静态的。
修改文章底部标签的#
的样式
默认的文章标签的样式是带有#
这个符号的,比如#Spring Boot
,但是可以将#
修改成标签的icon
,效果如下:
5
实现方法很简单,修改模板/themes/next/layout/_macro/post.swig
,搜索rel="tag">#
,将#
换成<i class="fa fa-tag"></i>
。
修改作者头像并旋转
修改头像很简单,找一张尺寸合适、自己喜欢的图片,放在themes\next\source\images
下,随后修改主题配置文件
,将头像重新设置即可,配置如下:
# 设置自己的头像 avatar: /images/header.jpg
头像默认是不带旋转的,想要实现鼠标放在头像上方会自动旋转,只需要在\themes\next\source\css\_common\components\sidebar\sidebar-author.styl
文件下添加如下一段代码:
.site-author-image { display: block; margin: 0 auto; padding: $site-author-image-padding; max-width: $site-author-image-width; height: $site-author-image-height; border: $site-author-image-border-width solid $site-author-image-border-color; /* 头像圆形 */ border-radius: 80px; -webkit-border-radius: 80px; -moz-border-radius: 80px; box-shadow: inset 0 -1px 0 #333sf; /* 设置循环动画 [animation: (play)动画名称 (2s)动画播放时长单位秒或微秒 (ase-out)动画播放的速度曲线为以低速结束 (1s)等待1秒然后开始动画 (1)动画播放次数(infinite为循环播放) ]*/ /* 鼠标经过头像旋转360度 */ -webkit-transition: -webkit-transform 1.0s ease-out; -moz-transition: -moz-transform 1.0s ease-out; transition: transform 1.0s ease-out; } img:hover { /* 鼠标经过停止头像旋转 -webkit-animation-play-state:paused; animation-play-state:paused;*/ /* 鼠标经过头像旋转360度 */ -webkit-transform: rotateZ(360deg); -moz-transform: rotateZ(360deg); transform: rotateZ(360deg); } /* Z 轴旋转动画 */ @-webkit-keyframes play { 0% { -webkit-transform: rotateZ(0deg); } 100% { -webkit-transform: rotateZ(-360deg); } } @-moz-keyframes play { 0% { -moz-transform: rotateZ(0deg); } 100% { -moz-transform: rotateZ(-360deg); } } @keyframes play { 0% { transform: rotateZ(0deg); } 100% { transform: rotateZ(-360deg); } }
以上配置完成之后,将鼠标悬停在头像上方将会自动旋转起来。
修改``的样式
Next默认的主题样式是灰色的,不太显眼,颜色也不太好看,可以将其设置成自己喜欢的颜色,效果如下:
配置起来也是很简单,只需要在\themes\next\source\css\_custom\custom.styl
文件中添加如下代码:
// Custom styles. code { color: #ff7600; background: #fbf7f8; margin: 2px; } // 大代码块的自定义样式 .highlight, pre { margin: 5px 0; padding: 5px; border-radius: 3px; } .highlight, code, pre { border: 1px solid #d6d6d6; }
以上的颜色可以配置自己喜欢的,比如效果图中的颜色是我个人比较喜欢的。
添加全文阅读的按钮
Next主题默认是没有全文阅读按钮的,文章是全部展开形式的,但是可以设置成如下效果:
共有两种配置方法,分别如下:
- 在
md
文件中需要折叠的地方添加<!--more-->
,则在其下方的内容都将会折叠起来,只有点击阅读全文
按钮才会显示出来。 - 在
主题配置文件
中找到auto_excerpt
,这个属性可以设置为自动折叠,比如设置成只显示300
个字,这样的后面的内容就会折叠起来,配置如下:
auto_excerpt: enable: true length: 300
添加站点访问人数计数
站点访问计数有名的就是不蒜子
,使用起来非常方便,安装步骤也是很简单。
将如下的代码添加到themes/next/layout/_partial/footer.swig
文件中:
<div> <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script> <span id="busuanzi_container_site_pv" style='display:none'> 本站总访问量 <span id="busuanzi_value_site_pv"></span> 次 <span class="post-meta-divider">|</span> </span> <span id="busuanzi_container_site_uv" style='display:none'> 有<span id="busuanzi_value_site_uv"></span>人看过我的博客啦 </span> </div>
添加的位置如下图,可自行根据个人喜好更换位置:
以上设置完毕后只是显示整个站点的次数,并没有显示每篇文章的访问次数,效果如下图:
如果想要显示每篇文章的访问次数,在themes/next/layout/_macro/post.swig
文件第一行增加is_pv
字段,如下:
{% macro render(post, is_index, is_pv, post_extra_class) %}
然后将这段代码插入到其中:
{% if is_pv %} <span class="post-meta-divider">|</span> <span id="busuanzi_value_page_pv"></span>次阅读 {% endif %}
插入的位置如下图:
然后再打开 themes/next/layout/post.swig
,这个文件是文章的模板,给render
方法传入参数(对应刚才添加的is_pv
字段),如下图:
最后再打开themes/next/layout/index.swig
,这个文件是首页的模板,给render
方法传入参数(对应刚才添加的is_pv
字段),如下图:
至此即可配置成功,效果如下图:
去掉文章目录标题的自动编号
我们自己写文章的时候一般都会自己带上标题编号,但是默认的主题会给我们带上编号,很是别扭,如何去掉呢?
在主题配置文件
中找到toc
属性,将其中的number
属性设置成false
,如下:
toc: enable: true number: false wrap: false
最终实现的效果如下图:
主页文章添加阴影卡片效果
添加阴影卡片效果的效果图如下:
实现方法只需要在\themes\next\source\css\_custom\custom.styl
文件中添加如下内容即可:
// 主页文章添加阴影效果 .post { margin-top: 60px; margin-bottom: 60px; padding: 25px; -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5); -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5); }
网站底部字数统计
实现的效果如下图:
首先切换到根目录,安装插件,命令如下:
npm install hexo-wordcount --save
然后在/themes/next/layout/_partials/footer.swig
文件尾部加上:
<div class="theme-info"> <div class="powered-by"></div> <span class="post-count">博客全站共{{ totalcount(site) }}字</span> </div>
设置网站的图标Favicon
Next会有一个默认的网站图标,但是的我们可以替换成自己喜欢的,效果如下图:
实现方法很简单,自己设计一张喜欢的logo,并将图标名称改为favicon.ico
,然后把图标放在/themes/next/source/images
里,并且修改主题配置文件
:
# Put your favicon.ico into `hexo-site/source/` directory. favicon: /favicon.ico
添加文章字数统计功能
该功能能够为每篇文章计算字数以及阅读大致需要的时间,效果如下:
在根目录下安装hexo-wordcount
,执行命令如下:
npm install hexo-wordcount --save
安装完成后在主题配置文件
中的配置参数如下:
# Post wordcount display settings # Dependencies: https://github.com/willin/hexo-wordcount post_wordcount: item_text: true wordcount: true min2read: true
添加顶部动态加载条
实现的效果如下图:
配置很简单,只需要在主题配置文件
中修改pace
属性为true
,如下:
pace: true
文章设置置顶
修改hero-generator-index
插件,把文件:node_modules/hexo-generator-index/lib/generator.js
内的代码替换为:
'use strict'; var pagination = require('hexo-pagination'); module.exports = function(locals){ var config = this.config; var posts = locals.posts; posts.data = posts.data.sort(function(a, b) { if(a.top && b.top) { // 两篇文章top都有定义 if(a.top == b.top) return b.date - a.date; // 若top值一样则按照文章日期降序排 else return b.top - a.top; // 否则按照top值降序排 } else if(a.top && !b.top) { // 以下是只有一篇文章top有定义,那么将有top的排在前面(这里用异或操作居然不行233) return -1; } else if(!a.top && b.top) { return 1; } else return b.date - a.date; // 都没定义按照文章日期降序排 }); var paginationDir = config.pagination_dir || 'page'; return pagination('', posts, { perPage: config.index_generator.per_page, layout: ['index', 'archive'], format: paginationDir + '/%d/', data: { __index: true } }); };
在文章中添加 top
值,数值越大文章越靠前,如:
--- title: Spring Boot 与多数据源的那点事儿~ date: 2020-05-22 22:45:48 tags: Spring Boot进阶 categories: Spring Boot top: 100 ---
文章加密访问
有些文章涉及到隐私可能需要密码才能访问,此时就可以设置加密,效果如下图:
在themes->next->layout->_partials->head.swig
文件中的<meta>
标签之后插入以下代码:
<script> (function () { if ('{{ page.password }}') { if (prompt('请输入文章密码') !== '{{ page.password }}') { alert('密码错误!'); if (history.length === 1) { location.replace("https://chenjiabing666.github.io/"); // 这里替换成你的首页 } else { history.back(); } } } })(); </script>
然后在文章的的MD
文件上方添加一个password
,如下:
--- title: Spring Boot 与多数据源的那点事儿~ date: 2020-05-22 22:45:48 tags: Spring Boot进阶 categories: Spring Boot top: 100 password: 123456 ---
全部配置完成后,这篇文章必须输入密码123456
才能访问。
总结
本文主要介绍了Next
主题美化的一些方法,关于Hexo博客搭建的教程网上很多,有不会的可以去网上搜搜教程。
作者的博客并没有设置单独的域名,完全是搭建的在Github
上的,个人觉得没必要一个单独的域名,完全是自己的学习以及工作心得,因此没搞这些,不喜勿喷,哈哈.........