【Blog】Hexo_Next_博客搭建记 (by onlychristmas)
与我而言，建立个人博客存在的意义有两个。
一方面，当作自己的备忘录，记录零散的知识点，避免重复的搜索工作；
另一方面，可以更好的分享一些自己的心得，方便与大家交流。
选择GitHub_Hexo_Next的组合的主要原因就是方便、便宜、简单，为从来没有接触过前端的自己降低难度。
为了能让博客漂亮一点，这几天来的折腾过程记录整理在此，以备遗忘。
因为优化后的个人博客中有写自定义语法，所以写作辅助小节的样式展示不完全正确，可以移步
好望角。如果转载，请转载个人博客地址（好望角）中原文。
文章目录
-
- @[toc]
-
- 博客搭建
-
- 本地构建博客
- 关联GitHub
- 绑定域名
- 初探Hexo
- Next内置优化
-
- 选择Next主题中的风格样式
- algolia搜索
- 选择动画背景
- 代码块语法高亮设置
- 添加RSS
- 修改文章底部的tag图标
- busuanzi统计访客人数
- 文章的阅读数自定义
- 字数统计功能配置
- 解决readme问题
- 自定义网站图标
- 网站顶部加载条
- 版权信息
- SEO配置
- 博客的统计信息
- gitment评论系统
- 自定义优化
-
- 百度分享
- 自定义网页title
- 鼠标点击事件及样式
-
- 设置鼠标点击桃心样式
- 设置鼠标点击烟花爆炸样式
- 自定义鼠标图片
- 网易云音乐添加歌单进正文页面
- 设置fork me on github
- 添加代码块复制按钮
- 配置文章结束模板
- 头像旋转
- 全站上线时间
- daovoice
- 阅读排行榜
- 背景透明
- high一下
- 添加404页面
- Hexo博客操作优化
-
- 调试优化
- 博客内容压缩
- 自动打开脚本
- 仓库备份博客
- 自动备份博客脚本
- 跳动的心
- 博客自定义写作样式
- 写作辅助
-
- 新建文件类型
- 关于目录
- 主题自带样式 note 标签
- 自定义数字块
- 自定义颜色块
- 文本居中
- 参考文献
文章目录
-
- @[toc]
-
- 博客搭建
-
- 本地构建博客
- 关联GitHub
- 绑定域名
- 初探Hexo
- Next内置优化
-
- 选择Next主题中的风格样式
- algolia搜索
- 选择动画背景
- 代码块语法高亮设置
- 添加RSS
- 修改文章底部的tag图标
- busuanzi统计访客人数
- 文章的阅读数自定义
- 字数统计功能配置
- 解决readme问题
- 自定义网站图标
- 网站顶部加载条
- 版权信息
- SEO配置
- 博客的统计信息
- gitment评论系统
- 自定义优化
-
- 百度分享
- 自定义网页title
- 鼠标点击事件及样式
-
- 设置鼠标点击桃心样式
- 设置鼠标点击烟花爆炸样式
- 自定义鼠标图片
- 网易云音乐添加歌单进正文页面
- 设置fork me on github
- 添加代码块复制按钮
- 配置文章结束模板
- 头像旋转
- 全站上线时间
- daovoice
- 阅读排行榜
- 背景透明
- high一下
- 添加404页面
- Hexo博客操作优化
-
- 调试优化
- 博客内容压缩
- 自动打开脚本
- 仓库备份博客
- 自动备份博客脚本
- 跳动的心
- 博客自定义写作样式
- 写作辅助
-
- 新建文件类型
- 关于目录
- 主题自带样式 note 标签
- 自定义数字块
- 自定义颜色块
- 文本居中
- 参考文献
博客搭建
本地构建博客
我的环境是win10系统，经过一下步骤可以构建好一个运行在本地的静态博客（电脑不能占用localhost:4000端口）
- 安装Node.js, 这是建立Hexo的基础。在powershell中验证是否安装成功用后面两条命令
node -v、npm -v。 - 建立一个存放博客文件的新文件夹。按住
shift单击右键点击‘在此处打开Powershell’ - 安装Hexo，并初始化博客（需要几分钟）
npm install -g hexo-cli
hexo init blog
- 开启本地服务器
hexo new 我就是试试博客搭建好没
hexo g
hexo s
关联GitHub
要想将本地博客部署到gitpages上，按照下面步骤操作即可。
- 安装分布式版本控制系统Git， 这是下载地址 、这是git教程
- 没有github账户的先注册一个
- 要将本地的git和github账户绑定，打开git bash ,配置如下信息。
git config --global user.name "你的GitHub用户名"
git config --global user.email "你的GitHub注册邮箱"
- 生成ssh密钥文件的命令：
ssh-keygen -t rsa -C "你的GitHub注册邮箱",中间不需要设置什么，直接三个回车。 - 在这里 点击 New SSH key 新建一个链接，并将C://users/用户名/.ssh/id_rsa.pub文件中的密钥复制进去（标题随便填）。
- bash中输入
ssh [email protected]验证是否配置成功。如果出现Hi 你的用户名！You've successfully authenticated ,,,bala,,,Connection to github.com closed证明连接成功，以后推送的时候只需第一次输入密码，以后直接推送即可。 - 在github中新建一个仓库，名字是默认写法用户名.github.io 例如:OnlyChristmas.github.io
- 在 站点配置文件 配置如下信息：
deploy:
type: git
repo: https://github.com/OnlyChristmas/OnlyChristmas.github.io.git # 你的代码仓库地址，记得后面加上`.git`
branch: master
- 然后保存你的配置文件
npm install hexo-deployer-git --save
- 让你的博客上线！
hexo clean
hexo g
hexo d
绑定域名
具体操作可以参考这里/
初探Hexo
- 下面是常用的及条命令以及简写，更多命令参考官方文档
npm install hexo -g #安装Hexo
npm update hexo -g #升级
hexo init #初始化博客
# 主要命令的含义以及简写
hexo n "我的博客" == hexo new "我的博客" #新建文章
hexo g == hexo generate #生成
hexo s == hexo server #启动服务预览
hexo d == hexo deploy #部署
# 可能用到的设置命令
hexo server #Hexo会监视文件变动并自动更新，无须重启服务器
hexo server -s #静态模式
hexo server -p 5000 #更改端口
hexo server -i 192.168.1.1 #自定义 IP
hexo clean #清除缓存，若是网页正常情况下可以忽略这条命令
-
图片是博客必不可少的一部分，但它们会造成加载缓慢。所以对于我们严肃的技术博客来说，就要少贴图，多敲代码，哈哈~。
但是偶尔也是要贴几张图，才能说得更明白，这个时候推荐使用七牛云的外链，来提高速度。 -
虽然我们是个严肃的技术博客，要有学术风格（就是丑！），但也不能太丑吧！？所以我这里换用Next主题，配置方式如下。当然也有更多的漂亮主题可供挑选，只是在配置的时候如是出现问题，更难解决，新手慎用。
在blog文件夹下的shell中输入，下载主题文件。git clone https://github.com/iissnan/hexo-theme-next themes/next然后在 站点配置文件 配置如下信息：
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
# theme: landscape
theme: next
Next内置优化
优化虽好，可不要贪多哦。全打开的话网页加载会很慢。。。
选择Next主题中的风格样式
- 在 主题配置文件 中搜索到如下这部分，并在四种风格中选择一个即可。
# Schemes
# scheme: Muse
# scheme: Mist
# scheme: Pisces
scheme: Gemini
algolia搜索
首先在 algolia 注册账号。此处优化需注意，官方文档不够完善。
-
创建APIKey HEXO_ALGOLIA_INDEXING_KEY
-
进入Algolia的API Keys页面ALL API KEYS选项卡
-
创建APIKey
- Description：HEXO_ALGOLIA_INDEXING_KEY
- Indices：<此处选择之前创建的Index>
- ACL：Add records，Delete records，List indices，Delete index
也就是说，我们有两个APIKey，其中一个是Search-only API Key（我们后面需要进行用它配置），另一个是HEXO_ALGOLIA_INDEXING_KEY（新建好即可）。
具体的配置步骤如下： -
在 站点配置文件 中需要添加
algolia:
applicationID: # Application ID
apiKey: # Search-only API Key
indexName: # 此处选择之前创建的Index
chunkSize: 5000
```
- 在 主题配置文件 中搜索到如下这部分，只需将enable改为true，最后两个搜索提示信息有需要的话也可以修改。
algolia_search:
enable: true
hits:
per_page: 10
labels:
input_placeholder: Search for Posts
hits_empty: “不好意思，木有’ q u e r y ′ 的 搜 索 结 果 ? " h i t s s t a t s : " {query}'的搜索结果?" hits_stats: " query′的搜索结果?"hitsstats:"{hits} results found in ${time} ms”
```
-
接下来，我采取的配置方法和官方文档有点出入，但是亲测有效(我是win10系统)。
1. 在博客文件夹根目录右键打开git bash here
2.export HEXO_ALGOLIA_INDEXING_KEY= 'Search-only API Key'
3.hexo algolia -
bash中出现类似提示说明配置成功
INFO [Algolia] Identified 6 pages and posts to index. INFO [Algolia] Indexing chunk 1 of 1 (50 items each) INFO [Algolia] Indexing done.
选择动画背景
- 在 主题配置文件 中搜索并配置如下信息，最好四选一。
# Canvas-nest
canvas_nest: true # 背景有降落伞
# three_waves
three_waves: false # 背景有像海浪一样的小球球
# canvas_lines
canvas_lines: false # 背景有立体蜘蛛网
# canvas_sphere
canvas_sphere: false # 屏幕中央有一个爆炸状的球球
代码块语法高亮设置
- 在 站点配置文件 设置
highlight:
enable: true
line_number: true
auto_detect: true
tab_replace: true
注意，网上的自定义样式优化代码中，有对代码块的优化，那部分代码需要注释掉。
添加RSS
- 打开博客根目录，shell安装插件，用如下代码:
npm install --save hexo-generator-feed
- 在 站点配置文件 配置如下信息：
# Extensions
## Plugins: http://hexo.io/plugins/
#RSS订阅
plugin:
- hexo-generator-feed
#Feed Atom
feed:
type: atom
path: atom.xml
limit: 20
hub:
content:
content_limit: 140
content_limit_delim: ' '
- 在 主题配置文件 中搜索并配置如下信息。
# Set rss to false to disable feed link.
# Leave rss as empty to use site's feed link.
# Set rss to specific value if you have burned your feed already.
rss: "/atom.xml"
- 最后重新生成，只要在
./public中看到atom.xml说明生成成功。
修改文章底部的tag图标
- 修改模板
/themes/next/layout/_macro/post.swig，搜索rel="tag">#，将 # 换成,当然也可以切换成任何你喜欢的小图标。
busuanzi统计访客人数
在 主题配置文件 中搜索并配置如下信息，也可以根据自己的喜欢修改其他配置。
# Show PV/UV of the website/page with busuanzi.
# Get more information on http://ibruce.info/2015/04/04/busuanzi/
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: 你是第
site_uv_footer: 个小伙伴
# custom pv span for the whole site
site_pv: true
site_pv_header: 总访问
site_pv_footer: 人次
# custom pv span for one page only
page_pv: false
page_pv_header:
page_pv_footer:
文章的阅读数自定义
- 首先要注册leancloud,获取AppID and AppKey。
- 在 主题配置文件 中搜索并配置如下信息:
# Show number of visitors to each article.
# You can visit https://leancloud.cn get AppID and AppKey.
leancloud_visitors:
enable: true
app_id: #
app_key: #
- 打开
/themes/next/layout/_macro/post.swig,我的代码修改成如下样子，也可以自由发挥。
{# LeanCould PageView #}
{% if theme.leancloud_visitors.enable %}
{% if theme.post_meta.item_text %}
{% endif %}
℃
{% endif %}
- 最后，在
/themes/next/languages/zh-Hans.yml,可以任意修改文字信息,我的代码如下所示:
post:
created: 创建于
modified: 更新于
sticky: 置顶
posted: '发表于:'
in: '类别:'
read_more: 阅读全文
untitled: 未命名
toc_empty: 此文章未包含目录
visitors: 热度
字数统计功能配置
- 切换到根目录下，然后运行如下代码
$ npm install hexo-wordcount --save
- 然后在 主题配置文件 中自定义如下配置：
# Post wordcount display settings
# Dependencies: https://github.com/willin/hexo-wordcount
post_wordcount:
item_text: true
wordcount: true
min2read: false
totalcount: true
separated_meta: true
这里我遇到一个大坑，在正文中写``标签一定要用代码块包括，否则可能会造成wordcount无法正常统计字数！一直显示为0
解决readme问题
在github手动添加readme文件总是会被擦掉，会很麻烦，现在有两种解决方法。
- 第一种，在
/blog/source中添加一个README.MDOWN文件，每次推送到github都可以正常解析。 - 第二种，在 站点配置文件 配置如下信息：
skip_render: README.md
自定义网站图标
- 在 主题配置文件 中搜索到如下这部分，
favicon:
# small: /images/favicon-16x16-next.png
# medium: /images/favicon-32x32-next.png
# apple_touch_icon: /images/apple-touch-icon-next.png
# safari_pinned_tab: /images/logo.svg
small: # 你的图像
medium: # 你的图像
apple_touch_icon: # 你的图像
safari_pinned_tab: # 你的图像
#android_manifest: /images/manifest.json
#ms_browserconfig: /images/browserconfig.xml
网站顶部加载条
- 已经被Next主题做成了默认的设置，在 主题配置文件 中配置：
# Progress bar in the top during page loading.
pace: true
# Themes list:
#pace-theme-big-counter
#pace-theme-bounce
#pace-theme-barber-shop
#pace-theme-center-atom
#pace-theme-center-circle
#pace-theme-center-radar
#pace-theme-center-simple
#pace-theme-corner-indicator
#pace-theme-fill-left
#pace-theme-flash
#pace-theme-loading-bar
#pace-theme-mac-osx
#pace-theme-minimal
# For example
# pace_theme: pace-theme-center-simple
pace_theme: pace-theme-minimal
版权信息
- 已经被Next主题做成了默认的设置，在 主题配置文件 中配置：
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: heart
# If not defined, will be used `author` from Hexo main config.
copyright:
# -------------------------------------------------------------
# Hexo link (Powered by Hexo).
powered: false
theme:
# Theme & scheme info link (Theme - NexT.scheme).
enable: false
# Version info of NexT after scheme info (vX.X.X).
version: true
- 可以在每天博文生成的时候，将它作为一个文章模板。这样可以灵活地对于每篇文章设定是否需要版权信息。
- 我在
/blog/scaffolds/中新建了一个next博文模板，代码如下：
---
title: {{ title }}
date: {{ date }}
comments: true
categories: NLP
tags: [tag1, tag2]
post_copyright: true
---
This is a summary
- 在 站点配置文件 配置如下信息,每次新生成的文章都会使用此模板。
#### Writing
new_post_name: :title.md # File name of new posts
default_layout: next
SEO配置
- 想要让我们的站点被搜索引擎收录，要提交给他们站点文件。
- 首先安装两个插件,并生成两个站点文件，sitemap.xml与baidusitemap.xml文件
npm install hexo-generator-sitemap --save-dev
hexo d -g
npm install hexo-generator-baidu-sitemap --save-dev
hexo d -g
- 在 站点配置文件 配置如下信息:
# SEO 优化
sitemap:
path: sitemap.xml
baidusitemap:
path: baidusitemap.xml
- 新建robots.txt文件，添加以下文件内容，把robots.txt放在hexo站点的source文件下
User-agent: * Allow: /
Allow: /archives/
Disallow: /vendors/
Disallow: /js/
Disallow: /css/
Disallow: /fonts/
Disallow: /vendors/
Disallow: /fancybox/
Sitemap: http://thief.one/sitemap.xml
Sitemap: http://thief.one/baidusitemap.xml
- 在 主题配置文件 中配置如下。
# Enable baidu push so that the blog will push the url to baidu automatically which is very helpful for SEO
baidu_push: true
- 当然还要去百度站长和谷歌站长验证,bing验证
博客的统计信息
- 在 主题配置文件 中有若干种分析工具可以配置，我这里只配置了谷歌分析
# Google Analytics
google_analytics: # 你的账号
gitment评论系统
先注册gitment,这是作者博客，按照官方文档搭建即可
# Gitment
# Introduction: https://imsun.net/posts/gitment-introduction/
# You can get your Github ID from https://api.github.com/users/
gitment:
enable: true
mint: true # RECOMMEND, A mint on Gitment, to support count, language and proxy_gateway
count: false # Show comments count in post meta area
lazy: false # Comments lazy loading with a button
cleanly: false # Hide 'Powered by ...' on footer, and more
language: # Force language, or auto switch by theme
github_user: OnlyChristmas # MUST HAVE, Your Github ID
github_repo: OnlyChristmas.github.io # MUST HAVE, The repo you use to store Gitment comments
client_id: 8fc5c43242323koljoa # MUST HAVE, Github client id for the Gitment
client_secret: 4ff9a214325312515151b04c400d46 # EITHER this or proxy_gateway, Github access secret token for the Gitment
proxy_gateway: # Address of api proxy, See: https://github.com/aimingoo/intersect
redirect_protocol: # Protocol of redirect_uri with force_redirect_protocol when mint enabled
自定义优化
优化虽好，可不要贪多哦。全打开的话网页加载会很慢。。。
百度分享
next内置的代码在服务器升级https之后，百度分享的js请求不了。但是在 github上的轮子 可以修改后再其启用这一功能。
- 下载后得到static文件夹，放入到
/themes/next/source/目录下。 - 将
themes/next/layout/_partials/share/baidushare.swig中末尾处的代码进行替换。前面是原有代码，下面是替换的代码。
- 最后一定记得先
hexo g再hexo s，否则可能会出现问题。
自定义网页title
在next\source\js\src下新建脚本custom_title.js,将下面代码复制进去。 js脚本来源
var OriginTitle = document.title;
var titleTime;
document.addEventListener('visibilitychange', function () {
if (document.hidden) {
$('[rel="icon"]').attr('href', "/img/TEP.ico");
document.title = '╭(°A°`)╮ 爱我别走 ~';
clearTimeout(titleTime);
}
else {
$('[rel="icon"]').attr('href', "/favicon.ico");
document.title = '(ฅ>ω<*ฅ) 这才对嘛~' + OriginTitle;
titleTime = setTimeout(function () {
document.title = OriginTitle;
}, 2000);
}
});
在next\layout\_layout.swig的 标签体内添加
鼠标点击事件及样式
设置鼠标点击桃心样式
-
在
/themes/next/source/js/src/中新建love.js,其中写入的代码如下。!function(e,t,a){function r(){for(var e=0;e -
在
/themes/next/layout/_layout.swig中的标签体内添加下面代码。
设置鼠标点击烟花爆炸样式
- 在
/themes/next/source/js/src/中新建fireworks.js,其中写入的代码如下。
"use strict";function updateCoords(e){pointerX=(e.clientX||e.touches[0].clientX)-canvasEl.getBoundingClientRect().left,pointerY=e.clientY||e.touches[0].clientY-canvasEl.getBoundingClientRect().top}function setParticuleDirection(e){var t=anime.random(0,360)*Math.PI/180,a=anime.random(50,180),n=[-1,1][anime.random(0,1)]*a;return{x:e.x+n*Math.cos(t),y:e.y+n*Math.sin(t)}}function createParticule(e,t){var a={};return a.x=e,a.y=t,a.color=colors[anime.random(0,colors.length-1)],a.radius=anime.random(16,32),a.endPos=setParticuleDirection(a),a.draw=function(){ctx.beginPath(),ctx.arc(a.x,a.y,a.radius,0,2*Math.PI,!0),ctx.fillStyle=a.color,ctx.fill()},a}function createCircle(e,t){var a={};return a.x=e,a.y=t,a.color="#F00",a.radius=0.1,a.alpha=0.5,a.lineWidth=6,a.draw=function(){ctx.globalAlpha=a.alpha,ctx.beginPath(),ctx.arc(a.x,a.y,a.radius,0,2*Math.PI,!0),ctx.lineWidth=a.lineWidth,ctx.strokeStyle=a.color,ctx.stroke(),ctx.globalAlpha=1},a}function renderParticule(e){for(var t=0;t- 在
/themes/next/layout/_layout.swig中的标签体内添加下面代码。{% if theme.fireworks %} {% endif %} - 在 主题配置文件 中添加如下配置：
# Fireworks 鼠标点击烟花爆炸 fireworks: true
自定义鼠标图片
- 在
themes/next/source/css/_custom/custom.styl中，添加如下代码// 鼠标样式 * { cursor: url("http://om8u46rmb.bkt.clouddn.com/sword2.ico"),auto!important } :active { cursor: url("http://om8u46rmb.bkt.clouddn.com/sword1.ico"),auto!important } - 上面的url必须是ico 图片，想要自定义图片可以自行上传七牛云获取外链（加速），也可以本地加载。我就偷懒直接用其他博主的链接了。
网易云音乐添加歌单进正文页面
怎么生成歌单的外链看这里
然后将生成的代码加入到想要放入的位置就好了（适当调整大小）。
设置fork me on github
- 在这里挑选样式并复制代码 或者这里也可以。
- 刚才复制的代码放到
themes/next/layout/_layout.swig文件中，的下面，并且记得herf改为自己的github地址。
添加代码块复制按钮
- 下载clipboard.min.js并将其放到
.\themes\next\source\js\src\目录下。 - 在
.\themes\next\source\js\src\目录下，创建clipboard-use.js，文件内容如下：
/*页面载入完成后，创建复制按钮*/
!function (e, t, a) {
/* code */
var initCopyCode = function(){
var copyHtml = '';
copyHtml += '';
$(".highlight .code pre").before(copyHtml);
new ClipboardJS('.btn-copy', {
target: function(trigger) {
return trigger.nextElementSibling;
}
});
}
initCopyCode();
}(window, document);
- 在
.\themes\next\source\css\_custom\custom.styl样式文件中添加下面代码：
//代码块复制按钮
.highlight{
//方便copy代码按钮（btn-copy）的定位
position: relative;
}
.btn-copy {
display: inline-block;
cursor: pointer;
background-color: #eee;
background-image: linear-gradient(#fcfcfc,#eee);
border: 1px solid #d5d5d5;
border-radius: 3px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-appearance: none;
font-size: 13px;
font-weight: 700;
line-height: 20px;
color: #333;
-webkit-transition: opacity .3s ease-in-out;
-o-transition: opacity .3s ease-in-out;
transition: opacity .3s ease-in-out;
padding: 2px 6px;
position: absolute;
right: 5px;
top: 5px;
opacity: 0;
}
.btn-copy span {
margin-left: 5px;
}
.highlight:hover .btn-copy{
opacity: 1;
}
- 在
.\themes\next\layout\_layout.swig文件中，添加引用要在标签内：
配置文章结束模板
- 在
\themes\next\layout\_macro文件夹中，新建passage-end-tag.swig，并且写入如下代码(当然也可以自由发挥):
{% if not is_index %}
-------------本文结束 感谢您的时间-------------
{% endif %}
- 接着打开
\themes\next\layout\_macro\post.swig文件，在post-body之后，post-footer之前添加如下代码。（在我文件大约360的位置）
{% if not is_index %}
{% include 'passage-end-tag.swig' %}
{% endif %}
- 最后在 主题配置文件 中添加如下配置：
# 文章末尾添加“本文结束”标记
passage_end_tag:
enabled: true
- 实现效果如本文结尾所示
头像旋转
- 首先打开头像选项,在 主题配置文件 中。
in theme directory(source/images): # 你的头像
# in site directory(source/uploads): /uploads/avatar.gif
avatar: # 你的头像
- 打开
\themes\next\source\css\_common\components\sidebar\sidebar-author.styl，在里面添加如下代码：
.site-author-image {
display: block;
margin: 0 auto;
padding: $site-author-image-padding;
max-width: $site-author-image-width;
height: $site-author-image-height;
border: $site-author-image-border-width solid $site-author-image-border-color;
/* 头像圆形 */
border-radius: 80px;
-webkit-border-radius: 80px;
-moz-border-radius: 80px;
box-shadow: inset 0 -1px 0 #333sf;
/* 设置循环动画 [animation: (play)动画名称 (2s)动画播放时长单位秒或微秒 (ase-out)动画播放的速度曲线为以低速结束
(1s)等待1秒然后开始动画 (1)动画播放次数(infinite为循环播放) ]*/
/* 鼠标经过头像旋转360度 */
-webkit-transition: -webkit-transform 1.0s ease-out;
-moz-transition: -moz-transform 1.0s ease-out;
transition: transform 1.0s ease-out;
}
img:hover {
/* 鼠标经过停止头像旋转
-webkit-animation-play-state:paused;
animation-play-state:paused;*/
/* 鼠标经过头像旋转360度 */
-webkit-transform: rotateZ(360deg);
-moz-transform: rotateZ(360deg);
transform: rotateZ(360deg);
}
/* Z 轴旋转动画 */
@-webkit-keyframes play {
0% {
-webkit-transform: rotateZ(0deg);
}
100% {
-webkit-transform: rotateZ(-360deg);
}
}
@-moz-keyframes play {
0% {
-moz-transform: rotateZ(0deg);
}
100% {
-moz-transform: rotateZ(-360deg);
}
}
@keyframes play {
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(-360deg);
}
}
全站上线时间
- 在
/themes/next/layout/_partials/footer.swig文件尾部加上，并且修改你的上线时间。
载入天数...载入时分秒...
daovoice
-
在daovoice注册账号可以得到 app_id
-
在 主题配置文件 中添加如下配置
# Online contact
daovoice: true
daovoice_app_id: # 这里填你刚才获得的 app_id
- 在
/themes/next/layout/_partials/head.swig,添加如下代码：
{% if theme.daovoice %}
{% endif %}
阅读排行榜
hexo n page top新建页面，编辑自动生成的index.md文件，代码如下,替换好你的leancloud账号和页面链接（一共三处）
- 本地调试不显示，重新生成上传，才能看到排序效果
背景透明
- 考虑到我们这么好看的动态背景，只在文章两边很小的区域展示，有点别扭，想要让它在文章后面也能显示。
- 在
themes\next\source\css_schemes\你设置的主题\index.styl文件中搜索background,会出现五个结果，我这里只将前两个设置为none(透明)，也可以根据需求设置更多的透明。
// =================================================
// Desktop layout styles.
// =================================================
// Post blocks.
.content-wrap {
padding: initial;
background: none;
box-shadow: initial;
border-radius: initial;
}
// Post & Comments blocks.
.post-block {
padding: $content-desktop-padding;
background: none;
box-shadow: $box-shadow-inner;
border-radius: $border-radius-inner;
}
- 如果手机端背景透明，整个页面会比较凌乱，影响阅读效果。切忌保持
white
// =================================================
// < 767px
// =================================================
+mobile() {
// Posts in blocks.
.content-wrap {
padding: $content-mobile-padding;
background: white;
}
high一下
- 打开
blog\themes\next\layout\_partials\header.swig，在- ... /ul>
High一下
添加404页面
- 在
blog/source/文件夹下新建404.html并加入如下代码：
Hexo博客操作优化
调试优化
- 在
blog/package.json中并列"dependencies": {}添加如下代码：
"scripts": {
"dev": "hexo clean && hexo generate && hexo server --debug"
}
- 现在我们只需
npm run dev一条命令就可以启动本地的调试环境
博客内容压缩
- 在
blog/package.json中"dependencies": {}后面平行的添加如下内容：
"devDependencies": {
"gulp-asset-rev": "^0.0.15",
"gulp-clean-css": "^3.9.0",
"gulp-concat": "^2.6.1",
"gulp-debug": "^3.1.0",
"gulp-htmlclean": "^2.7.15",
"gulp-htmlmin": "^3.0.0",
"gulp-if": "^2.0.2",
"gulp-changed": "^3.1.0",
"gulp-make-css-url-version": "^0.0.13",
"gulp-modify-css-urls": "^0.2.2",
"gulp-plumber": "^1.1.0",
"gulp-uglify": "^3.0.0",
"gulp-useref": "^3.1.2",
"gulp-util": "^3.0.8",
"hexo-deployer-git": "^0.3.1",
"hexo-encrypt": "^0.5.1",
"hexo-generator-json-content": "^3.0.1",
"hexo-generator-search": "^2.1.1",
"hexo-generator-searchdb": "^1.0.8",
"hexo-server": "^0.2.2",
"run-sequence": "^2.2.0"
}
- 然后输入以下命令安装依赖包
npm config set registry https://registry.npm.taobao.org
npm install
- 在
blog/gulpfile.js中添加如下代码（没有的话则新建）：
/* npm install 超时请使用：(两条命令在当前文件目录下执行)
npm config set registry https://registry.npm.taobao.org
npm install
或者：
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install
*/
var gulp = require('gulp');
var debug = require('gulp-debug');
var cleancss = require('gulp-clean-css'); //css压缩组件
var cssversion = require('gulp-make-css-url-version'); //css资源添加版本号
var uglify = require('gulp-uglify'); //js压缩组件
var htmlmin = require('gulp-htmlmin'); //html压缩组件
var htmlclean = require('gulp-htmlclean'); //html清理组件
var assetRev = require('gulp-asset-rev'); //版本控制插件
var runSequence = require('run-sequence'); //异步执行组件
var changed = require('gulp-changed'); //文件更改校验组件
var gulpif = require('gulp-if') //任务 帮助调用组件
var plumber = require('gulp-plumber'); //容错组件（发生错误不跳出任务，并报出错误内容）
var isScriptAll = true; //是否处理所有文件，(true|处理所有文件)(false|只处理有更改的文件)
var isDebug = true; //是否调试显示 编译通过的文件
// 压缩js文件
gulp.task('compressJs', function () {
var option = {
// preserveComments: 'all',//保留所有注释
mangle: true, //类型：Boolean 默认：true 是否修改变量名
compress: true //类型：Boolean 默认：true 是否完全压缩
}
return gulp.src(['./public/**/*.js','!./public/**/*.min.js']) //排除的js
.pipe(gulpif(!isScriptAll, changed('./public')))
.pipe(gulpif(isDebug,debug({title: 'Compress JS:'})))
.pipe(plumber())
.pipe(uglify(option)) //调用压缩组件方法uglify(),对合并的文件进行压缩
.pipe(gulp.dest('./public')); //输出到目标目录
});
// 压缩css文件
gulp.task('compressCss', function () {
return gulp.src('./public/**/*.css')
.pipe(gulpif(!isScriptAll, changed('./public')))
.pipe(gulpif(isDebug,debug({title: 'Compress CSS:'})))
.pipe(plumber())
.pipe(cleancss({rebase: false}))
.pipe(gulp.dest('./public'));
});
// 压缩html文件
gulp.task('compressHtml', function () {
var cleanOptions = {
protect: /<\!--%fooTemplate\b.*?%-->/g, //忽略处理
unprotect: /