Hexo | NexT打造一个炫酷博客
文章目录
- 写在前面
- 基本定义
- 博客搭建
- 初级 基础功能篇
- 站点配置文件
- 网页样式篇
- 需要了解的
- 修改文章页宽
- 修改小型代码块颜色
- 修改链接文字样式
- 修改[Read More]按钮样式
- 修改标签云（tagcloud）的颜色
- 修改文章底部#号标签,改为图标
- 头像设置圆形,停留旋转效果
- 隐藏底部"强力驱动"内容
- 文章末尾添加"本文结束"标记
- 文章末尾追加版权信息
- 移动端显示 back-to-top 按钮和侧栏
- 附上我的custom.styl样式文件
- 设置动态title
- 侧栏加入已运行的时间
- 点击出现爱心效果
- 点击头像回到博客首页
- 增加内容分享服务
- 增加站内文章搜索功能
- 增加文章字数统计及阅读时常功能
- 增加站点访问统计功能
- 文章置顶功能
- LeanCloud统计文章阅读数
- 文章底部添加打分系统
- 添加 TopX 页面
- 评论系统
- 关于主题更新升级
- 进阶 搜索引擎篇
- 老生常谈
写在前面
本文主要是NexT主题配置以及页面的样式优化，参考了许多大佬的文章以及配置文件。
本文参考的文章都会直接给出原文链接的形式标记出处，但 Google 参考了实在太多太多了，如有遗漏，欢迎指出。
前期整个博客优化配置过程中收藏了许多很好的博客，回头可以贴个友情链接大家可以去看看。
本文内容后续的优化会在博客中完善
更详细的优化教程请移步: http://xyua.top/Hexo/hexo_next_blog.html
附上我自己的博客地址,欢迎参观:http://xyua.top
基本定义
在 Hexo 中有两份主要的配置文件，其名称都是 _config.yml。 其中，一份位于站点根目录下，主要包含 Hexo 本身的配置；另一份位于主题目录下，这份配置由主题作者提供，主要用于配置主题相关的选项。
为了描述方便，在以下说明中，将前者称为 站点配置文件， 后者称为 主题配置文件。
~/hexo/_config.yml
~/hexo/themes/next/_config.yml
博客搭建
博客的搭建方式可参考这篇【Hexo 搭建自己的个性博客】
初级 基础功能篇
站点配置文件
最权威的当然是先看Hexo官方文档
下面是我在用的配置文件:
# 站点设置
title: 雜言非語
subtitle: 成為一個厲害得普通人
description: 小人物,码农
keywords:
author: Sun XY
language: zh-Hans
timezone:
#主题设置
theme: next
# 博客地址
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://sun_xy.gitee.io/blog/
root: /blog
permalink: :year/:month/:day/:title/
permalink_defaults:
# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:
# 写作文章设置
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight:
enable: true
line_number: true
auto_detect: false
tab_replace:
# Home page setting
# path: Root path for your blogs index page. (default = '')
# per_page: Posts displayed per page. (0 = disable pagination)
# order_by: Posts order. (Order by date descending by default)
index_generator:
path: ''
per_page: 5
order_by: -date
# Category & Tag
default_category: uncategorized
category_map:
tag_map:
# 日期格式/时间格式
date_format: YYYY-MM-DD
time_format: HH:mm:ss
# 分页设置
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page
#RSS订阅是设置
plugin: hexo-generator-feed
#Feed Atom
feed:
type: atom
path: atom.xml
limit: 20
# 发布部署地址设置
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repo: https://gitee.com/Sun_xy/blog.git
branch: master
# 博客搜索功能配置
search:
path: search.xml
field: post
format: html
limit: 10000
# 文章推荐功能,需要安装插件
recommended_posts:
server: https://api.truelaurel.com #后端推荐服务器地址
timeoutInMillis: 10000 #服务时长，超过此时长，则使用离线推荐模式
internalLinks: 3 #内部文章数量
externalLinks: 1 #外部文章数量
fixedNumber: false
autoDisplay: false #自动在文章底部显示推荐文章
excludePattern: []
titleHtml: 推荐文章
#自定义标题
网页样式篇
需要了解的
浏览器按 F12 即可，建议用Google Chrome 浏览器调试。
自定义样式文件 : themes\next\source\css\_custom\custom.styl
修改文件后直接保存，刷新页面即可查看效果。
修改文章页宽
打开themes/next/source/css/_variables/base.styl，找到以下字段并修改为合适的宽度：
- $content-desktop-large = 900px
+ $content-desktop-large = 1000px
修改小型代码块颜色
修改\themes\next\source\css\ _variables\base.styl文件，加入自定义颜色：
$black-deep = #222
$red = #ff2a2a
$blue-bright = #87daff
$blue = #0684bd
$blue-deep = #262a30
$orange = #fc6423
// 自定义的颜色
+ $my-code-foreground = #dd0055 // 用``围出的代码块字体颜色
+ $my-code-background = #eee // 用``围出的代码块背景颜色
修改$code-background和$code-foreground的值：
// Code & Code Blocks
$code-font-family = $font-family-monospace
$code-font-size = 13px
$code-font-size = unit(hexo-config('font.codes.size'), px) if hexo-config('font.codes.size') is a 'unit'
$code-border-radius = 4px
- $code-foreground = $black-light
- $code-background = $gainsboro
+ $code-background = $my-code-background
+ $code-foreground = $my-code-foreground
修改themes\next\source\css\_custom\custom.styl文件，加入自定义样式
// 文章``代码块的自定义样式
code {
margin: 0px 3px;
border: 1px solid #999;
}
修改链接文字样式
修改themes\next\source\css\_custom\custom.styl文件，加入自定义样式
//文章内链接文本样式
.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;
}
}
修改[Read More]按钮样式
修改themes\next\source\css\_custom\custom.styl文件，加入自定义样式
// [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%);
}
修改标签云（tagcloud）的颜色
修改themes/next/layout/page.swig文件，加入自定义样式:
- {{ tagcloud({min_font: 12, max_font: 30, amount: 300, color: true, start_color: '#ccc', end_color: '#111'}) }}
+ {{ tagcloud({min_font: 13, max_font: 31, amount: 1000, color: true, start_color: '#9733EE', end_color: '#FF512F'}) }}
修改对应参数值即可，参数说明见 Hexo官方文档
修改文章底部#号标签,改为图标
修改模板/themes/next/layout/_macro/post.swig，搜索 rel="tag">#，将 # 换成
头像设置圆形,停留旋转效果
修改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: 50%;
+ transition: 2s all;
}
//旋转
+ .site-author-image:hover{
+ transform: rotate(360deg);
+ }
隐藏底部"强力驱动"内容
修改themes/next/_config.yml文件,将powered和enable设置为false
# 页脚
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: user
icon: sun-o
# If not defined, will be used `author` from Hexo main config.
copyright:
# -------------------------------------------------------------
# Hexo link (Powered by Hexo).
- powered: true
+ powered: false
theme:
# Theme & scheme info link (Theme - NexT.scheme).
- enable: true
+ enable: false
# Version info of NexT after scheme info (vX.X.X).
version: true
文章末尾添加"本文结束"标记
修改在themes/next/layout/_macro/post.swig中，在wechat-subscriber.swig之前添加如下代码：
+ ---------------- The End ----------------
{% if theme.wechat_subscriber.enabled and not is_index %}
{% include 'wechat-subscriber.swig' %}
{% endif %}
文章末尾追加版权信息
增加版权有两种方式
- 修改主题
配置文件,搜索post_copyright
post_copyright:
- enable: false
+ enable: true
license: CC BY-NC-SA 3.0
license_url: https://creativecommons.org/licenses/by-nc-sa/3.0/
- 如果觉得默认不好看,则可以自定义样式,找到
themes/next/layout/_macro/post.swig，在footer之前添加如下代码(添加之前确保已添加样式)：
本文基于 知识共享署名-相同方式共享 4.0 国际许可协议发布
本文地址：{{ page.permalink }}
转载请注明出处，谢谢！
移动端显示 back-to-top 按钮和侧栏
具体手机显示可用手机访问我的博客
我的博客主题是Muse，主题的设计模版是 Muse 或 Mist，就可以直接在主题配置文件中配置：
修改主题配置themes/next/_config.yml
# Enable sidebar on narrow view
onmobile: true
如何调试手机样式页面，请参照下图
页面调试好之后将代码复制到:themes\next\source\css\_custom\custom.styl
具体可参考我的custom.styl样式文件
附上我的custom.styl样式文件
不建议全部复制粘贴使用，最好是F12打开，根据关键ID找到对应的样式，复制到自己的文件中
// Custom styles.
/*******************首页样式*****************************/
// 顶栏宽度
.container .header-inner {
width: 100%;
}
// .headband {
// height: 1.5px;
// background-image: linear-gradient(90deg, #F79533 0%, #F37055 15%, #EF4E7B 30%, #A166AB 44%, #5073B8 58%, #1098AD 72%, #07B39B 86%, #6DBA82 100%);
// }
// 页面顶部行高
.header {
line-height: 1.5;
}
// // 页面背景色
// .container {
// background-color: rgba(0, 0, 0, 0.75);
// }
// 页面留白更改
.header-inner {
padding-top: 35px;
padding-bottom: 0px;
}
.posts-expand {
padding-top: 50px;
}
.posts-expand .post-meta {
margin: 5px 0px 0px 0px;
}
.post-button {
margin-top: 0px;
}
// 顶栏宽度
.container .header-inner {
width: 100%;
}
// 渐变菜带，CSS代码copy自https://githubuniverse.com
// .site-meta {
// background-image: linear-gradient(90deg, #F79533 0%, #F37055 15%, #EF4E7B 30%, #A166AB 44%, #5073B8 58%, #1098AD 72%, #07B39B 86%, #6DBA82 100%);
// }
//缩略图指定宽度值显示。
img.img-topic {
width: 75%;
}
/*******************文章样式*****************************/
// 文章
.post {
margin-bottom: 50px;
padding: 45px 36px 36px 36px;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
background-color: rgb(255, 255, 255);
}
// 文章标题字体
.posts-expand .post-title {
font-size: 26px;
font-weight: 700;
}
// 文章标题动态效果
.posts-expand .post-title-link::before {
background-image: linear-gradient(90deg, #a166ab 0%, #ef4e7b 25%, #f37055 50%, #ef4e7b 75%, #a166ab 100%);
}
// 文章元数据（meta）留白更改
.posts-expand .post-meta {
margin: 10px 0px 20px 0px;
}
// 文章的描述description
.posts-expand .post-meta .post-description {
font-style: italic;
font-size: 14px;
margin-top: 30px;
margin-bottom: 0px;
color: #666;
}
// [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%);
}
// 去除在页面文章之间的分割线
.posts-expand .post-eof {
margin: 0px;
background-color: rgba(255, 255, 255, 0);
}
// 去除页面底部页码上面的横线
.pagination {
border: none;
margin: 0px;
}
// 文章内标题样式（左边的竖线）
.post-body h2, h3, h4, h5, h6 {
border-left: 4px solid rgb(161, 102, 171);
margin-left: -36px;
padding-left: 32px;
}
// 去掉图片边框
.posts-expand .post-body img {
border: none;
padding: 0px;
}
// 文章``代码块的自定义样式
code {
margin: 0px 3px;
border: 1px solid #999;
}
// 文章```代码块顶部样式
.highlight figcaption {
margin: 0em;
padding: 0.5em;
background: #eee;
border-bottom: 1px solid #e9e9e9;
}
.highlight figcaption a {
color: rgb(80, 115, 184);
}
// 文章```代码块diff样式
pre .addition {
background: #e6ffed;
}
pre .deletion {
background: #ffeef0;
}
//文章内链接文本样式
.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;
}
}
// 自定义的文章摘要图片样式
img.img-topic {
width: 100%;
}
/*************************侧栏样式****************************/
// 自定义的侧栏时间样式
#days {
display: block;
color: rgb(7, 179, 155);
font-size: 13px;
margin-top: 15px;
}
// 右下角侧栏按钮样式
.sidebar-toggle {
right: 10px;
bottom: 43px;
background-color: rgba(247, 149, 51, 0.75);
border-radius: 5px;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.35);
}
.page-post-detail .sidebar-toggle-line {
background: rgb(7, 179, 155);
}
// 右下角返回顶部按钮样式
.back-to-top {
line-height: 1.5;
right: 10px;
padding-right: 5px;
padding-left: 5px;
padding-top: 2.5px;
padding-bottom: 2.5px;
background-color: rgba(247, 149, 51, 0.75);
border-radius: 5px;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.35);
}
// 侧栏
.sidebar {
box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
background-color: rgba(0, 0, 0, 0.75);
}
.sidebar-inner {
margin-top: 30px;
}
// 侧栏顶部文字
.sidebar-nav li {
font-size: 15px;
font-weight: bold;
color: rgb(7, 179, 155);
}
.sidebar-nav li:hover {
color: rgb(161, 102, 171);
}
.sidebar-nav .sidebar-nav-active {
color: rgb(7, 179, 155);
border-bottom-color: rgb(161, 102, 171);
border-bottom-width: 1.5px;
}
.sidebar-nav .sidebar-nav-active:hover {
color: rgb(7, 179, 155);
}
// 侧栏站点作者名
.site-author-name {
display: none;
}
// 侧栏站点描述
.site-description {
letter-spacing: 5px;
font-size: 15px;
font-weight: bold;
margin-top: 15px;
margin-left: 13px;
color: rgb(243, 112, 85);
}
// 侧栏站点文章、分类、标签
.site-state {
line-height: 1.3;
margin-left: 12px;
}
.site-state-item {
padding: 0px 15px;
border-left: 1.5px solid rgb(161, 102, 171);
}
// 侧栏RSS按钮样式
.feed-link {
margin-top: 15px;
margin-left: 7px;
}
.feed-link a {
color: rgb(255, 255, 255);
border: 1px solid rgb(158, 158, 158) !important;
border-radius: 15px;
}
.feed-link a:hover {
background-color: rgb(161, 102, 171);
}
.feed-link a i {
color: rgb(255, 255, 255);
}
// 侧栏社交链接
.links-of-author {
margin-top: 0px;
}
// 侧栏友链标题
.links-of-blogroll-title {
margin-bottom: 10px;
margin-top: 15px;
color: rgba(7, 179, 155, 0.75);
margin-left: 6px;
font-size: 15px;
font-weight: bold;
}
// 侧栏超链接样式（友链的样式）
.sidebar a {
color: #ccc;
border-bottom: none;
}
.sidebar a:hover {
color: rgb(255, 255, 255);
}
// 自定义的侧栏时间样式
#days {
display: block;
color: rgb(7, 179, 155);
font-size: 13px;
margin-top: 15px;
}
// 侧栏目录链接样式
.post-toc ol a {
color: rgb(7, 179, 155);
border-bottom: 1px solid rgb(96, 125, 139);
}
.post-toc ol a:hover {
color: rgb(161, 102, 171);
border-bottom-color: rgb(161, 102, 171);
}
// 侧栏目录链接样式之当前目录
.post-toc .nav .active > a {
color: rgb(161, 102, 171);
border-bottom-color: rgb(161, 102, 171);
}
.post-toc .nav .active > a:hover {
color: rgb(161, 102, 171);
border-bottom-color: rgb(161, 102, 171);
}
/* 修侧栏目录bug，如果主题配置文件_config.yml的toc是wrap: true */
.post-toc ol {
padding: 0px 10px 5px 10px;
}
/* 侧栏目录默认全展开，已注释
.post-toc .nav .nav-child {
display: block;
}
*/
/************************移动端样式*******************************/
@media (max-width: 1023px) {
.container {
background-color: rgba(0, 0, 0, 0);
}
.sidebar {
// box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.feed-link {
display: none !important;
}
}
@media (max-width: 767px) {
.main {
padding-bottom: 120px;
}
.posts-expand {
margin: 0px;
padding-top: 10px;
}
.posts-expand .post-title {
font-size: 22px;
}
.posts-expand .post-meta {
font-size: 10px;
}
.post {
margin-bottom: 30px !important;
padding: 20px 15px 15px 15px !important;
}
.post-body h2, h3, h4, h5, h6 {
margin-left: -15px;
padding-left: 11px;
}
.posts-expand .post-tags {
margin-top: 10px;
}
.post-widgets {
margin-top: 10px;
}
.comments {
margin: 40px 0px 40px 0px !important;
}
.footer {
// box-shadow: 0px -5px 10px 0px rgba(0, 0, 0, 0.5);
}
}
.sidebar-active #sidebar-dimmer {
opacity: 0;
}
// 移动端左上角菜单按钮
.site-nav-toggle {
top: 35px;
left: 91px;
// background-color: #222;
}
.btn-bar {
background-color: rgb(255, 255, 255);
}
// 移动端菜单
@media (max-width: 767px) {
.menu {
text-align: center;
// box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.5);
}
.site-nav {
top: initial;
background-color: rgba(255, 255, 255, 0.75);
border-top: none;
border-bottom: none;
position: relative;
z-index: 1024;
}
}
//移动端顶部
@media (max-width: 767px) {
.site-title {
font-size: 28px !important;
letter-spacing: 0px !important;
}
.site-subtitle{
letter-spacing: 0px !important;
padding-bottom: 0px !important;
}
.site-meta {
// box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.5);
}
.menu .menu-item {
margin: 0px 10px !important;
}
}
进阶 高级功能配置
设置动态title
themes/next/source/js/src下创建dytitle.js：
var OriginTitile = document.title;
var titleTime;
document.addEventListener('visibilitychange', function () {
if (document.hidden) {
$('[rel="shortcut icon"]').attr('href', "/TEP.png");
document.title = 'w(ﾟДﾟ)w 出BUG啦！！！！';
clearTimeout(titleTime);
}
else {
$('[rel="shortcut icon"]').attr('href', "/favicon.png");
document.title = '♪(^∇^*)又好了。。。 ' + OriginTitile;
titleTime = setTimeout(function () {
document.title = OriginTitile;
}, 2000);
}
});
修改themes/next/layout/layout.swing,在 之前添加：
<script type="text/javascript" src="/js/src/dytitle.js"></script>
侧栏加入已运行的时间
修改文件:themes/next/layout/_custom/sidebar.swig，加入一下代码：
BirthDay=new Date("05/27/2017 15:13:14"); 日期修改为自己的
修改文件themes/next/layout/_macro/sidebar.swig
{# Blogroll #}
{% if theme.links %}
{{ theme.links_title }}
{% for name, link in theme.links %}
-
{{ name }}
{% endfor %}
+ {% include '../_custom/sidebar.swig' %}
{% endif %}
- {% include '../_custom/sidebar.swig' %}
点击出现爱心效果
在/themes/next/source/js/love.js下新建文件love.js，接着把该链接下的代码拷贝粘贴到love.js文件中
!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);
在\themes\next\layout\_layout.swig文件末尾添加：
{% include '_third-party/exturl.swig' %}