Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
137 lines (87 sloc) 3.71 KB
title tags
Docs
Docs

Usage

如果你没有 pug 以及 stylus 的渲染器,请下载安装:

hexo-renderer-jade 这个是 Hexo 官方在维护,但是好像没有下面的星多,更新的勤快。

hexo-render-pug

npm install hexo-render-pug hexo-renderer-stylus --save
# or
yarn add hexo-render-pug hexo-renderer-stylus

Config

约定 > 配置

source/_data/ 目录下创建 starry.yml 文件。

只需在必要时,在 starry.yml 中定义您所需要的配置,其余将自动使用主题的默认配置。

Root Config

index_generator:
  per_page: 6 # 最好为偶数

Icon

在主题 _config.ymlcdncss 字段配置。

推荐方式零:只下载必要的 svg 存储为 cdn ,只在必要时使用(不引入 css 以尽可能提高速度)。 推荐方式一:使用 font-awesome,省时省力。 推荐方式二:全部使用自定义 iconfont 图标集。(速度快,但需自行配置) 推荐方式三:ionicons 加载与 iconfont 自定义搭配使用。

Font-Awesome

GitHub: Font-Awesome cdn: https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.8.1/css/all.min.css

图标多而全,含各类商标图标,但部分收费,且文件较大。

<i class="fas fa-home"></i>

Ionicons

GitHub: ionicons cdn_css: https://cdn.jsdelivr.net/npm/ionicons/dist/css/ionicons.min.css cdn_js: https://cdn.jsdelivr.net/npm/ionicons/dist/ionicons.js

无商标图标,可使用 Web Component ,按需加载。

加载方式一:Web Component

可根据 Android/iOS 平台自动切换适合的风格 Material/iOS

<!-- 比 unpkg 快 -->
<!-- https://cdn.jsdelivr.net/npm/ionicons@4.5.6/dist/ionicons.js -->
<script src="https://unpkg.com/ionicons@4.5.5/dist/ionicons.js"></script>
<ion-icon name="heart"></ion-icon>

如使用 Web Component ion-icon,配置中请如下填写:ion-icon heart

加载方式二:

<!-- 比 unpkg 快 -->
<!-- https://cdn.jsdelivr.net/npm/ionicons@4.5.6/dist/css/ionicons.min.css -->
<link href="https://unpkg.com/ionicons@4.5.5/dist/css/ionicons.min.css" rel="stylesheet">
<i class="icon ion-md-heart"></i>

如使用 font-class 方式,配置中请如下填写:icon ion-md-heart

Material Design icons

GitHub: material-design-icons

Material Design icons

样式统一,无商标图标。谷歌出品,因国内行情,加载未必稳定。

<i class="material-icons">face</i>

如使用 ionicon,配置中请如下填写:material-icons face

iconfont

阿里旗下,可定制自己所需图标集。

使用说明

多色图标需采用文章中 symbol 引用方式。

为统一与方便切换,仍采用 font-class 方式引入。

<i class="iconfont icon-xxx"></i>

Remix Icon

GitHub: https://github.com/Remix-Design/remixicon

Download svg

cdn: https://cdn.jsdelivr.net/npm/remixicon/fonts/remixicon.css

Recommend

CDN

GitHub CDN: https://cdn.jsdelivr.net/gh/user/repo@version/file

You can’t perform that action at this time.