§ 首页置顶文章
在文章的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代码
 |
- 设置图片的大小
{height="100px" width="400px"} | |
{width="400px"} | |
{height="100px"} |
- 除了在Front Matter里配置
photos可以显示相册图案列表外，还可以这样写
## 图案列表 No.1 | |
 | |
 | |
 | |
 | |
{.gallery} | |
## 图案列表 No.2 | |
 | |
 | |
 | |
 | |
{.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，并在这个文件夹中添加++同名++文件，部署时将自动覆盖主题内的默认图片。
可以用此方法自定义头像、打赏二维码等图片，并且避免覆盖更新主题时遗失自定义文件。
§ 彩色图标（SVG Sprite）
llxlr 魔改版已将图标加载方式从传统字体图标（.css）切换为 SVG Sprite（.js），支持彩色图标渲染。
# _config.shoka.yml | |
# 格式从 font_XXXXXX_c8i9n1ulxlt.css 改为 t/c/font_XXXXXX_igi8uaupcus.js | |
iconfont: "1832207_igi8uaupcus" |
Iconfont 项目设置需将
FontClass/Symbol 前缀设为i-。自定义图标放在<root>/source/_data/iconfont.styl中。
§ 脚注样式
脚注使用特定字体增强可读性，支持交叉引用（fn-back）样式。脚注在表格中的引用也已适配（通过 crossref.js 过滤器处理后迁移到表尾）。
§ 自定义语言包
本功能参考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这样是不可以的。
