Hexo 搭建博客(1)
     分类:环境搭建     有: 0 条评论

Hexo 搭建博客(1)

     分类:环境搭建     有: 0 条评论

配置环境

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模板
模板位置: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 %}
            &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模板
模板位置: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即可,值越大越靠前。
mark

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


字体

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

修改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.xmlbaidusitemap.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的教程
修改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**模板
**模板位置**: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:

![](https://image.leolan.top/222054761.png)

---
### 页面留白(扩大显示范围)
浏览器留白太多,代码块看起来比较麻烦,想让更多空间显示文章。
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](http://www.arao.me/)的代码
进入多说管理后台
![mark](https://image.leolan.top/blog/20161115/170352768.png)
把下面代码粘贴进去保存

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
![](https://image.leolan.top/duoshuo_userid1.png)
![](https://image.leolan.top/duoshuo_userid2.png)

duoshuo_info:
ua_enable: true
admin_enable: ture
user_id: 6343395544286626562
admin_nickname: 博主

  
---
### 动态背景
修改**_layout.swig**模板
**模板位置**:themes\next\layout\\_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>

在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=oo+uu,d<n.max&&(n===w&&d>=n.max/2&&(i.x-=.03o,i.y-=.03u),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=2x()-1,p=2x()-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](https://image.leolan.top/blog/20161205/100022200.png)
修改**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](https://image.leolan.top/blog/20161205/111721588.png)

不修改**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)
   }

}
})()'>High
</div>

     <!-- end High一下 -->
    {% endif %}

如果需要并排显示,像这样子:![mark](https://image.leolan.top/blog/20161205/154359849.png)
修改文件:**\themes\source\css\\_schemes\Pisces(主题风格对应的文件夹)\_sidebar.styl**
找到这样一段,把**display: block;**改为**display: inline-block;**

.feed-link a {
display: inline-block; //并行显示,block则为分行显示
color: $orange;
border: none;

(●゚ω゚●)