主题安装
-
Hexo官网提供了丰富的主题，挑选一款适合自己的，执行以下命令：
$ git clone [主题地址] [存放位置]例如我选择的主题是Next
$ git clone https://github.com/iissnan/hexo-theme-next themes/next完成之后，在themes目录下就会多了一个主题next的文件夹
点击预览 themes
-
进入
站点配置文件，找到theme字段，修改为theme: next -
进入
主题配置文件，找到scheme字段，里面有next主题四种模板。# Schemes scheme: Muse # scheme: Mist # scheme: Pisces # scheme: Gemini首先使用命令，打开http://localhost:4000在本地预览，切换scheme刷新下页面看看效果
$ hexo s -g
Next主题
主题目录
.
├── _config.yml
├── languages
├── layout
├── scripts
└── source
基础配置
进入站点配置文件 ，字段Site
# Site
title: Danboard # 网站标题
subtitle: 踮起脚尖，另一种高度 # 副标题
description: # 描述，显示在侧边栏
author: Danboard # 作者
language: zh-Hans # 语言
timezone: Asia/Shanghai # 时间
站点logo
进入主题配置文件 ，字段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
图标推荐：
下载图标，指定大小，修改名称，存放在source/images/内
菜单
进入主题配置文件 ，字段menu
默认支持Font Awesome图标，所以||后只要跟上图标名就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
选择自己想要的菜单项，取消注释
-
新建一个about（关于我）页面
$ hexo new page "about"在
hexo/source/下生成about/index.md，编辑index.md文档 -
新建一个tags（标签）页面
$ hexo new page "tages"在
hexo/source/下生成tages/index.md，修改如下type: tages -
新建一个categories（分类）页面
$ hexo new page "categories"在
hexo/source/下生成/index.md，修改如下type: categories -
新建一个腾讯公益404页面
在
hexo/source/下新建一个404.html的文件，内容如下：<!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
侧边栏
-
进入
主题配置文件，字段sidebarsidebar: position: left # 靠左 #position: right # 靠右 #display: post # 默认，在文章页面（拥有目录列表）时显示 #display: always # 在所有页面中都显示 display: hide # 在所有页面中都隐藏（可以手动展开） #display: remove # 完全移除
-
头像
-
添加头像
进入
主题配置文件，字段avataravatar: /images/avatar.png # 放在source/images/ # avatar: http://example.com/avatar.png # 网上链接 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; } -
头像旋转
同上，添加代码：
.site-author-image { /* 鼠标经过头像旋转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 { /* 鼠标经过头像旋转360度 */ -webkit-transform: rotateZ(360deg); -moz-transform: rotateZ(360deg); transform: rotateZ(360deg); } /* Z 轴旋转动画 */ @keyframes play { 0% { transform: rotateZ(0deg); } 100% { transform: rotateZ(-360deg); } } @-webkit-keyframes play { // 同上 } @-moz-keyframes play { // 同上 }
-
-
社交链接
进入
主题配置文件，字段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 友情链接
进入
主题配置文件，字段Blogrolls# Blog rolls links_icon: link links_title: 友情链接 # links_layout: block # 块级 分行显示 links_layout: inline # 内联 同行显示 links: # 添加友链 SYSU: http://www.sysu.edu.cn/
GitHub边角
效果：
文件themes/next/layout/_layout.swig ，复制代码放在<div class="headband"></div>下，修改href为自己的github地址
因为我是把github的logo放在了左上角，在手机上查看就会发现logo与菜单重和了
如果想要修改边角位置，可以在文件
themes/next/source/css/_custom/custom.styl中进行更改
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
?
动画效果
-
背景动画
进入
主题配置文件，字段canvas_nest# 4种，开启true，关闭false canvas_nest: false three_waves: false canvas_lines: true canvas_sphere: false -
进度条
进入
主题配置文件，字段Progress# Progress bar in the top during page loading. pace: true pace_theme: pace-theme-flash
文章编辑
-
首页预览多篇文章，通过阅读全文打开
-
``截断
推荐在想要显示在首页的文字下方添加标签``
-
文章属性description
--- title: 文章标题 date: 发布时间 tages: 文章标签 description: 摘要，显示在首页 --- -
自动显示
进入
主题配置文件，字段auto_excerptauto_excerpt: enable: true length: 150 # 截取长度为150个字符
-
-
文章背景
添加边框阴影，突出文章，打开文件
themes/next/source/css/_custom/custom.styl，该文件可以让自定义一些布局，通过浏览器的开发者工具找到对应标签，就可以进行设置了。.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); } -
文章分割线
文章添加边框阴影后，分割线就显得有点多余，在
custom.styl文件中添加.posts-expand .post-eof { margin: 0px; background-color: rgba(255, 255, 255, 0); } -
代码高亮
进入
主题配置文件，字段highlight# Available value: # normal | night | night eighties | night blue | night bright highlight_theme: normalhttp://oxv1k8kvi.bkt.clouddn.com/18-4-1/58128679.jpg -
文章打赏
进入
主题配置文件，字段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: # 两种样式 下方 | 侧边 # button | slide -
豆瓣（自己试了，不能用）
duoshuo_share: true
-
-
文章加密
这只是一种障眼法
文件
/themes/next/layout/_partials/head.swig，添加如下代码<script> (function(){ if('{{ page.password }}'){ if (prompt('请输入文章密码') !== '{{ page.password }}'){ alert('密码错误！'); history.back(); } } })(); </script>文章属性添加
password: # 你设定的密码?
