refactor: ils -> keep
This commit is contained in:
parent
324e609079
commit
4752c2c1ce
547
README.md
547
README.md
|
@ -1,533 +1,90 @@
|
|||
# hexo-theme-ils
|
||||
<div align="right">
|
||||
Language:
|
||||
English
|
||||
<a title="Chinese" href="docs/zh-CN/README.md">中文</a>
|
||||
</div>
|
||||
|
||||
[![Github Author](https://img.shields.io/badge/author-XPoet-orange.svg)](https://github.com/XPoet)
|
||||
[![Github Release](https://img.shields.io/github/release/XPoet/hexo-theme-ils.svg)](https://github.com/XPoet/hexo-theme-ils/releases)
|
||||
[![Github License](https://img.shields.io/github/license/XPoet/hexo-theme-ils.svg)](https://github.com/XPoet/hexo-theme-ils/blob/master/LICENSE)
|
||||
[![Hexo Version](https://img.shields.io/badge/hexo-%3E=4.2.0-blue.svg?&logo=hexo&longCache=true)](https://nodejs.org/)
|
||||
[![Node.js Version](https://img.shields.io/badge/node-%3E=12.0-green.svg?logo=Node.js&longCache=true)](https://hexo.io)
|
||||
# Keep
|
||||
|
||||
**一款简约漂亮的 Hexo 主题。**
|
||||
**A simple and beautiful theme for Hexo.**
|
||||
> «Keep» is a simple and elegant [Hexo](https://hexo.io) theme. It makes you more focused on writing.
|
||||
|
||||
![Preview Image](https://user-images.githubusercontent.com/24516169/82140521-ae324080-9861-11ea-809f-ea73d09e24ad.jpg)
|
||||
[![NPM version](https://img.shields.io/npm/v/hexo-theme-keep?color=red&logo=npm&style=flat-square)](https://www.npmjs.com/package/hexo-theme-keep)
|
||||
[![Required Hexo version](https://img.shields.io/badge/hexo-%3E=5.0.0-blue?style=flat-square&logo=hexo)](https://hexo.io)
|
||||
[![License](https://img.shields.io/badge/license-%20MIT-orange?style=flat-square&logo=gnu)](https://github.com/XPoet/hexo-theme-keep/blob/master/LICENSE.md)
|
||||
[![jsDelivr hits](https://img.shields.io/jsdelivr/npm/hm/hexo-theme-keep?style=flat-square&logo=jsdelivr)](https://www.jsdelivr.com/package/npm/hexo-theme-keep)
|
||||
|
||||
<details>
|
||||
## :star2: Live Preview
|
||||
|
||||
<summary>点击展开,查看更多预览图。</summary>
|
||||
**[XPoet's Blog](https://xpoet.cn/)**
|
||||
|
||||
- 样式一:
|
||||
## :rocket: Installation
|
||||
|
||||
![Preview Image](https://user-images.githubusercontent.com/24516169/82140654-e8501200-9862-11ea-8013-935897635d17.png)
|
||||
If you're using Hexo 5.0 or later, the simplest way to install is through npm:
|
||||
|
||||
![Preview Image](https://user-images.githubusercontent.com/24516169/82140673-10d80c00-9863-11ea-9b2e-9fcf575e9aef.png)
|
||||
|
||||
- 样式二:
|
||||
|
||||
![Preview Image](https://user-images.githubusercontent.com/24516169/82140717-5d234c00-9863-11ea-85cc-99d15e6960fe.png)
|
||||
|
||||
![Preview Image](https://user-images.githubusercontent.com/24516169/82140755-9a87d980-9863-11ea-868b-00de092aa64e.png)
|
||||
|
||||
- 样式三:
|
||||
|
||||
![Preview Image](https://user-images.githubusercontent.com/24516169/82919586-cd8b4500-9fa8-11ea-8d14-4510f5500c09.png)
|
||||
|
||||
![Preview Image](https://user-images.githubusercontent.com/24516169/82919636-dc71f780-9fa8-11ea-8d67-84d57cc217f9.png)
|
||||
|
||||
</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
|
||||
```sh
|
||||
$ cd hexo-site
|
||||
$ npm install hexo-theme-keep
|
||||
```
|
||||
|
||||
该方式获取的是 Master 分支最新代码,包含该主题最新的功能,但无法保证完全稳定。
|
||||
Or you can clone the entire repository:
|
||||
|
||||
- 下载 Release 版本
|
||||
```sh
|
||||
$ cd hexo-site
|
||||
$ git clone https://github.com/XPoet/hexo-theme-keep themes/keep
|
||||
```
|
||||
|
||||
[点击此处进入该主题 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` 。
|
||||
After the installation, open Hexo config file and set `theme` variable to `keep`.
|
||||
|
||||
```yml
|
||||
theme: ils
|
||||
theme: keep
|
||||
```
|
||||
|
||||
### Update 更新
|
||||
## :wrench: Configuration
|
||||
|
||||
- 使用 Git SSH
|
||||
```bash
|
||||
cd themes/ils
|
||||
git pull
|
||||
```
|
||||
- 下载 [主题最新 Release 版本](https://github.com/XPoet/hexo-theme-ils/releases) 。
|
||||
Refer to the [Keep theme configuration guide](https://keep.xpoet.cn/2020/10/Keep-主题配置指南/).
|
||||
|
||||
## How to use 如何使用
|
||||
It is not recommended to directly modify any files in the «Keep» theme. Because this may cause errors (e.g. merge conflicts), and the modified files may be discarded when upgrading the theme.
|
||||
|
||||
### Configuration 配置
|
||||
However, you can bypass merge conflicts (error message like **«Commit your changes or stash them before you can merge»**) by using the `Commit`, `Stash` or `Reset` commands for local changes. See [here](https://stackoverflow.com/a/15745424/5861495) how to do it.
|
||||
|
||||
以下是主题配置文件的详细说明,建议多看几遍,并且对照着来修改自己的配置文件,边修改边查看界面效果。
|
||||
## :dart: Update
|
||||
|
||||
关于主题配置文件 `_config.yml` 更详细的教程,请移步 ILS 官网查看:[《ILS 主题配置文件图文教程》](https://ils.xpoet.cn/2020/10/ILS-主题配置文件图文教程/) 。
|
||||
«Keep» releases new versions from time to time. You can update Keep by the following command.
|
||||
|
||||
```yml
|
||||
# ---------------------------------------------------------------------------------------
|
||||
# Your basic info
|
||||
# 你的基本信息,请正确填写,将显示在主题中。
|
||||
# ---------------------------------------------------------------------------------------
|
||||
base_info:
|
||||
title: ILS
|
||||
author: XPoet
|
||||
url: https://ils.xpoet.cn/
|
||||
description: Welcome to use ILS theme
|
||||
Install the latest version throuth npm:
|
||||
|
||||
# ---------------------------------------------------------------------------------------
|
||||
# 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 # 设置建站起始年份
|
||||
```sh
|
||||
$ cd hexo-site
|
||||
$ npm update hexo-theme-keep
|
||||
```
|
||||
|
||||
### Comment 评论
|
||||
Or update to latest master branch:
|
||||
|
||||
主题内置了 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
|
||||
---
|
||||
```sh
|
||||
$ cd themes/keep
|
||||
$ git pull
|
||||
```
|
||||
|
||||
### Local search 本地搜索
|
||||
## :art: Contributing
|
||||
|
||||
1. 启用本地搜索功能,需在 Hexo 博客根目录下安装插件 **`hexo-generator-searchdb`**。
|
||||
We welcome you to join the development of «Keep». Please see [contributing guide](https://keep.xpoet.cn/2020/11/Keep-代码贡献指南/). 🤗
|
||||
|
||||
```bash
|
||||
npm install hexo-generator-searchdb
|
||||
```
|
||||
## :clapper: Contributors
|
||||
|
||||
2. 在 Hexo 配置文件 `_config.yml` 增加如下配置。
|
||||
This project exists thanks to all the people who contribute.
|
||||
|
||||
```yml
|
||||
# Search
|
||||
## https://github.com/theme-next/hexo-generator-searchdb
|
||||
search:
|
||||
path: search.json
|
||||
field: post
|
||||
content: true
|
||||
format: striptags
|
||||
```
|
||||
<a href="https://github.com/XPoet/hexo-theme-keep/graphs/contributors">
|
||||
<img src="https://opencollective.com/hexo-theme-keep/contributors.svg?width=980">
|
||||
</a>
|
||||
|
||||
3. 修改主题配置文件 `_config.yml`。
|
||||
## :sparkling_heart: Thanks
|
||||
|
||||
```yml
|
||||
local_search:
|
||||
enable: true
|
||||
trigger: auto
|
||||
unescape: false
|
||||
preload: true
|
||||
```
|
||||
«Keep» send special thanks to these great services that sponsor our core infrastructure:
|
||||
|
||||
### RSS 订阅
|
||||
<a href="https://github.com"><img height="40" src="https://github.githubassets.com/images/modules/logos_page/GitHub-Logo.png"></a>
|
||||
|
||||
1. 启用 RSS 订阅功能,需先在 Hexo 博客根目录下安装插件 **`hexo-generator-feed`**。
|
||||
> GitHub allows us to host the Git repository and run the test suite.
|
||||
|
||||
```bash
|
||||
npm install hexo-generator-feed
|
||||
```
|
||||
<a href="https://www.jsdelivr.com"><img height="40" src="https://raw.githubusercontent.com/jsdelivr/jsdelivr-media/master/default/svg/jsdelivr-logo-horizontal.svg"></a>
|
||||
|
||||
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
|
||||
> Thanks jsDelivr for providing public CDN service.
|
||||
|
|
11
_config.yml
11
_config.yml
|
@ -2,10 +2,10 @@
|
|||
# Your basic info
|
||||
# ---------------------------------------------------------------------------------------
|
||||
base_info:
|
||||
title: ILS
|
||||
author: XPoet
|
||||
url: https://ils.xpoet.cn/
|
||||
description: Welcome to use ILS theme
|
||||
title: Keep
|
||||
author: Keep team
|
||||
url: https://keep.xpoet.cn/
|
||||
|
||||
|
||||
# ---------------------------------------------------------------------------------------
|
||||
# Theme style settings
|
||||
|
@ -15,7 +15,7 @@ style:
|
|||
primary_color: '#0066CC'
|
||||
|
||||
# Image align position, value: left | center
|
||||
img_position: center
|
||||
img_position: left
|
||||
|
||||
# Left side width
|
||||
left_side_width: 260px
|
||||
|
@ -28,6 +28,7 @@ style:
|
|||
# First screen
|
||||
first_screen:
|
||||
enable: true
|
||||
description: Welcome to use Hexo theme Keep
|
||||
|
||||
|
||||
# ---------------------------------------------------------------------------------------
|
||||
|
|
|
@ -0,0 +1,91 @@
|
|||
<div align="right">
|
||||
语言:
|
||||
中文
|
||||
<a title="Chinese" href="../../README.md">English</a>
|
||||
</div>
|
||||
|
||||
# Keep
|
||||
|
||||
> «Keep» 是一款简约优雅的 [Hexo](https://hexo.io) 主题。它能让你专注于写作。
|
||||
|
||||
[![NPM version](https://img.shields.io/npm/v/hexo-theme-keep?color=red&logo=npm&style=flat-square)](https://www.npmjs.com/package/hexo-theme-keep)
|
||||
[![Required Hexo version](https://img.shields.io/badge/hexo-%3E=5.0.0-blue?style=flat-square&logo=hexo)](https://hexo.io)
|
||||
[![License](https://img.shields.io/badge/license-%20MIT-orange?style=flat-square&logo=gnu)](https://github.com/XPoet/hexo-theme-keep/blob/master/LICENSE.md)
|
||||
[![jsDelivr hits](https://img.shields.io/jsdelivr/npm/hm/hexo-theme-keep?style=flat-square&logo=jsdelivr)](https://www.jsdelivr.com/package/npm/hexo-theme-keep)
|
||||
|
||||
## :star2: 在线预览
|
||||
|
||||
**[XPoet's Blog](https://xpoet.cn/)**
|
||||
|
||||
|
||||
## :rocket: 安装
|
||||
|
||||
如果你在使用 Hexo 5.0 或更新版本,最简单的安装方式是通过 npm:
|
||||
|
||||
```sh
|
||||
$ cd hexo-site
|
||||
$ npm install hexo-theme-keep
|
||||
```
|
||||
|
||||
你也可以直接克隆整个仓库:
|
||||
|
||||
```sh
|
||||
$ cd hexo-site
|
||||
$ git clone https://github.com/XPoet/hexo-theme-keep themes/keep
|
||||
```
|
||||
|
||||
安装完成后,在 Hexo 配置文件中将 `theme` 设置为 `next`。
|
||||
|
||||
```yml
|
||||
theme: keep
|
||||
```
|
||||
|
||||
## :wrench: 配置
|
||||
|
||||
参考 [Keep 主题配置指南](https://keep.xpoet.cn/2020/10/Keep-主题配置指南/)。
|
||||
|
||||
不推荐直接修改 «Keep» 主题的文件。因为这可能导致错误(例如 git merge 冲突),并且在升级主题时修改的文件可能丢失。
|
||||
|
||||
然而你也可以通过提交(`Commit`)、贮藏(`Stash`)或忽视(`Discard`)本地更改以绕过这种更新错误(例如 **«Commit your changes or stash them before you can merge»**)。具体方法请参考[这里](https://stackoverflow.com/a/15745424/5861495)。
|
||||
|
||||
## :dart: 更新
|
||||
|
||||
«Keep» 不定期发布新版本。你可以通过如下命令更新 «Keep»。
|
||||
|
||||
通过 npm 安装最新版本:
|
||||
|
||||
```sh
|
||||
$ cd hexo-site
|
||||
$ npm update hexo-theme-keep
|
||||
```
|
||||
|
||||
或者通过 git 更新到最新的 master 分支:
|
||||
|
||||
```sh
|
||||
$ cd themes/keep
|
||||
$ git pull
|
||||
```
|
||||
|
||||
## :art: 贡献
|
||||
|
||||
我们欢迎你加入 «Keep» 的开发,贡献出你的一份力量。请看[开源贡献指南](https://keep.xpoet.cn/2020/11/Keep-代码贡献指南/)。
|
||||
|
||||
## :clapper: 贡献者
|
||||
|
||||
这个项目的存在多亏了所有的贡献者。
|
||||
|
||||
<a href="https://github.com/XPoet/hexo-theme-keep/graphs/contributors">
|
||||
<img src="https://opencollective.com/hexo-theme-keep/contributors.svg?width=980">
|
||||
</a>
|
||||
|
||||
## :sparkling_heart: 鸣谢
|
||||
|
||||
«Keep» 特别感谢这些支持我们核心基础设施的优质服务:
|
||||
|
||||
<a href="https://github.com"><img height="40" src="https://github.githubassets.com/images/modules/logos_page/GitHub-Logo.png"></a>
|
||||
|
||||
> GitHub 容许我们托管 Git 仓库及运行测试。
|
||||
|
||||
<a href="https://www.jsdelivr.com"><img height="40" src="https://raw.githubusercontent.com/jsdelivr/jsdelivr-media/master/default/svg/jsdelivr-logo-horizontal.svg"></a>
|
||||
|
||||
> jsDelivr 提供了 CDN 服务。
|
|
@ -1,7 +1,7 @@
|
|||
<div class="first-screen-container flex-center">
|
||||
<div class="content flex-center">
|
||||
<div class="description">
|
||||
<%= theme.base_info.description || config.description %>
|
||||
<%= theme.style.first_screen.description || config.description %>
|
||||
</div>
|
||||
<% if (theme.social_contact.enable) { %>
|
||||
<ul class="social-icon-list">
|
||||
|
|
|
@ -20,7 +20,7 @@
|
|||
<title>
|
||||
<% if (title){ %><%= title %> |
|
||||
<% } %>
|
||||
<%= theme.base_info.title || config.title || 'ILS' %>
|
||||
<%= theme.base_info.title || config.title || 'KEEP' %>
|
||||
</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||
<%- favicon_tag('images/favicon.png') %>
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
<div class="header-content<%- (theme.style.first_screen.enable && is_home()) ? ' first-screen' : '' %>"
|
||||
>
|
||||
<a class="logo-title" href="/">
|
||||
<%= theme.base_info.title || config.title || 'ILS' %>
|
||||
<%= theme.base_info.title || config.title || 'KEEP' %>
|
||||
</a>
|
||||
|
||||
<ul class="menu-list">
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
<div class="fade-in-down-animation">
|
||||
<div class="category-container">
|
||||
<div class="category-name">
|
||||
<i class="fa fa-folder"></i> <%- __('category') %>:<%= page.category %> [<%= page.posts.length %>]
|
||||
<i class="fa fa-folder"></i> <%= page.category %> (<%= page.posts.length %>)
|
||||
</div>
|
||||
<div class="category-post-list">
|
||||
<%- partial('_partial/archive-list', {posts_new: page.posts}) %>
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
<div class="fade-in-down-animation">
|
||||
<div class="tag-container">
|
||||
<div class="tag-name"><i class="fa fa-tag"></i> <%- __('tag') %>:<%= page.tag %> [<%= page.posts.length %>]
|
||||
<div class="tag-name"><i class="fa fa-tag"></i> <%= page.tag %> (<%= page.posts.length %>)
|
||||
</div>
|
||||
<div class="tag--post-list">
|
||||
<%- partial('_partial/archive-list', {posts_new: page.posts}) %>
|
||||
|
|
20
package.json
20
package.json
|
@ -1,24 +1,24 @@
|
|||
{
|
||||
"name": "hexo-theme-ils",
|
||||
"version": "2.1.3",
|
||||
"description": "A simple and beautiful theme for Hexo.",
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"name": "hexo-theme-keep",
|
||||
"version": "3.0.0",
|
||||
"private": false,
|
||||
"description": "A simple and elegant theme for Hexo.",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+ssh://git@github.com/XPoet/hexo-theme-ils.git"
|
||||
"url": "git+ssh://git@github.com/XPoet/hexo-theme-keep.git"
|
||||
},
|
||||
"keywords": [
|
||||
"hexo",
|
||||
"theme",
|
||||
"simple-theme",
|
||||
"beautiful-theme"
|
||||
"elegant-theme",
|
||||
"beautiful-theme",
|
||||
"powerful-theme"
|
||||
],
|
||||
"author": "XPoet",
|
||||
"license": "MIT",
|
||||
"bugs": {
|
||||
"url": "https://github.com/XPoet/hexo-theme-ils/issues"
|
||||
"url": "https://github.com/XPoet/hexo-theme-keep/issues"
|
||||
},
|
||||
"homepage": "https://github.com/XPoet/hexo-theme-ils#readme"
|
||||
"homepage": "https://github.com/XPoet/hexo-theme-keep#readme"
|
||||
}
|
||||
|
|
|
@ -23,7 +23,7 @@ hexo.extend.helper.register('export_config', function () {
|
|||
exportConfig.path = config.search.path;
|
||||
}
|
||||
return `<script id="hexo-configurations">
|
||||
let ILS = window.ILS || {};
|
||||
let KEEP = window.KEEP || {};
|
||||
let CONFIG = ${JSON.stringify(exportConfig)};
|
||||
</script>`;
|
||||
});
|
||||
|
|
|
@ -20,7 +20,7 @@ $article-date-font-size = 1em;
|
|||
.archive-year {
|
||||
font-size: $archive-year-font-size;
|
||||
|
||||
+ils-tablet() {
|
||||
+keep-tablet() {
|
||||
font-size: $archive-year-font-size - 0.2em;
|
||||
}
|
||||
|
||||
|
@ -32,7 +32,7 @@ $article-date-font-size = 1em;
|
|||
.archive-year-post-count {
|
||||
font-size: $archive-year-count-font-size;
|
||||
|
||||
+ils-tablet() {
|
||||
+keep-tablet() {
|
||||
font-size: $archive-year-count-font-size - 0.1em;
|
||||
}
|
||||
|
||||
|
@ -47,18 +47,18 @@ $article-date-font-size = 1em;
|
|||
|
||||
padding-left: 10px;
|
||||
|
||||
+ils-tablet() {
|
||||
+keep-tablet() {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.article-item {
|
||||
margin-top: 18px;
|
||||
|
||||
+ils-tablet() {
|
||||
+keep-tablet() {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
+ils-mobile() {
|
||||
+keep-mobile() {
|
||||
margin-top: 14px;
|
||||
}
|
||||
|
||||
|
|
|
@ -32,14 +32,14 @@
|
|||
|
||||
|
||||
.article-wordcount, .article-tags {
|
||||
+ils-mobile() {
|
||||
+keep-mobile() {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.article-min2read, .article-categories {
|
||||
|
||||
+ils-tablet() {
|
||||
+keep-tablet() {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
|
||||
.empty-page-container {
|
||||
|
||||
ils-container(1.005, 1.01, 30px, true);
|
||||
keep-container(1.005, 1.01, 30px, true);
|
||||
|
||||
.empty-page-content {
|
||||
|
||||
|
|
|
@ -28,11 +28,11 @@ $header-progress-height = 2.8px;
|
|||
|
||||
transition();
|
||||
|
||||
+ils-tablet() {
|
||||
+keep-tablet() {
|
||||
width: $main-content-width-tablet !important;
|
||||
}
|
||||
|
||||
+ils-mobile() {
|
||||
+keep-mobile() {
|
||||
width: $main-content-width-mobile !important;
|
||||
}
|
||||
|
||||
|
@ -44,11 +44,11 @@ $header-progress-height = 2.8px;
|
|||
font-size: 2.2em;
|
||||
font-weight: bold;
|
||||
|
||||
+ils-tablet() {
|
||||
+keep-tablet() {
|
||||
font-size: 2.0em;
|
||||
}
|
||||
|
||||
+ils-mobile() {
|
||||
+keep-mobile() {
|
||||
font-size: 1.8em;
|
||||
}
|
||||
|
||||
|
@ -60,7 +60,7 @@ $header-progress-height = 2.8px;
|
|||
|
||||
.menu-list {
|
||||
|
||||
+ils-tablet() {
|
||||
+keep-tablet() {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
@ -122,7 +122,7 @@ $header-progress-height = 2.8px;
|
|||
position: relative;
|
||||
cursor: pointer;
|
||||
|
||||
+ils-tablet() {
|
||||
+keep-tablet() {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
|
|
@ -24,11 +24,11 @@ $icon-size = 1.2em;
|
|||
top: 10%;
|
||||
width: 70%;
|
||||
|
||||
+ils-tablet() {
|
||||
+keep-tablet() {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
+ils-mobile() {
|
||||
+keep-mobile() {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
|
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
.tagcloud-container {
|
||||
|
||||
ils-container(1.005, 1.01, 30px, true);
|
||||
keep-container(1.005, 1.01, 30px, true);
|
||||
|
||||
.tagcloud-content {
|
||||
|
||||
|
|
|
@ -34,7 +34,7 @@ $li-margin-bottom = 12px;
|
|||
&.page-aside-toggle {
|
||||
display: none;
|
||||
|
||||
+ils-tablet() {
|
||||
+keep-tablet() {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -2,7 +2,7 @@
|
|||
@require "./common/magic-theme.styl";
|
||||
|
||||
.archive-container {
|
||||
ils-container(1.005, 1.01, 30px, true);
|
||||
keep-container(1.005, 1.01, 30px, true);
|
||||
}
|
||||
|
||||
|
||||
|
|
|
@ -7,18 +7,18 @@ $post-nav-max-width = 220px;
|
|||
|
||||
.article-content-container {
|
||||
|
||||
ils-container(1.008, 1.002, 30px, true);
|
||||
keep-container(1.008, 1.002, 30px, true);
|
||||
|
||||
.article-title {
|
||||
color: var(--second-text-color);
|
||||
font-weight: 600;
|
||||
font-size: 1.8em;
|
||||
|
||||
+ils-tablet() {
|
||||
+keep-tablet() {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
+ils-mobile() {
|
||||
+keep-mobile() {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
}
|
||||
|
@ -84,7 +84,7 @@ $post-nav-max-width = 220px;
|
|||
|
||||
.article-header, .article-header-meta-info {
|
||||
margin-top: 16px;
|
||||
+ils-tablet() {
|
||||
+keep-tablet() {
|
||||
transform: scale(0.88);
|
||||
transform-origin: left top;
|
||||
}
|
||||
|
@ -112,7 +112,7 @@ $post-nav-max-width = 220px;
|
|||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
|
||||
ils-container(1.08, 1.08, 10px, false);
|
||||
keep-container(1.08, 1.08, 10px, false);
|
||||
|
||||
a {
|
||||
position: relative;
|
||||
|
@ -163,7 +163,7 @@ $post-nav-max-width = 220px;
|
|||
.post-nav-item {
|
||||
display: none;
|
||||
|
||||
+ils-tablet() {
|
||||
+keep-tablet() {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
|
@ -176,7 +176,7 @@ $post-nav-max-width = 220px;
|
|||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
||||
+ils-tablet() {
|
||||
+keep-tablet() {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -2,17 +2,17 @@
|
|||
|
||||
.category-container {
|
||||
|
||||
ils-container(1.02, 1.02, 30px, true);
|
||||
keep-container(1.02, 1.02, 30px, true);
|
||||
|
||||
.category-name {
|
||||
color: var(--second-text-color);
|
||||
font-size: 1.6em;
|
||||
|
||||
+ils-tablet() {
|
||||
+keep-tablet() {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
+ils-mobile() {
|
||||
+keep-mobile() {
|
||||
font-size: 1.4em;
|
||||
}
|
||||
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
|
||||
.category-list-container {
|
||||
|
||||
ils-container(1.005, 1.01, 30px, true);
|
||||
keep-container(1.005, 1.01, 30px, true);
|
||||
|
||||
.category-list-content {
|
||||
|
||||
|
|
|
@ -35,12 +35,12 @@ html, body {
|
|||
font-size: $default-font-size;
|
||||
line-height: $default-font-line-height;
|
||||
|
||||
+ils-tablet() {
|
||||
+keep-tablet() {
|
||||
font-size: $default-font-size * 0.96;
|
||||
line-height: $default-font-line-height * 0.96;
|
||||
}
|
||||
|
||||
+ils-mobile() {
|
||||
+keep-mobile() {
|
||||
font-size: $default-font-size * 0.9;
|
||||
line-height: $default-font-line-height * 0.9;
|
||||
}
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
@require "animated.styl"
|
||||
|
||||
$ils-container-margin-bottom = 30px;
|
||||
$ils-container-border-radius = 5px;
|
||||
$keep-container-margin-bottom = 30px;
|
||||
$keep-container-border-radius = 5px;
|
||||
|
||||
hover-style(scaleX, scaleY) {
|
||||
|
||||
|
@ -22,37 +22,37 @@ hover-style(scaleX, scaleY) {
|
|||
}
|
||||
|
||||
|
||||
ils-container(scaleX, scaleY, padding, isMarginBottom) {
|
||||
keep-container(scaleX, scaleY, padding, isMarginBottom) {
|
||||
background: var(--background-color);
|
||||
padding: padding;
|
||||
border-radius: $ils-container-border-radius;
|
||||
border-radius: $keep-container-border-radius;
|
||||
box-sizing: border-box;
|
||||
|
||||
if (isMarginBottom) {
|
||||
margin-bottom: $ils-container-margin-bottom;
|
||||
margin-bottom: $keep-container-margin-bottom;
|
||||
|
||||
+ils-tablet() {
|
||||
margin-bottom: $ils-container-margin-bottom * 0.8;
|
||||
+keep-tablet() {
|
||||
margin-bottom: $keep-container-margin-bottom * 0.8;
|
||||
}
|
||||
|
||||
+ils-mobile() {
|
||||
margin-bottom: $ils-container-margin-bottom * 0.6;
|
||||
+keep-mobile() {
|
||||
margin-bottom: $keep-container-margin-bottom * 0.6;
|
||||
}
|
||||
}
|
||||
|
||||
hover-style(scaleX, scaleY);
|
||||
|
||||
+ils-tablet() {
|
||||
+keep-tablet() {
|
||||
padding: padding * 0.8;
|
||||
border-radius: $ils-container-border-radius * 0.8;
|
||||
//margin-bottom: $ils-container-margin-bottom * 0.8;
|
||||
border-radius: $keep-container-border-radius * 0.8;
|
||||
//margin-bottom: $keep-container-margin-bottom * 0.8;
|
||||
hover-style(scaleX * 0.8, scaleY * 0.8);
|
||||
}
|
||||
|
||||
+ils-mobile() {
|
||||
+keep-mobile() {
|
||||
padding: padding * 0.6;
|
||||
border-radius: $ils-container-border-radius * 0.6;
|
||||
//margin-bottom: $ils-container-margin-bottom * 0.6;
|
||||
border-radius: $keep-container-border-radius * 0.6;
|
||||
//margin-bottom: $keep-container-margin-bottom * 0.6;
|
||||
hover-style(scaleX * 0.6, scaleY * 0.6);
|
||||
}
|
||||
|
||||
|
|
|
@ -103,7 +103,7 @@
|
|||
font-weight: 600;
|
||||
line-height: 1.2em;
|
||||
|
||||
+ils-tablet() {
|
||||
+keep-tablet() {
|
||||
font-size: 1.7em;
|
||||
line-height: 1.1em;
|
||||
}
|
||||
|
@ -115,7 +115,7 @@
|
|||
font-weight: 600;
|
||||
line-height: 1.2em;
|
||||
|
||||
+ils-tablet() {
|
||||
+keep-tablet() {
|
||||
font-size: 1.6em;
|
||||
line-height: 1.1em;
|
||||
}
|
||||
|
@ -126,7 +126,7 @@
|
|||
font-weight: 550;
|
||||
line-height: 1.16em;
|
||||
|
||||
+ils-tablet() {
|
||||
+keep-tablet() {
|
||||
font-size: 1.5em;
|
||||
line-height: 1.06em;
|
||||
}
|
||||
|
@ -138,7 +138,7 @@
|
|||
font-weight: 550;
|
||||
line-height: 1.16em;
|
||||
|
||||
+ils-tablet() {
|
||||
+keep-tablet() {
|
||||
font-size: 1.4em;
|
||||
line-height: 1.06em;
|
||||
}
|
||||
|
@ -149,7 +149,7 @@
|
|||
font-weight: 500;
|
||||
line-height: 1.12em;
|
||||
|
||||
+ils-tablet() {
|
||||
+keep-tablet() {
|
||||
font-size: 1.18em;
|
||||
line-height: 1.02em;
|
||||
}
|
||||
|
@ -160,7 +160,7 @@
|
|||
font-weight: 500;
|
||||
line-height: 1.12em;
|
||||
|
||||
+ils-tablet() {
|
||||
+keep-tablet() {
|
||||
font-size: 1.1em;
|
||||
line-height: 1.02em;
|
||||
}
|
||||
|
@ -168,17 +168,16 @@
|
|||
|
||||
|
||||
img {
|
||||
box-sizing: initial;
|
||||
padding: 2px;
|
||||
box-sizing: border-box;
|
||||
max-width: 100%;
|
||||
border: 1px solid var(--border-color);
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
box-shadow: 0 0 2px var(--shadow-color);
|
||||
|
||||
if (hexo-config('style.img_position') == 'center') {
|
||||
margin: 2px auto;
|
||||
margin: 10px auto 2px;
|
||||
} else {
|
||||
margin: 2px 0;
|
||||
margin: 10px 0 2px;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
@ -20,11 +20,11 @@ $component-interspace = 30px; // 组件/模块的间隔值(P
|
|||
$media-max-width = 780px; // 媒体查询最大宽度 (平板)
|
||||
$media-max-width-mobile = 500px; // 媒体查询最大宽度(手机)
|
||||
|
||||
ils-tablet()
|
||||
keep-tablet()
|
||||
@media (max-width: $media-max-width)
|
||||
{block}
|
||||
|
||||
ils-mobile()
|
||||
keep-mobile()
|
||||
@media (max-width: $media-max-width-mobile)
|
||||
{block}
|
||||
|
||||
|
@ -57,7 +57,7 @@ $second-background-color = darken($background-color, 3%);
|
|||
$default-text-color = #505050;
|
||||
$first-text-color = darken($default-text-color, 10%);
|
||||
$second-text-color = darken($default-text-color, 5%);
|
||||
$third-text-color = lighten($default-text-color, 40%);
|
||||
$third-text-color = lighten($default-text-color, 30%);
|
||||
$fourth-text-color = lighten($default-text-color, 90%);
|
||||
$border-color = darken($background-color, 30%);
|
||||
$selection-color = lighten($primary-color, 10%);
|
||||
|
|
|
@ -8,7 +8,7 @@
|
|||
.home-article-item {
|
||||
position: relative;
|
||||
|
||||
ils-container(1.02, 1.02, 28px, true);
|
||||
keep-container(1.02, 1.02, 28px, true);
|
||||
|
||||
.top-icon {
|
||||
position: absolute;
|
||||
|
@ -18,7 +18,7 @@
|
|||
transform: rotate(45deg);
|
||||
color: var(--third-text-color);
|
||||
|
||||
+ils-tablet() {
|
||||
+keep-tablet() {
|
||||
font-size: 1.16em;
|
||||
}
|
||||
}
|
||||
|
@ -31,12 +31,12 @@
|
|||
font-size: 1.5em;
|
||||
line-height: 1.5em;
|
||||
|
||||
+ils-tablet() {
|
||||
+keep-tablet() {
|
||||
font-size: 1.3em;
|
||||
}
|
||||
|
||||
|
||||
+ils-mobile() {
|
||||
+keep-mobile() {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
|
@ -76,13 +76,13 @@
|
|||
}
|
||||
|
||||
.home-article-category {
|
||||
+ils-mobile() {
|
||||
+keep-mobile() {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.home-article-tag {
|
||||
+ils-tablet() {
|
||||
+keep-tablet() {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -12,7 +12,7 @@ $page-aside-width = $temp-width ? convert($temp-width):260px;
|
|||
position: relative;
|
||||
padding-top: $header-progress-height;
|
||||
|
||||
+ils-tablet() {
|
||||
+keep-tablet() {
|
||||
padding-left: 0 !important;
|
||||
}
|
||||
|
||||
|
@ -37,11 +37,11 @@ $page-aside-width = $temp-width ? convert($temp-width):260px;
|
|||
padding-top: $header-height;
|
||||
position: relative;
|
||||
|
||||
+ils-tablet() {
|
||||
+keep-tablet() {
|
||||
padding-top: $header-height - 8px;
|
||||
}
|
||||
|
||||
+ils-mobile() {
|
||||
+keep-mobile() {
|
||||
padding-top: $header-height - 16px;
|
||||
}
|
||||
|
||||
|
@ -52,12 +52,12 @@ $page-aside-width = $temp-width ? convert($temp-width):260px;
|
|||
width: 100%;
|
||||
height: $header-height;
|
||||
|
||||
+ils-tablet() {
|
||||
+keep-tablet() {
|
||||
height: $header-height - 8px;
|
||||
padding-left: 0 !important;
|
||||
}
|
||||
|
||||
+ils-mobile() {
|
||||
+keep-mobile() {
|
||||
height: $header-height - 16px;
|
||||
}
|
||||
|
||||
|
@ -73,22 +73,22 @@ $page-aside-width = $temp-width ? convert($temp-width):260px;
|
|||
justify-content: center;
|
||||
padding: $component-interspace 0;
|
||||
|
||||
+ils-tablet() {
|
||||
+keep-tablet() {
|
||||
padding: $component-interspace * 0.8 0;
|
||||
}
|
||||
|
||||
+ils-mobile() {
|
||||
+keep-mobile() {
|
||||
padding: $component-interspace * 0.6 0;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
width: $main-content-width;
|
||||
|
||||
+ils-tablet() {
|
||||
+keep-tablet() {
|
||||
width: $main-content-width-tablet !important;
|
||||
}
|
||||
|
||||
+ils-mobile() {
|
||||
+keep-mobile() {
|
||||
width: $main-content-width-mobile !important;
|
||||
}
|
||||
|
||||
|
@ -129,9 +129,9 @@ $page-aside-width = $temp-width ? convert($temp-width):260px;
|
|||
overflow-y: auto;
|
||||
border-radius: 0 !important;
|
||||
|
||||
ils-container(1.02, 1.02, 18px, false);
|
||||
keep-container(1.02, 1.02, 18px, false);
|
||||
|
||||
+ils-tablet() {
|
||||
+keep-tablet() {
|
||||
left: 0 !important;
|
||||
display: none !important;
|
||||
}
|
||||
|
@ -146,13 +146,13 @@ $page-aside-width = $temp-width ? convert($temp-width):260px;
|
|||
right: $component-interspace;
|
||||
transition();
|
||||
|
||||
+ils-tablet() {
|
||||
+keep-tablet() {
|
||||
right: 10px;
|
||||
transform: scale(0.82);
|
||||
transform-origin: right top;
|
||||
}
|
||||
|
||||
+ils-mobile() {
|
||||
+keep-mobile() {
|
||||
right: 5px;
|
||||
transform: scale(0.72);
|
||||
transform-origin: right top;
|
||||
|
@ -167,14 +167,14 @@ $page-aside-width = $temp-width ? convert($temp-width):260px;
|
|||
width: $circle-button-width;
|
||||
height: $circle-button-width;
|
||||
|
||||
+ils-tablet() {
|
||||
+keep-tablet() {
|
||||
right: 10px;
|
||||
transform: scale(0.82);
|
||||
transform-origin: right bottom;
|
||||
|
||||
}
|
||||
|
||||
+ils-mobile() {
|
||||
+keep-mobile() {
|
||||
right: 5px;
|
||||
transform: scale(0.72);
|
||||
transform-origin: right bottom;
|
||||
|
|
|
@ -3,17 +3,17 @@
|
|||
|
||||
.tag-container {
|
||||
|
||||
ils-container(1.02, 1.02, 30px, true);
|
||||
keep-container(1.02, 1.02, 30px, true);
|
||||
|
||||
.tag-name {
|
||||
color: var(--second-text-color);
|
||||
font-size: 1.6em;
|
||||
|
||||
+ils-tablet() {
|
||||
+keep-tablet() {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
+ils-mobile() {
|
||||
+keep-mobile() {
|
||||
font-size: 1.4em;
|
||||
}
|
||||
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
window.addEventListener('DOMContentLoaded', () => {
|
||||
ILS.utils = {
|
||||
KEEP.utils = {
|
||||
|
||||
...ILS.utils,
|
||||
...KEEP.utils,
|
||||
|
||||
back2TopButton_dom: document.querySelector('.scroll-to-top'),
|
||||
back2BottomButton_dom: document.querySelector('.scroll-to-bottom'),
|
||||
|
@ -35,22 +35,22 @@ window.addEventListener('DOMContentLoaded', () => {
|
|||
},
|
||||
|
||||
initBack2TopButton() {
|
||||
if (ILS.utils.back2TopButton_dom) {
|
||||
ILS.utils.back2TopButton_dom.addEventListener('click', () => {
|
||||
if (KEEP.utils.back2TopButton_dom) {
|
||||
KEEP.utils.back2TopButton_dom.addEventListener('click', () => {
|
||||
this.back2top();
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
initBack2BottomButton() {
|
||||
if (ILS.utils.back2BottomButton_dom) {
|
||||
ILS.utils.back2BottomButton_dom.addEventListener('click', () => {
|
||||
if (KEEP.utils.back2BottomButton_dom) {
|
||||
KEEP.utils.back2BottomButton_dom.addEventListener('click', () => {
|
||||
this.back2Bottom();
|
||||
});
|
||||
}
|
||||
},
|
||||
}
|
||||
|
||||
ILS.utils.initBack2TopButton();
|
||||
ILS.utils.initBack2BottomButton();
|
||||
KEEP.utils.initBack2TopButton();
|
||||
KEEP.utils.initBack2BottomButton();
|
||||
});
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
window.addEventListener('DOMContentLoaded', () => {
|
||||
ILS.utils.modeToggle = {
|
||||
KEEP.utils.modeToggle = {
|
||||
|
||||
localStorageKey: 'MAGIC',
|
||||
modeToggleButton_dom: document.querySelector('.mode-toggle'),
|
||||
|
@ -66,6 +66,6 @@ window.addEventListener('DOMContentLoaded', () => {
|
|||
}
|
||||
}
|
||||
|
||||
ILS.utils.modeToggle.initModeStatus();
|
||||
ILS.utils.modeToggle.initModeToggleButton();
|
||||
KEEP.utils.modeToggle.initModeStatus();
|
||||
KEEP.utils.modeToggle.initModeToggleButton();
|
||||
});
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
window.addEventListener('DOMContentLoaded', () => {
|
||||
ILS.utils.headerShrink = {
|
||||
KEEP.utils.headerShrink = {
|
||||
|
||||
pageTemplateDom: document.querySelector('.page-main-content'),
|
||||
sidebarToolsDom: document.querySelector('.sidebar-tools'),
|
||||
|
@ -47,7 +47,7 @@ window.addEventListener('DOMContentLoaded', () => {
|
|||
});
|
||||
},
|
||||
}
|
||||
ILS.utils.headerShrink.init();
|
||||
ILS.utils.headerShrink.initMenuBarButton();
|
||||
ILS.utils.headerShrink.initWindowMask();
|
||||
KEEP.utils.headerShrink.init();
|
||||
KEEP.utils.headerShrink.initMenuBarButton();
|
||||
KEEP.utils.headerShrink.initWindowMask();
|
||||
});
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
window.addEventListener('DOMContentLoaded', () => {
|
||||
|
||||
ILS.utils.leftSideToggle = {
|
||||
KEEP.utils.leftSideToggle = {
|
||||
|
||||
init() {
|
||||
this.toggleBar = document.querySelector('.page-aside-toggle');
|
||||
|
@ -39,7 +39,7 @@ window.addEventListener('DOMContentLoaded', () => {
|
|||
},
|
||||
}
|
||||
|
||||
ILS.utils.leftSideToggle.init();
|
||||
ILS.utils.leftSideToggle.initToggleBarButton();
|
||||
KEEP.utils.leftSideToggle.init();
|
||||
KEEP.utils.leftSideToggle.initToggleBarButton();
|
||||
|
||||
});
|
||||
|
|
|
@ -1,22 +1,22 @@
|
|||
window.addEventListener('DOMContentLoaded', () => {
|
||||
// print theme info
|
||||
ILS.utils.printThemeInfo();
|
||||
KEEP.utils.printThemeInfo();
|
||||
|
||||
// init scroll
|
||||
ILS.utils.registerWindowScroll();
|
||||
KEEP.utils.registerWindowScroll();
|
||||
|
||||
// init tools button
|
||||
ILS.utils.registerToolsButtonClick();
|
||||
KEEP.utils.registerToolsButtonClick();
|
||||
|
||||
// comment
|
||||
ILS.utils.goComment();
|
||||
KEEP.utils.goComment();
|
||||
|
||||
// init page height handle
|
||||
ILS.utils.initPageHeightHandle();
|
||||
KEEP.utils.initPageHeightHandle();
|
||||
|
||||
// init first screen height
|
||||
ILS.utils.initFirstScreenHeight();
|
||||
KEEP.utils.initFirstScreenHeight();
|
||||
|
||||
// big image viewer handle
|
||||
ILS.utils.imageViewer();
|
||||
KEEP.utils.imageViewer();
|
||||
});
|
||||
|
|
|
@ -1,30 +1,30 @@
|
|||
window.addEventListener('DOMContentLoaded', () => {
|
||||
|
||||
ILS.utils.navItems = document.querySelectorAll('.post-toc-wrap .post-toc li');
|
||||
ILS.utils.articleToc_dom = document.querySelector('.article-toc');
|
||||
ILS.utils.postTocWrap_dom = document.querySelector('.post-toc-wrap');
|
||||
KEEP.utils.navItems = document.querySelectorAll('.post-toc-wrap .post-toc li');
|
||||
KEEP.utils.articleToc_dom = document.querySelector('.article-toc');
|
||||
KEEP.utils.postTocWrap_dom = document.querySelector('.post-toc-wrap');
|
||||
|
||||
if (ILS.utils.navItems.length > 0) {
|
||||
if (KEEP.utils.navItems.length > 0) {
|
||||
|
||||
ILS.utils = {
|
||||
KEEP.utils = {
|
||||
|
||||
...ILS.utils,
|
||||
...KEEP.utils,
|
||||
|
||||
findActiveIndexByTOC() {
|
||||
if (!Array.isArray(ILS.utils.sections)) return;
|
||||
let index = ILS.utils.sections.findIndex(element => {
|
||||
if (!Array.isArray(KEEP.utils.sections)) return;
|
||||
let index = KEEP.utils.sections.findIndex(element => {
|
||||
return element && element.getBoundingClientRect().top - 20 > 0;
|
||||
});
|
||||
if (index === -1) {
|
||||
index = ILS.utils.sections.length - 1;
|
||||
index = KEEP.utils.sections.length - 1;
|
||||
} else if (index > 0) {
|
||||
index--;
|
||||
}
|
||||
ILS.utils.activateNavByIndex(index);
|
||||
KEEP.utils.activateNavByIndex(index);
|
||||
},
|
||||
|
||||
registerSidebarTOC() {
|
||||
ILS.utils.sections = [...document.querySelectorAll('.post-toc li a.nav-link')].map(element => {
|
||||
KEEP.utils.sections = [...document.querySelectorAll('.post-toc li a.nav-link')].map(element => {
|
||||
const target = document.getElementById(decodeURI(element.getAttribute('href')).replace('#', ''));
|
||||
element.addEventListener('click', event => {
|
||||
event.preventDefault();
|
||||
|
@ -36,7 +36,7 @@ window.addEventListener('DOMContentLoaded', () => {
|
|||
scrollTop: offset - 10,
|
||||
complete: function () {
|
||||
setTimeout(() => {
|
||||
ILS.utils.pageTop_dom.style.transform = 'translateY(-100%)';
|
||||
KEEP.utils.pageTop_dom.style.transform = 'translateY(-100%)';
|
||||
}, 100)
|
||||
}
|
||||
});
|
||||
|
@ -69,25 +69,25 @@ window.addEventListener('DOMContentLoaded', () => {
|
|||
},
|
||||
|
||||
showPageAsideWhenHasTOC() {
|
||||
ILS.utils.leftSideToggle.toggleBar.style.display = 'flex';
|
||||
ILS.utils.leftSideToggle.isOpenPageAside = true;
|
||||
ILS.utils.leftSideToggle.changePageLayoutWhenOpenToggle(ILS.utils.leftSideToggle.isOpenPageAside);
|
||||
KEEP.utils.leftSideToggle.toggleBar.style.display = 'flex';
|
||||
KEEP.utils.leftSideToggle.isOpenPageAside = true;
|
||||
KEEP.utils.leftSideToggle.changePageLayoutWhenOpenToggle(KEEP.utils.leftSideToggle.isOpenPageAside);
|
||||
}
|
||||
}
|
||||
|
||||
ILS.utils.showPageAsideWhenHasTOC();
|
||||
ILS.utils.registerSidebarTOC();
|
||||
KEEP.utils.showPageAsideWhenHasTOC();
|
||||
KEEP.utils.registerSidebarTOC();
|
||||
|
||||
|
||||
} else {
|
||||
|
||||
if (ILS.utils.postTocWrap_dom) {
|
||||
ILS.utils.postTocWrap_dom.innerHTML = '';
|
||||
ILS.utils.postTocWrap_dom.style.display = 'none';
|
||||
if (KEEP.utils.postTocWrap_dom) {
|
||||
KEEP.utils.postTocWrap_dom.innerHTML = '';
|
||||
KEEP.utils.postTocWrap_dom.style.display = 'none';
|
||||
}
|
||||
|
||||
if (ILS.utils.articleToc_dom) {
|
||||
ILS.utils.articleToc_dom.style.display = 'none';
|
||||
if (KEEP.utils.articleToc_dom) {
|
||||
KEEP.utils.articleToc_dom.style.display = 'none';
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
|
@ -1,15 +1,15 @@
|
|||
ILS.utils = {
|
||||
KEEP.utils = {
|
||||
|
||||
themeInfo: {
|
||||
author: 'XPoet',
|
||||
name: 'ILS',
|
||||
version: '2.2.0',
|
||||
repository: 'https://github.com/XPoet/hexo-theme-ils'
|
||||
name: 'Keep',
|
||||
version: '3.0.0',
|
||||
repository: 'https://github.com/XPoet/hexo-theme-keep'
|
||||
},
|
||||
|
||||
printThemeInfo() {
|
||||
const themeInfo = `${this.themeInfo.name} v${this.themeInfo.version}`;
|
||||
console.log(themeInfo);
|
||||
console.info(themeInfo + '\n' + this.themeInfo.repository);
|
||||
const footThemeInfoDom = document.querySelector('.footer .info-container .theme-info a.theme-version');
|
||||
if (footThemeInfoDom) {
|
||||
footThemeInfoDom.setAttribute('href', this.themeInfo.repository);
|
||||
|
@ -19,9 +19,9 @@ ILS.utils = {
|
|||
}
|
||||
}
|
||||
|
||||
ILS.utils = {
|
||||
KEEP.utils = {
|
||||
|
||||
...ILS.utils,
|
||||
...KEEP.utils,
|
||||
|
||||
headerProgress_dom: document.querySelector('.header-progress'),
|
||||
pageTop_dom: document.querySelector('.page-main-content-top'),
|
||||
|
@ -56,12 +56,12 @@ ILS.utils = {
|
|||
this.styleHandleWhenScroll();
|
||||
|
||||
// TOC scroll handle
|
||||
if (CONFIG.toc.enable && ILS.utils.hasOwnProperty('findActiveIndexByTOC')) {
|
||||
ILS.utils.findActiveIndexByTOC();
|
||||
if (CONFIG.toc.enable && KEEP.utils.hasOwnProperty('findActiveIndexByTOC')) {
|
||||
KEEP.utils.findActiveIndexByTOC();
|
||||
}
|
||||
|
||||
// header shrink
|
||||
ILS.utils.headerShrink.headerShrink();
|
||||
KEEP.utils.headerShrink.headerShrink();
|
||||
});
|
||||
},
|
||||
|
||||
|
@ -125,6 +125,12 @@ ILS.utils = {
|
|||
|
||||
},
|
||||
|
||||
// init first screen height
|
||||
initFirstScreenHeight() {
|
||||
const firstScreenDom = document.querySelector('.first-screen-container');
|
||||
firstScreenDom && (firstScreenDom.style.height = window.innerHeight + 'px');
|
||||
},
|
||||
|
||||
// get dom element height
|
||||
getElementHeight(selectors) {
|
||||
const dom = document.querySelector(selectors);
|
||||
|
@ -145,12 +151,6 @@ ILS.utils = {
|
|||
}
|
||||
},
|
||||
|
||||
// init first screen height
|
||||
initFirstScreenHeight() {
|
||||
const firstScreenDom = document.querySelector('.first-screen-container');
|
||||
firstScreenDom && (firstScreenDom.style.height = window.innerHeight + 'px');
|
||||
},
|
||||
|
||||
// big image viewer
|
||||
imageViewer() {
|
||||
let isBigImage = false;
|
||||
|
|
Loading…
Reference in New Issue