Leo
文章
233
分类
29
评论
0

Hexo 搭建博客

| 环境搭建 •
字数总计 68575 | 阅读时长 171分钟 | 阅读量 115

配置环境

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: next
hexo 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模板
模板位置：themes\next\layout\_macro\post.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 %}
            &nbsp; | &nbsp;
            <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 }}">
               &nbsp; | &nbsp;
               <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">
     &nbsp; | &nbsp;
           <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">
	   &nbsp; | &nbsp;
           <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 %}
              &nbsp; | &nbsp;
              <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模板
模板位置：themes\next\layout\_macro\post.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模板
模板位置：themes\next\layout\_macro\post.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模板
模板位置：themes\next\layout\_partials\footer.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>

同时更改语言文件中对应的名称
编辑：themes\languages\zh_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 %}

留言板

编辑：themes\languages\zh_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即可，值越大越靠前。
mark

如果只置顶一两篇文章可以用简单的方法，把日期2016年改为2116年或其他远大于2016的数字，数字太小的话如2018年，到了2018年就不置顶了。

字体

关于字体的修改开始时遇到很多问题，到后来才找到了原因，是因为引用的字体在www.google.com/fonts（默认是Google字体库）里找不到，或者是付费的字体。修改为免费的字体就正常使用了。打开Google Fonts，右上角查找你要的字体，能搜索到的话把全名复制下来，填写在配置文件中。
mark

修改**\themes\next_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模板
模板位置：themes\next\layout\_macro\reward.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 %}

最近访客

模板位置：themes\next\layout\_macro\reward.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.xml

NexT主题，首页title的优化

感谢arao的教程
修改\themes\next\layout\index.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模板
模板位置：themes\next\layout\_scripts\baidu-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的代码
进入多说管理后台
mark
把下面代码粘贴进去保存

#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**模板
模板位置：themes\next\layout\_layout.swig
在末尾前加上下面一句

<!-- 背景动画 -->
#默认灰色线条
<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>

在themes\source\js\src\下新建文件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)}();

背景透明

在 \themes\next\source\css\_custom\custom.styl 中写上 .content-wrap {background: transparent;}
custom.styl文件为用户自定义风格，卸载里面的内容会优先覆盖主题的设定，也可以定义其他的方法等。

背景放图片

首先找到一个背景图片放到 \themes\next\source\images下；
修改themes\next\source\css_schemes\Pisces（Mist和Muse也行）\index.styl文件，
在文件的最上方加上一代码

body { background:url(/images/backGround.jpg);}

修改文章超链接样式

将链接文本设置为蓝色，鼠标划过时文字颜色加深，并显示下划线。
修改 **themes\next\source\css\_custom\custom.styl **，添加如下 css 样式（颜色可以自己更改，百度html颜色代码即可找到）：

.post-body p a {
  color: #0593d3;
  border-bottom: none;
  &:hover {
    color: #0477ab;
    text-decoration: underline;
  }
}

High一下

第一种

mark
修改header.swig模板
模板位置：themes\next\layout\_partials\header.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一下 -->

第二种

mark

不修改themes\next\layout\_partials\header.swig文件
而是修改themes\next\layout\_macro\sidebar.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 %}

如果需要并排显示，像这样子：mark
修改文件：\themes\source\css\_schemes\Pisces（主题风格对应的文件夹）_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」

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/master

Travis 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
本文链接：
版权声明： 本站所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 LeoLan的小站！
环境搭建 hexo 搭建博客
喜欢就支持一下吧