Article directory
-
- written in front
- Elementary Basic Functions
- Web page style
-
- need to know
- Modify article page width
- Modify small code block color
- Modify Link Text Style
- Modify the [Read More] button style
- Modify the color of the tag cloud (tagcloud)
- Modify the # label at the bottom of the article and change it to an icon
- The avatar is set in a circular shape, and the rotation effect stays
- Hide bottom "power drive" content
- Add "end of article" tag at the end of the article
- Append copyright information at the end of the article
- Display back-to-top button and sidebar on mobile
- Attached is my custom.styl style file
- Set dynamic title
- Add elapsed time to sidebar
- Click to show love effect
- Click on the avatar to return to the homepage of the blog
- Increase content sharing service
- Increase the article search function in the site
- Increase the article word count and reading time function
- Add site access statistics function
- Article top function
- LeanCloud counts the number of articles read
- Add a scoring system at the bottom of the article
- Add TopX page
- comment system
- About theme update and upgrade
- Advanced Search Engine Articles
written in front
This article is mainly about NexT theme configuration and page style optimization, referring to the articles and configuration files of many big guys.
The articles referenced in this article will directly mark the source in the form of a link to the original text, but Google has referenced too many, if there are any omissions, please point out.
During the entire blog optimization and configuration process in the early stage, many good blogs were collected, and I can post a friendly link later for everyone to take a look.
Subsequent optimization of the content of this article will be improved in the blog
During the reference process, you will need to go out of the wall to have a look, and provide a way, you can use it if you need it, the stairs
basic definition
There are two main configuration files in Hexo, both named _config.yml. Among them, one is located in the root directory of the site, which mainly contains the configuration of Hexo itself; the other is located in the theme directory, which is provided by the theme author and is mainly used to configure theme-related options.
For the convenience of description, in the following description, the former will be referred to as 站点配置文件, and the latter will be referred to as 主题配置文件.
~/hexo/_config.yml
~/hexo/themes/next/_config.yml
blog building
For how to build a blog, please refer to this [ Hexo builds its own personalized blog ]
Elementary Basic Functions
site configuration file
The most authoritative, of course, is to read the official Hexo documentation first.
Here is the config file I'm using:
# 站点设置
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> #自定义标题
Web page style
need to know
Just press F12 in the browser, it is recommended to use Google Chrome browser for debugging.
Custom style file:themes\next\source\css\_custom\custom.styl
After modifying the file, save it directly, and refresh the page to view the effect.
Modify article page width
Open themes/next/source/css/_variables/base.styl, find the following fields and modify to the appropriate width:
- $content-desktop-large = 900px
+ $content-desktop-large = 1000px
Modify small code block color
Modify \themes\next\source\css\ _variables\base.stylthe file and add custom colors:
$black-deep = #222
$red = #ff2a2a
$blue-bright = #87daff
$blue = #0684bd
$blue-deep = #262a30
$orange = #fc6423
// 自定义的颜色
+ $my-code-foreground = #dd0055 // 用``围出的代码块字体颜色
+ $my-code-background = #eee // 用``围出的代码块背景颜色
Modify the value $code-backgroundof $code-foregroundthe sum:
// 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
Modify themes\next\source\css\_custom\custom.stylthe file and add custom styles
// 文章``代码块的自定义样式
code {
margin: 0px 3px;
border: 1px solid #999;
}
Modify Link Text Style
Modify themes\next\source\css\_custom\custom.stylthe file and add custom styles
//文章内链接文本样式
.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;
}
}
Modify the [Read More] button style
Modify themes\next\source\css\_custom\custom.stylthe file and add custom styles
// [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%);
}
Modify the color of the tag cloud (tagcloud)
Modify themes/next/layout/page.swigthe file and add custom styles:
- {
{ 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'}) }}
Just modify the corresponding parameter value. For parameter description, see Hexo official document
Modify the # label at the bottom of the article and change it to an icon
Modify the template /themes/next/layout/_macro/post.swig, search rel="tag">#, replace # with<i class="fa fa-tag"></i>
The avatar is set in a circular shape, and the rotation effect stays
Modify themes\next\source\css\_common\components\sidebar\sidebar-author.styl, add the following code:
.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);
+ }
Hide bottom "power drive" content
Modify themes/next/_config.ymlthe file, set poweredand enabletofalse
# 页脚
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
Add "end of article" tag at the end of the article
Modify in themes/next/layout/_macro/post.swig, wechat-subscriber.swigadd the following code before:
+ <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 %}
Append copyright information at the end of the article
There are two ways to increase copyright
- modify theme
配置文件, searchpost_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/
- If you think the default is not good-looking, you can customize the style, find it
themes/next/layout/_macro/post.swig,footerand add the following code before it (make sure the style has been added before adding):
<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>
Display back-to-top button and sidebar on mobile
The specific mobile phone shows that mobile phones can be used to visit my blog
My blog theme is Muse, and the design template of the theme is Muse or Mist, which can be configured directly in the theme configuration file:
Modify theme configurationthemes/next/_config.yml
# Enable sidebar on narrow view
onmobile: true
How to debug the mobile style page, please refer to the figure below
After the page is debugged, copy the code to:themes\next\source\css\_custom\custom.styl
For details, please refer to my custom.styl style file
Attached is my custom.styl style file
It is not recommended to copy and paste all of them. It is best to open it with F12, find the corresponding style according to the key ID, and copy it to your own file
// 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;
}
}
Advanced advanced function configuration
Set dynamic title
themes/next/source/js/srcCreated under 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);
}
});
Modify themes/next/layout/layout.swing, add before:
<script type="text/javascript" src="/js/src/dytitle.js"></script>
Add elapsed time to sidebar
Modify the file: themes/next/layout/_custom/sidebar.swig, add the following code:
BirthDay=new Date("05/27/2017 15:13:14");Change the date to your own
<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>
modify filethemes/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' %}
Click to show love effect
/themes/next/source/js/love.jsCreate a new file below love.js, then copy and paste the code under the link into love.jsthe file
!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.swigAdd at the end of the file:
{% include '_third-party/exturl.swig' %}
</body>
</html>
+ <!-- 页面点击小红心 -->
+ <script type="text/javascript" src="/js/src/love.js"></script>
Click on the avatar to return to the homepage of the blog
Modify the file /themes/next/layout/_macro/sidebar.swigand add the following code:
+ <a href="/">
<img class="site-author-image" itemprop="image"
src="{
{ url_for( theme.avatar | default(theme.images + '/avatar.gif') ) }}"
alt="{
{ theme.author }}" />
+ </a>
Increase content sharing service
Modify themes/next/_config.ymlthe theme configuration file, search for keywords needmoreshare2, find the following code and make the following modifications:
# 文章分享功能
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
Regarding the failure to load the WeChat QR code image being shared, thanks to Qcmoke for his solution
In the next 5.1.4 version, WeChat cannot load the QR code. It should be that the packaged WeChat sharing link is invalid. I
https://github.com/iissnan/hexo-theme-nextinstalled it through the old version of the warehouse, so I have this problem, but the new version of next does not have this problem. The new version repository has been moved tohttps://github.com/theme-next
Enter the following command:
rm -rf themes/next/source/lib/needsharebutton
git clone https://github.com/theme-next/theme-next-needmoreshare2 themes/next/source/lib/needsharebutton
Increase the article search function in the site
To install the plugin hexo-generator-searchdb, execute the following command:
npm install hexo-generator-searchdb --save
Modify hexo/_config.ymlthe site configuration file and add the following code at the end:
search:
path: search.xml
field: post
format: html
limit: 10000
Modify themes/next/_config.ymlthe theme configuration file, search keywords local_searchto find the following code, enableset it as truefollows:
local_search:
enable: true
Increase the article word count and reading time function
To install the plugin hexo-wordcount, execute the following command:
npm install hexo-wordcount --save
Modify themes/next/_config.ymlthe theme configuration file, search for keywords post_wordcount, and modify as follows:
post_wordcount:
item_text: true
wordcount: true #单篇文章字数
min2read: true #单篇阅读时长
totalcount: true #站点总字数
separated_meta: true
Add site access statistics function
The next theme integrates third-party access statistics plug-ins by default.
Modify themes/next/_config.ymlthe theme configuration file and search for keywords 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:
Currently, the domain name "dn-lbstatics.qbox.me" has expired, please change the domain name to "busuanzi.ibruce.info"! Therefore, you may need to modify > the following file related information:
Modify themes/next/layout/_third-party/analytics/busuanzi-counter.swigthe file, find dn-lbstatics.qbox.me, and modify the code:
> <script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
>
Article top function
Remove plugins installed by default:
npm uninstall hexo-generator-index --save
Install new plugins:
npm install hexo-generator-index-pin-top --save
Finally, when editing related articles with this requirement, add a line to Front-matter (the area separated by - at the top of the file):
top: true
If you pin multiple articles, how do you control the order? Set the value of top (bigger in front), for example:
# Post a.md
title: a
top: 1
# Post b.md
title: b
top: 10
Article b is displayed before article a.
LeanCloud counts the number of articles read
It has been provided by the big guys. For details, please click on the Hexo blog-NexT topic: Using leancloud for page visitor statistics
Add a scoring system at the bottom of the article
I am a porter, please poke into Ultra Deep Optimization - Section 5.6 for details
Add TopX page
I'm lazy, please poke into the ultra-deep optimization-5.8 section for details
comment system
If you have already registered above ( click hereLeanCloud if you have not registered ), then just set the and and modify the theme configuration file:appidappkey
# 评论系统
# 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
About theme update and upgrade
For upgrading the theme, we need to reconfigure the theme configuration file, so do we have to do this every time we upgrade? Super troublesome!
The suggestion given by the author of NexT is to use Data Files . For details, please enter Theme configurations using Hexo data files #328
Post the following summary:
- Please make sure that the Hexo version you are using is above 3
- Create a new next.yml file in the source/_data directory of the site (the _data directory may need to be created)
- Migrate the configuration in the site configuration file and theme configuration file to next.yml
All theme-related configurations can be written to the next.yml file. The _config.yml in the theme directory does not need to be modified.
If you are newly installed, you can copy the entire content of the theme's _config.yml and then modify it
If you have written the configuration in the _config.yml of the site before, cut the theme-related configuration in this file to next.yml; at the same time, copy the configuration in _config.yml under the theme, which is equivalent to all Merged into next.yml.
Every time you modify _next.yml, you need to restart the hexo server to take effect.
Advanced Search Engine Articles
When blog articles are written, no one cares about them because search engines don't index our articles
If you want to include articles in search engines, you must first have your own domain name. How to purchase a domain name can refer to this article
Refer to this [Domain Binding Article] the configuration of the boss
For how to optimize, please refer directly to this [Search Optimization] Hexo-next Baidu and Google search optimization master configuration
reference:
- 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