配置环境
Hexo是用node-js写的，hexo生成静态页面的速度要比较快，hexo是本地生成html再上传。
官网：https://hexo.io/zh-cn/docs/
安装Node.js
官网下载对应平台安装包安装：https://nodejs.org
详见：Node.js开发环境搭建
安装Git
参考教程：Git教程
安装Hexo
npm install -g hexo-cli #Mac下安装sudo -i切换到root权限。
hexo init blog #blog文件夹要先建好，这一步自动生成网站。
cd blog
npm install #安装依赖的插件。
hexo server #运行服务这时可以在浏览器打开网页。hexo server的简化命令为hexo s；指定端口：-p xxxx
和jekyll一样是通过修改_config.yml文件来配置站点信息的。（在Hexo中，根目录下的_config.yml文件是用来配置网站信息的；主题目录下的_config.yml文件是用来配置文章主题，页面等等的）
如果是在另一台电脑上配置环境（远程仓库中有项目文件）只需要安装Node.js、Git、Markdown编辑器，之后npm install -g hexo-cli安装hexo后配置Git
git config --global user.name "leolan"
git config --global user.email "842632422@qq.com"
ssh-keygen -t rsa -C "842632422@qq.com"
cat ~/.ssh/id_rsa.pub把密钥添加到Coding和Github上，再git clone 仓库地址（建议用ssh地址）就直接可以正常使用了。
默认的目录结构如下：
├── .deploy #执行hexo deploy命令部署到GitHub上的内容目录
├── public #执行hexo generate命令，输出的静态网页内容目录
├── scaffolds #layout模板文件目录，其中的md文件可以添加编辑
├── scripts #扩展脚本目录，这里可以自定义一些javascript脚本
├── source #文章源码目录，该目录下的markdown和html文件均会被hexo处理。404文件，CNAME文件等都应该放这里。
| ├── _drafts #草稿文章
| └── _posts #发布的文章
├── themes #主题文件目录
├── _config.yml #全局配置文件，大多数的设置都在这里
└── package.json #应用程序数据，指明hexo的版本等信息。在push到github时提示*.json错误，删掉这个文件或删掉db.json就行。配置优化、定制站点
Next官方设置说明：http://theme-next.iissnan.com/getting-started.html
站点配置
以下是我的配置文件：
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/
# Site
title: LeoLan's Blog
subtitle: 有时候正是不报期望的人做出了人们不敢期望之事！
description: Better late than never
author: LeoLan
language: zh-Hans
timezone: Asia/Shanghai
# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://www.leolan.top
coding_url: https://www.leolan.top
root: /
permalink: posts/:abbrlink/
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
#禁止编译README.md文件，也可以在文件中增加yml文件头layout: false，---结尾
skip_render:
- baidu_verify_dc4dBM4StW.html
- googled7e43f3624e0f703.html
- CNAME
- README.md
- .nojekyll
- Staticfile
- 'love/**'
- love/**
- 'love/*.html'
- love/*.html
#强制包含.nojekyll文件（放在source下），这样hexo g时，.开头的文件具不会被忽略，适用于5.0以下版本的next主题（github屏蔽了一些文件夹）
include:
- .nojekyll
# abbrlink config 生成文章永久链接（利于SEO）需要安装插件
abbrlink:
alg: crc16 # 算法：crc16(default) and crc32
rep: dec # 进制：dec(default) and hex
baidu_url_submit: #百度链接推送，推送刚刚生成的永久链接
count: 5 ## 比如3，代表提交最新的三个链接
host: www.leolan.top ## 在百度站长平台中注册的域名
token: kZ5xboXBFPxQ0g7N ## 请注意这是您的秘钥， 请不要发布在公众仓库里!
path: /baidu_urls.txt ## 文本文档的地址， 新链接会保存在此文本文档里
# Writing 官网：https://hexo.io/zh-cn/docs/writing.html
new_post_name: :year-:month-:day-: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: true
tab_replace:
# Category & Tag
default_category: uncategorized
category_map:
tag_map:
# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss
# Pagination 单独页面文章数目，需要安装以下3个插件
#npm install --save hexo-generator-index
#npm install --save hexo-generator-archive
#npm install --save hexo-generator-tag
## Set per_page to 0 to disable pagination
index_generator:
per_page: 5
archive_generator:
per_page: 20
yearly: true
monthly: true
tag_generator:
per_page: 10
pagination_dir: page
# Extensions 主题选择
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next5.0.1
#theme: material
# Deployment 自动部署到仓库
## 官方文档Docs: https://hexo.io/docs/deployment.html 有部署到各种服务器的方法
## 参考：http://www.lxway.com/240950852.htm
#不管是github还是coding，type都填写git
deploy:
- type: git
repo: git@git.coding.net:leolan/blog.git,master
message: 'LeoLan updated：{{now("YYYY-MM-DD HH:mm:ss")}}' #这个是commit的说明，因为是发布站点，方便看到发布时间。
- type: git
repo: git@github.com:MyLeoLan/blog.git,master
message: 'LeoLan updated：{{now("YYYY-MM-DD HH:mm:ss")}}'
#- type: git
# repo: git@git.oschina.net:leolan/leolan.git,master
# message: 'LeoLan updated：{{now("YYYY-MM-DD HH:mm:ss")}}'
#deploy:
#- type: git
# repo:
#- type: heroku（另一种云平台）
# repo:
# Disqus #Disqus评论系统
disqus_shortname: leolan
#plugins: #插件，例如生成 RSS 和站点地图的
#hexo-generator-sitemap
#- hexo-generator-baidu-sitemap
plugins:
hexo-generator-feed
hexo-generator-baidu-sitemap
sitemap:
path: sitemap.xml
baidusitemap:
path: baidusitemap.xml
# Social links 社交链接
social:
GitHub: https://github.com/myleolan
Coding: https://coding.net/u/leolan
Cloud1: http://quickconnect.to/myleolan
OSchina: https://git.oschina.net/leolan
Cloud2: http://842632422-abc.eicp.net
Links: https://www.leolan.top/posts/44568/
#Twitter: https://twitter.com/lmintlcx
#Zhihu: http://www.zhihu.com/people/lmintlcx
#Douban: http://www.douban.com/people/lmintlcx
#Weibo: http://weibo.com/u/3233729080
duoshuo_shortname: leolan
# 多说热评文章 true 或者 false
duoshuo_hotartical: true
# 多说分享服务
duoshuo_share: true
# 百度分享服务
baidushare: true
#打赏功能
reward_comment: 您的支持将鼓励我继续创作,非常感谢！
alipay: https://image.leolan.top//pay/alipay.jpg
wechatpay: https://image.leolan.top//pay/weixinpay.png
#站点建立时间
since: 2016
#百度分析(可能会影响网页加载速度)
#baidu_analytics: c91eae7f335d73f093d1499eff4b45a7
#本地搜索
search:
path: search.xml
field: post
format: html
limit: 10000
主题配置
Material主题：https://material.viosey.com/start/#install-material
Material项目地址：https://github.com/viosey/hexo-theme-material
推荐Next主题，简单简洁，官网：http://theme-next.iissnan.com/
安装最新版：
cd your-hexo-site
git clone https://github.com/iissnan/hexo-theme-next themes/next在主题目录下可以看到next文件夹，修改站点配置文件_config.yml中的theme: nexthexo clean && hexo s就可以看到新主题生效啦！
接下来修改主题配置文件_config.yml，以下是我的配置。
# ---------------------------------------------------------------
# Site Information Settings
# ---------------------------------------------------------------
# Put your favicon.ico into `hexo-site/source/` directory.
favicon: /200.png
# Set default keywords (Use a comma to separate) 站点关键词，利于SEO
keywords: "Hexo, NexT, Leo Lan, leolan, Blog, myleolan, lan, coding"
# 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: https://www.leolan.top/atom.xml
# Specify the date when the site was setup
#since: 2015
# Canonical, set a canonical link tag in your hexo, you could use it for your SEO of blog.
# See: https://support.google.com/webmasters/answer/139066
# Tips: Before you open this tag, remeber set up your URL in hexo _config.yml ( ex. url: http://yourdomain.com )
canonical: true
# ---------------------------------------------------------------
# Menu Settings
# ---------------------------------------------------------------
# When running the site in a subdirectory (e.g. domain.tld/blog), remove the leading slash (/archives -> archives)
menu:
home: /
categories: /categories
tags: /tags
archives: /archives
about: /about
guestbook: /guestbook
# schedule: /schedule
#commonweal: /404.html
# Enable/Disable menu icons. 菜单图标
# Icon Mapping:
# Map a menu item to a specific FontAwesome icon name.
# Key is the name of menu item and value is the name of FontAwsome icon. Key is case-senstive.
# When an question mask icon presenting up means that the item has no mapping icon.
menu_icons: #http://fontawesome.io/icons/
enable: true
#KeyMapsToMenuItemKey: NameOfTheIconFromFontAwesome
home: home
about: user
categories: th
schedule: calendar
tags: tags
archives: archive
commonweal: heartbeat
guestbook: commenting
# ---------------------------------------------------------------
# Scheme Settings
# ---------------------------------------------------------------
# Schemes
#scheme: Muse
#scheme: Mist
scheme: Pisces
# ---------------------------------------------------------------
# Font Settings
# - Find fonts on Google Fonts (https://www.google.com/fonts)
# - All fonts set here will have the following styles:
# light, light italic, normal, normal intalic, bold, bold italic
# - Be aware that setting too much fonts will cause site running slowly
# - Introduce in 5.0.1
# ---------------------------------------------------------------
font:
enable: true
# Uri of fonts host. E.g. //fonts.googleapis.com (Default) 慢的话搜索fonts.googleapis.com即可找到替换地址
host:
#fonts.css.network
# Global font settings used on <body> element.
global:
# external: true will load this font family from host.
external: true
family: Lato
#Monda
# Font settings for Headlines (h1, h2, h3, h4, h5, h6)
# Fallback to `global` font settings.
headings:
external: true
family:
# Font settings for posts
# Fallback to `global` font settings.
posts:
external: true
family: Roboto
# Font settings for Logo
# Fallback to `global` font settings.
# The `size` option use `px` as unit
logo:
external: true
family: Georgia
size: 24
# Font settings for <code> and code blocks.
codes:
external: true
family:
size: 14
#"Source Code Pro", "PT Mono", "DejaVu Sans Mono",
# ---------------------------------------------------------------
# Sidebar Settings
# ---------------------------------------------------------------
# Social Links 社交链接
# Key is the link label showing to end users.
# Value is the target link (E.g. GitHub: https://github.com/iissnan)
#social:
#LinkLabel: Link
# Social Links Icons
# Icon Mapping:
# Map a menu item to a specific FontAwesome icon name.
# Key is the name of the item and value is the name of FontAwsome icon. Key is case-senstive.
# When an globe mask icon presenting up means that the item has no mapping icon.
social_icons: #http://fontawesome.io/icons/
enable: true
# Icon Mappings.
# KeyMapsToSocalItemKey: NameOfTheIconFromFontAwesome
GitHub: github
Coding: github-alt
Cloud1: cloud
Cloud2: cloud
OSchina: git-square
#松松视频: video-camera
#Twitter: twitter
#Weibo: weibo
# Sidebar Avatar
# in theme directory(source/images): /images/avatar.jpg
# in site directory(source/uploads): /uploads/avatar.jpg
avatar: /images/avatar.jpg #博客侧边栏显示的头像
# Table Of Contents in the Sidebar
toc:
enable: true
# Automatically add list number to toc.
number: true
# Creative Commons 4.0 International License.
# http://creativecommons.org/
# Available: by | by-nc | by-nc-nd | by-nc-sa | by-nd | by-sa | zero
#creative_commons: by-nc-sa
#creative_commons:
sidebar:
# Sidebar Position, available value: left | right
position: left
#position: right
# Sidebar Display, available value: 侧边栏显示
# - post expand on posts automatically. Default.
# - always expand for all pages automatically
# - hide expand only when click on the sidebar toggle icon.
# - remove Totally remove sidebar including sidebar toggler.
display: post
#display: always
#display: hide
#display: remove
# Blogrolls 友情链接
links_title: 友链
#links_layout: block
links_icon: heartbeat
#links_layout: inline
links:
Jerry Locke: https://jerry.hk/
Raintons: http://login926.top
DIYgod: https://www.anotherhome.net
小黑: http://mblack.cn/
Jing's Blog: http://www.iamlj.com/
cyang's blog: http://cyang.tech/
一路向北: http://www.showerlee.com/
卢松松的博客: http://lusongsong.com/
松松视频: http://v.lusongsong.com/
# ---------------------------------------------------------------
# Misc Theme Settings
# ---------------------------------------------------------------
# Custom Logo.
# !!Only available for Default Scheme currently.
# Options:
# enabled: [true/false] - Replace with specific image
# image: url-of-image - Images's url
custom_logo:
enabled: false
image:
# Code Highlight theme 代码高亮主题
# Available value:
# normal | night | night eighties | night blue | night bright
# https://github.com/chriskempson/tomorrow-theme
highlight_theme: night eighties
# Automatically scroll page to section which is under <!-- more --> mark.
scroll_to_more: true
# Automatically Excerpt. Not recommand.
# Please use <!-- more --> in the post to control excerpt accurately.
auto_excerpt:
enable: true
length: 150
# Wechat Subscriber 微信打赏
#wechat_subscriber:
#enabled: true
#qcode: /path/to/your/wechatqcode ex. /uploads/wechat-qcode.jpg
#description: ex. subscribe to my blog by scanning my public wechat account
# ---------------------------------------------------------------
# Third Party Services Settings
# ---------------------------------------------------------------
# MathJax Support 数学公式
mathjax:
enable: true
cdn: //cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML
#各种第三方服务
# Swiftype Search API Key
#swiftype_key:
# Baidu Analytics ID
#baidu_analytics:
# Duoshuo ShortName
#duoshuo_shortname:
# Disqus
#disqus_shortname:
# Baidu Share
# Available value:
# button | slide
# Warning: Baidu Share does not support https.
#baidushare:
## type: button
# Share
jiathis: false
# Warning: JiaThis does not support https.
#add_this_id:
# Share
duoshuo_share: true
# Google Webmaster tools verification setting
# See: https://www.google.com/webmasters/
#google_site_verification:
# Google Analytics
#google_analytics:
# CNZZ count
#cnzz_siteid:
# Make duoshuo show UA
# user_id must NOT be null when admin_enable is true!
# you can visit http://dev.duoshuo.com get duoshuo user id.
duoshuo_info:
ua_enable: true
admin_enable: ture
user_id: 6343395544286626562
admin_nickname: 博主
# Facebook SDK Support.
# https://github.com/iissnan/hexo-theme-next/pull/410
facebook_sdk:
enable: false
app_id: #<app_id>
fb_admin: #<user_id>
like_button: #true
webmaster: #true
# Facebook comments plugin
# This plugin depends on Facebook SDK.
# If facebook_sdk.enable is false, Facebook comments plugin is unavailable.
facebook_comments_plugin:
enable: false
num_of_posts: 10 # min posts num is 1
width: 100% # default width is 550px
scheme: light # default scheme is light (light or dark)
# Show number of visitors to each article.
# You can visit https://leancloud.cn get AppID and AppKey.
leancloud_visitors:
enable: true
app_id: zieuxKa4IjAP6VgxxXXXXXXXXXXXXXX
app_key: MHGN54IEuofFNXXXXXXXXXXXXX
#这里的id和key请用自己的
# 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: true
# page_pv_header: 热度
# page_pv_footer: ℃
# Tencent analytics ID
# tencent_analytics:
# Enable baidu push so that the blog will push the url to baidu automatically which is very helpful for SEO
baidu_push: true
# Google Calendar
# Share your recent schedule to others via calendar page
#
# API Documentation:
# https://developers.google.com/google-apps/calendar/v3/reference/events/list
calendar:
enable: false
calendar_id: <required>
api_key: <required>
orderBy: startTime
offsetMax: 24
offsetMin: 4
timeZone:
showDeleted: false
singleEvents: true
maxResults: 250
#! ---------------------------------------------------------------
#! DO NOT EDIT THE FOLLOWING SETTINGS
#! UNLESS YOU KNOW WHAT YOU ARE DOING
#! ---------------------------------------------------------------
# Motion
use_motion: true
# Fancybox
fancybox: true
# Script Vendors.
# Set a CDN address for the vendor you want to customize.
# For example
# jquery: https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js
# Be aware that you should use the same version as internal ones to avoid potential problems.
# Please use the https protocol of CDN files when you enable https on your site.
vendors:
# Internal path prefix. Please do not edit it. 5.0以下版本如果打开网页空白，就把vendors文件夹改名为lib,这里对应改。
_internal: lib
# Internal version: 2.1.3
jquery:
# Internal version: 2.1.5
# See: http://fancyapps.com/fancybox/
fancybox:
fancybox_css:
# Internal version: 1.0.6
# See: https://github.com/ftlabs/fastclick
fastclick:
# Internal version: 1.9.7
# See: https://github.com/tuupola/jquery_lazyload
lazyload:
# Internal version: 1.2.1
# See: http://VelocityJS.org
velocity:
# Internal version: 1.2.1
# See: http://VelocityJS.org
velocity_ui:
# Internal version: 0.7.9
# See: https://faisalman.github.io/ua-parser-js/
ua_parser:
# Internal version: 4.4.0
# See: http://fontawesome.io/
fontawesome:
# 多说热评文章 true 或者 false
duoshuo_hotartical: true
# Assets
css: css
js: js
images: images
# Theme version
version: 5.1.0
安装插件
hexo支持插件，可以直接通过命令行安装即可：npm install **plugin-name** --save
更新插件npm update
卸载插件npm uninstall **plugin-name**
下面推荐几个常用的插件：
feed插件:npm install hexo-generator-feed --save
站点地图:npm install hexo-generator-sitemap --save
百度站点地图:npm install hexo-generator-baidu-sitemap --save
自由定制
文章字数、阅读时长统计
修改post.swig模板
模板位置：themesnextlayout\_macropost.swig
安装hexo-wordcount插件
npm install hexo-wordcount --save通过以上安装后，你可以在你的模板文件后者.md文件加入以下相关的标签实现本插件的功能
字数统计:WordCount
<span class="post-count">{{ wordcount(post.content) }}</span>阅读时长预计:Min2Read
<span class="post-count">{{ min2read(post.content) }}</span>总字数统计: TotalCount
<span class="post-count">{{ totalcount(site, '0,0.0a') }}</span>插入的代码以下：
{% if not is_index and theme.facebook_sdk.enable and theme.facebook_sdk.like_button %}
|
<div class="fb-like" data-layout="button_count" data-share="true"></div>
{% endif %}
<!--从这里插入代码，上边是Facebook的代码-->
<!--leancloud文章阅读量统计（主题默认已经添加）参考：http://www.joryhe.com/2016-05-29-how_to_create_leancloud_read_Counter.html-->
{# LeanCould PageView #}
{% if theme.leancloud_visitors.enable %}
<span id="{{ url_for(post.path) }}" class="leancloud_visitors" data-flag-title="{{ post.title }}">
|
<span class="post-meta-item-icon">
<i class="fa fa-eye"></i>
</span>
<span class="post-meta-item-text">{{__('post.visitors')}} </span>
<span class="leancloud-visitors-count"></span>
</span>
{% endif %}
<!--字数、阅读时长统计-->
<span class="post-time">
|
<span class="post-meta-item-icon">
<i class="fa fa-calendar-o"></i>
</span>
<span class="post-meta-item-text">字数统计:</span>
<span class="post-count">{{ wordcount(post.content) }}(字)</span>
</span>
<span class="post-time">
|
<span class="post-meta-item-icon">
<i class="fa fa-calendar-o"></i>
</span>
<span class="post-meta-item-text">阅读时长:</span>
<span class="post-count">{{ min2read(post.content) }}(分)</span>
</span>
<!--不蒜子网站访问量统计（主题默认已经添加），如果出现排班错位请忽略，下面用官网的方法实现-->
{% if not is_index and theme.busuanzi_count.enable and theme.busuanzi_count.page_pv %}
|
<span class="page-pv">{{ theme.busuanzi_count.page_pv_header }}
<span class="busuanzi-value" id="busuanzi_value_page_pv" ></span>{{ theme.busuanzi_count.page_pv_footer }}
</span>
{% endif %}文章结语
修改post.swig模板
模板位置：themesnextlayout\_macropost.swig
{% if post.type === 'picture' %}
<a href="{{ url_for(post.path) }}">{{ post.content }}</a>
{% else %}
{{ post.content }}
{% endif %}
{% endif %}
{% else %}
{{ post.content }}
<!--这里是每篇文章的尾巴，从这里开始插入代码-->
<html>
<body>
<h2 id="结语"><a href="#结语" class="headerlink" title="结语"></a>结语</h2>
<blockquote><p>如果您觉得本博客还不错，欢迎继续关注本博客，欢迎多提宝贵意见，非常感谢！</p></blockquote></div>
<div style="text-align:center;color:#ccc;font-size:14px;">------本文结束<i class="fa fa-paw"></i>感谢阅读------</div>
</body>
</html>
<!--下面这部分左边有框，但位置不够就会排班错乱
<html>
<body>
<h1>结语</h1>
<p><h5><a href="#" onclick="go_my_site()" rel="external">Leo Lan Blog Share For you!</a></h5></p>
<p>如果您觉得本博客还不错，欢迎继续关注Leo Lan的博客，欢迎多提宝贵意见，非常感谢！</p>
</body>
</html>
<html>
<body>
<h2 id="结语"><a href="#结语" class="headerlink" title="结语"></a>结语</h2>
<blockquote><p>如果您觉得本博客还不错，欢迎收藏书签，欢迎多提宝贵意见，非常感谢！</p>
<footer><strong>Welcome to LeoLan'S BLOG</strong>
<cite><a href="#" onclick="go_my_site()" rel="external">Leo Lan Blog Share For you!</a></cite></footer></blockquote></div>
</body>
</html>
-->文章底部的标签云锚点
修改post.swig模板
模板位置：themesnextlayout\_macropost.swig
<!--这是文章底部标签云锚点，不喜欢就注释掉
<footer class="post-footer">
{% if post.tags and post.tags.length and not is_index %}
<div class="post-tags">
{% for tag in post.tags %}
<a href="{{ url_for(tag.path) }}" rel="tag"># {{ tag.name }}</a>
{% endfor %}
</div>
{% endif %}
-->不蒜子网站访问量统计、删除NEXT主题自带尾巴
修改footer.swig模板
模板位置：themesnextlayout\_partialsfooter.swig
官网：http://service.ibruce.info
http://ibruce.info/2015/04/04/busuanzi/
把代码改成这个样子，busuanzi_value_site_uv中，uv和pv功能是不一样的。
<div class="powered-by">
{{ __('footer.powered', '') }}
</div>
<div class="theme-info">
{{ __('footer.theme') }}<span id="busuanzi_value_site_uv"></span>位小伙伴
</div>
<script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js">
</script>同时更改语言文件中对应的名称
编辑：themeslanguageszh_Hans.yml
footer:
powered: 本站总访问量<span id="busuanzi_value_site_pv"></span>
theme: 您是第
#<a target="_blank" href="http://www.miitbeian.gov.cn/">粤ICP备16026009号-2</a>开源许可
知识共享署名4.0 国际许可协议：https://creativecommons.org/choose
居中模块
把要居中的模块、代码、文字、插件、外链等，放在下面代码的中间即可居中显示。
<!-- HTML方式: 直接在 Markdown 文件中编写 HTML 来调用 -->
<!-- 其中 class="blockquote-center" 是必须的 -->
<blockquote class="blockquote-center">优秀的人，不是不合群，而是他们合群的人里面没有你</blockquote>
或者
<!-- 标签 方式，要求版本在0.4.5或以上 -->
{% centerquote %}优秀的人，不是不合群，而是他们合群的人里面没有你{% endcenterquote %}
或者
<!-- 标签别名 -->
{% cq %} 优秀的人，不是不合群，而是他们合群的人里面没有你 {% endcq %}
留言板
编辑：themeslanguageszh_Hans.yml
title: #这里增加
guestbook: 留言板
menu: #这里增加
guestbook: 给我留言在站点source目录下新建guestbook文件夹，里面新建index.md文件，内容如下(其中调用HTML代码，插入了一个播放器)：
---
title: 留言板
date: 2016-11-14 17:21:10
---
<blockquote class="blockquote-center">
<!--网易云音乐的http地址，改为https，用https加载http资源会被屏蔽-->
<h2>Stay Hungry,Stay Foolish</h2>
<!--
<embed src="https://music.163.com/style/swf/widget.swf?sid=34971711&type=1&auto=1&width=310&height=90" width="330" height="110" allowNetworking="all"></embed>
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=110 src="https://music.163.com/outchain/player?type=1&id=34971711&auto=1&height=90"></iframe>
<embed src="https://music.163.com/style/swf/widget.swf?sid=32507038&type=2&auto=1&width=320&height=66" width="340" height="86" allowNetworking="all"></embed>
-->
<!--这里是插入视频的方法
<iframe src="//www.youtube.com/embed/JMl8cQjBfqk" width="560" height="315" frameborder="0" allowfullscreen></iframe>-->
</blockquote>
<br/>
<span id="yu-2">最近访客</span>
<div class="ds-recent-visitors" data-num-items="39" data-avatar-size="40" id="ds-recent-visitors"></div>
<br/>编辑主题配置文件：_config.yml
menu: #在这里加上
guestbook: /guestbook文章置顶
修改 hexo-generator-index 插件
修改文件前先备份文件：node_modules/hexo-generator-index/lib/generator.js
把里面的内容替换为：
'use strict';
var pagination = require('hexo-pagination');
module.exports = function(locals){
var config = this.config;
var posts = locals.posts;
posts.data = posts.data.sort(function(a, b) {
if(a.top && b.top) { // 两篇文章top都有定义
if(a.top == b.top) return b.date - a.date; // 若top值一样则按照文章日期降序排
else return b.top - a.top; // 否则按照top值降序排
}
else if(a.top && !b.top) { // 以下是只有一篇文章top有定义，那么将有top的排在前面（这里用异或操作居然不行233）
return -1;
}
else if(!a.top && b.top) {
return 1;
}
else return b.date - a.date; // 都没定义按照文章日期降序排
});
var paginationDir = config.pagination_dir || 'page';
return pagination('', posts, {
perPage: config.index_generator.per_page,
layout: ['index', 'archive'],
format: paginationDir + '/%d/',
data: {
__index: true
}
});
};然后再每篇文章的yum头信息中增加top: XXX即可，值越大越靠前。
如果只置顶一两篇文章可以用简单的方法，把日期2016年改为2116年或其他远大于2016的数字，数字太小的话如2018年，到了2018年就不置顶了。
字体
关于字体的修改开始时遇到很多问题，到后来才找到了原因，是因为引用的字体在www.google.com/fonts（默认是Google字体库）里找不到，或者是付费的字体。修改为免费的字体就正常使用了。打开Google Fonts，右上角查找你要的字体，能搜索到的话把全名复制下来，填写在配置文件中。
修改themesnext_config.yml找到Font Settings
# Font Settings
# - Find fonts on Google Fonts (https://www.google.com/fonts)
# - All fonts set here will have the following styles:
# light, light italic, normal, normal intalic, bold, bold italic
# - Be aware that setting too much fonts will cause site running slowly
# - Introduce in 5.0.1
# ---------------------------------------------------------------
font:
enable: true
# Uri of fonts host. E.g. //fonts.googleapis.com (Default)
# 外链字体库地址，例如 //fonts.googleapis.com (默认值)
加载慢的话搜索fonts.googleapis.com即可找到替换地址,这里注意使用的地址中包含了下面设置的字体，没有的话是默认字体。
host:
#fonts.css.network
# Global font settings used on <body> element.
# 全局字体，应用在 <body> 元素上
global:
# external: true will load this font family from host.
external: true
family: Lato
#Monda
# Font settings for Headlines (h1, h2, h3, h4, h5, h6)
# Fallback to `global` font settings.
# 标题字体 (h1, h2, h3, h4, h5, h6)
headings:
external: true
family:
# Font settings for posts
# Fallback to `global` font settings.
# 文章字体
posts:
external: true
family: Roboto
# Font settings for Logo
# Fallback to `global` font settings.
# The `size` option use `px` as unit
# Logo 字体
logo:
external: true
family: Georgia
size: 24
# Font settings for <code> and code blocks.
# 代码字体，应用于 <code> 以及代码块
codes:
external: true
family:
size: 14
#字体大小直接加个size: 写就行，单位是px，不填写则为默认大小。
#"Source Code Pro", "PT Mono", "DejaVu Sans Mono", 参考：
Next主题设置字体 | 如何引用google字体
如果要在文章中临时引用特殊的字体格式，可以直接在 Markdown 文档中使用 html 语法
<font size=4 > 这里输入文字，自定义大小 </font>
<font color="#FF0000"> 这里输入文字，自定义颜色的字体 </font> 404页面
404页面可以自己写，也可以引用腾讯公益404页面。
这是嵌入到主题中的404页面而不是新开一个页面；在站点目录source目录下新建404.html文件，粘贴以下代码：
<!DOCTYPE HTML>
<html>
<head>
<title>404 - arao'blog</title>
<meta name="description" content="404错误，页面不存在！">
<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"/>
</head>
<body>
<script type="text/javascript" src="http://qzonestyle.gtimg.cn/qzone_v6/lostchild/search_children.js" charset="utf-8"></script>
</body>
</html>打赏
修改reward.swig模板
模板位置：themesnextlayout\_macroreward.swig
直接全部替换代码，这段代码是圆形的打赏按钮，二维码左右排列。
{% if theme.alipay or theme.wechatpay %}
<div style="padding: 10px 0; margin: 20px auto; width: 90%; text-align: center">
<div style="margin-bottom: 10px;font-size: 16px;font-weight: 600;">您的支持将鼓励我继续创作,非常感谢！</div>
<button id="rewardButton", disable="enable", onclick="var qr = document.getElementById('QR'); if (qr.style.display === 'none') {qr.style.display='block';} else {qr.style.display='none'}", style="cursor: pointer; border: 0; outline: 0; border-radius: 100%; padding: 0; margin: 0; letter-spacing: normal; text-transform: none; text-indent: 0px; text-shadow: none">
<span onmouseover="this.style.color='rgb(236,96,0)';this.style.background='rgb(204,204,204)'" onMouseOut="this.style.color='#fff';this.style.background='rgb(236,96,0)'" style="display: inline-block; width: 70px; height: 70px; border-radius: 100%; line-height: 81px; color: #fff; font: 400 35px/75px 'microsofty'; background: rgb(236,96,0)">赏</span>
</button>
<div id="QR" style="display: none;">
{% if theme.alipay %}
<div id="alipay" style="display: inline-block">
<img id="alipay_qr" src="{{ theme.alipay }}" alt="{{ theme.author }} Alipay" style="width: 200px; max-width: 100%; display: inline-block"/>
<p>支付宝打赏</p>
</div>
{% endif %}
{% if theme.wechatpay %}
<div id="wechat" style="display: inline-block">
<img id="wechat_qr" src="{{ theme.wechatpay }}" alt="{{ theme.author }} WeChat Pay" style="width: 200px; max-width: 100%; display: inline-block"/>
<p>微信打赏</p>
</div>
{% endif %}
</div>
</div>
{% endif %}最近访客
模板位置：themesnextlayout\_macroreward.swig
在最后换行加上这段代码。
<h3 id="最近访客"><a href="#最近访客" class="headerlink" title="最近访客"></a>最近访客</h3><div class="ds-recent-visitors" data-num-items="28" data-avatar-size="42" id="ds-recent-visitors"></div>class=“ds-recent-visitors” //指定显示最近访客容器
data-num-items=“28” //显示最近访客的数量
data-avatar-size=“42” //显示最近访客头像尺寸大小
id=“ds-recent-visitors” //为了调节最近访客样式加的这样，每个页面都有最近访客了（只能看到注册了多说账户的用户）
SEO
网站地图
安装hexo的sitemap网站地图生成插件
npm install hexo-generator-sitemap --save
npm install hexo-generator-baidu-sitemap --save在你的hexo站点的_config.yml添加下面的代码
# hexo sitemap网站地图
sitemap:
path: sitemap.xml
baidusitemap:
path: baidusitemap.xml #如果报path错误就把前面增加baidu配置成功后，hexo编译时会在hexo站点根目录生成sitemap.xml和baidusitemap.xml
其中sitemap.xml适合提交给谷歌搜素引擎，baidusitemap.xml适合提交百度搜索引擎。
蜘蛛协议
在robots.txt中添加站点地图文件，如下（没有robots.txt就在站点目录source下新建）：
# hexo robots.txt
User-agent: *
Allow: /
Allow: /archives/
Disallow: /lib/
Disallow: /js/
Disallow: /css/
Disallow: /fonts/
Disallow: /fancybox/
Sitemap: http://www.leolan.top/sitemap.xml
Sitemap: http://www.leolan.top/baidusitemap.xmlNexT主题，首页title的优化
感谢arao的教程
修改themesnextlayoutindex.swig文件，将下面代码
{% block title %} {{ config.title }} {% endblock %}改为
{% block title %} {{ config.title }} - {{ theme.description }} {% endblock %}这时候你的首页标题会更符合网站名称 - 网站描述这习惯。
把关键词(在主题配置文件_config.yml中设置keywords:)也显示在Title标题里，可改成:
{% block title %} {{ theme.keywords }} - {{ config.title }} - {{ theme.description }} {% endblock %}
或（排列顺序看自己喜欢）
{% block title %} {{ config.title }} - {{ theme.keywords }} {% endblock %}注意：别堆砌关键字，整个标题一般不超过80个字符，可以通过chinaz的seo综合查询检查。
限制出站链接
网络爬虫会在当前页面搜索所有的链接，故有可能跳到别的网站。nofollow 标签是由谷歌领头创新的一个 “反垃圾链接” 的标签，并被各大搜索引擎广泛支持，引用 nofollow 标签的目的是：用于指示搜索引擎不要追踪（即抓取）网页上的带有 nofollow 属性的任何出站链接，以减少垃圾链接的分散网站权重。
npm install hexo-autonofollow --save在 站点配置文件 中添加如下代码。
nofollow:
enable: true
exclude: # 例外的链接，可将友情链接放置此处
- exclude1.com
- exclude2.com文章链接唯一化
也许你会数次更改文章题目或者变更文章发布时间，在默认设置下，文章链接都会改变，不利于搜索引擎收录，也不利于分享。唯一永久链接才是更好的选择。安装此插件后，不要在 hexo s 模式下更改文章文件名，否则文章将成空白,需要重新hexo s才行。
npm install hexo-abbrlink --save在 站点配置文件 中查找代码 permalink:，将其更改为:
permalink: posts/:abbrlink/ # “posts/” 可自行更换在 站点配置文件 中添加如下代码：
# abbrlink config
abbrlink:
alg: crc32 # 算法：crc16(default) and crc32
rep: hex # 进制：dec(default) and hex永久链接有下面4种组合
crc16 & hex
https://post.zz173.com/posts/66c8.html
crc16 & dec
https://post.zz173.com/posts/65535.html
crc32 & hex
https://post.zz173.com/posts/8ddf18fb.html
crc32 & dec
https://post.zz173.com/posts/1690090958.html百度网址推送
修改baidu-push.swig模板
模板位置：themesnextlayout\_scriptsbaidu-push.swig
没有此文件就新建
{% if theme.baidu_push %}
<script>
(function(){
var bp = document.createElement('script');
var curProtocol = window.location.protocol.split(':')[0];
if (curProtocol === 'https') {
bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
}
else {
bp.src = 'http://push.zhanzhang.baidu.com/push.js';
}
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(bp, s);
})();
</script>
{% endif %}编辑站点配置文件：_config.yml
加上以下代码：
baidu_url_submit: #百度链接推送，推送刚刚生成的永久链接
count: 5 ## 比如3，代表提交最新的三个链接
host: www.leolan.top ## 在百度站长平台中注册的域名
token: kZ5xboXBFPxQ0g7N ## 请注意这是您的秘钥， 请不要发布在公众仓库里!
path: /baidu_urls.txt ## 文本文档的地址， 新链接会保存在此文本文档里主动推送新链接
解决百度爬虫被禁止访问的问题，提升网站收录质量和速度。
npm install hexo-baidu-url-submit --save在 站点配置文件 中添加如下代码。
baidu_url_submit:
count: 5 ## 比如3，代表提交最新的三个链接
host: blog.tangxiaozhu.com ## 在百度站长平台中注册的域名
token: ## 请注意这是您的秘钥， 请不要发布在公众仓库里!
path: baidu_urls.txt ## 文本文档的地址， 新链接会保存在此文本文档里向百度提交所有链接
这是LoveNight的脚本，先本地安装Python。
#!/usr/bin/env python
# -*- coding: utf-8 -*-
# @Author: LoveNight
# @Date: 2015-11-16 20:45:59
# @Last Modified by: lulee007
# @Last Modified time: 2016-01-16 21:06:50
import os
import sys
import json
from bs4 import BeautifulSoup as BS
import requests
import codecs
"""
hexo 博客专用，向百度站长平台提交所有网址
本脚本必须放在 hexo 博客的根目录下执行！需要已安装生成百度站点地图的插件。
百度站长平台提交链接：http://zhanzhang.baidu.com/linksubmit/index
主动推送：最为快速的提交方式，推荐您将站点当天新产出链接立即通过此方式推送给百度，以保证新链接可以及时被百度收录。
从中找到自己的接口调用地址
"""
url = 'http://data.zz.baidu.com/urls?site=leolan.top&token=kZ5xboXBFPxQ0g7N' #这里是你的百度推送地址。
baidu_sitemap = os.path.join(sys.path[0], 'public', 'baidusitemap.xml')
google_sitemap = os.path.join(sys.path[0], 'public', 'baidusitemap_zhanwei.xml')
# sitemap = [baidu_sitemap, google_sitemap]
sitemap = [baidu_sitemap]
# assert (os.path.exists(baidu_sitemap) or os.path.exists(
# google_sitemap)), "没找到任何网站地图，请检查！"
assert os.path.exists(baidu_sitemap) , "没找到任何网站地图，请检查！"
# 从站点地图中读取网址列表
def getUrls():
urls = []
for _ in sitemap:
if os.path.exists(_):
with codecs.open(_, "r", "utf-8") as f:
xml = f.read()
soup = BS(xml, "xml")
tags = soup.find_all("loc")
urls += [x.string for x in tags]
if _ == baidu_sitemap:
tags = soup.find_all("breadCrumb", url=True)
print("")
urls += [x["url"] for x in tags]
return urls
# POST提交网址列表
def postUrls(urls):
urls = set(urls) # 先去重
print("一共提取出 %s 个网址" % len(urls))
data = "\n".join(urls)
return requests.post(url, data=data).text
if __name__ == '__main__':
urls = getUrls()
result = postUrls(urls)
print("提交结果：")
print(result)语法优化
默认的语法无法添加角标（footnotes）以注明引用，这种可来回跳转的引用还是挺有用处的。
npm install hexo-footnotes --save安装完毕请确认是否生效，如不生效，在 站点配置文件 中添加如下代码以手动启用：
plugins:
- hexo-footnotes
页面留白(扩大显示范围)
浏览器留白太多，代码块看起来比较麻烦，想让更多空间显示文章。
NexT 对于内容的宽度的设定如下：
700px，当屏幕宽度 < 1600px
900px，当屏幕宽度 >= 1600px
移动设备下，宽度自适应
如果你需要修改内容的宽度，同样需要编辑样式文件。 编辑主题的 source/css/_variables/custom.styl 文件，新增变量：
// 修改成你期望的宽度，默认700px
$content-desktop = 700px
// 当视窗超过 1600px 后的宽度，默认900px
$content-desktop-large = 900px如果主题风格选择的是Pisces；那么同时还要修改header 的宽度、.main-inner 的宽度以及 .content-wrap 的宽度(如果没什么问题可以不修改custom.styl文件)。
编辑文件：source/css/_schemes/Picses/_layout.styl
//可以使用百分比，也可以是像素，80%是比较合适的。
//开头header中修改为80%
header{ width: 80%; }
//.container中系应该为80%
.main-inner { width: 80%; }
//最后修改.content-wrap
.content-wrap { width: calc(100% - 260px); }多说评论框自定义css
感谢arao的代码
进入多说管理后台
把下面代码粘贴进去保存
#ds-reset .ds-avatar img,
#ds-recent-visitors .ds-avatar img {
width: 54px;
height: 54px; /*设置图像的长和宽，这里要根据自己的评论框情况更改*/
border-radius: 27px; /*设置图像圆角效果,在这里我直接设置了超过width/2的像素，即为圆形了*/
-webkit-border-radius: 27px; /*圆角效果：兼容webkit浏览器*/
-moz-border-radius: 27px;
box-shadow: inset 0 -1px 0 #3333sf; /*设置图像阴影效果*/
-webkit-box-shadow: inset 0 -1px 0 #3333sf;
-webkit-transition: 0.4s;
-webkit-transition: -webkit-transform 0.4s ease-out;
transition: transform 0.4s ease-out; /*变化时间设置为0.4秒(变化动作即为下面的图像旋转360读）*/
-moz-transition: -moz-transform 0.4s ease-out;
}
#ds-reset .ds-avatar img:hover,
#ds-recent-visitors .ds-avatar img:hover {
/*设置鼠标悬浮在头像时的CSS样式*/ box-shadow: 0 0 10px #fff;
rgba(255, 255, 255, .6), inset 0 0 20px rgba(255, 255, 255, 1);
-webkit-box-shadow: 0 0 10px #fff;
rgba(255, 255, 255, .6), inset 0 0 20px rgba(255, 255, 255, 1);
transform: rotateZ(360deg); /*图像旋转360度*/
-webkit-transform: rotateZ(360deg);
-moz-transform: rotateZ(360deg);
}
#ds-thread #ds-reset .ds-textarea-wrapper textarea {
background: url(http://ww4.sinaimg.cn/small/649a4735gw1et7gnhy5fej20zk0m8q3q.jpg) right no-repeat;
}
#ds-recent-visitors .ds-avatar {
float: left
}
/*隐藏多说底部版权*/
#ds-thread #ds-reset .ds-powered-by {
display: none;
}解决多说评论不稳定、加载慢
把多说评论依赖的embed.js放置底部，修改
themes/next/layout/_scripts/third-party/comments/duoshuo.swig文件
将
(document.getElementsByTagName('head')[0]修改为
(document.getElementById('footer')多说userid
主题配置中需要用到user_id
duoshuo_info:
ua_enable: true
admin_enable: ture
user_id: 6343395544286626562
admin_nickname: 博主动态背景
修改_layout.swig模板
模板位置：themesnextlayout\_layout.swig
在末尾</body>前加上下面一句
<!-- 背景动画 -->
#默认灰色线条
<script type="text/javascript" src="/js/src/particle.js"></script>
#浅蓝色线条
<script type="text/javascript" src="/js/src/particle.js" count="50" zindex="-2" opacity="1" color="0,104,183"></script>在themessourcejssrc下新建文件particle.js写上以下代码（也可以自己下载其他js,修改方式差不多）
!function(){function n(n,e,t){return n.getAttribute(e)||t}function e(n){return document.getElementsByTagName(n)}function t(){var t=e("script"),o=t.length,i=t[o-1];return{l:o,z:n(i,"zIndex",-1),o:n(i,"opacity",.5),c:n(i,"color","0,0,0"),n:n(i,"count",99)}}function o(){c=u.width=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth,a=u.height=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight}function i(){l.clearRect(0,0,c,a);var n,e,t,o,u,d,x=[w].concat(y);y.forEach(function(i){for(i.x+=i.xa,i.y+=i.ya,i.xa*=i.x>c||i.x<0?-1:1,i.ya*=i.y>a||i.y<0?-1:1,l.fillRect(i.x-.5,i.y-.5,1,1),e=0;e<x.length;e++)n=x[e],i!==n&&null!==n.x&&null!==n.y&&(o=i.x-n.x,u=i.y-n.y,d=o*o+u*u,d<n.max&&(n===w&&d>=n.max/2&&(i.x-=.03*o,i.y-=.03*u),t=(n.max-d)/n.max,l.beginPath(),l.lineWidth=t/2,l.strokeStyle="rgba("+m.c+","+(t+.2)+")",l.moveTo(i.x,i.y),l.lineTo(n.x,n.y),l.stroke()));x.splice(x.indexOf(i),1)}),r(i)}var c,a,u=document.createElement("canvas"),m=t(),d="c_n"+m.l,l=u.getContext("2d"),r=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(n){window.setTimeout(n,1e3/45)},x=Math.random,w={x:null,y:null,max:2e4};u.id=d,u.style.cssText="position:fixed;top:0;left:0;z-index:"+m.z+";opacity:"+m.o,e("body")[0].appendChild(u),o(),window.onresize=o,window.onmousemove=function(n){n=n||window.event,w.x=n.clientX,w.y=n.clientY},window.onmouseout=function(){w.x=null,w.y=null};for(var y=[],s=0;m.n>s;s++){var f=x()*c,h=x()*a,g=2*x()-1,p=2*x()-1;y.push({x:f,y:h,xa:g,ya:p,max:6e3})}setTimeout(function(){i()},100)}();背景透明
在 themesnextsourcecss\_customcustom.styl 中写上 .content-wrap {background: transparent;}
custom.styl文件为用户自定义风格，卸载里面的内容会优先覆盖主题的设定，也可以定义其他的方法等。
背景放图片
首先找到一个背景图片放到 themesnextsourceimages下；
修改themesnextsourcecss_schemesPisces（Mist和Muse也行）index.styl文件，
在文件的最上方加上一代码
body { background:url(/images/backGround.jpg);} 修改文章超链接样式
将链接文本设置为蓝色，鼠标划过时文字颜色加深，并显示下划线。
修改 themesnextsourcecss\_customcustom.styl ，添加如下 css 样式（颜色可以自己更改，百度html颜色代码即可找到）：
.post-body p a {
color: #0593d3;
border-bottom: none;
&:hover {
color: #0477ab;
text-decoration: underline;
}
}High一下
第一种
修改header.swig模板
模板位置：themesnextlayout\_partialsheader.swig
在以下代码的结尾换行
{% if hasSearch %}
<li class="menu-item menu-item-search">
{% if theme.swiftype_key %}
<a href="javascript:;" class="st-search-show-outputs">
{% elseif config.search %}
<a href="javascript:;" class="popup-trigger">
{% endif %}
{% if theme.menu_icons.enable %}
<i class="menu-item-icon fa fa-search fa-fw"></i> <br />
{% endif %}
{{ __('menu.search') }}
</a>
</li>
{% endif %}插入以下内容,感谢Neveryu修复了一些bug，以下是Neveryu的代码。
<!-- 自定义High一下的功能 -->
<li class="menu-item"> <a title="把这个链接拖到你的工具栏中,任何网页都可以High" href='javascript:(
/*
* Copyright (C) 2016 Never_yu (Neveryu.github.io) <React.dong.yu@gmail.com>
* Sina Weibo (http://weibo.com/Neveryu)
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
function go() {
var songs = [
"https://image.leolan.top/tongxingSibel%20-%20Im%20Sorry.mp3",
"https://image.leolan.top/Music-sunburst.mp3",
"https://image.leolan.top/blog/20161115/150103346.mp3",
"https://image.leolan.top/blog/20161115/150842689.mp3",
"https://image.leolan.top//blog/Apple%20&%20Stone%20-%20Lost.mp3"
];
function c() {
var e = document.createElement("link");
e.setAttribute("type", "text/css");
e.setAttribute("rel", "stylesheet");
e.setAttribute("href", f);
e.setAttribute("class", l);
document.body.appendChild(e)
}
function h() {
var e = document.getElementsByClassName(l);
for (var t = 0; t < e.length; t++) {
document.body.removeChild(e[t])
}
}
function p() {
var e = document.createElement("div");
e.setAttribute("class", a);
document.body.appendChild(e);
setTimeout(function() {
document.body.removeChild(e)
}, 100)
}
function d(e) {
return {
height : e.offsetHeight,
width : e.offsetWidth
}
}
function v(i) {
var s = d(i);
return s.height > e && s.height < n && s.width > t && s.width < r
}
function m(e) {
var t = e;
var n = 0;
while (!!t) {
n += t.offsetTop;
t = t.offsetParent
}
return n
}
function g() {
var e = document.documentElement;
if (!!window.innerWidth) {
return window.innerHeight
} else if (e && !isNaN(e.clientHeight)) {
return e.clientHeight
}
return 0
}
function y() {
if (window.pageYOffset) {
return window.pageYOffset
}
return Math.max(document.documentElement.scrollTop, document.body.scrollTop)
}
function E(e) {
var t = m(e);
return t >= w && t <= b + w
}
function S() {
var e = document.getElementById("audio_element_id");
if(e != null){
var index = parseInt(e.getAttribute("curSongIndex"));
if(index > songs.length - 2) {
index = 0;
} else {
index++;
}
e.setAttribute("curSongIndex", index);
N();
}
e.src = i;
e.play()
}
function x(e) {
e.className += " " + s + " " + o
}
function T(e) {
e.className += " " + s + " " + u[Math.floor(Math.random() * u.length)]
}
function N() {
var e = document.getElementsByClassName(s);
var t = new RegExp("\\b" + s + "\\b");
for (var n = 0; n < e.length; ) {
e[n].className = e[n].className.replace(t, "")
}
}
function initAudioEle() {
var e = document.getElementById("audio_element_id");
if(e === null){
e = document.createElement("audio");
e.setAttribute("class", l);
e.setAttribute("curSongIndex", 0);
e.id = "audio_element_id";
e.loop = false;
e.bgcolor = 0;
e.addEventListener("canplay", function() {
setTimeout(function() {
x(k)
}, 500);
setTimeout(function() {
N();
p();
for (var e = 0; e < O.length; e++) {
T(O[e])
}
}, 15500)
}, true);
e.addEventListener("ended", function() {
N();
h();
go();
}, true);
e.innerHTML = " <p>If you are reading this, it is because your browser does not support the audio element. We recommend that you get a new browser.</p> <p>";
document.body.appendChild(e);
}
}
initAudioEle();
var e = 30;
var t = 30;
var n = 350;
var r = 350;
var curSongIndex = parseInt(document.getElementById("audio_element_id").getAttribute("curSongIndex"));
var i = songs[curSongIndex];
var s = "mw-harlem_shake_me";
var o = "im_first";
var u = ["im_drunk", "im_baked", "im_trippin", "im_blown"];
var a = "mw-strobe_light";
/* harlem-shake-style.css，替换成你的位置，也可以直接使用：//s3.amazonaws.com/moovweb-marketing/playground/harlem-shake-style.css */
var f = "//s3.amazonaws.com/moovweb-marketing/playground/harlem-shake-style.css";
var l = "mw_added_css";
var b = g();
var w = y();
var C = document.getElementsByTagName("*");
var k = null;
for (var L = 0; L < C.length; L++) {
var A = C[L];
if (v(A)) {
if (E(A)) {
k = A;
break
}
}
}
if (A === null) {
console.warn("Could not find a node of the right size. Please try a different page.");
return
}
c();
S();
var O = [];
for (var L = 0; L < C.length; L++) {
var A = C[L];
if (v(A)) {
O.push(A)
}
}
})()'><i class="menu-item-icon fa fa-music fa-fw"></i>High一下</a> </li>
<!-- end High一下 -->第二种
不修改themesnextlayout\_partialsheader.swig文件
而是修改themesnextlayout\_macrosidebar.swig
{% if theme.rss %}
<div class="feed-link motion-element">
<a href="{{ url_for(theme.rss) }}" rel="alternate">
<i class="fa fa-rss"></i>
RSS
</a>
<!-- 在RSS的div内加入，引用相同的样式 -->
<!-- 自定义High一下的功能 -->
<a href='javascript:(
function go() {
var songs = [
"https://image.leolan.top/tongxingSibel%20-%20Im%20Sorry.mp3",
"https://image.leolan.top/Music-sunburst.mp3",
"https://image.leolan.top/blog/20161115/150103346.mp3",
"https://image.leolan.top/blog/20161115/150842689.mp3",
"https://image.leolan.top//blog/Apple%20&%20Stone%20-%20Lost.mp3"
];
function c() {
var e = document.createElement("link");
e.setAttribute("type", "text/css");
e.setAttribute("rel", "stylesheet");
e.setAttribute("href", f);
e.setAttribute("class", l);
document.body.appendChild(e)
}
function h() {
var e = document.getElementsByClassName(l);
for (var t = 0; t < e.length; t++) {
document.body.removeChild(e[t])
}
}
function p() {
var e = document.createElement("div");
e.setAttribute("class", a);
document.body.appendChild(e);
setTimeout(function() {
document.body.removeChild(e)
}, 100)
}
function d(e) {
return {
height : e.offsetHeight,
width : e.offsetWidth
}
}
function v(i) {
var s = d(i);
return s.height > e && s.height < n && s.width > t && s.width < r
}
function m(e) {
var t = e;
var n = 0;
while (!!t) {
n += t.offsetTop;
t = t.offsetParent
}
return n
}
function g() {
var e = document.documentElement;
if (!!window.innerWidth) {
return window.innerHeight
} else if (e && !isNaN(e.clientHeight)) {
return e.clientHeight
}
return 0
}
function y() {
if (window.pageYOffset) {
return window.pageYOffset
}
return Math.max(document.documentElement.scrollTop, document.body.scrollTop)
}
function E(e) {
var t = m(e);
return t >= w && t <= b + w
}
function S() {
var e = document.getElementById("audio_element_id");
if(e != null){
var index = parseInt(e.getAttribute("curSongIndex"));
if(index > songs.length - 2) {
index = 0;
} else {
index++;
}
e.setAttribute("curSongIndex", index);
N();
}
e.src = i;
e.play()
}
function x(e) {
e.className += " " + s + " " + o
}
function T(e) {
e.className += " " + s + " " + u[Math.floor(Math.random() * u.length)]
}
function N() {
var e = document.getElementsByClassName(s);
var t = new RegExp("\\b" + s + "\\b");
for (var n = 0; n < e.length; ) {
e[n].className = e[n].className.replace(t, "")
}
}
function initAudioEle() {
var e = document.getElementById("audio_element_id");
if(e === null){
e = document.createElement("audio");
e.setAttribute("class", l);
e.setAttribute("curSongIndex", 0);
e.id = "audio_element_id";
e.loop = false;
e.bgcolor = 0;
e.addEventListener("canplay", function() {
setTimeout(function() {
x(k)
}, 500);
setTimeout(function() {
N();
p();
for (var e = 0; e < O.length; e++) {
T(O[e])
}
}, 15500)
}, true);
e.addEventListener("ended", function() {
N();
h();
go();
}, true);
e.innerHTML = " <p>If you are reading this, it is because your browser does not support the audio element. We recommend that you get a new browser.</p> <p>";
document.body.appendChild(e);
}
}
initAudioEle();
var e = 30;
var t = 30;
var n = 350;
var r = 350;
var curSongIndex = parseInt(document.getElementById("audio_element_id").getAttribute("curSongIndex"));
var i = songs[curSongIndex];
var s = "mw-harlem_shake_me";
var o = "im_first";
var u = ["im_drunk", "im_baked", "im_trippin", "im_blown"];
var a = "mw-strobe_light";
/* harlem-shake-style.css，替换成你的位置，也可以直接使用：//s3.amazonaws.com/moovweb-marketing/playground/harlem-shake-style.css */
var f = "//s3.amazonaws.com/moovweb-marketing/playground/harlem-shake-style.css";
var l = "mw_added_css";
var b = g();
var w = y();
var C = document.getElementsByTagName("*");
var k = null;
for (var L = 0; L < C.length; L++) {
var A = C[L];
if (v(A)) {
if (E(A)) {
k = A;
break
}
}
}
if (A === null) {
console.warn("Could not find a node of the right size. Please try a different page.");
return
}
c();
S();
var O = [];
for (var L = 0; L < C.length; L++) {
var A = C[L];
if (v(A)) {
O.push(A)
}
}
})()'><i class="menu-item-icon fa fa-music fa-fw"></i>High</a>
</div>
<!-- end High一下 -->
{% endif %}如果需要并排显示，像这样子：
修改文件：themessourcecss\_schemesPisces（主题风格对应的文件夹）_sidebar.styl
找到这样一段，把display: block;改为display: inline-block;
.feed-link a {
display: inline-block; //并行显示，block则为分行显示
color: $orange;
border: none;给 Github 添加 README
默认情况下，Github中每一个项目，我们希望有一份README.md的文件来作为项目的说明，但是我们在项目根目录下的blog\source目录下创建一份README.md文件，写好说明介绍，部署的时候，这个README.md会被hexo解析掉，而不会被解析到Github中去的。
正确的解决方法其实很简单：
把README.md文件的后缀名改成"MDOWN"然后扔到blog\source文件夹下即可，这样hexo不会解析，Github也会将其作为MD文件解析。
或者你还可以在站点配置文件中修改，以禁止编译文件。
skip_render:
- README.md更换来必力评论系统
https://blog.smoker.cc/web/add-comments-livere-for-hexo-theme-next.html
加入左上角「fork me on github」
返回顶部按钮
修改：themes/next5.0.1/source/css/_variables/base.styl
找到以下这段代码
// Components
// --------------------------------------------------
// Back to top
$b2t-opacity = 1
$b2t-position-bottom = -100px
$b2t-position-bottom-on = 19px
//$b2t-position-right = 50px
$b2t-position-left = 85px //这段代码是新增的，注释掉上面哪行代码。
$b2t-font-size = 12px
$b2t-color = white
$b2t-bg-color = $black-deep接着修改themes/next5.0.1/source/css/_custom/custom.styl
或themes/next5.0.1/source/css/_common/components/back-to-top.styl
找到以下这段代码
//返回顶部按钮样式
.back-to-top {
box-sizing: border-box;
position: fixed;
bottom: $b2t-position-bottom;
//right: $b2t-position-right;
left: $b2t-position-left; //这段代码是新增的，注释掉上面哪行代码。
z-index: $zindex-5;
padding: 0 6px;
width: 25px;
background: $b2t-bg-color;给 Blog 添加 LICENSE
修改主题配置文件中的 160 行左右：
# Creative Commons 4.0 International License.
# http://creativecommons.org/
# Available: by | by-nc | by-nc-nd | by-nc-sa | by-nd | by-sa | zero
creative_commons: by-nc-sa
#creative_commons:取消第 4 行的注释，然后选择你想使用的 LICENSE 即可，可选项参照第 3 行。
错误信息
LF will be replaced
Windows 提交命令的时候出现 warning: LF will be replaced by CRLF in XXXXXXXXXXXXXX 的警告。输入命令：
git config --global core.autocrlf false部署
cd your_site/
touch Staticfile #创建静态文件标识，用于Github识别，名字必须是Staticfile
hexo clean #清除以前生成的旧文件
hexo g #生成新的站点文件
hexo d #部署到Github上可参考：http://shomy.top/2016/03/03/hexo-in-coding-github/
部署完成打开网址就能看到效果了。
Hexo的部署只会把生成的文件上传到仓库中，本地的设置，主题，*.md文件等等都不会上传，换一台电脑就没法干活了，一旦删除，那基本上所有的努力都白费了，这里介绍2种备份方法：
- 1.新建一个仓库专门用来存放这些文件（最安全最方便管理的办法）
- 2.和发布的网站使用同一个仓库，master用来存放这些文件，新建分支来发布网站（注意pages服务绑定该分支，不要合并分支，一旦合并就全部混乱了）
两种方法都要在网站根目录设定好远程端仓库：git add remote XXXX
每次发布完网页，就顺手执行以下代码，把文档也同步到仓库中。
git add .
git commit -m "xxx"
git push本博客目前是源文件分为github和coding两个仓库，发布的博客也是部署在github和coding两个不同的仓库。域名做了国内外IP分流。
站点配置文件
# Deployment 自动部署到仓库
## 官方文档Docs: https://hexo.io/docs/deployment.html 有部署到各种服务器的方法
## 参考：http://www.lxway.com/240950852.htm
#不管是github还是coding，type都填写git
deploy:
- type: git
repo: git@git.coding.net:leolan/blog.git,master
message: 'LeoLan updated：{{now("YYYY-MM-DD HH:mm:ss")}}' #这个是commit的说明，因为是发布站点，方便看到发布时间。
- type: git
repo: git@github.com:MyLeoLan/blog.git,master
message: 'LeoLan updated：{{now("YYYY-MM-DD HH:mm:ss")}}'
#- type: git
# repo: git@git.oschina.net:leolan/leolan.git,master
# message: 'LeoLan updated：{{now("YYYY-MM-DD HH:mm:ss")}}'git config文件
[core]
repositoryformatversion = 0
filemode = false
bare = false
logallrefupdates = true
symlinks = false
ignorecase = true
[remote "origin"]
url = git@git.coding.net:leolan/blogpost.git
url = git@github.com:MyLeoLan/blogpost_backup.git
[branch "master"]
remote = origin
merge = refs/heads/masterTravis CI
Travis CI是一个类似于jenkins的一种持续构建工具
Travis CI 持续集成自动部署Hexo：https://www.karlzhou.com/2016/05/28/travis-ci-deploy-blog/
绑定域名
原理是域名提供商的域名指向github或coding的域名服务器，在项目内建立CNAME的域名指向文件后，会自动去自己的域名服务器github或coding上查找该域名，找到啦就绑定在一起，找不到就绑定不了；如果绑定不了，那么域名指向的github和coding（Pages绑定域名时）服务器会报404错误；域名指向的coding（Pages页面没有绑定域名时）域名服务器会把index当做普通超文本解析，不会加载js、cs等资源。
- 1· 在你的项目下新建一个CNAME文件，注意没有后缀名。在里面添加你的域名，一行一个，如我的就是 www.leolan.top和 leolan.top（github会自动绑定第一个，第二个也要绑定，不绑定访问报404错误），然后推送CNAME文件到远程仓库。（Github不建议在pages页上绑定设置，页面上是只能绑定一个的）；Coding的话要在CNAME文件里绑定两个，在Pages页面也绑定两个。
- 2· 到域名服务商那里增加你的CNAME记录。添加两条记录，@和www的主机记录，记录类型为CNAME，记录值为
username.github.io.，重要的是 io 后面还有一个原点（看官方帮助文档Coding的就不用加点），切记。
过几分钟，刷新网页，就能直接用域名访问了，因为是在项目内建的CNAME文件，所以域名直接指向此项目文件夹，其他项目可以用其他域名设定。
本文由 Leo 创作，采用 知识共享署名4.0 国际许可协议进行许可
本站文章除注明转载/出处外，均为本站原创或翻译，转载前请务必署名
最后编辑时间为: Jul 18, 2018 at 01:52 pm