使用hexo和next主题搭建GitHub博客

安装node.js

node.js 官网下载, 相应系统位数的软件包. 可以选择LTS长期支持版, 或者Current当前版本. 我这里选择的是Windows 64Current版本.

双击运行安装程序, 会提示please wait while the setup wizard prepares to guide you through the installation., 等待一会.

之后一路点击next就行了. 注意:记得勾选Add to PATH, 一般使用默认配置就行了. 授予管理员权限, 等待安装完毕.

测试是否安装成功

使用Win + R键, 在运行弹出框中, 输入cmd回车, 就能进入命令提示符, 输入node -v, 会输出版本号.

安装hexo

命令提示符中输入:

# 安装hexo, 执行完成后, 可能会显示WARN, 这个其实无关大局, 可以忽略.
npm install hexo-cli -g # blog是你存放博客的目录, hexo会初始化一些相关的数据
hexo init blog # 进入目录
cd blog # 安装一些相关的依赖
npm install # 起一个hexo服务, 可以在本地预览效果
hexo server # 会有类似的提示, 在浏览器中输入http://localhost:4000/, 就能访问
# 动态刷新, 当修改了文件时, 可以即时的响应.
# 使用Ctrl + C 结束服务
INFO Start processing
INFO Hexo is running at http://localhost:4000/. Press Ctrl+C to stop. # 清除缓存
hexo clean

配置hexo多机器更新博客

安装Git工具

Windows官网 下载对应系统位数的安装包, 之后点击安装.

Debian/Ubuntu: sudo apt install git -y.

Fedora/CentOS: sudo yum install git -y

配置Github

注册Github的账号, 在登录后的首页上点击New repository, 创建新的仓库.

Repository name用户名.github.io, 我这里是zZhaolei.github.io,

Description是可选的描述信息. 选择Public, 勾选Initialize this repository with a README, 这样就有了第一次提交. 点击Create repository, 完成创建.

点击clone or download, 复制HTTPS链接, 在系统上使用git clone https://github.com/xxxxxxxx.git, 然后进入clone下来的目录, 使用git branch查看当前的所有分支.

创建一个hexo分支用来存放源码, git branch hexo.

使用git checkout hexo, 切换分支到hexo.

blog目录下的所有文件复制到hexo分支下.

themes/landscape删除, 当git add .的时候会报错. 或者把themes/landscape/.git目录删除.

注意修改.gitignore文件, 将其中的node_modulespublic

新建一篇博客

hexo new post "hello world"

生成部署

hexo d -g

配置必要的信息

配置Deployment

注意: 缩进都是两个空格, 冒号后面一定要有一个空格

_config.yml文件中, 找到Deployment项, 按照如下格式修改:

deploy:
type: git
repo: https://github.com/zZhaoLei/zZhaolei.github.io.git
branch: master

branchhexo部署的分支.

配置title

_config.yml文件中, 找到Site, 更改title的值为xx的博客, 随意写, 这个是浏览器的标签上显示的内容, 更改author作者. 设置languagezh-Hans

使用next主题

在项目根目录下, 使用

~~ git submodule add https://github.com/iissnan/hexo-theme-next themes/next ~~

添加git 子模块.

git clone https://github.com/iissnan/hexo-theme-next themes/next

删除themes/next/下面的.git.github.gitignore.gitattribute

修改项目根目录的_config.yml, 将themes的值改为next.

设置主题信息

  • 切换布局:

    修改themes/next/_config.yml中的scheme字段的值, 有四种字段可以选择, 根据自己的喜欢选择, 我选择的是scheme: Muse.

  • 设置菜单:

    打开themes/next/_config.yml文件,找到menu字段. 根据自己的需要修改响应的值.

  • 菜单项显示中文:

    修改themes/next/languages/下的对应的.yml文件, 我之前将语言设置为了zh-Hans, 所以这里选择zh-Hans.yml. 修改menu下的属性值.

  • 设置侧栏:

    修改themes/next/_config.yml中的sidebar字段的position值, 有leftright.

  • 设置头像:

    themes/next/_config.yml中添加新的字段avatar, 值设置成头像的链接地址. 其中, 头像的链接地址可以是: http://example.com/avtar.png, 本地文件: 放置在source/images/目录下配置为: avatar: /images/avatar.png.

