1. 設(shè)置主題風(fēng)格
打開 themes/next/_config.yml 文件，搜索 scheme 關(guān)鍵字，將你需用啟用的 scheme 前面注釋 # 去除即可。
# ---------------------------------------------------------------
# Scheme Settings
# ---------------------------------------------------------------
# Schemes
#scheme: Muse # 默認(rèn) Scheme，這是 NexT 最初的版本惋砂，黑白主調(diào)，大量留白
#scheme: Mist # Muse 的緊湊版本绳锅，整潔有序的單欄外觀
scheme: Pisces # 雙欄 Scheme西饵，小家碧玉似的清新
#scheme: Gemini # 類似 Pisces
2. 設(shè)置菜單項(xiàng)的顯示文本和圖標(biāo)
NexT 使用的是 Font Awesome 提供的圖標(biāo)， Font Awesome 提供了 600+ 的圖標(biāo)榨呆，可以滿足絕大的多數(shù)的場(chǎng)景罗标，同時(shí)無(wú)須擔(dān)心在 Retina 屏幕下圖標(biāo)模糊的問題庸队。
2.1 設(shè)置菜單項(xiàng)的顯示中文文本：
打開 themes/next/languages/zh-Hans.yml 文件,搜索 menu 關(guān)鍵字，修改對(duì)應(yīng)中文或者新增闯割。
menu:
home: 首頁(yè)
archives: 歸檔
categories: 分類
tags: 標(biāo)簽
about: 關(guān)于
search: 搜索
schedule: 日程表
sitemap: 站點(diǎn)地圖
commonweal: 公益404
# 新增menu
catalogue: 目錄
2.2 設(shè)定菜單項(xiàng)的文件目錄和對(duì)應(yīng)圖標(biāo)（新版兩項(xiàng)合并）
打開 themes/next/_config.yml 文件彻消，搜索 menu_icons 關(guān)鍵字，修改對(duì)應(yīng)圖標(biāo)名稱或者新增對(duì)應(yīng) menu 的圖標(biāo)宙拉。
# ---------------------------------------------------------------
# Menu Settings
# ---------------------------------------------------------------
# When running the site in a subdirectory (e.g. domain.tld/blog), remove the leading slash from link value (/archives -> archives).
# Usage: `Key: /link/ || icon`
# Key is the name of menu item. If translate for this menu will find in languages - this translate will be loaded; if not - Key name will be used. Key is case-senstive.
# Value before `||` delimeter is the target link.
# Value after `||` delimeter is the name of FontAwesome icon. If icon (with or without delimeter) is not specified, question icon will be loaded.
menu:
home: / || home
archives: /archives/ || history
categories: /categories/ || list
tags: /tags/ || tags
tools: /categories/工具資源/ || briefcase
about: /about/ || user
#schedule: /schedule/ || calendar
#sitemap: /sitemap.xml || sitemap
#commonweal: /404/ || heartbeat
# 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 FontAwesome icon. Key is case-senstive.
# When an question mask icon presenting up means that the item has no mapping icon.
menu_icons:
enable: true
除了 home宾尚， archives , /后面都需要手動(dòng)創(chuàng)建這個(gè)頁(yè)面
2.3 創(chuàng)建菜單項(xiàng)對(duì)應(yīng)文件目錄,以分類為例
在終端窗口下，定位到 Hexo 站點(diǎn)目錄下谢澈。使用 hexo new page 新建一個(gè)頁(yè)面煌贴，命名為 categories ：
$ cd your-hexo-site
$ hexo new page categories
編輯剛新建的頁(yè)面,設(shè)置分類
---
title: 分類
date: 2014-12-22 12:39:04
categories: Testing #分類名
type: "categories"
---
3. 頭像設(shè)置
3.1 添加頭像
打開 themes/next/_config.yml 文件，搜索 Sidebar Avatar 關(guān)鍵字锥忿，去掉 avatar 前面的#：
# Sidebar Avatar
# in theme directory(source/images): /images/avatar.jpg
# in site directory(source/uploads): /uploads/avatar.jpg
avatar: http://example.com/avatar.png
或者使用本地圖片,把圖片放入 themes/next/source/images 下,修改 avatar：
avatar: /images/avatar.gif
3.2 設(shè)置頭像邊框?yàn)閳A形框
打開位于 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%;
}
3.3 特效：鼠標(biāo)放置頭像上旋轉(zhuǎn)
.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%;
// 設(shè)置旋轉(zhuǎn)
transition: 1.4s all;
}
// 可旋轉(zhuǎn)的圓形頭像,`hover`動(dòng)作
.site-author-image:hover {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-transform: rotate(360deg);
}
4. 瀏覽頁(yè)面的時(shí)候顯示當(dāng)前瀏覽進(jìn)度
打開 themes/next/_config.yml ,搜索關(guān)鍵字 scrollpercent ,把 false 改為 true牛郑。
# Scroll percent label in b2t button
scrollpercent: true
如果想把 top按鈕放在側(cè)邊欄,打開 themes/next/_config.yml ,搜索關(guān)鍵字 b2t ,把 false 改為 true。
# Back to top in sidebar
b2t: true
# Scroll percent label in b2t button
scrollpercent: true
5. 側(cè)邊欄設(shè)置
5.1 設(shè)置側(cè)邊欄社交鏈接
打開 themes/next/_config.yml 文件,搜索關(guān)鍵字 social ,然后添加社交站點(diǎn)名稱與地址即可敬鬓。
# ---------------------------------------------------------------
# Sidebar Settings
# ---------------------------------------------------------------
# Social Links.
# Usage: `Key: permalink || icon`
# Key is the link label showing to end users.
# Value before `||` delimeter is the target permalink.
# Value after `||` delimeter is the name of FontAwesome icon. If icon (with or without delimeter) is not specified, globe icon will be loaded.
social:
E-Mail: mailto:yourname@gmail.com || envelope
Google: https://plus.google.com/yourname || google
Twitter: https://twitter.com/yourname || twitter
FB Page: https://www.facebook.com/yourname || facebook
# 等等
5.2 設(shè)置側(cè)邊欄社交圖標(biāo)
打開 themes/next/_config.yml 文件,搜索關(guān)鍵字 social_icons 淹朋，添加社交站點(diǎn)名稱（注意大小寫）圖標(biāo)，Font Awesome圖標(biāo)地钉答。
5.3 RSS
在你 Hexo 站點(diǎn)目錄下：
$ npm install hexo-generator-feed --save
打開 Hexo 站點(diǎn)下的 _config.yml ,添加如下配置：
# feed
# Dependencies: https://github.com/hexojs/hexo-generator-feed
feed:
type: atom
path: atom.xml
limit: 20
hub:
content:
5.4 友情鏈接
打開 themes/next/_config.yml 文件,搜索關(guān)鍵字 Blog rolls：
# Blog rolls
links_title: 友情鏈接 #標(biāo)題
links_layout: block #布局础芍，一行一個(gè)連接
#links_layout: inline
links: #連接
baidu: http://example.com/
google: http://example.com/
6. 主頁(yè)文章添加邊框陰影效果
打開 themes/next/source/css/_custom/custom.styl ,向里面加代碼:
// 主頁(yè)文章添加陰影效果
.post {
margin-top: 0px;
margin-bottom: 60px;
padding: 25px;
-webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
-moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
}
7. 修改文章間分割線
打開 themes/next/source/css/_common/components/post/post-eof.styl ,修改：
.posts-expand {
.post-eof {
display: block;
// margin: $post-eof-margin-top auto $post-eof-margin-bottom;
width: 0%; //分割線長(zhǎng)度
height: 0px; // 分割線高度
background: $grey-light;
text-align: center;
}
}
8. 代碼塊自定義樣式
// 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;
}
9. 開啟版權(quán)聲明
主題配置文件下,搜索關(guān)鍵字 post_copyright , enable 改為 true：
# Declare license on posts
post_copyright:
enable: true
license: CC BY-NC-SA 4.0
license_url: https://creativecommons.org/licenses/by-nc-sa/4.0/
10. 自定義文章底部版權(quán)聲明
效果：
作者：Dragonstyle
鏈接：http://www.dragonstyle.win/2017/09/06/Android-Studio個(gè)人設(shè)置/
來(lái)源：簡(jiǎn)書
版權(quán)聲明： 本博客所有文章除特別聲明外，均采用 CC BY-NC-SA 4.0 許可協(xié)議数尿。轉(zhuǎn)載請(qǐng)注明出處仑性！
在目錄 themes/next/layout/_macro/ 下添加 my-copyright.swig ,內(nèi)容如下:
{% if page.copyright %}
<div class="my_post_copyright">
<script src="http://cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
<!-- JS庫(kù) sweetalert 可修改路徑 -->
<script type="text/javascript" src="http://jslibs.wuxubj.cn/sweetalert_mini/jquery-1.7.1.min.js"></script>
<script src="http://jslibs.wuxubj.cn/sweetalert_mini/sweetalert.min.js"></script>
<link rel="stylesheet" type="text/css" >
<p><span>本文標(biāo)題:</span>{{ page.title }}</a></p>
<p><span>文章作者:</span>{{ theme.author }}</a></p>
<p><span>發(fā)布時(shí)間:</span>{{ page.date.format("YYYY年MM月DD日 - HH:mm:ss") }}</p>
<p><span>最后更新:</span>{{ page.updated.format("YYYY年MM月DD日 - HH:mm:ss") }}</p>
<p><span>原始鏈接:</span><a href="{{ url_for(page.path) }}" title="{{ page.title }}">{{ page.permalink }}</a>
<span class="copy-path" title="點(diǎn)擊復(fù)制文章鏈接"><i class="fa fa-clipboard" data-clipboard-text="{{ page.permalink }}" aria-label="復(fù)制成功！"></i></span>
</p>
<p><span>許可協(xié)議:</span><i class="fa fa-creative-commons"></i> <a rel="license" target="_blank" title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商業(yè)性使用-禁止演繹 4.0 國(guó)際</a> 轉(zhuǎn)載請(qǐng)保留原文鏈接及作者右蹦。</p>
</div>
<script>
var clipboard = new Clipboard('.fa-clipboard');
clipboard.on('success', $(function(){
$(".fa-clipboard").click(function(){
swal({
title: "",
text: '復(fù)制成功',
html: false,
timer: 500,
showConfirmButton: false
});
});
}));
</script>
{% endif %}
在目錄 themes/next/source/css/_common/components/post/ 下添加 my-post-copyright.styl,內(nèi)容如下:
.my_post_copyright {
width: 85%;
max-width: 45em;
margin: 2.8em auto 0;
padding: 0.5em 1.0em;
border: 1px solid #d3d3d3;
font-size: 0.93rem;
line-height: 1.6em;
word-break: break-all;
background: rgba(255,255,255,0.4);
}
.my_post_copyright p{margin:0;}
.my_post_copyright span {
display: inline-block;
width: 5.2em;
color: #333333; // title color
font-weight: bold;
}
.my_post_copyright .raw {
margin-left: 1em;
width: 5em;
}
.my_post_copyright a {
color: #808080;
border-bottom:0;
}
.my_post_copyright a:hover {
color: #0593d3; // link color
text-decoration: underline;
}
.my_post_copyright:hover .fa-clipboard {
color: #000;
}
.my_post_copyright .post-url:hover {
font-weight: normal;
}
.my_post_copyright .copy-path {
margin-left: 1em;
width: 1em;
+mobile(){display:none;}
}
.my_post_copyright .copy-path:hover {
color: #808080;
cursor: pointer;
}
修改 themes/next/layout/_macro/post.swig ,在代碼如下：
{% if theme.wechat_subscriber.enabled and not is_index %}
<div>
{% include 'wechat-subscriber.swig' %}
</div>
{% endif %}
之前添加增加如下代碼：
<div>
{% if not is_index %}
{% include 'my-copyright.swig' %}
{% endif %}
</div>
修改 themes/next/source/css/_common/components/post/post.styl 文件诊杆，在最后一行增加代碼：
@import "my-post-copyright"
設(shè)置新建文章自動(dòng)開啟
copyright,即新建文章自動(dòng)顯示自定義的版權(quán)聲明,設(shè)置 your site/scaffolds/post.md文件
---
title: {{ title }}
date: {{ date }}
tags:
type: "categories"
categories:
copyright: true #新增,開啟
---
11. 在右上角或者左上角實(shí)現(xiàn)fork me on github
選擇樣式GitHub Ribbons,修改圖片跳轉(zhuǎn)鏈接,并復(fù)制文本框中的代碼,將如下地方代碼換為自己Github主頁(yè)：
打開
themes/next/layout/_layout.swig 文件，把代碼復(fù)制到<div class="headband"></div>下面何陆。
12. 修改文章底部的那個(gè)帶#號(hào)的標(biāo)簽
打開 themes/next/layout/_macro/post.swig 文件,搜索 rel="tag"># ,將 # 換成 <i class="fa fa-tag"></i>
<div class="post-tags">
{% for tag in post.tags %}
<a href="{{ url_for(tag.path) }}" rel="tag"><i class="fa fa-tag"></i> {{ tag.name }}</a>
{% endfor %}
</div>
13. 添加頂部加載條
打開 themes/next/_config.yml 刽辙，搜索關(guān)鍵字 pace ,設(shè)置為 true ,可以更換加載樣式：
# Progress bar in the top during page loading.
pace: true
# Themes list:
#pace-theme-big-counter
#pace-theme-bounce
#pace-theme-barber-shop
#pace-theme-center-atom
#pace-theme-center-circle
#pace-theme-center-radar
#pace-theme-center-simple
#pace-theme-corner-indicator
#pace-theme-fill-left
#pace-theme-flash
#pace-theme-loading-bar
#pace-theme-mac-osx
#pace-theme-minimal
# For example
# pace_theme: pace-theme-center-simple
pace_theme: pace-theme-flash #替換更換樣式
14. 本地搜索
在你站點(diǎn)的根目錄下
$ npm install hexo-generator-searchdb --save
打開 Hexo 站點(diǎn)的 _config.yml,添加配置
search:
path: search.xml
field: post
format: html
limit: 10000
打開 themes/next/_config.yml ,搜索關(guān)鍵字 local_search ,設(shè)置為 true：
# Local search
# Dependencies: https://github.com/flashlab/hexo-generator-search
local_search:
enable: true
# if auto, trigger search by changing input
# if manual, trigger search by pressing enter key or search button
trigger: auto
# show top n results per article, show all results by setting to -1
top_n_per_article: 1
15. 修改網(wǎng)頁(yè)底部
- 在圖標(biāo)庫(kù)中找到你自己喜歡的圖標(biāo), 修改桃心,打開
themes/next_config.yml,搜索關(guān)鍵字authoricon,替換圖標(biāo)名
# icon between year and author @Footer
authoricon: id-card
- 隱藏網(wǎng)頁(yè)底部
Hexo 強(qiáng)力驅(qū)動(dòng)
打開主題配置文件,搜索關(guān)鍵字 copyright ，如下:
# Footer `powered-by` and `theme-info` copyright
copyright: false
16. 博文置頂
打開 (next 5.1以后主題已自帶此功能)Hexo 站點(diǎn)下 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
}
});
};
打開文章添加top字段,設(shè)置數(shù)值颂翼，數(shù)值越大文章越靠前：
---
layout: layout
title: 標(biāo)簽1
date: 2017-08-18 15:41:18
tags: 標(biāo)簽1
top: 100
---
17. 統(tǒng)計(jì)功能晃洒，統(tǒng)計(jì)功能,顯示文章字?jǐn)?shù)統(tǒng)計(jì),閱讀時(shí)長(zhǎng),總字?jǐn)?shù)
在站點(diǎn)的根目錄下：
$ npm i --save hexo-wordcount
打開 themes/next/_config.yml ，搜索關(guān)鍵字 post_wordcount：
# Post wordcount display settings
# Dependencies: https://github.com/willin/hexo-wordcount
post_wordcount:
item_text: true
#字?jǐn)?shù)統(tǒng)計(jì)
wordcount: true
#預(yù)覽時(shí)間
min2read: true
#總字?jǐn)?shù),顯示在頁(yè)面底部
totalcount: true
separated_meta: true
18. 修改文章內(nèi)文本連接樣式
打開 themes/next/source/css/_custom/custom.styl,添加代碼：
// 文章內(nèi)鏈接文本樣式
.post-body p a{
color: #0593d3;
border-bottom: none;
border-bottom: 1px solid #0593d3;
&:hover {
color: #fc6423;
border-bottom: none;
border-bottom: 1px solid #fc6423;
}
}
19. 每篇文章末尾統(tǒng)一添加“本文結(jié)束”標(biāo)記
在路徑 /themes/next/layout/_macro 中新建 passage-end-tag.swig 文件,并添加以下內(nèi)容：
<div>
{% if not is_index %}
<div style="text-align:center;color: #ccc;font-size:14px;">------ 本文結(jié)束------</div>
{% endif %}
</div>
打開 themes/next/layout/_macro/post.swig 文件,添加：
<div>
{% if not is_index %}
{% include 'passage-end-tag.swig' %}
{% endif %}
</div>
然后打開主題配置文件 _config.yml,在末尾添加：
# 文章末尾添加“本文結(jié)束”標(biāo)記
passage_end_tag:
enabled: true
20. 文章頂部顯示更新時(shí)間
打開主題配置文件 _config.yml ,搜索關(guān)鍵字 updated_at 設(shè)置為 true ：
# Post meta display settings
post_meta:
item_text: true
created_at: true
updated_at: ture
categories: true
編輯文章,增加關(guān)鍵字（next可以根據(jù)文章改變時(shí)間自動(dòng)更改）updated
---
layout: layout
title: 關(guān)于
date: 2017-08-18 15:41:18
updated: 2017-09-05 20:18:54 #手動(dòng)添加更新時(shí)間
21. 修改訪問URL路徑
默認(rèn)情況下訪問URL路徑為：domain/2017/08/18/關(guān)于本站,修改為 domain/About/關(guān)于本站朦乏。
編輯 Hexo 站點(diǎn)下的 _config.yml 文件球及，修改其中的 permalink 字段：
permalink: :category/:title/
22. 給代碼塊添加復(fù)制功能
- 下載插件clipboard.js 。
- 打開
themes/next/source/lib/,新建文件夾clipboard呻疹。 - 把下載
clipboard.js下的src文件夾下的文件拖動(dòng)到clipboard文件夾下吃引。 - 打開
themes/next/source/js/src/,新建文件custom.js,代碼如下:
//此函數(shù)用于創(chuàng)建復(fù)制按鈕
function createCopyBtns() {
var $codeArea = $("figure table");
//查看頁(yè)面是否具有代碼區(qū)域，沒有代碼塊則不創(chuàng)建 復(fù)制按鈕
if ($codeArea.length > 0) {
//復(fù)制成功后將要干的事情
function changeToSuccess(item) {
$imgOK = $("#copyBtn").find("#imgSuccess");
if ($imgOK.css("display") == "none") {
$imgOK.css({
opacity: 0,
display: "block"
});
$imgOK.animate({
opacity: 1
}, 1000);
setTimeout(function() {
$imgOK.animate({
opacity: 0
}, 2000);
}, 2000);
setTimeout(function() {
$imgOK.css("display", "none");
}, 4000);
};
};
//創(chuàng)建 全局復(fù)制按鈕，僅有一組镊尺。包含：復(fù)制按鈕朦佩，復(fù)制成功響應(yīng)按鈕
//值得注意的是：1.按鈕默認(rèn)隱藏，2.位置使用絕對(duì)位置 position: absolute; (position: fixed 也可以庐氮，需要修改代碼)
$(".post-body").before('<div id="copyBtn" style="opacity: 0; position: absolute;top:0px;display: none;line-height: 1; font-size:1.5em"><span id="imgCopy" ><i class="fa fa-paste fa-fw"></i></span><span id="imgSuccess" style="display: none;"><i class="fa fa-check-circle fa-fw" aria-hidden="true"></i></span>');
//創(chuàng)建 復(fù)制 插件语稠，綁定單機(jī)時(shí)間到 指定元素，支持JQuery
var clipboard = new Clipboard('#copyBtn', {
target: function() {
//返回需要復(fù)制的元素內(nèi)容
return document.querySelector("[copyFlag]");
},
isSupported: function() {
//支持復(fù)制內(nèi)容
return document.querySelector("[copyFlag]");
}
});
//復(fù)制成功事件綁定
clipboard.on('success',
function(e) {
//清除內(nèi)容被選擇狀態(tài)
e.clearSelection();
changeToSuccess(e);
});
//復(fù)制失敗綁定事件
clipboard.on('error',
function(e) {
console.error('Action:', e.action);
console.error('Trigger:', e.trigger);
});
//鼠標(biāo) 在復(fù)制按鈕上滑動(dòng)和離開后漸變顯示/隱藏效果
$("#copyBtn").hover(
function() {
$(this).stop();
$(this).css("opacity", 1);
},
function() {
$(this).animate({
opacity: 0
}, 2000);
}
);
}
}
//感應(yīng)鼠標(biāo)是否在代碼區(qū)
$("figure").hover(
function() {
//-------鼠標(biāo)活動(dòng)在代碼塊內(nèi)
//移除之前含有復(fù)制標(biāo)志代碼塊的 copyFlag
$("[copyFlag]").removeAttr("copyFlag");
//在新的（當(dāng)前鼠標(biāo)所在代碼區(qū)）代碼塊插入標(biāo)志：copyFlag
$(this).find(".code").attr("copyFlag", 1);
//獲取復(fù)制按鈕
$copyBtn = $("#copyBtn");
if ($copyBtn.lenght != 0) {
//獲取到按鈕的前提下進(jìn)行一下操作
//停止按鈕動(dòng)畫效果
//設(shè)置為 顯示狀態(tài)
//修改 復(fù)制按鈕 位置到 當(dāng)前代碼塊開始部位
//設(shè)置代碼塊 左側(cè)位置
$copyBtn.stop();
$copyBtn.css("opacity", 0.8);
$copyBtn.css("display", "block");
$copyBtn.css("top", parseInt($copyBtn.css("top")) + $(this).offset().top - $copyBtn.offset().top + 3);
$copyBtn.css("left", -$copyBtn.width() - 3);
}
},
function() {
//-------鼠標(biāo)離開代碼塊
//設(shè)置復(fù)制按鈕可見度 2秒內(nèi)到 0
$("#copyBtn").animate({
opacity: 0
}, 2000);
}
);
//頁(yè)面載入完成后弄砍，創(chuàng)建復(fù)制按鈕
$(document).ready(function() {
createCopyBtns();
});
- 打開
themes/next/layout/_custom/,新建文件custom.swig仙畦，代碼如下:
<script type="text/javascript" src="/lib/clipboard/clipboard.js"></script>
<script type="text/javascript" src="/js/src/custom.js"></script>
- 修改文件
themes/next/layout/_layout.swig,在標(biāo)簽</body>上面插入代碼:
{% include '_custom/custom.swig' %}
23. 新建404界面
在站點(diǎn)根目錄下,輸入 hexo new page 404 ,默認(rèn)在 Hexo 站點(diǎn)下/source/404/index.md
打開新建的404界面，在頂部插入一行音婶，寫上 permalink: /404 慨畸，這表示指定該頁(yè)固定鏈接為 http://"主頁(yè)"/404.html。
---
title: #404 Not Found：該頁(yè)無(wú)法顯示
date: 2017-09-06 15:37:18
comments: false
permalink: /404
---
如果你不想編輯屬于自己的404界面,可以顯示騰訊公益404界面,代碼如下：
<!DOCTYPE HTML>
<html>
<head>
<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"/>
<link rel="stylesheet" type="text/css" >
</head>
<body>
<script type="text/plain" src="http://www.qq.com/404/search_children.js"
charset="utf-8" homePageUrl="/"
homePageName="回到我的主頁(yè)">
</script>
<script src="https://qzone.qq.com/gy/404/data.js" charset="utf-8"></script>
<script src="https://qzone.qq.com/gy/404/page.js" charset="utf-8"></script>
</body>
</html>
24. 靜態(tài)資源壓縮
在站點(diǎn)目錄下：
$ npm install gulp -g
安裝gulp插件：
npm install gulp-minify-css --save
npm install gulp-uglify --save
npm install gulp-htmlmin --save
npm install gulp-htmlclean --save
npm install gulp-imagemin --save
在 Hexo 站點(diǎn)下添加 gulpfile.js文件衣式，文件內(nèi)容如下：
var gulp = require('gulp');
var minifycss = require('gulp-minify-css');
var uglify = require('gulp-uglify');
var htmlmin = require('gulp-htmlmin');
var htmlclean = require('gulp-htmlclean');
var imagemin = require('gulp-imagemin');
// 壓縮css文件
gulp.task('minify-css', function() {
return gulp.src('./public/**/*.css')
.pipe(minifycss())
.pipe(gulp.dest('./public'));
});
// 壓縮html文件
gulp.task('minify-html', function() {
return gulp.src('./public/**/*.html')
.pipe(htmlclean())
.pipe(htmlmin({
removeComments: true,
minifyJS: true,
minifyCSS: true,
minifyURLs: true,
}))
.pipe(gulp.dest('./public'))
});
// 壓縮js文件
gulp.task('minify-js', function() {
return gulp.src(['./public/**/.js','!./public/js/**/*min.js'])
.pipe(uglify())
.pipe(gulp.dest('./public'));
});
// 壓縮 public/demo 目錄內(nèi)圖片
gulp.task('minify-images', function() {
gulp.src('./public/demo/**/*.*')
.pipe(imagemin({
optimizationLevel: 5, //類型：Number 默認(rèn)：3 取值范圍：0-7（優(yōu)化等級(jí)）
progressive: true, //類型：Boolean 默認(rèn)：false 無(wú)損壓縮jpg圖片
interlaced: false, //類型：Boolean 默認(rèn)：false 隔行掃描gif進(jìn)行渲染
multipass: false, //類型：Boolean 默認(rèn)：false 多次優(yōu)化svg直到完全優(yōu)化
}))
.pipe(gulp.dest('./public/uploads'));
});
// 默認(rèn)任務(wù)
gulp.task('default', [
'minify-html','minify-css','minify-js','minify-images'
]);
只需要每次在執(zhí)行 generate 命令后執(zhí)行 gulp 就可以實(shí)現(xiàn)對(duì)靜態(tài)資源的壓縮寸士，壓縮完成后執(zhí)行 deploy 命令同步到服務(wù)器：
hexo g
gulp
hexo d
25. 本地站點(diǎn)推送到GitHub上
在站點(diǎn)更目錄下：
$ npm install hexo-deployer-git --save
在 Hexo 站點(diǎn)的 _config.yml 中配置 deploy：
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repo: <repository url> #your github.io.git
branch: master
$ hexo clean
$ hexo d --g
hexo g # 生成本地 public 靜態(tài)文件,
hexo d # 部署到 Github 上,
也可以縮寫成：hexo g --d 。
26. 添加文章書寫樣式
26.1 文字增加背景色塊
打開 themes/next/source/css/_custom 下的 custom.styl 文件,添加屬性樣式：
// 顏色塊-黃
span#inline-yellow {
display:inline;
padding:.2em .6em .3em;
font-size:80%;
font-weight:bold;
line-height:1;
color:#fff;
text-align:center;
white-space:nowrap;
vertical-align:baseline;
border-radius:0;
background-color: #f0ad4e;
}
// 顏色塊-綠
span#inline-green {
display:inline;
padding:.2em .6em .3em;
font-size:80%;
font-weight:bold;
line-height:1;
color:#fff;
text-align:center;
white-space:nowrap;
vertical-align:baseline;
border-radius:0;
background-color: #5cb85c;
}
// 顏色塊-藍(lán)
span#inline-blue {
display:inline;
padding:.2em .6em .3em;
font-size:80%;
font-weight:bold;
line-height:1;
color:#fff;
text-align:center;
white-space:nowrap;
vertical-align:baseline;
border-radius:0;
background-color: #2780e3;
}
// 顏色塊-紫
span#inline-purple {
display:inline;
padding:.2em .6em .3em;
font-size:80%;
font-weight:bold;
line-height:1;
color:#fff;
text-align:center;
white-space:nowrap;
vertical-align:baseline;
border-radius:0;
background-color: #9954bb;
}
在你需要編輯的文章地方瞳收。放置如下代碼：
<span id="inline-blue"> 站點(diǎn)配置文件 </span>
<span id="inline-purple"> 主題配置文件 </span>
<span id="inline-yellow"> 站點(diǎn)配置文件 </span>
<span id="inline-green"> 主題配置文件 </span>
26.2 下載樣式
打開 themes/next/source/css/_custom/custom.styl 文件,添加屬性樣式：
a#download {
display: inline-block;
padding: 0 10px;
color: #000;
background: transparent;
border: 2px solid #000;
border-radius: 2px;
transition: all .5s ease;
font-weight: bold;
&:hover {
background: #000;
color: #fff;
}
}
在你需要編輯的文章地方碉京。放置如下代碼：
<a id="download" ><i class="fa fa-download"></i><span> Download Now</span> </a>
26.3 在文檔中增加圖標(biāo), Font Awesome 提供圖標(biāo)
<i class="fa fa-pencil"></i>支持Markdown
27. 實(shí)現(xiàn)點(diǎn)擊出現(xiàn)桃心效果
- 復(fù)制以下代碼:
!function(e,t,a){function n(){c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),o(),r()}function r(){for(var e=0;e<d.length;e++)d[e].alpha<=0?(t.body.removeChild(d[e].el),d.splice(e,1)):(d[e].y--,d[e].scale+=.004,d[e].alpha-=.013,d[e].el.style.cssText="left:"+d[e].x+"px;top:"+d[e].y+"px;opacity:"+d[e].alpha+";transform:scale("+d[e].scale+","+d[e].scale+") rotate(45deg);background:"+d[e].color+";z-index:99999");requestAnimationFrame(r)}function o(){var t="function"==typeof e.onclick&&e.onclick;e.onclick=function(e){t&&t(),i(e)}}function i(e){var a=t.createElement("div");a.className="heart",d.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:s()}),t.body.appendChild(a)}function c(e){var a=t.createElement("style");a.type="text/css";try{a.appendChild(t.createTextNode(e))}catch(t){a.styleSheet.cssText=e}t.getElementsByTagName("head")[0].appendChild(a)}function s(){return"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"}var d=[];e.requestAnimationFrame=function(){return e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,1e3/60)}}(),n()}(window,document);
- 新建
love.js文件并且將代碼復(fù)制進(jìn)去，然后保存螟深。 - 將
love.js文件放到路徑/themes/next/source/js/src里面 - 然后打開
\themes\next\layout\_layout.swig文件,在末尾（在前面引用會(huì)出現(xiàn)找不到的bug）添加以下代碼：
<!-- 頁(yè)面點(diǎn)擊小紅心 -->
<script type="text/javascript" src="/js/src/love.js"></script>
28. 添加熱度
next主題集成leanCloud,根據(jù)next官方文檔設(shè)置閱讀次數(shù)統(tǒng)計(jì)（LeanCloud) 谐宙，然后打開 /themes/next/layout/_macro/post.swig ,在畫紅線的區(qū)域添加 ℃：
然后打開 /themes/next/languages/zh-Hans.yml ,將 visitors 漢化為熱度就可以了：
post:
created: 創(chuàng)建于
modified: 更新于
sticky: 置頂
posted: 發(fā)表于
in: 分類于
read_more: 閱讀全文
untitled: 未命名
toc_empty: 此文章未包含目錄
visitors: 熱度
wordcount: 字?jǐn)?shù)統(tǒng)計(jì)
min2read: 閱讀時(shí)長(zhǎng)
totalcount: 博客全站字?jǐn)?shù)
29. 添加 README.md 文件
每個(gè)項(xiàng)目下一般都有一個(gè) README.md 文件，但是使用 hexo 部署到倉(cāng)庫(kù)后界弧，項(xiàng)目下是沒有 README.md 文件的凡蜻。
在 Hexo 目錄下的 source 根目錄下添加一個(gè) README.md 文件，修改站點(diǎn)配置文件 _config.yml 垢箕，將 skip_render 參數(shù)的值設(shè)置為：
skip_render: README.md
保存退出即可划栓。再次使用 hexo d 命令部署博客的時(shí)候就不會(huì)在渲染 README.md 這個(gè)文件了。
30. 文章加密訪問
打開 themes/next/layout/_partials/head.swig文件,在 {% if theme.pace %} 標(biāo)簽下的 {% endif %} 之前插入代碼：
<script>
(function(){
if('{{ page.password }}'){
if (prompt('請(qǐng)輸入文章密碼') !== '{{ page.password }}'){
alert('密碼錯(cuò)誤');
history.back();
}
}
})();
</script>
在文章上應(yīng)用：
---
title: 2017觀看影視
date: 2017-09-25 16:10:03
type:
top:
comments:
categories: [影音, 影視]
tags: [影音, 電影, 電視劇, 動(dòng)畫]
password: 123456
---
31. 添加jiathis分享
在主題配置文件中,做如下配置：
# Share
# This plugin is more useful in China, make sure you known how to use it.
# And you can find the use guide at official webiste: http://www.jiathis.com/.
# Warning: JiaThis does not support https.
jiathis: true
##uid: Get this uid from http://www.jiathis.com/
#add_this_id:
如果你想自定義話条获，打開 themes/next/layout/_partials/share/jiathis.swig 根據(jù)官網(wǎng)代碼修改忠荞。
32. 修改打賞字體不閃動(dòng)
修改文件 next/source/css/_common/components/post/post-reward.styl，然后注釋其中的函數(shù) wechat:hover 和 alipay:hover 帅掘，如下：
* 注釋文字閃動(dòng)函數(shù)
#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;
}
*/
33. 自定義鼠標(biāo)樣式
打開 themes/next/source/css/_custom/custom.styl ,在里面寫下如下代碼：
// 鼠標(biāo)樣式
* {
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 圖片可以上傳到網(wǎng)上（我是使用七牛云圖床），然后獲取外鏈修档，復(fù)制到 url 里就行了碧绞。
34. 網(wǎng)站標(biāo)題欄背景顏色
當(dāng)使用Pisces主題時(shí)，網(wǎng)站標(biāo)題欄背景顏色是黑色的吱窝，感覺不好看讥邻，可以在 source/css/_schemes/Pisces/_brand.styl 中修改：
.site-meta {
padding: 20px 0;
color: white;
background: $blue-dodger; //修改為自己喜歡的顏色
+tablet() {
box-shadow: 0 0 16px rgba(0,0,0,0.5);
}
+mobile() {
box-shadow: 0 0 16px rgba(0,0,0,0.5);
}
}
但是迫靖，我們一般不主張這樣修改源碼的，在 next/source/css/_custom 目錄下面專門提供了 custom.styl 供我們自定義樣式的兴使，因此也可以在 custom.styl 里面添加：
// Custom styles.
.site-meta {
background: $blue; //修改為自己喜歡的顏色
}
35. 修改內(nèi)容區(qū)域的寬度
我們用Next主題是發(fā)現(xiàn)在電腦上閱讀文章時(shí)內(nèi)容兩邊留的空白較多系宜，這樣在瀏覽代碼塊時(shí)經(jīng)常要滾動(dòng)滾動(dòng)條才能閱讀完整，體驗(yàn)不是很好鲫惶，下面提供修改內(nèi)容區(qū)域的寬度的方法蜈首。
NexT 對(duì)于內(nèi)容的寬度的設(shè)定如下：
- 700px，當(dāng)屏幕寬度 < 1600px
- 900px欠母，當(dāng)屏幕寬度 >= 1600px
- 移動(dòng)設(shè)備下欢策，寬度自適應(yīng)
如果你需要修改內(nèi)容的寬度，同樣需要編輯樣式文件赏淌。
在Mist和Muse風(fēng)格可以用下面的方法：
編輯主題的 source/css/_variables/custom.styl 文件踩寇，新增變量：
// 修改成你期望的寬度
$content-desktop = 700px
// 當(dāng)視窗超過(guò) 1600px 后的寬度
$content-desktop-large = 900px
當(dāng)你使用Pisces風(fēng)格時(shí)可以用下面的方法：
header{ width: 90%; }
.container .main-inner { width: 90%; }
.content-wrap { width: calc(100% - 260px); }
36. 修改Logo字體
在 themes/next/source/css/_custom/custom.styl 中添加如下代碼：
@font-face {
font-family: Zitiming;
src: url('/fonts/Zitiming.ttf');
}
.site-title {
font-size: 40px !important;
font-family: 'Zitiming' !important;
}
其中字體文件在 themes/next/source/fonts 目錄下，里面有個(gè) .gitkeep 的隱藏文件六水，打開寫入你要保留的字體文件俺孙，比如我的是就是寫入 Zitiming.ttf ，具體字庫(kù)自己從網(wǎng)上下載即可掷贾。
37. 添加背景圖
在 themes/next/source/css/_custom/custom.styl 中添加如下代碼：
body{
background:url(/images/bg.jpg);
background-size:cover;
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}
38. 各版塊透明度修改
38.1 內(nèi)容板塊透明
博客根目錄 themes\next\source\css\_schemes\Pisces\_layout.styl 文件 .content-wrap 標(biāo)簽下 background: white修改為：
background: rgba(255,255,255,0.7); //0.7是透明度
38.2 菜單欄背景
博客根目錄 themes\next\source\css\_schemes\Pisces\_layout.styl 文件 .header-inner 標(biāo)簽下 background: white修改為：
background: rgba(255,255,255,0.7); //0.7是透明度
38.3 站點(diǎn)概況背景
博客根目錄 themes\next\source\css\_schemes\Pisces\_sidebar.styl 文件 .sidebar-inner 標(biāo)簽下 background: white修改為：
background: rgba(255,255,255,0.7); //0.7是透明度
然后修改博客根目錄 themes\next\source\css\_schemes\Pisces\_layout.styl 文件 .sidebar 標(biāo)簽下 background: $body-bg-color修改為：
background: rgba(255,255,255,0.7); //0.7是透明度
38.4 按鈕背景
博客根目錄 themes\next\source\css\_common\components\post\post-button.styl 同上修改對(duì)應(yīng)位置為 background: transparent;
39. 添加網(wǎng)易云音樂
在網(wǎng)易云音樂（網(wǎng)頁(yè)版）中搜索我們想要插入的音樂睛榄，然后點(diǎn)擊生成外鏈播放器
然后根據(jù)你得設(shè)置生成相應(yīng)的html代碼，將獲得的html代碼插入到你想要插入的位置想帅。
我放在了側(cè)邊欄场靴，在 themes/next/layout/_custom/sidebar.swig 文件中增加生成的HTML代碼：
<div id="music163player">
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=280 height=86 src="http://music.163.com/outchain/player?type=2&id=38358214&auto=0&height=66">
</iframe>
</div>
可以根據(jù)自己實(shí)際情況修改寬高等樣式。
大部分效果可以參看我的個(gè)人博客
參考自：
http://www.reibang.com/p/3ff20be857
http://blog.csdn.net/qq_33699981/article/details/72716951
http://blog.csdn.net/heqiangflytosky/article/details/54863185
