c45303c3ea | ||
---|---|---|
languages | ||
layout | ||
scripts | ||
source | ||
.editorconfig | ||
.gitignore | ||
LICENSE | ||
README.md | ||
_config.yml | ||
package.json |
README.md
hexo-theme-ils
一款简约漂亮的 Hexo 主题。
A simple and beautiful theme for Hexo.
Online Preview 在线预览
如果你在使用该主题,欢迎 PR 将你的网站链接填写在下方,获得更多展示机会。
- XPoet Blog
- ...
- ...
如你所见,ILS 界面设计十分简洁、清爽,但功能齐全、不失优雅,这正是 ILS 的开发理念。也曾尝试过花里胡哨,发现不仅使用繁琐、而且审美疲劳,背驰了写博客的初衷,记录生活、展示文字,应该才是搭建博客网站的最终追求,为此 ILS 应运而生。简约轻快、突出内容、化繁为简、配置简单、长期维护,如果你也喜欢或认可这些主题特点,一起来探索吧~
关于主题名称 "ILS" 的由来:在主题开发之初,作者想到的几个名字都已被用,词穷了,后来干脆将名字取自 "I Like Simple「我喜欢简单」" 首字母,就是这么简单。
同时,非常欢迎感兴趣的同学 Pull Request 加入到该主题的开发中(成为该项目的贡献者),按你的意愿来打磨 ILS。
Features 功能特性
Completed 已完成
- 恰到好处的留白,简约大气。
- 响应式设计,适配多种终端。
- 日间/夜间模式自由切换。
- 多种代码高亮方案。
- 语言国际化,支持中/英文。
- 内置多款评论插件。
- 支持全站文章搜索。
- 支持文章顶置。
- 代码块一键复制。
- TOC 目录结构。
- RSS 订阅。
- 网站 UV 和 PV 统计。
- 文章阅读次数统计。
- 文章字数统计。
- 文章阅读时长统计。
- 页面滚动进度条提示。
- 一键快速回到顶部。
- 无 jQuery,代码精简。
Unfinished 未完成
- 图片懒加载
- 大图查看器
- 文章版权信息
- 在线更改字体和字号
- 打赏功能
- ......
Get start 快速开始
在开始使用主题之前,强烈建议你先阅读 「Easy Hexo 团队」撰写的 Hexo 教程!
链接:https://easyhexo.com/
Install 安装
-
使用 Git SSH
git clone --depth=1 git@github.com:XPoet/hexo-theme-ils.git themes/ils
该方式获取的是 Master 分支最新代码,包含该主题最新的功能,但无法保证完全稳定。
-
下载 Release 版本
点击此处进入该主题 Releases 版本下载页面 请优先下载最新版本,下载完成后解压到 Hexo 博客目录的 themes 文件夹里面并重命名为
ils
。
Enable 启用
Modify theme
setting in _config.yml
to ils
.
修改 Hexo 根目录下的 _config.yml
配置文件,将 theme
设置为 ils
。
theme: ils
Update 更新
- 使用 Git SSH
cd themes/ils git pull
- 下载 主题最新 Release 版本 。
How to use 如何使用
Configuration 配置
以下是主题配置文件的详细说明,建议多看几遍,并且对照着来修改自己的配置文件,边修改边查看界面效果。
如遇到无法解决的问题,可以给我提 Issues 。
# ---------------------------------------------------------------------------------------
# Theme basic info (please don't change)
# 主题基本信息(请勿改动)
# ---------------------------------------------------------------------------------------
theme_info:
name: ILS
version: 2.1.1
author: XPoet
repository: https://github.com/XPoet/hexo-theme-ils
# ---------------------------------------------------------------------------------------
# Theme style settings
# 主题样式设置
# ---------------------------------------------------------------------------------------
style:
# Theme primary color
# 主颜色,修改为自己喜欢的颜色即可,支持 rgb、十六进制格式。
# 建议使用 Web 安全色,https://www.bootcss.com/p/websafecolors/
primary_color: "#0066CC"
# favicon
# 网站图标,把 "/source/images/" 目录下的 "favicon.png",换成自己的图片即可。
favicon: images/favicon.png
# avatar
# 头像图片,把 "/source/images/" 目录下的 "avatar.png",换成自己的图片即可。
avatar: images/avatar.png
# ---------------------------------------------------------------------------------------
# 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,只能使用其中一款。
# ---------------------------------------------------------------------------------------
comments:
# 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 | flat | mac。
# ---------------------------------------------------------------------------------------
code_copy:
enable: true
style: flat # values: default | flat | mac
# ---------------------------------------------------------------------------------------
# Sidebar tools
# 侧边栏工具(搜索按钮、昼夜模式切换按钮、RSS按钮、TOC显示切换按钮)
# ---------------------------------------------------------------------------------------
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
# ---------------------------------------------------------------------------------------
# Magic
# magic 启用后,主题将以简约的卡片形式显示。
# 可分别配置缩放效果、阴影效果。
# ---------------------------------------------------------------------------------------
magic:
enable: true
scale: false # scale effect when the mouse hover
shadow: false # shadow effect when the mouse hover
Comment 评论
主题内置了 Valine 和 Gitalk 两款评论插件,你只能使用其他一款,如果两款评论插件的 enable 都设为了 true,将使用 Valine。
Valine
前往 https://github.com/xCss/Valine 查看 Valine 如何使用,获取必要的参数,填写在配置文件里。
Gitalk
- 在自己的 GitHub 账号下创建新的 OAuth App,链接:https://github.com/settings/applications/new ,Homepage URL 和 Authorization callback URL 均填写自己的域名即可。
- 在自己的 GitHub 账号下创建新的 repository 并打开 Issues,用于存储评论内容。
- 把自己的 GitHub 用户名称、repository 名称 、OAuth App 的 Client ID 、Client Secret 分别填写在主题配置文件里。
前往 https://github.com/gitalk/gitalk 查看 Gitalk 更多信息。
Post top 文章顶置
实现文章顶置功能,需在 Hexo 博客根目录下安装插件 hexo-generator-index-pin-top
。
npm install hexo-generator-index-pin-top
然后在 _posts
文件夹里的需要顶置的文章页添加 top
属性,top 值越大,顶置文章越靠前,参考如下。
---
title: 千呼万唤始出来,Hexo 主题 ILS 正式发布
date: 2020-04-07 21:55:14
tags: [Hexo]
categories: [Hexo]
top: 9999
---
Local search 本地搜索
-
启用本地搜索功能,需在 Hexo 博客根目录下安装插件
hexo-generator-searchdb
。npm install hexo-generator-searchdb
-
在 Hexo 配置文件
_config.yml
增加如下配置。# Search ## https://github.com/theme-next/hexo-generator-searchdb search: path: search.json field: post content: true format: striptags
-
修改主题配置文件
_config.yml
。local_search: enable: true trigger: auto # values: auto | manual unescape: false preload: true
RSS 订阅
-
启用 RSS 订阅功能,需先在 Hexo 博客根目录下安装插件
hexo-generator-feed
。npm install hexo-generator-feed
-
在 Hexo 配置文件
_config.yml
增加如下配置。# Feed Atom # npm install hexo-generator-feed feed: type: atom path: atom.xml limit: 20
-
修改主题配置文件
_config.yml
。rss: enable: true
Add page 添加页面
Hexo 初始并没有 categories(分类)、about(关于)、links(友链)、tags(标签) 等页面,需要自己手动创建。
以创建「关于」页面为例:
-
在 Hexo 博客目录下执行命令,即可生成
about
文件夹。hexo new page about
-
创建成功后,打开博客目录下
/source/about/index.md
文件,即可填写自己的内容。 支持 Markdown 和 HTML 格式;comments: true
表示该页面开启评论功能。参考如下示例:
--- title: about date: 2020-03-19 14:59:53 comments: true --- ## About me - XPoet「 X 诗人 」... ... ... ...
-
在主题配置文件启用
about
导航菜单。# navigation menu menu: Home: / Archives: /archives # Category: /category # Links: /links About: /about # ...
其他页面的生成方式跟「关于」页面类似,此处不再赘述。
MathJax 数学公式
如果要在文章中显示数学公式,可以使用插件 hexo-filter-mathjax
,详情参考:https://github.com/next-theme/hexo-filter-mathjax/ 。
或按下列步骤完成相关配置:
-
在 Hexo 博客根目录下安装插件
hexo-filter-mathjax
。npm install hexo-filter-mathjax --save
-
在 Hexo 配置文件
_config.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
-
在文章页添加
mathjax: true
,至此,就可以在该页面中写公式了。--- 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 等。
Feedback 反馈
在使用该主题过程中,如果遇到问题,请仔细阅读使用文档,或者给作者提 Issue
。
Licence 许可
MIT Copyright (c) 2020 XPoet