refactor: ils -> keep
This commit is contained in:
XPoet
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>
|
||||||
|
|
||||||
[](https://github.com/XPoet)
|
# Keep
|
||||||
[](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 主题。**
|
> «Keep» is a simple and elegant [Hexo](https://hexo.io) theme. It makes you more focused on writing.
|
||||||
**A simple and beautiful theme for Hexo.**
|
|
||||||
|
|
||||||
|
[](https://www.npmjs.com/package/hexo-theme-keep)
|
||||||
|
[](https://hexo.io)
|
||||||
|
[](https://github.com/XPoet/hexo-theme-keep/blob/master/LICENSE.md)
|
||||||
|
[](https://www.jsdelivr.com/package/npm/hexo-theme-keep)
|
||||||
|
|
||||||
<details>
|
## :star2: Live Preview
|
||||||
|
|
||||||
<summary>点击展开，查看更多预览图。</summary>
|
**[XPoet's Blog](https://xpoet.cn/)**
|
||||||
|
|
||||||
- 样式一：
|
## :rocket: Installation
|
||||||
|
|
||||||
|
If you're using Hexo 5.0 or later, the simplest way to install is through npm:
|
||||||
|
|
||||||
|
```sh
|
||||||
|
$ cd hexo-site
|
||||||
- 样式二：
|
$ npm install hexo-theme-keep
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
- 样式三：
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</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 分支最新代码，包含该主题最新的功能，但无法保证完全稳定。
|
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`。
|
After the installation, open Hexo config file and set `theme` variable to `keep`.
|
||||||
|
|
||||||
### Enable 启用
|
|
||||||
|
|
||||||
Modify `theme` setting in `_config.yml` to `ils`.
|
|
||||||
修改 Hexo 根目录下的 `_config.yml` 配置文件，将 `theme` 设置为 `ils` 。
|
|
||||||
|
|
||||||
```yml
|
```yml
|
||||||
theme: ils
|
theme: keep
|
||||||
```
|
```
|
||||||
|
|
||||||
### Update 更新
|
## :wrench: Configuration
|
||||||
|
|
||||||
- 使用 Git SSH
|
Refer to the [Keep theme configuration guide](https://keep.xpoet.cn/2020/10/Keep-主题配置指南/).
|
||||||
```bash
|
|
||||||
cd themes/ils
|
|
||||||
git pull
|
|
||||||
```
|
|
||||||
- 下载 [主题最新 Release 版本](https://github.com/XPoet/hexo-theme-ils/releases) 。
|
|
||||||
|
|
||||||
## 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
|
Install the latest version throuth npm:
|
||||||
# ---------------------------------------------------------------------------------------
|
|
||||||
# Your basic info
|
|
||||||
# 你的基本信息，请正确填写，将显示在主题中。
|
|
||||||
# ---------------------------------------------------------------------------------------
|
|
||||||
base_info:
|
|
||||||
title: ILS
|
|
||||||
author: XPoet
|
|
||||||
url: https://ils.xpoet.cn/
|
|
||||||
description: Welcome to use ILS theme
|
|
||||||
|
|
||||||
# ---------------------------------------------------------------------------------------
|
```sh
|
||||||
# Theme style settings
|
$ cd hexo-site
|
||||||
# 主题样式设置
|
$ npm update hexo-theme-keep
|
||||||
# ---------------------------------------------------------------------------------------
|
|
||||||
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 评论
|
Or update to latest master branch:
|
||||||
|
|
||||||
主题内置了 Valine 和 Gitalk 两款评论插件，你只能使用其中一款，如果两款评论插件的 enable 都设为了 true，将使用 Valine。
|
```sh
|
||||||
|
$ cd themes/keep
|
||||||
#### Valine
|
$ git pull
|
||||||
|
|
||||||
前往 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 本地搜索
|
## :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
|
## :clapper: Contributors
|
||||||
npm install hexo-generator-searchdb
|
|
||||||
```
|
|
||||||
|
|
||||||
2. 在 Hexo 配置文件 `_config.yml` 增加如下配置。
|
This project exists thanks to all the people who contribute.
|
||||||
|
|
||||||
```yml
|
<a href="https://github.com/XPoet/hexo-theme-keep/graphs/contributors">
|
||||||
# Search
|
<img src="https://opencollective.com/hexo-theme-keep/contributors.svg?width=980">
|
||||||
## https://github.com/theme-next/hexo-generator-searchdb
|
</a>
|
||||||
search:
|
|
||||||
path: search.json
|
|
||||||
field: post
|
|
||||||
content: true
|
|
||||||
format: striptags
|
|
||||||
```
|
|
||||||
|
|
||||||
3. 修改主题配置文件 `_config.yml`。
|
## :sparkling_heart: Thanks
|
||||||
|
|
||||||
```yml
|
«Keep» send special thanks to these great services that sponsor our core infrastructure:
|
||||||
local_search:
|
|
||||||
enable: true
|
|
||||||
trigger: auto
|
|
||||||
unescape: false
|
|
||||||
preload: true
|
|
||||||
```
|
|
||||||
|
|
||||||
### 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
|
<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>
|
||||||
npm install hexo-generator-feed
|
|
||||||
```
|
|
||||||
|
|
||||||
2. 在 Hexo 配置文件 `_config.yml` 增加如下配置。
|
> Thanks jsDelivr for providing public CDN service.
|
||||||
|
|
||||||
```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
|
|
||||||
|
|
|
||||||
11
_config.yml
11
_config.yml
|
|
@ -2,10 +2,10 @@
|
||||||
# Your basic info
|
# Your basic info
|
||||||
# ---------------------------------------------------------------------------------------
|
# ---------------------------------------------------------------------------------------
|
||||||
base_info:
|
base_info:
|
||||||
title: ILS
|
title: Keep
|
||||||
author: XPoet
|
author: Keep team
|
||||||
url: https://ils.xpoet.cn/
|
url: https://keep.xpoet.cn/
|
||||||
description: Welcome to use ILS theme
|
|
||||||
|
|
||||||
# ---------------------------------------------------------------------------------------
|
# ---------------------------------------------------------------------------------------
|
||||||
# Theme style settings
|
# Theme style settings
|
||||||
|
|
@ -15,7 +15,7 @@ style:
|
||||||
primary_color: '#0066CC'
|
primary_color: '#0066CC'
|
||||||
|
|
||||||
# Image align position, value: left | center
|
# Image align position, value: left | center
|
||||||
img_position: center
|
img_position: left
|
||||||
|
|
||||||
# Left side width
|
# Left side width
|
||||||
left_side_width: 260px
|
left_side_width: 260px
|
||||||
|
|
@ -28,6 +28,7 @@ style:
|
||||||
# First screen
|
# First screen
|
||||||
first_screen:
|
first_screen:
|
||||||
enable: true
|
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) 主题。它能让你专注于写作。
|
||||||
|
|
||||||
|
[](https://www.npmjs.com/package/hexo-theme-keep)
|
||||||
|
[](https://hexo.io)
|
||||||
|
[](https://github.com/XPoet/hexo-theme-keep/blob/master/LICENSE.md)
|
||||||
|
[](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="first-screen-container flex-center">
|
||||||
<div class="content flex-center">
|
<div class="content flex-center">
|
||||||
<div class="description">
|
<div class="description">
|
||||||
<%= theme.base_info.description || config.description %>
|
<%= theme.style.first_screen.description || config.description %>
|
||||||
</div>
|
</div>
|
||||||
<% if (theme.social_contact.enable) { %>
|
<% if (theme.social_contact.enable) { %>
|
||||||
<ul class="social-icon-list">
|
<ul class="social-icon-list">
|
||||||
|
|
|
||||||
|
|
@ -20,7 +20,7 @@
|
||||||
<title>
|
<title>
|
||||||
<% if (title){ %><%= title %> |
|
<% if (title){ %><%= title %> |
|
||||||
<% } %>
|
<% } %>
|
||||||
<%= theme.base_info.title || config.title || 'ILS' %>
|
<%= theme.base_info.title || config.title || 'KEEP' %>
|
||||||
</title>
|
</title>
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||||
<%- favicon_tag('images/favicon.png') %>
|
<%- favicon_tag('images/favicon.png') %>
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,7 @@
|
||||||
<div class="header-content<%- (theme.style.first_screen.enable && is_home()) ? ' first-screen' : '' %>"
|
<div class="header-content<%- (theme.style.first_screen.enable && is_home()) ? ' first-screen' : '' %>"
|
||||||
>
|
>
|
||||||
<a class="logo-title" href="/">
|
<a class="logo-title" href="/">
|
||||||
<%= theme.base_info.title || config.title || 'ILS' %>
|
<%= theme.base_info.title || config.title || 'KEEP' %>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<ul class="menu-list">
|
<ul class="menu-list">
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
<div class="fade-in-down-animation">
|
<div class="fade-in-down-animation">
|
||||||
<div class="category-container">
|
<div class="category-container">
|
||||||
<div class="category-name">
|
<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>
|
||||||
<div class="category-post-list">
|
<div class="category-post-list">
|
||||||
<%- partial('_partial/archive-list', {posts_new: page.posts}) %>
|
<%- partial('_partial/archive-list', {posts_new: page.posts}) %>
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
<div class="fade-in-down-animation">
|
<div class="fade-in-down-animation">
|
||||||
<div class="tag-container">
|
<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>
|
||||||
<div class="tag--post-list">
|
<div class="tag--post-list">
|
||||||
<%- partial('_partial/archive-list', {posts_new: page.posts}) %>
|
<%- partial('_partial/archive-list', {posts_new: page.posts}) %>
|
||||||
|
|
|
||||||
20
package.json
20
package.json
|
|
@ -1,24 +1,24 @@
|
||||||
{
|
{
|
||||||
"name": "hexo-theme-ils",
|
"name": "hexo-theme-keep",
|
||||||
"version": "2.1.3",
|
"version": "3.0.0",
|
||||||
"description": "A simple and beautiful theme for Hexo.",
|
"private": false,
|
||||||
"scripts": {
|
"description": "A simple and elegant theme for Hexo.",
|
||||||
"test": "echo \"Error: no test specified\" && exit 1"
|
|
||||||
},
|
|
||||||
"repository": {
|
"repository": {
|
||||||
"type": "git",
|
"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": [
|
"keywords": [
|
||||||
"hexo",
|
"hexo",
|
||||||
"theme",
|
"theme",
|
||||||
"simple-theme",
|
"simple-theme",
|
||||||
"beautiful-theme"
|
"elegant-theme",
|
||||||
|
"beautiful-theme",
|
||||||
|
"powerful-theme"
|
||||||
],
|
],
|
||||||
"author": "XPoet",
|
"author": "XPoet",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"bugs": {
|
"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;
|
exportConfig.path = config.search.path;
|
||||||
}
|
}
|
||||||
return `<script id="hexo-configurations">
|
return `<script id="hexo-configurations">
|
||||||
let ILS = window.ILS || {};
|
let KEEP = window.KEEP || {};
|
||||||
let CONFIG = ${JSON.stringify(exportConfig)};
|
let CONFIG = ${JSON.stringify(exportConfig)};
|
||||||
</script>`;
|
</script>`;
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -20,7 +20,7 @@ $article-date-font-size = 1em;
|
||||||
.archive-year {
|
.archive-year {
|
||||||
font-size: $archive-year-font-size;
|
font-size: $archive-year-font-size;
|
||||||
|
|
||||||
+ils-tablet() {
|
+keep-tablet() {
|
||||||
font-size: $archive-year-font-size - 0.2em;
|
font-size: $archive-year-font-size - 0.2em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -32,7 +32,7 @@ $article-date-font-size = 1em;
|
||||||
.archive-year-post-count {
|
.archive-year-post-count {
|
||||||
font-size: $archive-year-count-font-size;
|
font-size: $archive-year-count-font-size;
|
||||||
|
|
||||||
+ils-tablet() {
|
+keep-tablet() {
|
||||||
font-size: $archive-year-count-font-size - 0.1em;
|
font-size: $archive-year-count-font-size - 0.1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -47,18 +47,18 @@ $article-date-font-size = 1em;
|
||||||
|
|
||||||
padding-left: 10px;
|
padding-left: 10px;
|
||||||
|
|
||||||
+ils-tablet() {
|
+keep-tablet() {
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.article-item {
|
.article-item {
|
||||||
margin-top: 18px;
|
margin-top: 18px;
|
||||||
|
|
||||||
+ils-tablet() {
|
+keep-tablet() {
|
||||||
margin-top: 16px;
|
margin-top: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
+ils-mobile() {
|
+keep-mobile() {
|
||||||
margin-top: 14px;
|
margin-top: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -32,14 +32,14 @@
|
||||||
|
|
||||||
|
|
||||||
.article-wordcount, .article-tags {
|
.article-wordcount, .article-tags {
|
||||||
+ils-mobile() {
|
+keep-mobile() {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.article-min2read, .article-categories {
|
.article-min2read, .article-categories {
|
||||||
|
|
||||||
+ils-tablet() {
|
+keep-tablet() {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,7 @@
|
||||||
|
|
||||||
.empty-page-container {
|
.empty-page-container {
|
||||||
|
|
||||||
ils-container(1.005, 1.01, 30px, true);
|
keep-container(1.005, 1.01, 30px, true);
|
||||||
|
|
||||||
.empty-page-content {
|
.empty-page-content {
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -28,11 +28,11 @@ $header-progress-height = 2.8px;
|
||||||
|
|
||||||
transition();
|
transition();
|
||||||
|
|
||||||
+ils-tablet() {
|
+keep-tablet() {
|
||||||
width: $main-content-width-tablet !important;
|
width: $main-content-width-tablet !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
+ils-mobile() {
|
+keep-mobile() {
|
||||||
width: $main-content-width-mobile !important;
|
width: $main-content-width-mobile !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -44,11 +44,11 @@ $header-progress-height = 2.8px;
|
||||||
font-size: 2.2em;
|
font-size: 2.2em;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
|
||||||
+ils-tablet() {
|
+keep-tablet() {
|
||||||
font-size: 2.0em;
|
font-size: 2.0em;
|
||||||
}
|
}
|
||||||
|
|
||||||
+ils-mobile() {
|
+keep-mobile() {
|
||||||
font-size: 1.8em;
|
font-size: 1.8em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -60,7 +60,7 @@ $header-progress-height = 2.8px;
|
||||||
|
|
||||||
.menu-list {
|
.menu-list {
|
||||||
|
|
||||||
+ils-tablet() {
|
+keep-tablet() {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -122,7 +122,7 @@ $header-progress-height = 2.8px;
|
||||||
position: relative;
|
position: relative;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
+ils-tablet() {
|
+keep-tablet() {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -24,11 +24,11 @@ $icon-size = 1.2em;
|
||||||
top: 10%;
|
top: 10%;
|
||||||
width: 70%;
|
width: 70%;
|
||||||
|
|
||||||
+ils-tablet() {
|
+keep-tablet() {
|
||||||
width: 80%;
|
width: 80%;
|
||||||
}
|
}
|
||||||
|
|
||||||
+ils-mobile() {
|
+keep-mobile() {
|
||||||
width: 90%;
|
width: 90%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,7 @@
|
||||||
|
|
||||||
.tagcloud-container {
|
.tagcloud-container {
|
||||||
|
|
||||||
ils-container(1.005, 1.01, 30px, true);
|
keep-container(1.005, 1.01, 30px, true);
|
||||||
|
|
||||||
.tagcloud-content {
|
.tagcloud-content {
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -34,7 +34,7 @@ $li-margin-bottom = 12px;
|
||||||
&.page-aside-toggle {
|
&.page-aside-toggle {
|
||||||
display: none;
|
display: none;
|
||||||
|
|
||||||
+ils-tablet() {
|
+keep-tablet() {
|
||||||
display: none !important;
|
display: none !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,7 @@
|
||||||
@require "./common/magic-theme.styl";
|
@require "./common/magic-theme.styl";
|
||||||
|
|
||||||
.archive-container {
|
.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 {
|
.article-content-container {
|
||||||
|
|
||||||
ils-container(1.008, 1.002, 30px, true);
|
keep-container(1.008, 1.002, 30px, true);
|
||||||
|
|
||||||
.article-title {
|
.article-title {
|
||||||
color: var(--second-text-color);
|
color: var(--second-text-color);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
font-size: 1.8em;
|
font-size: 1.8em;
|
||||||
|
|
||||||
+ils-tablet() {
|
+keep-tablet() {
|
||||||
font-size: 1.5em;
|
font-size: 1.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
+ils-mobile() {
|
+keep-mobile() {
|
||||||
font-size: 1.2em;
|
font-size: 1.2em;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -84,7 +84,7 @@ $post-nav-max-width = 220px;
|
||||||
|
|
||||||
.article-header, .article-header-meta-info {
|
.article-header, .article-header-meta-info {
|
||||||
margin-top: 16px;
|
margin-top: 16px;
|
||||||
+ils-tablet() {
|
+keep-tablet() {
|
||||||
transform: scale(0.88);
|
transform: scale(0.88);
|
||||||
transform-origin: left top;
|
transform-origin: left top;
|
||||||
}
|
}
|
||||||
|
|
@ -112,7 +112,7 @@ $post-nav-max-width = 220px;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
|
||||||
ils-container(1.08, 1.08, 10px, false);
|
keep-container(1.08, 1.08, 10px, false);
|
||||||
|
|
||||||
a {
|
a {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
@ -163,7 +163,7 @@ $post-nav-max-width = 220px;
|
||||||
.post-nav-item {
|
.post-nav-item {
|
||||||
display: none;
|
display: none;
|
||||||
|
|
||||||
+ils-tablet() {
|
+keep-tablet() {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -176,7 +176,7 @@ $post-nav-max-width = 220px;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
|
|
||||||
+ils-tablet() {
|
+keep-tablet() {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -2,17 +2,17 @@
|
||||||
|
|
||||||
.category-container {
|
.category-container {
|
||||||
|
|
||||||
ils-container(1.02, 1.02, 30px, true);
|
keep-container(1.02, 1.02, 30px, true);
|
||||||
|
|
||||||
.category-name {
|
.category-name {
|
||||||
color: var(--second-text-color);
|
color: var(--second-text-color);
|
||||||
font-size: 1.6em;
|
font-size: 1.6em;
|
||||||
|
|
||||||
+ils-tablet() {
|
+keep-tablet() {
|
||||||
font-size: 1.5em;
|
font-size: 1.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
+ils-mobile() {
|
+keep-mobile() {
|
||||||
font-size: 1.4em;
|
font-size: 1.4em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,7 @@
|
||||||
|
|
||||||
.category-list-container {
|
.category-list-container {
|
||||||
|
|
||||||
ils-container(1.005, 1.01, 30px, true);
|
keep-container(1.005, 1.01, 30px, true);
|
||||||
|
|
||||||
.category-list-content {
|
.category-list-content {
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -35,12 +35,12 @@ html, body {
|
||||||
font-size: $default-font-size;
|
font-size: $default-font-size;
|
||||||
line-height: $default-font-line-height;
|
line-height: $default-font-line-height;
|
||||||
|
|
||||||
+ils-tablet() {
|
+keep-tablet() {
|
||||||
font-size: $default-font-size * 0.96;
|
font-size: $default-font-size * 0.96;
|
||||||
line-height: $default-font-line-height * 0.96;
|
line-height: $default-font-line-height * 0.96;
|
||||||
}
|
}
|
||||||
|
|
||||||
+ils-mobile() {
|
+keep-mobile() {
|
||||||
font-size: $default-font-size * 0.9;
|
font-size: $default-font-size * 0.9;
|
||||||
line-height: $default-font-line-height * 0.9;
|
line-height: $default-font-line-height * 0.9;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
@require "animated.styl"
|
@require "animated.styl"
|
||||||
|
|
||||||
$ils-container-margin-bottom = 30px;
|
$keep-container-margin-bottom = 30px;
|
||||||
$ils-container-border-radius = 5px;
|
$keep-container-border-radius = 5px;
|
||||||
|
|
||||||
hover-style(scaleX, scaleY) {
|
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);
|
background: var(--background-color);
|
||||||
padding: padding;
|
padding: padding;
|
||||||
border-radius: $ils-container-border-radius;
|
border-radius: $keep-container-border-radius;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
|
||||||
if (isMarginBottom) {
|
if (isMarginBottom) {
|
||||||
margin-bottom: $ils-container-margin-bottom;
|
margin-bottom: $keep-container-margin-bottom;
|
||||||
|
|
||||||
+ils-tablet() {
|
+keep-tablet() {
|
||||||
margin-bottom: $ils-container-margin-bottom * 0.8;
|
margin-bottom: $keep-container-margin-bottom * 0.8;
|
||||||
}
|
}
|
||||||
|
|
||||||
+ils-mobile() {
|
+keep-mobile() {
|
||||||
margin-bottom: $ils-container-margin-bottom * 0.6;
|
margin-bottom: $keep-container-margin-bottom * 0.6;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
hover-style(scaleX, scaleY);
|
hover-style(scaleX, scaleY);
|
||||||
|
|
||||||
+ils-tablet() {
|
+keep-tablet() {
|
||||||
padding: padding * 0.8;
|
padding: padding * 0.8;
|
||||||
border-radius: $ils-container-border-radius * 0.8;
|
border-radius: $keep-container-border-radius * 0.8;
|
||||||
//margin-bottom: $ils-container-margin-bottom * 0.8;
|
//margin-bottom: $keep-container-margin-bottom * 0.8;
|
||||||
hover-style(scaleX * 0.8, scaleY * 0.8);
|
hover-style(scaleX * 0.8, scaleY * 0.8);
|
||||||
}
|
}
|
||||||
|
|
||||||
+ils-mobile() {
|
+keep-mobile() {
|
||||||
padding: padding * 0.6;
|
padding: padding * 0.6;
|
||||||
border-radius: $ils-container-border-radius * 0.6;
|
border-radius: $keep-container-border-radius * 0.6;
|
||||||
//margin-bottom: $ils-container-margin-bottom * 0.6;
|
//margin-bottom: $keep-container-margin-bottom * 0.6;
|
||||||
hover-style(scaleX * 0.6, scaleY * 0.6);
|
hover-style(scaleX * 0.6, scaleY * 0.6);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -103,7 +103,7 @@
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
line-height: 1.2em;
|
line-height: 1.2em;
|
||||||
|
|
||||||
+ils-tablet() {
|
+keep-tablet() {
|
||||||
font-size: 1.7em;
|
font-size: 1.7em;
|
||||||
line-height: 1.1em;
|
line-height: 1.1em;
|
||||||
}
|
}
|
||||||
|
|
@ -115,7 +115,7 @@
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
line-height: 1.2em;
|
line-height: 1.2em;
|
||||||
|
|
||||||
+ils-tablet() {
|
+keep-tablet() {
|
||||||
font-size: 1.6em;
|
font-size: 1.6em;
|
||||||
line-height: 1.1em;
|
line-height: 1.1em;
|
||||||
}
|
}
|
||||||
|
|
@ -126,7 +126,7 @@
|
||||||
font-weight: 550;
|
font-weight: 550;
|
||||||
line-height: 1.16em;
|
line-height: 1.16em;
|
||||||
|
|
||||||
+ils-tablet() {
|
+keep-tablet() {
|
||||||
font-size: 1.5em;
|
font-size: 1.5em;
|
||||||
line-height: 1.06em;
|
line-height: 1.06em;
|
||||||
}
|
}
|
||||||
|
|
@ -138,7 +138,7 @@
|
||||||
font-weight: 550;
|
font-weight: 550;
|
||||||
line-height: 1.16em;
|
line-height: 1.16em;
|
||||||
|
|
||||||
+ils-tablet() {
|
+keep-tablet() {
|
||||||
font-size: 1.4em;
|
font-size: 1.4em;
|
||||||
line-height: 1.06em;
|
line-height: 1.06em;
|
||||||
}
|
}
|
||||||
|
|
@ -149,7 +149,7 @@
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
line-height: 1.12em;
|
line-height: 1.12em;
|
||||||
|
|
||||||
+ils-tablet() {
|
+keep-tablet() {
|
||||||
font-size: 1.18em;
|
font-size: 1.18em;
|
||||||
line-height: 1.02em;
|
line-height: 1.02em;
|
||||||
}
|
}
|
||||||
|
|
@ -160,7 +160,7 @@
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
line-height: 1.12em;
|
line-height: 1.12em;
|
||||||
|
|
||||||
+ils-tablet() {
|
+keep-tablet() {
|
||||||
font-size: 1.1em;
|
font-size: 1.1em;
|
||||||
line-height: 1.02em;
|
line-height: 1.02em;
|
||||||
}
|
}
|
||||||
|
|
@ -168,17 +168,16 @@
|
||||||
|
|
||||||
|
|
||||||
img {
|
img {
|
||||||
box-sizing: initial;
|
box-sizing: border-box;
|
||||||
padding: 2px;
|
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
border: 1px solid var(--border-color);
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
display: block;
|
display: block;
|
||||||
|
box-shadow: 0 0 2px var(--shadow-color);
|
||||||
|
|
||||||
if (hexo-config('style.img_position') == 'center') {
|
if (hexo-config('style.img_position') == 'center') {
|
||||||
margin: 2px auto;
|
margin: 10px auto 2px;
|
||||||
} else {
|
} else {
|
||||||
margin: 2px 0;
|
margin: 10px 0 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -20,11 +20,11 @@ $component-interspace = 30px; // 组件/模块的间隔值（P
|
||||||
$media-max-width = 780px; // 媒体查询最大宽度 (平板)
|
$media-max-width = 780px; // 媒体查询最大宽度 (平板)
|
||||||
$media-max-width-mobile = 500px; // 媒体查询最大宽度（手机）
|
$media-max-width-mobile = 500px; // 媒体查询最大宽度（手机）
|
||||||
|
|
||||||
ils-tablet()
|
keep-tablet()
|
||||||
@media (max-width: $media-max-width)
|
@media (max-width: $media-max-width)
|
||||||
{block}
|
{block}
|
||||||
|
|
||||||
ils-mobile()
|
keep-mobile()
|
||||||
@media (max-width: $media-max-width-mobile)
|
@media (max-width: $media-max-width-mobile)
|
||||||
{block}
|
{block}
|
||||||
|
|
||||||
|
|
@ -57,7 +57,7 @@ $second-background-color = darken($background-color, 3%);
|
||||||
$default-text-color = #505050;
|
$default-text-color = #505050;
|
||||||
$first-text-color = darken($default-text-color, 10%);
|
$first-text-color = darken($default-text-color, 10%);
|
||||||
$second-text-color = darken($default-text-color, 5%);
|
$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%);
|
$fourth-text-color = lighten($default-text-color, 90%);
|
||||||
$border-color = darken($background-color, 30%);
|
$border-color = darken($background-color, 30%);
|
||||||
$selection-color = lighten($primary-color, 10%);
|
$selection-color = lighten($primary-color, 10%);
|
||||||
|
|
|
||||||
|
|
@ -8,7 +8,7 @@
|
||||||
.home-article-item {
|
.home-article-item {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
ils-container(1.02, 1.02, 28px, true);
|
keep-container(1.02, 1.02, 28px, true);
|
||||||
|
|
||||||
.top-icon {
|
.top-icon {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
@ -18,7 +18,7 @@
|
||||||
transform: rotate(45deg);
|
transform: rotate(45deg);
|
||||||
color: var(--third-text-color);
|
color: var(--third-text-color);
|
||||||
|
|
||||||
+ils-tablet() {
|
+keep-tablet() {
|
||||||
font-size: 1.16em;
|
font-size: 1.16em;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -31,12 +31,12 @@
|
||||||
font-size: 1.5em;
|
font-size: 1.5em;
|
||||||
line-height: 1.5em;
|
line-height: 1.5em;
|
||||||
|
|
||||||
+ils-tablet() {
|
+keep-tablet() {
|
||||||
font-size: 1.3em;
|
font-size: 1.3em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
+ils-mobile() {
|
+keep-mobile() {
|
||||||
font-size: 1.2em;
|
font-size: 1.2em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -76,13 +76,13 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.home-article-category {
|
.home-article-category {
|
||||||
+ils-mobile() {
|
+keep-mobile() {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.home-article-tag {
|
.home-article-tag {
|
||||||
+ils-tablet() {
|
+keep-tablet() {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -12,7 +12,7 @@ $page-aside-width = $temp-width ? convert($temp-width):260px;
|
||||||
position: relative;
|
position: relative;
|
||||||
padding-top: $header-progress-height;
|
padding-top: $header-progress-height;
|
||||||
|
|
||||||
+ils-tablet() {
|
+keep-tablet() {
|
||||||
padding-left: 0 !important;
|
padding-left: 0 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -37,11 +37,11 @@ $page-aside-width = $temp-width ? convert($temp-width):260px;
|
||||||
padding-top: $header-height;
|
padding-top: $header-height;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
+ils-tablet() {
|
+keep-tablet() {
|
||||||
padding-top: $header-height - 8px;
|
padding-top: $header-height - 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
+ils-mobile() {
|
+keep-mobile() {
|
||||||
padding-top: $header-height - 16px;
|
padding-top: $header-height - 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -52,12 +52,12 @@ $page-aside-width = $temp-width ? convert($temp-width):260px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: $header-height;
|
height: $header-height;
|
||||||
|
|
||||||
+ils-tablet() {
|
+keep-tablet() {
|
||||||
height: $header-height - 8px;
|
height: $header-height - 8px;
|
||||||
padding-left: 0 !important;
|
padding-left: 0 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
+ils-mobile() {
|
+keep-mobile() {
|
||||||
height: $header-height - 16px;
|
height: $header-height - 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -73,22 +73,22 @@ $page-aside-width = $temp-width ? convert($temp-width):260px;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
padding: $component-interspace 0;
|
padding: $component-interspace 0;
|
||||||
|
|
||||||
+ils-tablet() {
|
+keep-tablet() {
|
||||||
padding: $component-interspace * 0.8 0;
|
padding: $component-interspace * 0.8 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
+ils-mobile() {
|
+keep-mobile() {
|
||||||
padding: $component-interspace * 0.6 0;
|
padding: $component-interspace * 0.6 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.main-content {
|
.main-content {
|
||||||
width: $main-content-width;
|
width: $main-content-width;
|
||||||
|
|
||||||
+ils-tablet() {
|
+keep-tablet() {
|
||||||
width: $main-content-width-tablet !important;
|
width: $main-content-width-tablet !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
+ils-mobile() {
|
+keep-mobile() {
|
||||||
width: $main-content-width-mobile !important;
|
width: $main-content-width-mobile !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -129,9 +129,9 @@ $page-aside-width = $temp-width ? convert($temp-width):260px;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
border-radius: 0 !important;
|
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;
|
left: 0 !important;
|
||||||
display: none !important;
|
display: none !important;
|
||||||
}
|
}
|
||||||
|
|
@ -146,13 +146,13 @@ $page-aside-width = $temp-width ? convert($temp-width):260px;
|
||||||
right: $component-interspace;
|
right: $component-interspace;
|
||||||
transition();
|
transition();
|
||||||
|
|
||||||
+ils-tablet() {
|
+keep-tablet() {
|
||||||
right: 10px;
|
right: 10px;
|
||||||
transform: scale(0.82);
|
transform: scale(0.82);
|
||||||
transform-origin: right top;
|
transform-origin: right top;
|
||||||
}
|
}
|
||||||
|
|
||||||
+ils-mobile() {
|
+keep-mobile() {
|
||||||
right: 5px;
|
right: 5px;
|
||||||
transform: scale(0.72);
|
transform: scale(0.72);
|
||||||
transform-origin: right top;
|
transform-origin: right top;
|
||||||
|
|
@ -167,14 +167,14 @@ $page-aside-width = $temp-width ? convert($temp-width):260px;
|
||||||
width: $circle-button-width;
|
width: $circle-button-width;
|
||||||
height: $circle-button-width;
|
height: $circle-button-width;
|
||||||
|
|
||||||
+ils-tablet() {
|
+keep-tablet() {
|
||||||
right: 10px;
|
right: 10px;
|
||||||
transform: scale(0.82);
|
transform: scale(0.82);
|
||||||
transform-origin: right bottom;
|
transform-origin: right bottom;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
+ils-mobile() {
|
+keep-mobile() {
|
||||||
right: 5px;
|
right: 5px;
|
||||||
transform: scale(0.72);
|
transform: scale(0.72);
|
||||||
transform-origin: right bottom;
|
transform-origin: right bottom;
|
||||||
|
|
|
||||||
|
|
@ -3,17 +3,17 @@
|
||||||
|
|
||||||
.tag-container {
|
.tag-container {
|
||||||
|
|
||||||
ils-container(1.02, 1.02, 30px, true);
|
keep-container(1.02, 1.02, 30px, true);
|
||||||
|
|
||||||
.tag-name {
|
.tag-name {
|
||||||
color: var(--second-text-color);
|
color: var(--second-text-color);
|
||||||
font-size: 1.6em;
|
font-size: 1.6em;
|
||||||
|
|
||||||
+ils-tablet() {
|
+keep-tablet() {
|
||||||
font-size: 1.5em;
|
font-size: 1.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
+ils-mobile() {
|
+keep-mobile() {
|
||||||
font-size: 1.4em;
|
font-size: 1.4em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
window.addEventListener('DOMContentLoaded', () => {
|
window.addEventListener('DOMContentLoaded', () => {
|
||||||
ILS.utils = {
|
KEEP.utils = {
|
||||||
|
|
||||||
...ILS.utils,
|
...KEEP.utils,
|
||||||
|
|
||||||
back2TopButton_dom: document.querySelector('.scroll-to-top'),
|
back2TopButton_dom: document.querySelector('.scroll-to-top'),
|
||||||
back2BottomButton_dom: document.querySelector('.scroll-to-bottom'),
|
back2BottomButton_dom: document.querySelector('.scroll-to-bottom'),
|
||||||
|
|
@ -35,22 +35,22 @@ window.addEventListener('DOMContentLoaded', () => {
|
||||||
},
|
},
|
||||||
|
|
||||||
initBack2TopButton() {
|
initBack2TopButton() {
|
||||||
if (ILS.utils.back2TopButton_dom) {
|
if (KEEP.utils.back2TopButton_dom) {
|
||||||
ILS.utils.back2TopButton_dom.addEventListener('click', () => {
|
KEEP.utils.back2TopButton_dom.addEventListener('click', () => {
|
||||||
this.back2top();
|
this.back2top();
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
initBack2BottomButton() {
|
initBack2BottomButton() {
|
||||||
if (ILS.utils.back2BottomButton_dom) {
|
if (KEEP.utils.back2BottomButton_dom) {
|
||||||
ILS.utils.back2BottomButton_dom.addEventListener('click', () => {
|
KEEP.utils.back2BottomButton_dom.addEventListener('click', () => {
|
||||||
this.back2Bottom();
|
this.back2Bottom();
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|
||||||
ILS.utils.initBack2TopButton();
|
KEEP.utils.initBack2TopButton();
|
||||||
ILS.utils.initBack2BottomButton();
|
KEEP.utils.initBack2BottomButton();
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
window.addEventListener('DOMContentLoaded', () => {
|
window.addEventListener('DOMContentLoaded', () => {
|
||||||
ILS.utils.modeToggle = {
|
KEEP.utils.modeToggle = {
|
||||||
|
|
||||||
localStorageKey: 'MAGIC',
|
localStorageKey: 'MAGIC',
|
||||||
modeToggleButton_dom: document.querySelector('.mode-toggle'),
|
modeToggleButton_dom: document.querySelector('.mode-toggle'),
|
||||||
|
|
@ -66,6 +66,6 @@ window.addEventListener('DOMContentLoaded', () => {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
ILS.utils.modeToggle.initModeStatus();
|
KEEP.utils.modeToggle.initModeStatus();
|
||||||
ILS.utils.modeToggle.initModeToggleButton();
|
KEEP.utils.modeToggle.initModeToggleButton();
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
window.addEventListener('DOMContentLoaded', () => {
|
window.addEventListener('DOMContentLoaded', () => {
|
||||||
ILS.utils.headerShrink = {
|
KEEP.utils.headerShrink = {
|
||||||
|
|
||||||
pageTemplateDom: document.querySelector('.page-main-content'),
|
pageTemplateDom: document.querySelector('.page-main-content'),
|
||||||
sidebarToolsDom: document.querySelector('.sidebar-tools'),
|
sidebarToolsDom: document.querySelector('.sidebar-tools'),
|
||||||
|
|
@ -47,7 +47,7 @@ window.addEventListener('DOMContentLoaded', () => {
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
ILS.utils.headerShrink.init();
|
KEEP.utils.headerShrink.init();
|
||||||
ILS.utils.headerShrink.initMenuBarButton();
|
KEEP.utils.headerShrink.initMenuBarButton();
|
||||||
ILS.utils.headerShrink.initWindowMask();
|
KEEP.utils.headerShrink.initWindowMask();
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
window.addEventListener('DOMContentLoaded', () => {
|
window.addEventListener('DOMContentLoaded', () => {
|
||||||
|
|
||||||
ILS.utils.leftSideToggle = {
|
KEEP.utils.leftSideToggle = {
|
||||||
|
|
||||||
init() {
|
init() {
|
||||||
this.toggleBar = document.querySelector('.page-aside-toggle');
|
this.toggleBar = document.querySelector('.page-aside-toggle');
|
||||||
|
|
@ -39,7 +39,7 @@ window.addEventListener('DOMContentLoaded', () => {
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|
||||||
ILS.utils.leftSideToggle.init();
|
KEEP.utils.leftSideToggle.init();
|
||||||
ILS.utils.leftSideToggle.initToggleBarButton();
|
KEEP.utils.leftSideToggle.initToggleBarButton();
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -1,22 +1,22 @@
|
||||||
window.addEventListener('DOMContentLoaded', () => {
|
window.addEventListener('DOMContentLoaded', () => {
|
||||||
// print theme info
|
// print theme info
|
||||||
ILS.utils.printThemeInfo();
|
KEEP.utils.printThemeInfo();
|
||||||
|
|
||||||
// init scroll
|
// init scroll
|
||||||
ILS.utils.registerWindowScroll();
|
KEEP.utils.registerWindowScroll();
|
||||||
|
|
||||||
// init tools button
|
// init tools button
|
||||||
ILS.utils.registerToolsButtonClick();
|
KEEP.utils.registerToolsButtonClick();
|
||||||
|
|
||||||
// comment
|
// comment
|
||||||
ILS.utils.goComment();
|
KEEP.utils.goComment();
|
||||||
|
|
||||||
// init page height handle
|
// init page height handle
|
||||||
ILS.utils.initPageHeightHandle();
|
KEEP.utils.initPageHeightHandle();
|
||||||
|
|
||||||
// init first screen height
|
// init first screen height
|
||||||
ILS.utils.initFirstScreenHeight();
|
KEEP.utils.initFirstScreenHeight();
|
||||||
|
|
||||||
// big image viewer handle
|
// big image viewer handle
|
||||||
ILS.utils.imageViewer();
|
KEEP.utils.imageViewer();
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -1,30 +1,30 @@
|
||||||
window.addEventListener('DOMContentLoaded', () => {
|
window.addEventListener('DOMContentLoaded', () => {
|
||||||
|
|
||||||
ILS.utils.navItems = document.querySelectorAll('.post-toc-wrap .post-toc li');
|
KEEP.utils.navItems = document.querySelectorAll('.post-toc-wrap .post-toc li');
|
||||||
ILS.utils.articleToc_dom = document.querySelector('.article-toc');
|
KEEP.utils.articleToc_dom = document.querySelector('.article-toc');
|
||||||
ILS.utils.postTocWrap_dom = document.querySelector('.post-toc-wrap');
|
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() {
|
findActiveIndexByTOC() {
|
||||||
if (!Array.isArray(ILS.utils.sections)) return;
|
if (!Array.isArray(KEEP.utils.sections)) return;
|
||||||
let index = ILS.utils.sections.findIndex(element => {
|
let index = KEEP.utils.sections.findIndex(element => {
|
||||||
return element && element.getBoundingClientRect().top - 20 > 0;
|
return element && element.getBoundingClientRect().top - 20 > 0;
|
||||||
});
|
});
|
||||||
if (index === -1) {
|
if (index === -1) {
|
||||||
index = ILS.utils.sections.length - 1;
|
index = KEEP.utils.sections.length - 1;
|
||||||
} else if (index > 0) {
|
} else if (index > 0) {
|
||||||
index--;
|
index--;
|
||||||
}
|
}
|
||||||
ILS.utils.activateNavByIndex(index);
|
KEEP.utils.activateNavByIndex(index);
|
||||||
},
|
},
|
||||||
|
|
||||||
registerSidebarTOC() {
|
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('#', ''));
|
const target = document.getElementById(decodeURI(element.getAttribute('href')).replace('#', ''));
|
||||||
element.addEventListener('click', event => {
|
element.addEventListener('click', event => {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
|
|
@ -36,7 +36,7 @@ window.addEventListener('DOMContentLoaded', () => {
|
||||||
scrollTop: offset - 10,
|
scrollTop: offset - 10,
|
||||||
complete: function () {
|
complete: function () {
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
ILS.utils.pageTop_dom.style.transform = 'translateY(-100%)';
|
KEEP.utils.pageTop_dom.style.transform = 'translateY(-100%)';
|
||||||
}, 100)
|
}, 100)
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
@ -69,25 +69,25 @@ window.addEventListener('DOMContentLoaded', () => {
|
||||||
},
|
},
|
||||||
|
|
||||||
showPageAsideWhenHasTOC() {
|
showPageAsideWhenHasTOC() {
|
||||||
ILS.utils.leftSideToggle.toggleBar.style.display = 'flex';
|
KEEP.utils.leftSideToggle.toggleBar.style.display = 'flex';
|
||||||
ILS.utils.leftSideToggle.isOpenPageAside = true;
|
KEEP.utils.leftSideToggle.isOpenPageAside = true;
|
||||||
ILS.utils.leftSideToggle.changePageLayoutWhenOpenToggle(ILS.utils.leftSideToggle.isOpenPageAside);
|
KEEP.utils.leftSideToggle.changePageLayoutWhenOpenToggle(KEEP.utils.leftSideToggle.isOpenPageAside);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
ILS.utils.showPageAsideWhenHasTOC();
|
KEEP.utils.showPageAsideWhenHasTOC();
|
||||||
ILS.utils.registerSidebarTOC();
|
KEEP.utils.registerSidebarTOC();
|
||||||
|
|
||||||
|
|
||||||
} else {
|
} else {
|
||||||
|
|
||||||
if (ILS.utils.postTocWrap_dom) {
|
if (KEEP.utils.postTocWrap_dom) {
|
||||||
ILS.utils.postTocWrap_dom.innerHTML = '';
|
KEEP.utils.postTocWrap_dom.innerHTML = '';
|
||||||
ILS.utils.postTocWrap_dom.style.display = 'none';
|
KEEP.utils.postTocWrap_dom.style.display = 'none';
|
||||||
}
|
}
|
||||||
|
|
||||||
if (ILS.utils.articleToc_dom) {
|
if (KEEP.utils.articleToc_dom) {
|
||||||
ILS.utils.articleToc_dom.style.display = 'none';
|
KEEP.utils.articleToc_dom.style.display = 'none';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -1,15 +1,15 @@
|
||||||
ILS.utils = {
|
KEEP.utils = {
|
||||||
|
|
||||||
themeInfo: {
|
themeInfo: {
|
||||||
author: 'XPoet',
|
author: 'XPoet',
|
||||||
name: 'ILS',
|
name: 'Keep',
|
||||||
version: '2.2.0',
|
version: '3.0.0',
|
||||||
repository: 'https://github.com/XPoet/hexo-theme-ils'
|
repository: 'https://github.com/XPoet/hexo-theme-keep'
|
||||||
},
|
},
|
||||||
|
|
||||||
printThemeInfo() {
|
printThemeInfo() {
|
||||||
const themeInfo = `${this.themeInfo.name} v${this.themeInfo.version}`;
|
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');
|
const footThemeInfoDom = document.querySelector('.footer .info-container .theme-info a.theme-version');
|
||||||
if (footThemeInfoDom) {
|
if (footThemeInfoDom) {
|
||||||
footThemeInfoDom.setAttribute('href', this.themeInfo.repository);
|
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'),
|
headerProgress_dom: document.querySelector('.header-progress'),
|
||||||
pageTop_dom: document.querySelector('.page-main-content-top'),
|
pageTop_dom: document.querySelector('.page-main-content-top'),
|
||||||
|
|
@ -56,12 +56,12 @@ ILS.utils = {
|
||||||
this.styleHandleWhenScroll();
|
this.styleHandleWhenScroll();
|
||||||
|
|
||||||
// TOC scroll handle
|
// TOC scroll handle
|
||||||
if (CONFIG.toc.enable && ILS.utils.hasOwnProperty('findActiveIndexByTOC')) {
|
if (CONFIG.toc.enable && KEEP.utils.hasOwnProperty('findActiveIndexByTOC')) {
|
||||||
ILS.utils.findActiveIndexByTOC();
|
KEEP.utils.findActiveIndexByTOC();
|
||||||
}
|
}
|
||||||
|
|
||||||
// header shrink
|
// 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
|
// get dom element height
|
||||||
getElementHeight(selectors) {
|
getElementHeight(selectors) {
|
||||||
const dom = document.querySelector(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
|
// big image viewer
|
||||||
imageViewer() {
|
imageViewer() {
|
||||||
let isBigImage = false;
|
let isBigImage = false;
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue