该文章非原创,只是为了方便下次重装后修改

0x00 添加头像 and 设置头像为圆形框

1.设置头像

打开 themes/next 下的 _config.yml 文件
搜索 Sidebar Avatar 关键字,去掉avater前面的 #

  # Sidebar Avatar
  # in theme directory(source/images): /images/avatar.jpg
  # in site  directory(source/uploads): /uploads/avatar.jpg
  avatar: /images/blogLogo.png

并把本地图片放入 themes/next/source/images
修改文件名为: blogLogo.png

2.设置头像边框为圆形

打开位于 themes/next/source/css/_common/components/sidebar/ 下的
sidebar-author.syl 文件,修改如下

  .site-author-image {
    display: block;
    margin: 0 auto;
    padding: $site-author-image-padding;
    max-width: $site-author-image-width;
    height: $site-author-image-height;
    border: $site-author-image-border-width solid $site-author-image-border-color;
    // 修改头像边框
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
  }

0x01 显示当前浏览进度

打开 themes/next 下的_config.yml,搜索关键字 scrollpercent,把false改为true

# Scroll percent label in b2t button
scrollpercent: true

0x02 开启打赏功能 并修复闪动bug

在_config.yml中配置图片

#wechat.jpg、aipay.png图片放入themes/next/source/images中
#在 _config.yml搜索 reward_comment

reward_comment: 坚持原创技术分享，您的支持将鼓励我继续创作！
wechatpay: /images/wechat.jpg
alipay: /images/aipay.png

修复闪动bug

修改next/source/css/_common/components/post/post-reward.styl，注释wechat:hover和alipay:hover

/* 注释文字闪动函数

#wechat:hover p{

animation: roll 0.1s infinite linear;
-webkit-animation: roll 0.1s infinite linear;
-moz-animation: roll 0.1s infinite linear;
}

#alipay:hover p{

animation: roll 0.1s infinite linear;
-webkit-animation: roll 0.1s infinite linear;
-moz-animation: roll 0.1s infinite linear;
}
*/

0x03 设置网站的图片Favicon

找一张(32*32)的ico图标,并将图标名改为favicon.ico
然后把图标放在/themes/next/source/images
并且修改主题配置文件

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

0x04 添加顶部加载条

打开_config.yml配置文件
改为pace: true即可

pace: true
# Themes list:
#pace-theme-big-counter
#pace-theme-bounce
#pace-theme-barber-shop
#pace-theme-center-atom
#pace-theme-center-circle
#pace-theme-center-radar
#pace-theme-center-simple
#pace-theme-corner-indicator
#pace-theme-fill-left
#pace-theme-flash
#pace-theme-loading-bar
#pace-theme-mac-osx
#pace-theme-minimal
# For example
# pace_theme: pace-theme-center-simple
pace_theme: pace-theme-flash #pace-theme-minimal

0x05 添加jiathis分享

在配置文件中,jiathis为true,即可

# Share
jiathis: true
# Warning: JiaThis does not support https.
#add_this_id:

0x06 自定义鼠标样式

打开themes/next/source/css/_custom/custom.styl
添加如下代码

// 鼠标样式
  * {
      cursor: url("http://om8u46rmb.bkt.clouddn.com/sword2.ico"),auto!important
  }
  :active {
      cursor: url("http://om8u46rmb.bkt.clouddn.com/sword1.ico"),auto!important
  }

其中 url 里面必须是 ico 图片，ico 图片可以上传到网上
然后获取外链，复制到 url 里就行了

0x07 设置社交链接

next 主题配置文件处
搜索social

social:
  Github: URL
  简书: URL

# 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 FontAwesome icon. Key is case-senstive.
#   When an globe mask icon presenting up means that the item has no mapping icon.
social_icons:
  enable: true
  icons_only: false
  transition: false
  # Icon Mappings.
  # KeyMapsToSocialItemKey: NameOfTheIconFromFontAwesome
  #E-Mail: envelope
  #Google: google
  Twitter: twitter

0x08 设置友情链接

在next主题配置文件
搜索Blog rolls

# Blogrolls
links_title: 友情链接
#links_layout: block
#links_layout: inline
links:
  Java学习天地: https://wangli0.github.com
  ruulai.com: https://wangli0.github.com
  视听中国: https://wangli0.github.com

0x09 博客中插入图片

基本分为两种方法:

1.放在本地文件

首先在username.github.io目录下确认_config.yml中有post_asset_folder:true
在hexo目录,执行$ npm install https://github.com/CodeFalling/hexo-asset-image --save
之后再使用hexo new 'new'创建新博客的时候
会在source/_posts 里面创建.md文件的同时生成一个相同的名字的文件夹。把该文章中需要使用的图片放在该文件夹下即可。
使用的时候:![“图片描述”（可以不写）](/文件夹名/你的图片名字.JPG) 例如： ！[ ] (new/text.jpg)

2.放在网上

放在七牛上，需要先注册，上传图片生成链接，直接在文章中使用链接即可。
也可以放在服务器上，在图片链接输入绝对路径就可以

0x10 插入音乐

可以使用网易云音乐,搜索想要的歌曲，点击歌曲名字进入播放器页面，点击生成外链播放器
复制代码，直接粘贴到博文中即可。这样会显示一个网易的播放器
放在layout/_macro/sidebar.swig文件夹下

<div id="music163player">
    <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=280 height=86 src="//music.163.com/outchain/player?type=2&id=38358214&auto=0&height=66">
    </iframe>
</div>

0x11 修改``代码块自定义样式

打开\themes\next\source\css\_custom\custom.styl
向里面添加代码(颜色可以自定义)

// Custom styles.
code {
    color: #ff7600;
    background: #fbf7f8;
    margin: 2px;
}
// 大代码块的自定义样式
.highlight, pre {
    margin: 5px 0;
    padding: 5px;
    border-radius: 3px;
}
.highlight, code, pre {
    border: 1px solid #d6d6d6;
}

0x12 绚丽的图片文字

只需要在你得文章*.md文件的头上添加photos项即可
然后一行添加你要展示的图片

---
title: 我的阅历
date: 2085-01-16 07:33:44
tags: [hexo]
photos:
 - http://bruce.u.qiniudn.com/2013/11/27/reading/photos-0.jpg
 - http://bruce.u.qiniudn.com/2013/11/27/reading/photos-1.jpg
---

0x13 博文压缩优化

安装插件

npm install hexo-neat --save

站点配置

neat_enable: true

neat_html:
  enable: true
  exclude:

neat_css:
  enable: true
  exclude:
    - '*.min.css'

neat_js:
  enable: true
  mangle: true
  output:
  compress:
  exclude:
    - '*.min.js'

0x14 URL链接

安装插件

npm install hexo-abbrlink --save

在站点配置文件_config.yml 添加配置

# permalink: :title/
permalink: archives/:abbrlink.html
abbrlink:
  alg: crc32  # 算法：crc16(default) and crc32
  rep: hex    # 进制：dec(default) and hex

Ps：html前缀为：对标题+时间进行md5然后再转base64

0x15 Hexo 代码高亮

安装插件

npm i -S hexo-prism-plugin

修改Hexo根目录_config.yml配置文件

highlight:
  enable: false

添加配置

prism_plugin:
  mode: 'preprocess'    # realtime/preprocess
  theme: 'tomorrow'
  line_number: false    # default false
  custom_css:

0x16 修改注释的样式

next\source\css\_custom\custom.styl文件添加

blockquote {
    margin: 10px 0 0 0;
    padding: 0 15px;
    color: #777;
    border-left: 4px solid #42b983;
    border-radius: 5px; 
    background-color: rgba(66, 185, 131, .1);
}

0x17 页面宽度

修改next\source\css\_variables\custom.styl

// 修改成你期望的宽度
$content-desktop = 900px

// 当视窗超过 1600px 后的宽度
$content-desktop-large = 1100px

// 窗口最大化的宽度
$content-desktop-largest        = 1100px