个性化配置

参考next官方配置文档

在右上角或者左上角实现fork me on github

github-ribbons或者github-corners, 找到自己

喜欢的样式, 复制右侧选框中的所有内容, 如下:

<a href="https://your-url" 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>

然后粘贴刚才复制的代码到themes/next/layout/_layout.swig文件中(放在<div class="headband"></div>的下面), 并把href改为你的github地址(个人主页)

小屏幕不显示fork me on github

修改文件hexo博客根目录themes\next\layout\_layout.swig找到如下代码块:

<html class="{{ html_class | lower }}">
<head>
{% include '_partials/head.swig' %}
<title>{% block title %}{% endblock %}</title>

添加如下代码:

  <style>
.forkme{
display: none;
}
@media (min-width: 768px) {
.forkme{
display: inline;
}
}
</style>

在之前添加的fork me on github代码块上套上div加上class就行了,如下

<div class="forkme">
<a href="https://https://github.com/zZhaoLei" 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>
</div>

添加RSS

然后安装Hexo插件:(这个插件会放在node_modules这个文件夹里)

在项目根目录下, 安装插件, 这个插件会放在node_modules这个文件夹里, 在package.json中会有备份.

npm install --save hexo-generator-feed

然后打开项目的配置文件_config.yml, 在Extensions字段后追加如下内容(注意冒号后面要有空格):

plugins: hexo-generate-feed

然后打开themes/next/_config.yml, 找到rss字段, 在rss: 后面添加/atom.xml, 注意冒号后面有个空格.

添加动态背景(粒子效果)

修改themes/next/layout/_layout.swig, 在</body>之前添加代码(注意不要放在</head>的后面), 一般在倒数第二行.

添加代码如下:

{% if theme.canvas_nest %}
<script type="text/javascript" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js"></script>
{% endif %}

修改themes/next/_config.yml中的canvas_nest字段, 将值改为true.

如果觉得默认的线条太多的话, 可以将上一步代码代为:

{% if theme.canvas_nest %}
<script type="text/javascript" color="0,0,255" opacity='0.7' zIndex="-2" count="99" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js"></script>
{% endif %}
  • 配置项说明
   color:线条颜色, 默认: '0,0,0'; 三个数字分别为(R,G,B)
opacity: 线条透明度(0~1), 默认: 0.5
count: 线条的总数量, 默认: 150
zIndex: 背景的z-index属性, css属性用于控制所在层的位置, 默认: -1

实现点击出现桃心效果

点击跳转并复制这个js的内容, 新建lova.js, 并将内容粘贴进去.

保存在themes/next/source/js/src中, 然后打开themes\next\layout\_layout.swig, 在</body>之前添加以下代码<script type="text/javascript" src="/js/src/love.js"></script>.

修改文章底部的那个带#号的标签

修改模板themes/next/layout/_macro/post.swig,搜索rel="tag">#, 将#换成<i class="fa fa-tag"></i>

博文压缩

在项目的根目录下执行

npm install gulp -g
npm install gulp-minify-css gulp-uglify gulp-htmlmin gulp-htmlclean gulp --save

新建gulpfile.js, 保存在根目录下, 添加以下内容:

var gulp = require('gulp');
var minifycss = require('gulp-minify-css');
var uglify = require('gulp-uglify');
var htmlmin = require('gulp-htmlmin');
var htmlclean = require('gulp-htmlclean');
// 压缩 public 目录 css
gulp.task('minify-css', function() {
return gulp.src('./public/**/*.css')
.pipe(minifycss())
.pipe(gulp.dest('./public'));
});
// 压缩 public 目录 html
gulp.task('minify-html', function() {
return gulp.src('./public/**/*.html')
.pipe(htmlclean())
.pipe(htmlmin({
removeComments: true,
minifyJS: true,
minifyCSS: true,
minifyURLs: true,
}))
.pipe(gulp.dest('./public'))
});
// 压缩 public/js 目录 js
gulp.task('minify-js', function() {
return gulp.src('./public/**/*.js')
.pipe(uglify())
.pipe(gulp.dest('./public'));
});
// 执行 gulp 命令时执行的任务
gulp.task('default', [
'minify-html','minify-css','minify-js'
]);

