534 lines
18 KiB
Markdown
534 lines
18 KiB
Markdown
# hexo-theme-ils
|
||
|
||
[](https://github.com/XPoet)
|
||
[](https://github.com/XPoet/hexo-theme-ils/releases)
|
||
[](https://github.com/XPoet/hexo-theme-ils/blob/master/LICENSE)
|
||
[](https://nodejs.org/)
|
||
[](https://hexo.io)
|
||
|
||
**一款简约漂亮的 Hexo 主题。**
|
||
**A simple and beautiful theme for Hexo.**
|
||
|
||
|
||
|
||
<details>
|
||
|
||
<summary>点击展开，查看更多预览图。</summary>
|
||
|
||
- 样式一：
|
||
|
||
|
||
|
||
|
||
|
||
- 样式二：
|
||
|
||
|
||
|
||
|
||
|
||
- 样式三：
|
||
|
||
|
||
|
||
|
||
|
||
</details>
|
||
|
||
**Live Preview 在线预览**
|
||
|
||
- [XPoet's Blog](https://xpoet.cn)
|
||
- [ILS 官网](https://ils.xpoet.cn)
|
||
- ...
|
||
- ...
|
||
|
||
---
|
||
|
||
如你所见，ILS 主题界面设计十分简洁、清爽，但功能齐全、不失优雅，这正是 ILS 的开发理念。也曾尝试过花里胡哨，发现不仅配置繁琐、容易审美疲劳，而且背驰了写博客的初衷，记录生活、展示文字，应该才是搭建博客网站的最终追求，为此 ILS 主题应运而生。简约轻快、突出内容、化繁为简、配置简单、长期维护，如果你也喜欢或认可这些主题特点，一起来探索吧~
|
||
|
||
关于主题名称 **"ILS"** 的由来：在主题开发之初，作者想到的几个名字都已被用，词穷了，后来干脆将名字取自 **"I Like Simple「我喜欢简单」"** 首字母，就是这么简单。
|
||
|
||
欢迎感兴趣的同学 [Pull Request](https://juejin.im/post/6844903856971710477) 加入到该主题的开发中（成为该项目的贡献者），按你的意愿来打磨 ILS。
|
||
|
||
## Features 功能特性
|
||
|
||
### Completed 已完成
|
||
|
||
- [x] 恰到好处的留白，简约大气。
|
||
- [x] 响应式设计，适配多种终端。
|
||
- [x] 日间/夜间模式自由切换。
|
||
- [x] 多套代码高亮方案。
|
||
- [x] 语言国际化，支持中/英文。
|
||
- [x] 内置多款评论插件。
|
||
- [x] 支持全站文章搜索。
|
||
- [x] 支持文章顶置。
|
||
- [x] 代码块一键复制。
|
||
- [x] TOC 目录结构。
|
||
- [x] RSS 订阅。
|
||
- [x] 网站 UV 和 PV 统计。
|
||
- [x] 文章阅读次数统计。
|
||
- [x] 文章字数统计。
|
||
- [x] 文章阅读时长统计。
|
||
- [x] 页面滚动进度条提示。
|
||
- [x] 一键快速回到顶部。
|
||
- [x] 大图查看器。
|
||
|
||
### Unfinished 未完成
|
||
|
||
- [ ] 图片懒加载
|
||
- [ ] 代码块折叠
|
||
- [ ] 文章点赞功能
|
||
- [ ] 文章版权信息
|
||
- [ ] 在线更改字体和字号
|
||
- [ ] 打赏功能
|
||
- [ ] ......
|
||
|
||
## Get start 快速开始
|
||
|
||
**在开始使用本主题之前，如果你刚接触 Hexo，强烈建议先阅读 [「Easy Hexo 团队」撰写的 Hexo 教程](https://easyhexo.com/) 。**
|
||
|
||
**如遇无法解决的问题，请给作者提 [Issue](https://github.com/XPoet/hexo-theme-ils/issues) 。**
|
||
|
||
### Install 安装
|
||
|
||
- 使用 Git SSH
|
||
|
||
```bash
|
||
git clone --depth=1 git@github.com:XPoet/hexo-theme-ils.git themes/ils
|
||
```
|
||
|
||
该方式获取的是 Master 分支最新代码，包含该主题最新的功能，但无法保证完全稳定。
|
||
|
||
- 下载 Release 版本
|
||
|
||
[点击此处进入该主题 Releases 版本下载页面](https://github.com/XPoet/hexo-theme-ils/releases) 请优先下载最新版本，下载完成后解压到 Hexo 博客目录的 themes 文件夹里面并重命名为 `ils`。
|
||
|
||
### Enable 启用
|
||
|
||
Modify `theme` setting in `_config.yml` to `ils`.
|
||
修改 Hexo 根目录下的 `_config.yml` 配置文件，将 `theme` 设置为 `ils` 。
|
||
|
||
```yml
|
||
theme: ils
|
||
```
|
||
|
||
### Update 更新
|
||
|
||
- 使用 Git SSH
|
||
```bash
|
||
cd themes/ils
|
||
git pull
|
||
```
|
||
- 下载 [主题最新 Release 版本](https://github.com/XPoet/hexo-theme-ils/releases) 。
|
||
|
||
## How to use 如何使用
|
||
|
||
### Configuration 配置
|
||
|
||
以下是主题配置文件的详细说明，建议多看几遍，并且对照着来修改自己的配置文件，边修改边查看界面效果。
|
||
|
||
关于主题配置文件 `_config.yml` 更详细的教程，请移步 ILS 官网查看：[《ILS 主题配置文件图文教程》](https://ils.xpoet.cn/2020/10/ILS-主题配置文件图文教程/) 。
|
||
|
||
```yml
|
||
# ---------------------------------------------------------------------------------------
|
||
# Your basic info
|
||
# 你的基本信息，请正确填写，将显示在主题中。
|
||
# ---------------------------------------------------------------------------------------
|
||
base_info:
|
||
title: ILS
|
||
author: XPoet
|
||
url: https://ils.xpoet.cn/
|
||
description: Welcome to use ILS theme
|
||
|
||
# ---------------------------------------------------------------------------------------
|
||
# Theme style settings
|
||
# 主题样式设置
|
||
# ---------------------------------------------------------------------------------------
|
||
style:
|
||
# Theme primary color
|
||
# 主颜色，修改为自己喜欢的颜色即可，支持 rgb、十六进制格式。
|
||
# 建议使用 Web 安全色，https://www.bootcss.com/p/websafecolors/
|
||
primary_color: "#0066CC"
|
||
|
||
# Image align position, value: left | center
|
||
# 文章内容页的图片排列位置，可选 left（靠左） 或 center（居中）
|
||
img_position: center
|
||
|
||
# Left side width
|
||
# 文章内容页左侧 TOC（目录结构）模块的宽度，按需修改
|
||
left_side_width: 260px
|
||
|
||
# Mouse hover
|
||
# 鼠标悬浮样式
|
||
hover:
|
||
shadow: true # shadow effect when the mouse hover 鼠标悬浮时增加阴影效果
|
||
scale: false # scale effect when the mouse hover 鼠标悬浮时增加缩放效果
|
||
|
||
# First screen
|
||
# 是否开启首屏
|
||
first_screen:
|
||
enable: true
|
||
|
||
# ---------------------------------------------------------------------------------------
|
||
# Social contact link
|
||
# 社交链接，需开启首屏才能显示社交链接
|
||
# ---------------------------------------------------------------------------------------
|
||
social_contact:
|
||
enable: false
|
||
links:
|
||
github: # your GitHub URL
|
||
wechat: # your WeChat QR-Code URL
|
||
weibo: # your WeiBo URL
|
||
twitter: # your twitter URL
|
||
facebook: # your facebook URL
|
||
email: # your email
|
||
|
||
# ---------------------------------------------------------------------------------------
|
||
# Navigation menu
|
||
# 导航菜单
|
||
# 如需新增导航页，请按下面格式填写，同时需要创建相对应的 Hexo 页面。
|
||
# 如何新增页面，请参考下面的教程：“Add page 添加页面”。
|
||
# ---------------------------------------------------------------------------------------
|
||
menu:
|
||
Home: /
|
||
Archives: /archives
|
||
# Categories: /categories
|
||
# Tags: /tags
|
||
# Links: /links
|
||
# About: /about
|
||
# ...
|
||
|
||
# ---------------------------------------------------------------------------------------
|
||
# RSS
|
||
# Dependencies: hexo-generator-feed
|
||
# See: https://github.com/hexojs/hexo-generator-feed
|
||
# RSS 订阅，如需启用，请先安装 Hexo 插件：hexo-generator-feed。
|
||
# 具体步骤，参考下面的教程：“RSS 订阅”。
|
||
# ---------------------------------------------------------------------------------------
|
||
rss:
|
||
enable: false
|
||
|
||
# ---------------------------------------------------------------------------------------
|
||
# Comment plugin
|
||
# 评论插件
|
||
# 主题内置了 Valine 和 Gitalk，只能使用其中一款。
|
||
# ---------------------------------------------------------------------------------------
|
||
comment:
|
||
# Valine
|
||
# See: https://github.com/xCss/Valine
|
||
# 如何使用 Valine，请参考官方教程：https://github.com/xCss/Valine
|
||
# 获取必要的参数，在下面填写。
|
||
valine:
|
||
enable: false
|
||
appid: # your leancloud application appid
|
||
appkey: # your leancloud application appkey
|
||
meta: # comment input meta, type: Array, values: ['nick','mail','link']
|
||
placeholder: # your placeholder
|
||
|
||
# Gitalk
|
||
# See: https://github.com/gitalk/gitalk
|
||
# 如何使用 Gitalk，请参考官方教程：https://github.com/gitalk/gitalk
|
||
# 获取必要的参数，在下面填写。
|
||
gitalk:
|
||
enable: false
|
||
github_id: # GitHub repo owner
|
||
repository: # Repository name to store issues
|
||
client_id: # GitHub Application Client ID
|
||
client_secret: # GitHub Application Client Secret
|
||
|
||
# ---------------------------------------------------------------------------------------
|
||
# Website count
|
||
# 网站计数
|
||
# ---------------------------------------------------------------------------------------
|
||
website_count:
|
||
# busuanzi
|
||
# See: http://ibruce.info/2015/04/04/busuanzi/
|
||
# 主题内置“不蒜子”计数，无需额外配置，选择你要开启的计数项即可。
|
||
# site_uv 访问人数计数
|
||
# site_pv 总访问量计数
|
||
# page_pv 文章阅读量计数
|
||
busuanzi_count:
|
||
enable: false
|
||
site_uv: false
|
||
site_pv: false
|
||
page_pv: false
|
||
|
||
# ---------------------------------------------------------------------------------------
|
||
# Local Search
|
||
# Dependencies: hexo-generator-searchdb
|
||
# See: https://github.com/theme-next/hexo-generator-searchdb
|
||
# 本地搜索，如需启用，请先安装 Hexo 插件：hexo-generator-searchdb。
|
||
# 具体步骤，参考下面的教程：“Local search 本地搜索”。
|
||
# ---------------------------------------------------------------------------------------
|
||
local_search:
|
||
enable: true
|
||
|
||
# If auto, trigger search by changing input.
|
||
# If manual, trigger search by pressing enter key or search button.
|
||
# trigger 搜索触发方式，输入关键字后会触发搜索，可选 auto（自动）或 manual（手动）。
|
||
### auto 每输入或删除一个字符后，自动触发搜索。
|
||
### manual 每输入或删除一个字符后，需要按回车键触发搜索。
|
||
trigger: auto # values: auto | manual
|
||
|
||
# Unescape html strings to the readable one.
|
||
# 转义 HTML 字符串为可读字符串。
|
||
unescape: false
|
||
|
||
# Preload the search data when the page loads.
|
||
# 在页面加载时预加载搜索数据。
|
||
preload: false
|
||
|
||
# ---------------------------------------------------------------------------------------
|
||
# Post word count
|
||
# Dependencies: hexo-wordcount
|
||
# See: https://github.com/willin/hexo-wordcount
|
||
# 文章字数统计 & 阅读时长统计
|
||
# 如需启用，请先安装 Hexo 插件：hexo-wordcount。
|
||
# 在博客根目录下使用 npm 命令安装: npm i hexo-wordcount --save
|
||
# ---------------------------------------------------------------------------------------
|
||
post_wordcount:
|
||
enable: false
|
||
wordcount: false # word count, one article
|
||
min2read: false # time to read, one article
|
||
|
||
# ---------------------------------------------------------------------------------------
|
||
# Home page article block display settings
|
||
# 首页文章块底部的显示设置，可配置显示分类和标签。
|
||
# limit 显示分类或标签的最大个数。
|
||
# ---------------------------------------------------------------------------------------
|
||
home_article:
|
||
category:
|
||
enable: false # show category in home page article block
|
||
limit: 3 # max number of categories shown in home page article block
|
||
tag:
|
||
enable: false # show tags in home page article block
|
||
limit: 5 # max number of tags shown in home page article block
|
||
|
||
# ---------------------------------------------------------------------------------------
|
||
# Code copy
|
||
# 代码复制，代码块的复制风格可选 default | mac
|
||
# ---------------------------------------------------------------------------------------
|
||
code_copy:
|
||
enable: true
|
||
style: flat # values: default | mac
|
||
|
||
# ---------------------------------------------------------------------------------------
|
||
# Sidebar tools
|
||
# 侧边栏工具（昼夜模式切换、RSS、回到顶部、到达底部等小工具按钮）
|
||
# ---------------------------------------------------------------------------------------
|
||
side_tools:
|
||
enable: false
|
||
|
||
# ---------------------------------------------------------------------------------------
|
||
# Back to top
|
||
# 回到顶部
|
||
# ---------------------------------------------------------------------------------------
|
||
back2top:
|
||
enable: false
|
||
|
||
# ---------------------------------------------------------------------------------------
|
||
# Table of Contents in the Sidebar
|
||
# 文章目录结构
|
||
# ---------------------------------------------------------------------------------------
|
||
toc:
|
||
enable: false
|
||
|
||
# Automatically add list number to toc.
|
||
# 给文章目录自动加上序号。
|
||
number: true
|
||
|
||
# If true, all level of TOC in a post will be displayed, rather than the activated part of it.
|
||
# 是否展开所有目录。
|
||
expand_all: true
|
||
|
||
|
||
# ---------------------------------------------------------------------------------------
|
||
# Footer settings
|
||
# 网站 Footer 设置
|
||
# ---------------------------------------------------------------------------------------
|
||
footer:
|
||
since: 2020 # 设置建站起始年份
|
||
```
|
||
|
||
### Comment 评论
|
||
|
||
主题内置了 Valine 和 Gitalk 两款评论插件，你只能使用其中一款，如果两款评论插件的 enable 都设为了 true，将使用 Valine。
|
||
|
||
#### Valine
|
||
|
||
前往 https://github.com/xCss/Valine 查看 Valine 如何使用，获取必要的参数，填写在配置文件里。
|
||
|
||
#### Gitalk
|
||
|
||
1. 在自己的 GitHub 账号下创建新的 OAuth App，链接：https://github.com/settings/applications/new ，Homepage URL 和 Authorization callback URL 均填写自己的域名即可。
|
||
2. 在自己的 GitHub 账号下创建新的 repository 并打开 Issues，用于存储评论内容。
|
||
3. 把自己的 GitHub 用户名称、repository 名称 、OAuth App 的 Client ID 、Client Secret 分别填写在主题配置文件里。
|
||
|
||
前往 https://github.com/gitalk/gitalk 查看 Gitalk 更多信息。
|
||
|
||
### Post sticky 文章顶置
|
||
|
||
实现文章顶置功能，需在文章页添加 **`sticky`** 属性，**`sticky`** 值越大，顶置的文章越靠前，参考如下。
|
||
|
||
```markdown
|
||
---
|
||
title: 千呼万唤始出来，Hexo 主题 ILS 正式发布
|
||
date: 2020-04-07 21:55:14
|
||
tags: [Hexo]
|
||
categories: [Hexo]
|
||
sticky: 9999
|
||
---
|
||
```
|
||
|
||
### Local search 本地搜索
|
||
|
||
1. 启用本地搜索功能，需在 Hexo 博客根目录下安装插件 **`hexo-generator-searchdb`**。
|
||
|
||
```bash
|
||
npm install hexo-generator-searchdb
|
||
```
|
||
|
||
2. 在 Hexo 配置文件 `_config.yml` 增加如下配置。
|
||
|
||
```yml
|
||
# Search
|
||
## https://github.com/theme-next/hexo-generator-searchdb
|
||
search:
|
||
path: search.json
|
||
field: post
|
||
content: true
|
||
format: striptags
|
||
```
|
||
|
||
3. 修改主题配置文件 `_config.yml`。
|
||
|
||
```yml
|
||
local_search:
|
||
enable: true
|
||
trigger: auto
|
||
unescape: false
|
||
preload: true
|
||
```
|
||
|
||
### RSS 订阅
|
||
|
||
1. 启用 RSS 订阅功能，需先在 Hexo 博客根目录下安装插件 **`hexo-generator-feed`**。
|
||
|
||
```bash
|
||
npm install hexo-generator-feed
|
||
```
|
||
|
||
2. 在 Hexo 配置文件 `_config.yml` 增加如下配置。
|
||
|
||
```yml
|
||
# Feed Atom
|
||
# npm install hexo-generator-feed
|
||
feed:
|
||
type: atom
|
||
path: atom.xml
|
||
limit: 20
|
||
```
|
||
|
||
3. 修改主题配置文件 `_config.yml`。
|
||
|
||
```yml
|
||
rss:
|
||
enable: true
|
||
```
|
||
|
||
### Add page 添加页面
|
||
|
||
**Hexo 初始并没有 categories（分类）、about（关于）、links（友链）、tags（标签） 等页面，需要自己手动创建。**
|
||
|
||
以创建「关于」页面为例：
|
||
|
||
1. 在 Hexo 博客目录下执行命令，即可生成 `about` 文件夹。
|
||
```bash
|
||
hexo new page about
|
||
```
|
||
2. 创建成功后，打开博客目录下 `/source/about/index.md` 文件，即可填写自己的内容。
|
||
支持 Markdown 和 HTML 格式；`comment: true` 表示该页面开启评论功能。
|
||
|
||
参考如下示例：
|
||
|
||
```markdown
|
||
---
|
||
title: about
|
||
date: 2020-03-19 14:59:53
|
||
comment: true
|
||
---
|
||
|
||
## About me
|
||
|
||
- XPoet「 X 诗人 」...
|
||
...
|
||
...
|
||
...
|
||
```
|
||
|
||
3. 在主题配置文件启用 `about` 导航菜单。
|
||
```yml
|
||
# navigation menu
|
||
menu:
|
||
Home: /
|
||
Archives: /archives
|
||
# Category: /category
|
||
# Links: /links
|
||
About: /about
|
||
# ...
|
||
```
|
||
|
||
其他页面的生成方式跟「关于」页面类似，此处不再赘述。
|
||
|
||
### MathJax 数学公式
|
||
|
||
如果要在文章中显示数学公式，可以使用插件 **`hexo-filter-mathjax`**，详情参考：https://github.com/next-theme/hexo-filter-mathjax/ 。
|
||
或按下列步骤完成相关配置：
|
||
|
||
1. 在 Hexo 博客根目录下安装插件 **`hexo-filter-mathjax`** 。
|
||
|
||
```bash
|
||
npm install hexo-filter-mathjax --save
|
||
```
|
||
|
||
2. 在 Hexo 配置文件 `_config.yml` 增加如下配置。
|
||
|
||
```yml
|
||
mathjax:
|
||
tags: none # or 'ams' or 'all'
|
||
single_dollars: true # enable single dollar signs as in-line math delimiters
|
||
cjk_width: 0.9 # relative CJK char width
|
||
normal_width: 0.6 # relative normal (monospace) width
|
||
append_css: true # add CSS to every page
|
||
every_page: false # if true, every page will be rendered by mathjax regardless the `mathjax` setting in Front-matter of each article
|
||
```
|
||
|
||
3. 在文章页添加 `mathjax: true`，至此，就可以在该页面中写公式了。
|
||
|
||
```yml
|
||
---
|
||
title: MathJax Test
|
||
date: 2020-09-12 16:02:07
|
||
tags: MathJax
|
||
categories: MathJax
|
||
mathjax: true
|
||
---
|
||
$$
|
||
i\hbar\frac{\partial}{\partial t}\psi=-\frac{\hbar^2}{2m}\nabla^2\psi+V\psi
|
||
$$
|
||
```
|
||
|
||
## Contribution 贡献
|
||
|
||
欢迎各种形式的贡献，包括但不限于：美化样式、增加功能、改进代码、 修复 Bug 等。
|
||
|
||
更详细说明，请移步 ILS 官网查看：[《ILS 代码贡献指南》](https://ils.xpoet.cn/2020/11/ILS-代码贡献指南/)。
|
||
|
||
## Feedback 反馈
|
||
|
||
在使用该主题过程中，如果遇到问题，请仔细阅读使用文档，或者给作者提 **[Issue](https://github.com/XPoet/hexo-theme-ils/issues)**。
|
||
|
||
## Licence 许可
|
||
|
||
[MIT](https://github.com/XPoet/hexo-theme-ils/blob/master/LICENSE) Copyright (c) 2020 XPoet
|