主題安裝
-
Hexo官網(wǎng)提供了豐富的主題，挑選一款適合自己的，執(zhí)行以下命令：
$ git clone [主題地址] [存放位置]例如我選擇的主題是Next
$ git clone https://github.com/iissnan/hexo-theme-next themes/next完成之后梅忌，在themes目錄下就會(huì)多了一個(gè)主題next的文件夾
點(diǎn)擊預(yù)覽 themes
-
進(jìn)入
站點(diǎn)配置文件缨恒，找到theme字段时迫，修改為theme: next -
進(jìn)入
主題配置文件，找到scheme字段尺迂，里面有next主題四種模板。# Schemes scheme: Muse # scheme: Mist # scheme: Pisces # scheme: Gemini首先使用命令冒掌，打開http://localhost:4000在本地預(yù)覽噪裕，切換scheme刷新下頁面看看效果
$ hexo s -g
Next主題
主題目錄
.
├── _config.yml
├── languages
├── layout
├── scripts
└── source
基礎(chǔ)配置
進(jìn)入站點(diǎn)配置文件 ，字段Site
# Site
title: Danboard # 網(wǎng)站標(biāo)題
subtitle: 踮起腳尖股毫，另一種高度 # 副標(biāo)題
description: # 描述膳音，顯示在側(cè)邊欄
author: Danboard # 作者
language: zh-Hans # 語言
timezone: Asia/Shanghai # 時(shí)間
站點(diǎn)logo
進(jìn)入主題配置文件 ，字段favicon
favicon:
small: /images/favicon-16x16-next.png
medium: /images/favicon-32x32-next.png
apple_touch_icon: /images/apple-touch-icon-next.png
safari_pinned_tab: /images/logo.svg
圖標(biāo)推薦：
下載圖標(biāo)铃诬，指定大小祭陷，修改名稱苍凛，存放在source/images/內(nèi)
菜單
進(jìn)入主題配置文件 ，字段menu
默認(rèn)支持Font Awesome圖標(biāo)颗胡，所以||后只要跟上圖標(biāo)名就ok毫深，可以自行更換
menu:
home: / || home
#about: /about/ || user
#tags: /tags/ || tags
#categories: /categories/ || th
archives: /archives/ || archive
#schedule: /schedule/ || calendar
#sitemap: /sitemap.xml || sitemap
#commonweal: /404/ || heartbea
選擇自己想要的菜單項(xiàng)，取消注釋
-
新建一個(gè)about（關(guān)于我）頁面
$ hexo new page "about"在
hexo/source/下生成about/index.md毒姨，編輯index.md文檔 -
新建一個(gè)tags（標(biāo)簽）頁面
$ hexo new page "tages"在
hexo/source/下生成tages/index.md哑蔫，修改如下type: tages -
新建一個(gè)categories（分類）頁面
$ hexo new page "categories"在
hexo/source/下生成/index.md，修改如下type: categories -
新建一個(gè)騰訊公益404頁面
在
hexo/source/下新建一個(gè)404.html的文件弧呐，內(nèi)容如下：<!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="返回主頁"> </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>修改菜單
commonweal: /404.html || heartbea
側(cè)邊欄
-
進(jìn)入
主題配置文件闸迷，字段sidebarsidebar: position: left # 靠左 #position: right # 靠右 #display: post # 默認(rèn)，在文章頁面（擁有目錄列表）時(shí)顯示 #display: always # 在所有頁面中都顯示 display: hide # 在所有頁面中都隱藏（可以手動(dòng)展開） #display: remove # 完全移除
-
頭像
-
添加頭像
進(jìn)入
主題配置文件俘枫，字段avataravatar: /images/avatar.png # 放在source/images/ # avatar: http://example.com/avatar.png # 網(wǎng)上鏈接 url -
圓形頭像
文件
\themes\next\source\css\_common\components\sidebar\sidebar-author.styl腥沽，添加代碼：.site-author-image { /* 頭像圓形 */ border-radius: 80px; -webkit-border-radius: 80px; -moz-border-radius: 80px; box-shadow: inset 0 -1px 0 #333sf; } -
頭像旋轉(zhuǎn)
同上，添加代碼：
.site-author-image { /* 鼠標(biāo)經(jīng)過頭像旋轉(zhuǎn)360度 */ -webkit-transition: -webkit-transform 1.5s ease-out; -moz-transition: -moz-transform 1.5s ease-out; transition: transform 1.5s ease-out; } img:hover { /* 鼠標(biāo)經(jīng)過頭像旋轉(zhuǎn)360度 */ -webkit-transform: rotateZ(360deg); -moz-transform: rotateZ(360deg); transform: rotateZ(360deg); } /* Z 軸旋轉(zhuǎn)動(dòng)畫 */ @keyframes play { 0% { transform: rotateZ(0deg); } 100% { transform: rotateZ(-360deg); } } @-webkit-keyframes play { // 同上 } @-moz-keyframes play { // 同上 }
-
-
社交鏈接
進(jìn)入
主題配置文件鸠蚪，字段socialsocial: GitHub: https://github.com/XXX || github #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 #VK Group: https://vk.com/yourname || vk #StackOverflow: https://stackoverflow.com/yourname || stack-overflow #YouTube: https://youtube.com/yourname || youtube #Instagram: https://instagram.com/yourname || instagram #Skype: skype:yourname?call|chat || skype social_icons: enable: true icons_only: false transition: false -
推薦閱讀 or 友情鏈接
進(jìn)入
主題配置文件今阳，字段Blogrolls# Blog rolls links_icon: link links_title: 友情鏈接 # links_layout: block # 塊級(jí) 分行顯示 links_layout: inline # 內(nèi)聯(lián) 同行顯示 links: # 添加友鏈 SYSU: http://www.sysu.edu.cn/
GitHub邊角
效果：
文件themes/next/layout/_layout.swig ，復(fù)制代碼放在<div class="headband"></div>下茅信，修改href為自己的github地址
因?yàn)槲沂前裧ithub的logo放在了左上角盾舌，在手機(jī)上查看就會(huì)發(fā)現(xiàn)logo與菜單重和了
如果想要修改邊角位置，可以在文件
themes/next/source/css/_custom/custom.styl中進(jìn)行更改
svg {
float: left;
transform: scale(-1, 1);
+mobile() {
float: right;
transform: scale(1, 1);
}
}
-
http://oxv1k8kvi.bkt.clouddn.com/18-4-1/68389182.jpg
-
http://oxv1k8kvi.bkt.clouddn.com/18-4-1/38578141.jpg
?
動(dòng)畫效果
-
背景動(dòng)畫
進(jìn)入
主題配置文件蘸鲸，字段canvas_nest# 4種妖谴，開啟true，關(guān)閉false canvas_nest: false three_waves: false canvas_lines: true canvas_sphere: false -
進(jìn)度條
進(jìn)入
主題配置文件酌摇，字段Progress# Progress bar in the top during page loading. pace: true pace_theme: pace-theme-flash
文章編輯
-
首頁預(yù)覽多篇文章膝舅，通過閱讀全文打開
-
``截?cái)?
推薦在想要顯示在首頁的文字下方添加標(biāo)簽``
-
文章屬性description
--- title: 文章標(biāo)題 date: 發(fā)布時(shí)間 tages: 文章標(biāo)簽 description: 摘要，顯示在首頁 --- -
自動(dòng)顯示
進(jìn)入
主題配置文件窑多，字段auto_excerptauto_excerpt: enable: true length: 150 # 截取長度為150個(gè)字符
-
-
文章背景
添加邊框陰影仍稀，突出文章，打開文件
themes/next/source/css/_custom/custom.styl埂息，該文件可以讓自定義一些布局琳轿，通過瀏覽器的開發(fā)者工具找到對(duì)應(yīng)標(biāo)簽，就可以進(jìn)行設(shè)置了耿芹。.post { margin-top: 60px; margin-bottom: 60px; padding: 25px; background-color: #fff; -webkit-box-shadow: 0 0 10px rgba(202, 203, 204, .5); -moz-box-shadow: 0 0 10px rgba(202, 203, 204, .5); } -
文章分割線
文章添加邊框陰影后崭篡，分割線就顯得有點(diǎn)多余，在
custom.styl文件中添加.posts-expand .post-eof { margin: 0px; background-color: rgba(255, 255, 255, 0); } -
代碼高亮
進(jìn)入
主題配置文件吧秕，字段highlight# Available value: # normal | night | night eighties | night blue | night bright highlight_theme: normalhttp://oxv1k8kvi.bkt.clouddn.com/18-4-1/58128679.jpg -
文章打賞
進(jìn)入
主題配置文件琉闪，字段reward，將支付寶or微信收款二維碼圖片保存到文件夾/themes/next/source/images/下# Reward #reward_comment: Donate comment here wechatpay: /images/wechatpay.jpg alipay: /images/alipay.jpg # bitcoin: /images/bitcoin.png -
文章分享
Next這里提供了三種：jiathis砸彬、百度颠毙、豆瓣斯入，效果都差不多
自定義文件都在
themes/next/layout/_partials/share/-
jiathis分享
jiathis: true -
百度分享
baidushare: type: button # Available value: # 兩種樣式 下方 | 側(cè)邊 # button | slide -
豆瓣（自己試了，不能用）
duoshuo_share: true
-
-
文章加密
這只是一種障眼法
文件
/themes/next/layout/_partials/head.swig蛀蜜，添加如下代碼<script> (function(){ if('{{ page.password }}'){ if (prompt('請(qǐng)輸入文章密碼') !== '{{ page.password }}'){ alert('密碼錯(cuò)誤刻两！'); history.back(); } } })(); </script>文章屬性添加
password: # 你設(shè)定的密碼?