在生成博客时执行hexo g && gulp就会根据gulpfile.js中的配置, 对public目录中的静态资源文件进行压缩.

修改代码块自定义样式

打开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;
}

侧边栏社交小图标设置

打开themes/next/_config.yml, 搜索social:, 在其中添加自己的链接, 如下.

social:
GitHub: https://github.com/yourname || github
E-Mail: mailto:yourname@gmail.com || envelope

搜索social_icons:, 在图标库找自己喜欢的小图标, 并将名字复制在如下位置, 保存即可.

social_icons:
enable: true
icons_only: false
transition: false
GitHub: spinner

spinner一个小绿点.

主页文章添加阴影效果

打开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);
}

在网站底部加上访问量

打开themes/next/layout/_partials/footer.swig文件, 在copyright前(一般是第一行之前<div class="copyright">之前)加上:

<script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>

然后在<div class="powered-by">里添加:

<div class="powered-by">
<i class="fa fa-user-md"></i><span id="busuanzi_container_site_uv">
本站访客数: <span id="busuanzi_value_site_uv"></span>
</span>
</div>

在这里有两中不同计算方式的统计代码:

  • pv的方式,单个用户连续点击n篇文章,记录n次访问量
<span id="busuanzi_container_site_pv">
本站总访问量: <span id="busuanzi_value_site_pv"></span>次
</span>
  • uv的方式,单个用户连续点击n篇文章,只记录1次访客数
<span id="busuanzi_container_site_uv">
本站访客数: <span id="busuanzi_value_site_uv"></span>
</span>

添加热度

next主题集成leanCloud, 打开themes/next/layout/_macro/post.swig, 搜索leancloud-visitors-count

leancloud-visitors-countspan标签下添加新的<span>℃</span>.

再打开themes/next/languages/zh-Hans.yml, 将visitors的值改为热度.

网站底部字数统计

在项目根目录下, 执行:

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

EasyIcon中找一张(32*32)的ico图标, 或者去别的网站下载或者制作, 并将图标名称改为favicon.ico, 然后把图标放在themes/next/source/images里, 并且修改主题配置文件:

# Put your favicon.ico into `hexo-site/source/` directory.
favicon: /favicon.ico

实现统计功能

在项目根目录下安装:

npm install hexo-wordcount --save

然后在themes/next/_config.yml中配置:

# Post wordcount display settings
# Dependencies: https://github.com/willin/hexo-wordcount
post_wordcount:
item_text: true
wordcount: true
min2read: true

添加顶部加载条

打开themes/next/layout/_partials/head.swig文件, 在<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>之后, 添加:

<script src="//cdn.bootcss.com/pace/1.0.2/pace.min.js"></script>
<link href="//cdn.bootcss.com/pace/1.0.2/themes/pink/pace-theme-flash.css" rel="stylesheet">

但是, 默认的是粉色的, 要改变颜色可以在themes/next/layout/_partials/head.swig文件中添加如下代码(接在刚才代码的后面):

<style>
.pace .pace-progress {
background: #1E92FB; /*进度条颜色*/
height: 3px;
}
.pace .pace-progress-inner {
box-shadow: 0 0 10px #1E92FB, 0 0 5px #1E92FB; /*阴影颜色*/
}
.pace .pace-activity {
border-top-color: #1E92FB; /*上边框颜色*/
border-left-color: #1E92FB; /*左边框颜色*/
}
</style>

也可以修改themes/next/_config.ymlpace的值为true, 修改pace_theme为你想要的样式.

在文章底部增加版权信息

在目录themes/next/layout/_macro/下添加my-copyright.swig, 内容如下:

