前言

如何给博客披上一层靓丽的皮肤

配置主题文件

设置头像

在站点配置文件中,添加avatar字段,值设置成头像的链接地址

1
2
avatar: /images/avatar.png
路径主题文件source/images目录下

设置网站图标(注意必须为ico格式)

在主题配置文件中,把favicon的注释去掉即可

1
2
3
# Put your favicon.ico into `hexo-site/source/` directory.
favicon: images/favicon.ico
//路径主题文件source/images目录下

自定义代码高亮

在hexo-theme-shana\source\css_partial\highlight.styl

1
2
3
4
5
6
7
8
$code-block
  border-left: 5px solid #eb3c3c
  background: #9d
  margin: 0 article-padding * -1
  padding: 15px article-padding
  overflow: auto
  color: highlight-foreground
  line-height: font-size * line-height

自定义背景图片

1
2
hexo-theme-shana\source\plugin\bganimation\bg.css
替换里面的图片url就可以了

hexo设置网站的图标Favicon

具体方法实现:
ico图标 32*32 去别的网站下载或者制作，并将图标名称改为 favicon.ico，然后把图标放在/themes/next/source/images里，并且修改主题配置文件：
favicon: images/favicon.ico
//路径主题文件source/images目录下

文章打赏功能

越来越多的平台（微信公众平台，新浪微博，简书，百度打赏等）支持打赏功能，付费阅读时代越来越近，Next特此增加了打赏功能，支持微信打赏和支付宝打赏。 只需要复制下面的代码添加到主题配置文件中即可开启该功能。

1
2
3
reward_comment: 坚持原创技术分享，您的支持将鼓励我继续创作！
wechatpay: 图片链接
alipay: 图片链接

设置友情链接

在主题文件开启links_title和links即可

1
2
3
4
5
6
7
title
links_title: 前端工具箱
links_layout: block
links_layout: inline
links:
   代码压缩: http://tool.oschina.net/jscompress
   CSS整理: http://example

添加标签页面

使用： hexo new page tags 新建一个 标签页面（或者直接在文件夹里面新建一个tags文件夹里面包含一个index.md文件）

主题的 _config.yml 文件中的 menu 中进行匹配

1
2
3
4
5
6
menu:
  home: /      //主页
  categories: /categories //分类
  archives: /archives   //归档
  tags: /tags   //标签                  （添加此行即可）
  about: /about   //关于

底下代码是一篇包含 标签 文章的例子：

1
2
3
4
title: 标签测试
tags:
  - Testing                   （这个就是文章的标签了）
  - Another Tag               （这个就是文章的标签了）

tags文件夹里面是index.md文件

1
2
3
4
title: tags
date: 2014-12-22 
type: "tags"
layout: "tags"

添加分类页面

使用： hexo new page categories 新建一个 分类 页面。

主题的 _config.yml 文件中的 menu 中进行匹配

1
2
3
4
5
6
menu:
  home: /      //主页
  categories: /categories //分类        （添加此行即可）
  archives: /archives   //归档
  tags: /tags   //标签                  
  about: /about   //关于

底下代码是一篇包含 分类 文章的例子：

1
2
3
title: 分类测试
categories:
- hexo                       （这个就是文章的分类了）

categories文件夹里面是index.md文件

1
2
3
4
title: 分类
date: 2014-12-22
type: "categories"
layout: "categories"

hexo categories和tags页面不显示解决办法

方法一：　　

scaffolds/draft.md　　　　

1
2
3
4
---
title: {{ title }}
tags: {{ tags }}
---

scaffolds/post.md

1
2
3
4
5
---
title: {{ title }}
date: {{ date }}
tags: {{ tags }}
---

tags/index

1
2
3
4
5
6
---
title: Tagcloud
date: 2017-04-26 17:47:43
type: "tags"
layout: "tags"
---

方法二：

1.默认是没有 categories 和 tags 的需要

1
2
3
hexo new page "tags" 

hexo new page "categories"

2.编辑 /tags/index.md /categories/index.md

1
2
3
4
5
type: "tags"
layout: "tags"

type: "categories"
layout: "categories"

找到 \themes\next\layout_partials\下面的footer.swig文件

补充：高亮一段代码

在右边标记代码的语言，就能显示其相应的代码颜色，诸如Java，JavaScript，php，Python，c等等

1
2
3
4
5
6
7
@requires_authorization
class SomeClass:
    pass

if __name__ == '__main__':
    # A comment
    print 'hello world'

文字高亮

只需要在在相关文字的前后加上模板字符串符号就行