🚀快速开始 - 💌依赖插件 - 📌基本配置 - 🌈界面显示 - 🦄特殊功能

# 首页置顶文章

在文章的Front Matter设置sticky: true，则该文章将显示在首页最上方的置顶文章列。
多篇文章按照发布时间倒序排列，不分页。

---
title: 置顶文章
sticky: true
---

# 首页精选分类

想要在首页显示分类翻转块，需要按照以下示例的方式，给需要显示的分类加上封面图。

首先，修改站点配置：
找到category_map:，配置每个分类对应的英文映射，比如：
```
category_map:
  计算机科学: computer-science
  Java: java
  C++: cpp
  二进制杂谈: note
  计算机程序设计（C++）-西安交通大学: course-1
  零基础学Java语言-浙江大学-翁恺: course-1
  面向对象程序设计-Java语言-浙江大学-翁恺: course-2
```
注意：hexo会自动处理路径中的特殊字符，~`!@#$%^&*()-_+={}|\;:"'<>,.?以及空格，这些全部会被替换成-
所以避免在设置中使用上述字符，否则可导致无法抓取到目录下的cover.jpg
在<root>/source/_posts文件夹相应的目录里，存放封面图
例子：如第1周计算这篇文章。
所处的分类是
```
categories:
- [计算机科学, Java, 零基础学Java语言-浙江大学-翁恺]
```
现在需要在首页显示零基础学Java语言-浙江大学-翁恺这个分类，翻转卡片后，显示这个分类下的文章们。
而该分类经过英文映射，它的路径将是/computer-science/java/course-1/。

那么，请在<root>/source/_posts/computer-science/java/course-1/的目录下放置cover.jpg文件。
只要分类路径对应的目录下存在cover.jpg文件，这个分类就会在首页显示。
在进行hexo g时，本分类的封面图会自动被复制到public目录里相应的位置。
事实上，为了方便文章管理，这个分类下所有文章的md文件，我都会放在<root>/source/_posts/computer-science/java/course-1/这个目录下。

且站点配置文件里，永久链接设置如下
```
permalink: :title/
```
hexo g后，文章的html文件们将全部生成到<root>/public/computer-science/java/course-1/目录。
具体可以查看本博客的github仓库。
文章详情界面中的系列文章，显示的是与当前文章同一分类的其他文章，并按照文章名正序排序。

o(*￣▽￣*)ゞ
其实，不设置category_map也可以，只要在分类路径对应的文件夹下存在cover.jpg文件就行。
现在，这项功能与category_dir的配置也无关，hexo g生成后，图片会自动被转移到category_dir的相关子目录下。

# 文章封面图

如果文章的Front Matter设置了cover: image path，则封面会显示这张图片。
```
title: Images
cover: assets/wallpaper-2572384.jpg
# 或者写成
cover: http://placehold.it/350x150.jpg
---
```
这里cover的值可以是位于source目录里的图片文件，此处是<root>/source/assets/wallpaper-2572384.jpg文件，也可以是一个某网址。
如果文章是一个gallery post，即Front Matter设置了photos，则会封面会显示设置的第一张图片。
```
title: Gallery Post
photos:
- assets/wallpaper-2572384.jpg
- assets/wallpaper-2311325.jpg
- assets/wallpaper-878514.jpg
- http://placehold.it/350x150.jpg
---
```
此时默认会显示第一个图片，即位于<root>/source/assets/目录里的wallpaper-2572384.jpg。
如果站点配置中设置了post_asset_folder: true，那么上述本地图片路径应为<root>/source/_posts/文章同名的文件夹/assets/wallpaper-2572384.jpg，当然此时assets目录可以省掉。
如果以上设置均不存在，将显示一张随机图片，随机图库配置戳此。

# 图片展示与相册

在文章的Front Matter设置fancybox: false，可以关闭文章页的图片展示功能。
使用Justified-Gallery对Gallery Post内图案进行排列。

下面介绍一些小技巧：

让图案下方显示title的markdown代码

![这里是alt](https://tva3.sinaimg.cn/large/6833939bly1gicis081o9j20zk0m8dmr.jpg "这里是title")

这里是alt

设置图片的大小

![](https://tva3.sinaimg.cn/large/6833939bly1gicis081o9j20zk0m8dmr.jpg "定义图片大小-固定宽度和高度"){height="100px" width="400px"}

![](https://tva3.sinaimg.cn/large/6833939bly1gicis081o9j20zk0m8dmr.jpg "定义图片大小-固定宽度"){width="400px"}

![](https://tva3.sinaimg.cn/large/6833939bly1gicis081o9j20zk0m8dmr.jpg "定义图片大小-固定高度"){height="100px"}

除了在Front Matter里配置photos可以显示相册图案列表外，还可以这样写

## 图案列表No.1
![](https://tva3.sinaimg.cn/large/6833939bly1giclfdu6exj20zk0m87hw.jpg "这里是title")
![](https://tva3.sinaimg.cn/large/6833939bly1giclflwv2aj20zk0m84qp.jpg)
![](https://tva3.sinaimg.cn/large/6833939bly1giclg5ms2rj20zk0m8u0x.jpg)
![](https://tva3.sinaimg.cn/large/6833939bly1giclhnx9glj20zk0m8npd.jpg)
{.gallery}

## 图案列表No.2
![](https://tva3.sinaimg.cn/large/6833939bly1gicitht3xtj20zk0m8k5v.jpg)
![](https://tva3.sinaimg.cn/large/6833939bly1giclil3m4ej20zk0m8tn8.jpg)
![](https://tva3.sinaimg.cn/large/6833939bly1gicljgocqbj20zk0m8e81.jpg)
![](https://tva3.sinaimg.cn/large/6833939bly1gipetfk5zwj20zk0m8e81.jpg)
{.gallery data-height="120"}

data-height用来设置每行的高度，默认为220

# 图案列表No.1

# 图案列表No.2

# 自定义页面配色

主题配色全部在<root>/themes/shoka/source/css/_colors.styl文件中，可以自行查看。

在<root>/source/_data/目录新建文件colors.styl，在此文件中添改样式。

自定义colors.styl文件将覆盖主题默认样式，为了避免出错，请保证原有样式名均存在，在原有样式基础上进行增删改。

主题支持在<root>/source/_data/目录建立三个自定义styl文件：

自定义文件名	对应默认样式文件	样式功能
`colors.styl`	`_colors.styl`	页面配色
`iconfont.styl`	`_iconfont.styl`	图标样式
`custom.styl`	-	任意自定义样式

# 自定义主题图片

如果想要修改主题的<root>/themes/shoka/source/images/目录内的某张图片，请在<root>/source/_data/目录新建目录images，并在这个文件夹中添加同名文件，部署时将自动覆盖主题内的默认图片。

可以用此方法自定义头像、打赏二维码等图片，并且避免覆盖更新主题时遗失自定义文件。

# 自定义语言包

本功能参考NexT，主要可以用来定义菜单等处显示的文字，且可以方便主题无脑覆盖升级。

在<root>/source/_data/目录新建文件languages.yml。

按照以下格式添加配置项：

# language
zh-CN:
  # items
  post:
    copyright:
      # the translation you perfer
      author: 本文博主
en:
  menu:
    travellings: Travellings

可以参考主题目录下的example/source/_data文件夹。

站点配置及文件的Front Matter中，language项只支持zh-CN、zh-HK、zh-TW、ja、en。
类似写成zh_CN这样是不可以的。

Hexo 教程