{% if page.copyright %}
<div class="my_post_copyright">
<script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script> <!-- JS库 sweetalert 可修改路径 -->
<script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<p><span>本文标题:</span><a href="{{ url_for(page.path) }}">{{ page.title }}</a></p>
<p><span>文章作者:</span><a href="/" title="访问 {{ theme.author }} 的个人博客">{{ theme.author }}</a></p>
<p><span>发布时间:</span>{{ page.date.format("YYYY年MM月DD日 - HH:MM") }}</p>
<p><span>最后更新:</span>{{ page.updated.format("YYYY年MM月DD日 - HH:MM") }}</p>
<p><span>原始链接:</span><a href="{{ url_for(page.path) }}" title="{{ page.title }}">{{ page.permalink }}</a>
<span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="{{ page.permalink }}" aria-label="复制成功!"></i></span>
</p>
<p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license" href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank" title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0 国际</a> 转载请保留原文链接及作者。</p>
</div>
<script>
var clipboard = new Clipboard('.fa-clipboard');
$(".fa-clipboard").click(function(){
clipboard.on('success', function(){
swal({
title: "",
text: '复制成功',
icon: "success",
showConfirmButton: true
});
});
});
</script>
{% endif %}

在目录themes/next/source/css/_common/components/post/下添加my-post-copyright.styl, 内容如下:

.my_post_copyright {
width: 85%;
max-width: 45em;
margin: 2.8em auto 0;
padding: 0.5em 1.0em;
border: 1px solid #d3d3d3;
font-size: 0.93rem;
line-height: 1.6em;
word-break: break-all;
background: rgba(255,255,255,0.4);
}
.my_post_copyright p{margin:0;}
.my_post_copyright span {
display: inline-block;
width: 5.2em;
color: #b5b5b5;
font-weight: bold;
}
.my_post_copyright .raw {
margin-left: 1em;
width: 5em;
}
.my_post_copyright a {
color: #808080;
border-bottom:0;
}
.my_post_copyright a:hover {
color: #a3d2a3;
text-decoration: underline;
}
.my_post_copyright:hover .fa-clipboard {
color: #000;
}
.my_post_copyright .post-url:hover {
font-weight: normal;
}
.my_post_copyright .copy-path {
margin-left: 1em;
width: 1em;
+mobile(){display:none;}
}
.my_post_copyright .copy-path:hover {
color: #808080;
cursor: pointer;
}

修改themes/next/layout/_macro/post.swig, 在代码:

