文章目录
-
- 写在前面
- 初级 基础功能篇
- 网页样式篇
-
- 需要了解的
- 修改文章页宽
- 修改小型代码块颜色
- 修改链接文字样式
- 修改[Read More]按钮样式
- 修改标签云(tagcloud)的颜色
- 修改文章底部#号标签,改为图标
- 头像设置圆形,停留旋转效果
- 隐藏底部"强力驱动"内容
- 文章末尾添加"本文结束"标记
- 文章末尾追加版权信息
- 移动端显示 back-to-top 按钮和侧栏
- 附上我的custom.styl样式文件
- 设置动态title
- 侧栏加入已运行的时间
- 点击出现爱心效果
- 点击头像回到博客首页
- 增加内容分享服务
- 增加站内文章搜索功能
- 增加文章字数统计及阅读时常功能
- 增加站点访问统计功能
- 文章置顶功能
- LeanCloud统计文章阅读数
- 文章底部添加打分系统
- 添加 TopX 页面
- 评论系统
- 关于主题更新升级
- 进阶 搜索引擎篇
写在前面
本文主要是NexT主题配置以及页面的样式优化,参考了许多大佬的文章以及配置文件。
本文参考的文章都会直接给出原文链接的形式标记出处,但 Google 参考了实在太多太多了,如有遗漏,欢迎指出。
前期整个博客优化配置过程中收藏了许多很好的博客,回头可以贴个友情链接大家可以去看看。
本文内容后续的优化会在博客中完善
在参考过程中会需要出墙看一看,提供一个方式,需要可以用一下,楼梯
基本定义
在 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: <h1>推荐文章</h1> #自定义标题
网页样式篇
需要了解的
浏览器按 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">#
,将 # 换成<i class="fa fa-tag"></i>
头像设置圆形,停留旋转效果
修改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
之前添加如下代码:
+ <div style="text-align:center;color: #ccc;font-size:14px;">---------------- The End ----------------</div>
{% if theme.wechat_subscriber.enabled and not is_index %}
<div>
{% include 'wechat-subscriber.swig' %}
</div>
{% 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
之前添加如下代码(添加之前确保已添加样式):
<div>
<p id="div-border-left-red">
<b>本文基于<a target="_blank" title="Creative Commons Attribution-ShareAlike 4.0 International (CC BY-SA 4.0)" href="http://creativecommons.org/licenses/by-sa/4.0/"> 知识共享署名-相同方式共享 4.0 </a>国际许可协议发布</b><br/>
<span>
<b>本文地址:</b><a href="{
{ url_for(page.path) }}" title="{
{ page.title }}">{
{ page.permalink }}</a><br/><b>转载请注明出处,谢谢!</b>
</span>
</p>
</div>
移动端显示 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");
日期修改为自己的
<div id="days"></div>
<script>
function show_date_time(){
window.setTimeout("show_date_time()",1000);
BirthDay=new Date("05/27/2017 15:13:14");
today=new Date();
timeold=(today.getTime()-BirthDay.getTime());
sectimeold=timeold/1000
secondsold=Math.floor(sectimeold);
msPerDay=24*60*60*1000
e_daysold=timeold/msPerDay
daysold=Math.floor(e_daysold);
e_hrsold=(e_daysold-daysold)*24;
hrsold=setzero(Math.floor(e_hrsold));
e_minsold=(e_hrsold-hrsold)*60;
minsold=setzero(Math.floor((e_hrsold-hrsold)*60));
seconds=setzero(Math.floor((e_minsold-minsold)*60));
document.getElementById('days').innerHTML="已运行"+daysold+"天"+hrsold+"小时"+minsold+"分"+seconds+"秒";
}
function setzero(i){
if (i<10)
{i="0" + i};
return i;
}
show_date_time();
</script>
修改文件themes/next/layout/_macro/sidebar.swig
{# Blogroll #}
{% if theme.links %}
<div class="links-of-blogroll motion-element {
{ "links-of-blogroll-" + theme.links_layout | default('inline') }}">
<div class="links-of-blogroll-title">
<i class="fa fa-fw fa-{
{ theme.links_icon | default('globe') | lower }}"></i>
{
{ theme.links_title }}
<i class="fa fa-fw fa-{
{ theme.links_icon | default('globe') | lower }}"></i>
</div>
<ul class="links-of-blogroll-list">
{% for name, link in theme.links %}
<li class="links-of-blogroll-item">
<a href="{
{ link }}" title="{
{ name }}" target="_blank">{
{ name }}</a>
</li>
{% endfor %}
</ul>
+ {% include '../_custom/sidebar.swig' %}
</div>
{% 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' %}
</body>
</html>
+ <!-- 页面点击小红心 -->
+ <script type="text/javascript" src="/js/src/love.js"></script>
点击头像回到博客首页
修改文件/themes/next/layout/_macro/sidebar.swig
,增加以下代码:
+ <a href="/">
<img class="site-author-image" itemprop="image"
src="{
{ url_for( theme.avatar | default(theme.images + '/avatar.gif') ) }}"
alt="{
{ theme.author }}" />
+ </a>
增加内容分享服务
修改themes/next/_config.yml
主题配置文件,搜索关键字needmoreshare2
,找到如下代码并做以下修改:
# 文章分享功能
needmoreshare2:
enable: true
postbottom:
enable: true
options:
iconStyle: default
boxForm: horizontal
position: bottomCenter
networks: Weibo,Wechat,Douban,QQZone,Twitter,Facebook
float:
enable: true
options:
iconStyle: default
boxForm: vertical
position: topRight
networks: Weibo,Wechat,Douban,QQZone,Twitter,Facebook
关于分享中的微信二维码图片加载失败,感谢Qcmoke大佬的解决方案
next 5.1.4版本中微信加载不出二维码,应该是封装好的微信分享链接失效了。我是通过老版本的仓库
https://github.com/iissnan/hexo-theme-next
安装的,所以有这个问题,而新版本的next是没有这个问题的。新版本仓库已经搬迁到了https://github.com/theme-next
输入以下命令:
rm -rf themes/next/source/lib/needsharebutton
git clone https://github.com/theme-next/theme-next-needmoreshare2 themes/next/source/lib/needsharebutton
增加站内文章搜索功能
安装插件hexo-generator-searchdb
,执行以下命令:
npm install hexo-generator-searchdb --save
修改hexo/_config.yml
站点配置文件,末尾新增以下代码:
search:
path: search.xml
field: post
format: html
limit: 10000
修改themes/next/_config.yml
主题配置文件,搜索关键字local_search
找到如下代码,将enable
设置为true
,如下:
local_search:
enable: true
增加文章字数统计及阅读时常功能
安装插件hexo-wordcount
,执行以下命令:
npm install hexo-wordcount --save
修改themes/next/_config.yml
主题配置文件,搜索关键字post_wordcount
,修改如下:
post_wordcount:
item_text: true
wordcount: true #单篇文章字数
min2read: true #单篇阅读时长
totalcount: true #站点总字数
separated_meta: true
增加站点访问统计功能
next主题默认集成了第三方访问统计插件。
修改themes/next/_config.yml
主题配置文件,搜索关键字busuanzi_count
:
# 不蒜子统计,用于在页脚显示总访客数和总浏览量,将 false 改为 true 就能直接使用
busuanzi_count:
# count values only if the other configs are false
enable: true
# custom uv span for the whole site
site_uv: true
site_uv_header: <i class="fa fa-user"></i>
site_uv_footer:
# custom pv span for the whole site
site_pv: true
site_pv_header: <i class="fa fa-eye"></i>
site_pv_footer:
# custom pv span for one page only
# 页面浏览量,不建议开启,建议用上面的 leancloud_visitors
# 首先 leancloud 更稳定,其次 leancloud 便于管理
# 最后,可以利用 leancloud 的 api 建立 TopX 页面
page_pv: false
page_pv_header: <i class="fa fa-eye"></i>
page_pv_footer:
目前不蒜子『dn-lbstatics.qbox.me』域名过期,更换域名到『busuanzi.ibruce.info』!故你可能需要修改>以下文件相关信息:
修改themes/next/layout/_third-party/analytics/busuanzi-counter.swig
文件,找到dn-lbstatics.qbox.me
,修改代码:
> <script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
>
文章置顶功能
移除默认安装的插件:
npm uninstall hexo-generator-index --save
安装新插件:
npm install hexo-generator-index-pin-top --save
最后编辑有这需求的相关文章时,在Front-matter(文件最上方以—分隔的区域)加上一行:
top: true
如果你置顶了多篇,怎么控制顺序呢?设置top的值(大的在前面),比如:
# Post a.md
title: a
top: 1
# Post b.md
title: b
top: 10
文章 b 便会显示在文章 a 的前面。
LeanCloud统计文章阅读数
已有大佬提供,具体详情请戳进 Hexo博客-NexT主题:使用leancloud进行页面访客统计
文章底部添加打分系统
我是一个搬运工,具体详情请戳进 超深度优化-5.6小节
添加 TopX 页面
懒了懒了,具体详情请戳进 超深度优化-5.8小节
评论系统
如果上面你已经注册了LeanCloud
(没有注册的点这里),那么只要把appid
和appkey
设置下即可,修改主题配置文件:
# 评论系统
# Valine.
# You can get your appid and appkey from https://leancloud.cn
# more info please open https://valine.js.org
valine:
enable: true
appid: #your id
appkey: #your key
notify: false # mail notifier , https://github.com/xCss/Valine/wiki
verify: false # Verification code
placeholder: Just go go # comment box placeholder
avatar: mm # gravatar style
guest_info: nick,mail,link # custom comment header
pageSize: 10 # pagination size
关于主题更新升级
对于升级主题,我们需要重新配置主题配置文件,那么每次升级都要这么干吗?超麻烦!
NexT作者给我们的建议就是使用Data Files,具体详情请戳进 Theme configurations using Hexo data files #328
贴出以下总结:
- 请先确保你所使用的 Hexo 版本在 3 以上
- 在站点的 source/_data 目录下新建 next.yml 文件(_data目录可能需要新建)
- 迁移站点配置文件和主题配置文件中的配置到 next.yml 中
所有主题相关的配置都可以写到 next.yml 文件中。 主题目录下的 _config.yml 可以不用做任何修改。
若你是新安装的,可以将主题的 _config.yml 里面的内容整个拷贝过去,然后修改即可
若是之前有将配置写在站点的 _config.yml 里,把这个文件里主题相关的配置剪切到 next.yml 里去;同时将主题下 _config.yml 里面的配置也拷贝过去,相当于是全部合并到 next.yml 中去了。
每次修改 _next.yml 需要重启 hexo server 才能生效。
进阶 搜索引擎篇
博客文章写好之后总是无人问津,那是因为搜索引擎并未收录我们的文章
想要搜索引擎收录文章,首先得拥有自己的域名,如何购买域名可参考这篇文章
参考这篇【域名绑定篇】大佬的配置
关于如何优化请直接参考这篇【搜索优化】Hexo-next百度和谷歌搜索优化大佬的配置
参考:
- http://yangbingdong.com/2017/build-blog-hexo-advanced/
- https://reuixiy.github.io/technology/computer/computer-aided-art/2017/06/09/hexo-next-optimization.html
- http://www.ehcoo.com/seo.html
- https://www.qcmoke.site/hexo_next.html