{#####################}
{### END POST BODY ###}
{#####################}

之前添加如下代码:

<div>
{% if not is_index %}
{% include 'my-copyright.swig' %}
{% endif %}
</div>

修改themes/next/source/css/_common/components/post/post.styl文件, 在最后一行增加代码:

@import "my-post-copyright;"

如果要在该博文下面增加版权信息的显示, 需要在Markdown中增加copyright: true的设置.

如果你觉得每次都要输入copyright: true很麻烦的话, 那么在scaffolds/post.md文件中添加:

---
title: {{ title }}
date: {{ date }}
tags:
categories:
copyright: true
---

这样每次hexo new "你的内容"之后, 生成的.md文件会自动把copyright: 加到里面去.

隐藏网页底部powered By Hexo / 强力驱动

打开themes/next/layout/_partials/footer.swig,

将下面的内容

<div class="powered-by">{##}{{ __('footer.powered', '<a class="theme-link" target="_blank" href="https://hexo.io">Hexo</a>') }}{##}</div>

使用<!-- <div>xxx</div> -->隐藏之间的代码即可, 或者直接删除.

隐藏网页底部主题链接

打开themes/next/layout/_partials/footer.swig文件, 将{% if theme.footer.theme.enable %}...{% endif %}注释.

修改网页底部的桃心

打开themes/next/layout/_partials/footer.swig, 找到:

<span class="with-love">
<i class="fa fa-{{ theme.footer.icon }}"></i>
</span>

然后在图标库 找到自己喜欢的图标, 然后修改<i class="fa fa-{{ theme.footer.icon }}"></i>就可以了.

文章加密访问

打开themes/next/layout/_partials/head.swig文件, 在以下位置插入这样一段代码:

<script>
(function(){
if('{{ page.password }}'){
if (prompt('请输入文章密码') !== '{{ page.password }}'){
alert('密码错误!');
history.back();
}
}
})();
</script>

然后在文章的--- ---中添加一个password: password, 后一个password为密码.

添加jiathis分享

  • JiaThis关闭了分享服务

    themes/next/_config.yml中, 将jiathis的值改为true

    如果你想自定义样式的话, 打开themes/next/layout/_partials/share/jiathis.swig, 修改以下部分就可以了

    <div class="jiathis_style">
    <span class="jiathis_txt">分享到:</span>
    <a class="jiathis_button_fav">收藏夹</a>
    <a class="jiathis_button_copy">复制网址</a>
    <a class="jiathis_button_email">邮件</a>
    <a class="jiathis_button_weixin">微信</a>
    <a class="jiathis_button_qzone">QQ空间</a>
    <a class="jiathis_button_tqq">腾讯微博</a>
    <a class="jiathis_button_douban">豆瓣</a>
    <a class="jiathis_button_share">一键分享</a>

使用百度分享

themes/next/_config.yml中, 添加或者修改字段baidushare, 值为true.

修改字体大小

打开themes/next/source/css/_variables/base.styl文件, 将$font-size-base改成16px, 如下所示:

$font-size-base = 16px

打赏

微信生成二维码, 支付宝生成二维码

命名要和Reward中的一样.

将图片移动到themes/next/source/images/下面, 修改文件themes/next/_config.yml中的字段:

# Reward
reward_comment: 坚持原创技术分享,您的支持将鼓励我继续创作!
wechatpay: /images/wechatpay.jpg
alipay: /images/alipay.jpg
bitcoin: /images/bitcoin.png

修改打赏字体不闪动

修改文件themes/next/source/css/_common/components/post/post-reward.styl, 然后注释其中的函数wechat:hoveralipay:hover, 如下:

/* 注释文字闪动函数
#wechat:hover p{
animation: roll 0.1s infinite linear;
-webkit-animation: roll 0.1s infinite linear;
-moz-animation: roll 0.1s infinite linear;
}
#alipay:hover p{
animation: roll 0.1s infinite linear;
-webkit-animation: roll 0.1s infinite linear;
-moz-animation: roll 0.1s infinite linear;
}
*/

阅读全文

  • 在文章中使用<!--more-->手动进行截断

    这种方法可以根据文章的内容, 自己在合适的位置添加<!--more-->标签, 使用灵活, 也是Hexo推荐的方法.

  • 在文章中的front-matter中添加description, 并提供文章摘录

    这种方式只会在首页列表中显示文章的摘要内容,进入文章详情后不会再显示。

  • 自动形成摘要,在主题配置文件中添加

    默认截取的长度为 150 字符,可以根据需要自行设定

    auto_excerpt:
    enable: true
    length: 150

建议使用<!-- more --(即第一种方式), 除了可以精确控制需要显示的摘录内容以外, 这种方式也可以让Hexo中的插件更好的识别.

添加博客更新时间

修改博客主目录./themes/next/layout/_macro/post.swig文件, 在<span class="post-time">...</span>标签后添加:

{%if post.updated and post.updated > post.date%}
<span class="post-updated">
&nbsp; | &nbsp; {{ __('post.updated') }}
<time itemprop="dateUpdated" datetime="{{ moment(post.updated).format() }}" content="{{ date(post.updated, config.date_format) }}">
{{ date(post.updated, config.date_format) }}
</time>
</span>
{% endif %}

根据博客配置文件中的language参数修改对应的语言配置文件./themes/next/languages/zh_Hans.yml, 如果文件中有updated,

修改值为updated: 更新时间, 如果没有updated, 则添加并赋值updated: 更新时间.

修改主题配置文件./themes/next/_config.yml, 增加一行:

display_updated: true

写文章的时候可以直接在文章开头设置更新时间updated: 2018-05-06 00:00:00, 没有这参数的话将会显示md文件的修改日期.

博客在chrome上打开过慢的解决办法

原因:

加载google字体库导致

解决办法:

- 将主题配置文件中的font字段的host值设为host: //fonts.lug.ustc.edu.cn, 默认使用的是//fonts.lug.ustc.edu.cn.

Local Search(百度/谷歌/本地搜索)

添加百度/谷歌/本地自定义站点内容搜索

  • 安装hexo-generator-searchdb, 在站点的根目录下执行以下命令:

    npm install hexo-generator-search --save
    npm install hexo-generator-searchdb --save
  • 编辑站点配置文件, 新增以下内容到任意位置:

    search:
    path: search.xml
    field: post
    format: html
    limit: 10000
  • 编辑主题配置文件, 启用本地搜索功能:

    # Local search
    local_search:
    enable: true

公益404

在主题source目录下, 新建404.html页面, 内容如下:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8;"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="robots" content="all" />
<meta name="robots" content="index,follow"/>
<link rel="stylesheet" type="text/css" href="https://qzone.qq.com/gy/404/style/404style.css">
</head>
<body>
<script type="text/plain" src="http://www.qq.com/404/search_children.js"
charset="utf-8" homePageUrl="/"
homePageName="回到我的主页">
</script>
<script src="https://qzone.qq.com/gy/404/data.js" charset="utf-8"></script>
<script src="https://qzone.qq.com/gy/404/page.js" charset="utf-8"></script>
</body>
</html>

添加菜单页面

  • 添加关于页面

    hexo new page about

  • 添加标签页面

    hexo new page tags

/source/tags/index.md中添加内容:

---
title: tags
date: 2018-06-07 20:53:22
type: tags
---
  • 添加分类页面

    hexo new page categories

  • 添加归档页面

  • 添加自定义页面

    hexo new page "guestbook"

在主题配置文件中的menu中修改:

menu:
home: / || home
archives: /archives/ || archive
tags: /tags/ || tags
#categories: /categories/ || th
#schedule: /schedule/ || calendar
#sitemap: /sitemap.xml || sitemap
commonweal: /404/ || heartbeat
about: /about/ || user

为代码片段添加全部选择按钮

需要clipboard.min.js

保存到themes\next\source\lib\zclip\clipboard.min.js, 没有文件夹则创建.

新建文件themes\next\source\js\src\custom.js, 添加内容为:

//此函数用于创建复制按钮
function createCopyBtns() {
var $codeArea = $("figure table");
//查看页面是否具有代码区域,没有代码块则不创建 复制按钮
if ($codeArea.length > 0) {
//复制成功后将要干的事情
function changeToSuccess(item) {
$imgOK = $("#copyBtn").find("#imgSuccess");
if ($imgOK.css("display") == "none") {
$imgOK.css({
opacity: 0,
display: "block"
});
$imgOK.animate({
opacity: 1
}, 1000);
setTimeout(function() {
$imgOK.animate({
opacity: 0
}, 2000);
}, 2000);
setTimeout(function() {
$imgOK.css("display", "none");
}, 4000);
};
};
//创建 全局复制按钮,仅有一组。包含:复制按钮,复制成功响应按钮
//值得注意的是:1.按钮默认隐藏,2.位置使用绝对位置 position: absolute; (position: fixed 也可以,需要修改代码)
$(".post-body").before('<div id="copyBtn" style="opacity: 0; position: absolute;top:0px;display: none;line-height: 1; font-size:1.5em"><span id="imgCopy" ><i class="fa fa-paste fa-fw"></i></span><span id="imgSuccess" style="display: none;"><i class="fa fa-check-circle fa-fw" aria-hidden="true"></i></span>');
//创建 复制 插件,绑定单机时间到 指定元素,支持JQuery
var clipboard = new Clipboard('#copyBtn', {
target: function() {
//返回需要复制的元素内容
return document.querySelector("[copyFlag]");
},
isSupported: function() {
//支持复制内容
return document.querySelector("[copyFlag]");
}
});
//复制成功事件绑定
clipboard.on('success',
function(e) {
//清除内容被选择状态
e.clearSelection();
changeToSuccess(e);
});
//复制失败绑定事件
clipboard.on('error',
function(e) {
console.error('Action:', e.action);
console.error('Trigger:', e.trigger);
});
//鼠标 在复制按钮上滑动和离开后渐变显示/隐藏效果
$("#copyBtn").hover(
function() {
$(this).stop();
$(this).css("opacity", 1);
},
function() {
$(this).animate({
opacity: 0
}, 2000);
}
);
}
}
//感应鼠标是否在代码区
$("figure").hover(
function() {
//-------鼠标活动在代码块内
//移除之前含有复制标志代码块的 copyFlag
$("[copyFlag]").removeAttr("copyFlag");
//在新的(当前鼠标所在代码区)代码块插入标志:copyFlag
$(this).find(".code").attr("copyFlag", 1);
//获取复制按钮
$copyBtn = $("#copyBtn");
if ($copyBtn.lenght != 0) {
//获取到按钮的前提下进行一下操作
//停止按钮动画效果
//设置为 显示状态
//修改 复制按钮 位置到 当前代码块开始部位
//设置代码块 左侧位置
$copyBtn.stop();
$copyBtn.css("opacity", 0.8);
$copyBtn.css("display", "block");
$copyBtn.css("top", parseInt($copyBtn.css("top")) + $(this).offset().top - $copyBtn.offset().top + 3);
$copyBtn.css("left", -$copyBtn.width() - 3);
}
},
function() {
//-------鼠标离开代码块
//设置复制按钮可见度 2秒内到 0
$("#copyBtn").animate({
opacity: 0
}, 2000);
}
);
//页面载入完成后,创建复制按钮
$(document).ready(function() {
createCopyBtns();
});

新建文件themes\next\layout\_custom\custom.swig, 内容为:

<script type="text/javascript" src="/lib/zclip/clipboard.min.js"></script>
<script type="text/javascript" src="/js/src/custom.js"></script>

修改文件themes\next\layout\_layout.swig, 向</body>前一行插入文件引用:

{% include '_custom/custom.swig' %}

添加代码折叠功能

  • 添加折叠代码

    themes/next/source/js/src/post-details.js, 添加如下代码:
$(document).ready(function(){
$(document).on('click', '.fold_hider', function(){
$('>.fold', this.parentNode).slideToggle();
$('>:first', this).toggleClass('open');
});
//默认情况下折叠
$("div.fold").css("display","none");
});
  • 添加自定义内建标签

    新建, themes/next/scripts/tags.js, 添加代码:
const rEscapeContent = /<escape(?:[^>]*)>([\s\S]*?)<\/escape>/g;
const placeholder = '\uFFFD';
const rPlaceholder = /(?:<|&lt;)\!--\uFFFD(\d+)--(?:>|&gt;)/g;
const cache = [];
function escapeContent(str) {
return '<!--' + placeholder + (cache.push(str) - 1) + '-->';
}
hexo.extend.filter.register('before_post_render', function(data) {
data.content = data.content.replace(rEscapeContent, function(match, content) {
return escapeContent(content);
});
return data;
});
hexo.extend.filter.register('after_post_render', function(data) {
data.content = data.content.replace(rPlaceholder, function() {
return cache[arguments[1]];
});
return data;
});

再添加一个fold.js:

function fold (args, content) {
var text = args[0];
if(!text) text = "点击显示/隐藏";
return '<div><div class="fold_hider"><div class="close hider_title">' + text + '</div></div><div class="fold">\n' + hexo.render.renderSync({text: content, engine: 'markdown'}) + '\n</div></div>';
}
hexo.extend.tag.register('fold', fold, {ends: true});
  • 添加自定义样式

    themes/next/source/css/_custom/custom.styl, 追加:
.hider_title{
font-family: "Microsoft Yahei";
cursor: pointer;
}
.close:after{
content: "▼";
}
.open:after{
content: "▲";
}
  • 在需要隐藏的地方添加调用, (在md文件中的代码块的位置):
{% fold 点击显/隐内容 %}
something you want to fold, include code block.
{% endfold %}

加载图片

两种方式,一种使用插件,一种不使用插件,修改配置文件_config.ymlpost_asset_foldertrue.

创建博客的命令: hexo new [layout] <title>, layout可以省略.

创建完成后会在source/_post目录生成一个同名的目录,把图片放在这个目录中.

不使用插件

{% asset_img 这是图片的名称.jpg 这是对应的说明信息 %}

hexo + next搭建博客的更多相关文章

  1. 在Windows下使用Hexo+GithubPage搭建博客的过程

    1.安装Node.js 下载地址:传送门 去 node.js 官网下载相应版本,进行安装即可. 可以通过node -v的命令来测试NodeJS是否安装成功 2.安装Git 下载地址:传送门 去 Git ...

  2. hexo+github搭建博客跳坑

    hexo+GitHub搭建博客过程中,hexo安装成功,可以启动和运行,但是访问localhost:4000却无法访问,弄了半天,最后发现是福昕阅读器占用了4000端口 解决办法: 采用命令hexo ...

  3. Hexo快速搭建博客

    1. 准备工作 ~ 安装node.js -> npm -> hexo-cli ~ 安装git -> 版本控制工具 2. 更换npm(nodejs package manager)源 ...

  4. GitHub+Hexo+gulp搭建博客网站

    一.前期准备 1.注册GitHub账号. 不做说明 2.创建仓库 创建一个新的仓库来放置我们的文件. 3.下载安装Node.js https://nodejs.org/en/   两个版本,选择右边那 ...

  5. Hexo+NexT(零):最全Hexo+Next搭建博客教程

    快速.简洁且高效的博客框架 有位大神说,喜欢写博客的人的人,折腾博客会经历三个阶段.找到一个免费空间,搭建一个博客,很欣喜,很有成就感,此为一阶段:受限免费空间各种限制,自己买空间和域名,实现对博客的 ...

  6. 使用coding和hexo快速搭建博客

    欢迎访问我的个人博客皮皮猪:http://www.zhsh666.xyz 今天教大家怎么用hexo快速搭建自己的博客.我不是专业人士,不懂前端知识,所以我十分讨厌那些专业术语,讲了一大堆,对于技术小白 ...

  7. hexo+github搭建博客(超级详细版,精细入微)

    # 前言 你了解[Hexo]( https://hexo.io/zh-cn/ "Hexo官网")吗? Hexo是一个静态博客框架,基于Node.js,将Markdown文章通过渲染 ...

  8. 使用hexo+github搭建博客

    https://blog.csdn.net/qq_36667170/article/details/105789610这一篇已经写得很详细了,下面的内容是我操作的时候遇到的问题及解决方法. 1.下载N ...

  9. Hexo+Github搭建博客

    要使用Hexo,需要在你的系统中支持Nodejs以及Git,如果还没有,那就开始安装吧! 安装Node.js 下载Node.js 参考地址:安装Node.js 安装Git 下载地址:http://gi ...

随机推荐

  1. 简明Python3教程 首页

    A Byte of Python 'A Byte of Python' is a free book on programming using the Python language. It serv ...

  2. python 教程 第三章、 运算符与表达式

    第三章. 运算符与表达式 1)    运算符 + 加 - 减 * 乘 ** 幂 / 除 // 取整除 % 取模 << 左移 >> 右移 & 按位与 | 按位或 ^ 按位 ...

  3. WPF太阳、地球、月球运动轨迹模拟

    原文:WPF太阳.地球.月球运动轨迹模拟 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/yangyisen0713/article/details/ ...

  4. BigTable介绍PPT

  5. Arch linux操作系统安装教程

    一.Arch linux Arch Linux是一款基于x86-64架构的Linux发行版.系统主要由自由和开源软件组成,支持社区参与.系统设计以KISS原则(保持简单和愚蠢)为总体指导原则,注重代码 ...

  6. 【Android】解决微信调起支付接口没反应,调不起来微信的问题

    原文:[Android]解决微信调起支付接口没反应,调不起来微信的问题 //#前言 吐槽一下,微信支付的sdk真难用,文档混乱,坑不少. 正文:可能引起这种情况的问题 1. 最不能出现的 你的APPI ...

  7. PHP提取字符串中的图片地址

    PHP提取字符串中的图片地址 $str='<p><img border="0" src="upfiles/2009/07/1246430143_1.jp ...

  8. mingw 构建 mysql-connector-c-6.1.9记录(26种不同的编译错误,甚至做了一个windows系统返回错误码与System V错误码的一个对照表)

    http://www.cnblogs.com/oloroso/p/6867162.html

  9. block-chain java source

    source:github.com/enderlu/Swiftglobal ide:idea ,要安装Lombok plugin 配置: -Dspring.config.location=file:D ...

  10. GIS基础软件及操作(二)

    原文 GIS基础软件及操作(二) 练习二.管理地理空间数据库 1.利用ArcCatalog 管理地理空间数据库 2.在ArcMap中编辑属性数据 第1步 启动 ArcCatalog 打开一个地理数据库 ...