Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Dev 1.6.4: Add and fix toc scroll event #307

Merged
merged 24 commits into from
Aug 24, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
24 commits
Select commit Hold shift + click to select a range
127db3e
style(dark): fix table color
LolipopJ Jul 29, 2021
2fe570b
feat(avatar): add hide avatar border option
LolipopJ Jul 31, 2021
3463168
fix(style)
LolipopJ Aug 7, 2021
6e389ac
chore: build source
LolipopJ Aug 7, 2021
a9fa258
fix: add background holder, fix algolia display
LolipopJ Aug 7, 2021
e31c335
style: improve mobile experience
LolipopJ Aug 7, 2021
9d8f208
style(404): uniform design
LolipopJ Aug 7, 2021
364a132
Feat (toc): add toc scroll listener
LolipopJ Aug 11, 2021
bba5981
chore: get ready for v1.6.4 🏂
LolipopJ Aug 11, 2021
b026175
style: fix title and about page margin
LolipopJ Aug 13, 2021
5dea199
style: fix #309
LolipopJ Aug 16, 2021
6ad5a9d
feat(writing-enhance): add float element support
LolipopJ Aug 17, 2021
de5bde9
chore: update deps & fix lint
LolipopJ Aug 22, 2021
163ebb5
perf: remove useless font-awsome package
LolipopJ Aug 22, 2021
a500341
style: improve sidebar
LolipopJ Aug 22, 2021
3154cd7
feat(read more): add show read more button option.
LolipopJ Aug 22, 2021
9274d7c
feat(search): Search your website on search engines
LolipopJ Aug 22, 2021
d978987
feat(profile): Add profile icon settings to exist items & Add custom …
LolipopJ Aug 22, 2021
0aaa5ec
feat: add custom font option
LolipopJ Aug 23, 2021
ed18a22
docs: update CHANGELOG.md
LolipopJ Aug 23, 2021
31797b6
perf: change custom font load event
LolipopJ Aug 23, 2021
d837d62
fix: build
LolipopJ Aug 23, 2021
b37d5f0
fix: separate custom font function
LolipopJ Aug 23, 2021
a3a266e
fix: page display correctly now when open algolia search
LolipopJ Aug 23, 2021
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 2 additions & 4 deletions .babelrc
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
{
"presets": [
"@babel/preset-env"
]
}
"presets": ["@babel/preset-env"]
}
19 changes: 19 additions & 0 deletions .editorconfig
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
# editorconfig.org
root = true

[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.md]
trim_trailing_whitespace = false

[*.yml]
trim_trailing_whitespace = false

[*.ejs]
indent_size = 4
50 changes: 21 additions & 29 deletions .eslintrc.json
Original file line number Diff line number Diff line change
@@ -1,31 +1,23 @@
{
"parser": "@babel/eslint-parser",
"extends": [
"alloy",
"plugin:prettier/recommended",
"prettier"
"parser": "@babel/eslint-parser",
"extends": ["alloy", "plugin:prettier/recommended", "prettier"],
"globals": {
"siteMeta": true
},
"env": {
"jquery": true
},
"plugins": ["prettier"],
"rules": {
"prettier/prettier": "error",
"no-unused-vars": [
"warn",
{
"vars": "all",
"args": "none",
"caughtErrors": "none"
}
],
"globals": {
"siteMeta": true
},
"env": {
"jquery": true
},
"plugins": [
"prettier"
],
"rules": {
"prettier/prettier": "error",
"no-unused-vars": [
"warn",
{
"vars": "all",
"args": "none",
"caughtErrors": "none"
}
],
"one-var": [
"off"
]
}
}
"one-var": ["off"]
}
}
5 changes: 4 additions & 1 deletion .prettierignore
Original file line number Diff line number Diff line change
@@ -1,2 +1,5 @@
node_modules
.DS_Store
.DS_Store
source
_config.yml
*.md
88 changes: 88 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,88 @@
# 更新日志

## [v1.6.4](https://github.com/fi3ework/hexo-theme-archer/pull/307)

- 新特性 / Feat

1. 现在可以设置主页的 Avatar 头像无边框了
2. 地址栏 Hash 值随文章页面滚动自动修改为对应的 Toc 值
3. 当 Toc 过长时,Toc 目录随文章页面滚动而[滚动](https://github.com/fi3ework/hexo-theme-archer/projects/1#card-64443923)
4. 添加对浮动元素的支持
5. 启用摘要内容的文章可以配置显示“阅读更多”按钮
6. 现在 Profile 栏可配置搜索功能,查看自己博客的 SEO 状态
7. 现在 Profile 栏可以自定义添加更多菜单或链接([#308](https://github.com/fi3ework/hexo-theme-archer/issues/308))

- 变更 / Change

1. 移动端的断点由 `980px` 修改为 `960px`
2. 点击文章页面 Toc 目录跳转时,强制显示 Banner,并预留出 Banner 的空间
3. 文章页面向上滚动显示 Banner 的阈值由 `500px` 修改为 `200px`
4. `_config.yml` 中 `Other` 的部分主题配置移动到 `Theme` 下。
5. 移除主页摘要中标题的 Anchor 按钮

- 修复 / Fix

1. 修复文章页面 License 处原文链接的中文分词不自动断行的[问题](https://github.com/fi3ework/hexo-theme-archer/issues/306#issuecomment-894640488)
2. 修复在某些页面下打开 Algolia 搜索时,页面可能显示异常的问题
3. 在尚未加载完成的情况下,不再错误显示侧边栏打开动画了
4. 修复文章页面 Toc 随页面滚动高亮显示错误的问题
5. 修复文章页中,浮动元素可能错误显示的问题([#309](https://github.com/fi3ework/hexo-theme-archer/issues/309))

- 样式 / Style

1. 适配 Dark 模式下文章中表格的颜色
2. 优化 Dark 模式颜色配置
3. 优化 404 页面的样式
4. 优化文章页在移动端的显示
5. 优化侧边栏在移动端的显示
6. 优化主页摘要的显示,限制图片的高度
7. 优化 Dark 模式切换页面时的显示效果

- 性能 / Perf

1. 提高浏览器滚动性能
2. 优化页面加载性能

- 回滚 / Revert

1. 侧边栏文章标题不再使用 Feature 字体
2. 移除没有用的 Background-holder

- 其它 / Chore

1. 快速点击切换 Dark 模式按钮不再触发主题模式切换
2. 将更新日志内容放到 `CHANGELOG.md` 文件下,而不是 `README.md`

- 开发者 / Dev

1. 提供 `source_version` 配置,一键修改源文件版本日期
2. 添加 `.editorconfig` 文件

## v1.6.3 及更早版本

- 2021.07.28 - 『添加 Dark 模式支持』
- 2021.02.03 - 『添加“文章时效性”提示』
- 2021.01.26 - 『更新使用的 nodejs,以及相关依赖包的版本』
- 2020.03.04 - 『添加 utteranc 评论 支持』
- 2020.03.02 - 『添加 Gitalk 评论 支持』
- 2018.08.26 - 『添加 i18n 支持』
- 2018.07.09 - 『可以切换深/浅色代码配色方案了,[详情](https://github.com/fi3ework/hexo-theme-archer/wiki/%E5%88%87%E6%8D%A2%E4%BB%A3%E7%A0%81%E9%85%8D%E8%89%B2%E6%96%B9%E6%A1%88)』
- 2018.06.23 - 『添加 Valine 评论,感谢 [hulichao](https://github.com/fi3ework/hexo-theme-archer/issues/115) 同学』
- 2018.06.04 - 『添加 Algolia 搜索,[详情](https://github.com/fi3ework/hexo-theme-archer/wiki/%E5%90%AF%E7%94%A8-Algolia-%E6%90%9C%E7%B4%A2)』
- 2018.05.24 - 『可自定义访问量统计/增加字数统计及阅读时间』
- 2018.05.01 - 『添加 license』
- 2018.03.18 - 『添加 fancybox』
- 2018.03.11 - 『toc 可以根据阅读位置自动展开和收缩了』
- 2018.03.04 - 『头图的高度可以自定义了,配置 \_config 即可』
- 2018.02.28 - 『重写分享功能,分享按钮在头图上』
- 2018.02.24 - 『支持显示微信和 QQ 二维码』
- 2018.02.04 - 『代码重构,性能优化,样式更新,V1.0.0』
- 2017.12.27 - 『增加~~百度分享和~~页面浏览量统计』
- 2017.12.17 - 『增加阅读进度条,在 post 页的顶部』
- 2017.10.16 - 『修复移动端 bug,增加渐入效果』
- 2017.10.05 - 『添加 toc,默认开启,可在配置中关闭』
- 2017.09.30 - 『添加了 rss,修复了 placeholder 的 bug,更流畅』
- 2017.09.25 - 『可以直接添加 disqus,gitment 了』
- 2017.09.10 - 『添加了 about 页面』
- 2017.08.26 - 『添加了二次开发文档,文章页 header 在下滑时隐藏』
- 2017.08.17 - 『添加了置顶显示』
105 changes: 71 additions & 34 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,11 @@ npm install hexo-wordcount --save
git clone https://github.com/fi3ework/hexo-theme-archer.git themes/archer --depth=1
```

如果您没有安装 Git 工具,也可以在 Hexo 根目录下手动创建 `themes/archer` 文件夹,然后将此仓库的源码放入该目录下。

> 仓库的 `dev` 分支包含正在开发中的主题代码,如果您是**进阶开发者**或追新用户,能够承受代码的不足之处和低稳定性,并乐于关注我们开发的最新进展,也可以使用此分支:
> `git clone -b dev https://github.com/fi3ework/hexo-theme-archer.git themes/archer --depth=1`

### 设置 Hexo 主题为 Archer

修改 Hexo 根目录下的 `_config.yml` 文件中的 `theme` 字段为 `archer`:
Expand Down Expand Up @@ -109,6 +114,7 @@ jsonContent:
- [启用 RSS 订阅](#启用-rss-订阅)
- [启用 Mermaid](#启用-mermaid)
- [启用 LaTeX 数学公式](#启用-latex-数学公式)
- [启用自定义字体](#启用自定义字体)
- [自定义单独文章页头图](https://github.com/fi3ework/hexo-theme-archer/wiki/%E8%87%AA%E5%AE%9A%E4%B9%89%E6%96%87%E7%AB%A0%E9%A1%B5%E5%A4%B4%E5%9B%BE)
- [将 Unsplash 的随机图片作为头图](https://github.com/fi3ework/hexo-theme-archer/wiki/%E5%B0%86-Unsplash-%E9%9A%8F%E6%9C%BA%E5%9B%BE%E7%89%87%E4%BD%9C%E4%B8%BA%E5%A4%B4%E5%9B%BE)
- [自定义文章在首页的摘要](https://github.com/fi3ework/hexo-theme-archer/wiki/%E8%87%AA%E5%AE%9A%E4%B9%89%E6%96%87%E7%AB%A0%E5%9C%A8%E9%A6%96%E9%A1%B5%E7%9A%84%E6%91%98%E8%A6%81)
Expand Down Expand Up @@ -216,7 +222,7 @@ mermaid:

> ❗️❗️❗️ 注意:如果您需要使用**类图**,请编辑您 Hexo 根目录下的 `_config.yml` 文件,设置 `external_link: false`。请确保这个设置对您原来的页面功能没有影响,这是 Hexo 本身的 bug。

## 启用 LaTeX 数学公式
### 启用 LaTeX 数学公式

这个[维基页面](https://github.com/fi3ework/hexo-theme-archer/wiki/%E5%90%AF%E7%94%A8-Latex-%E6%94%AF%E6%8C%81)包含启用 LaTeX 数学公式支持的完整介绍。

Expand Down Expand Up @@ -260,20 +266,54 @@ z=\dfrac{3\pi}{2}(1+2t)\sin(\dfrac{3\pi}{2}(1+2t)), &
\end{equation}
```

### 启用自定义字体

**实验性功能**,自定义字体依赖于 CSS Variables 能力,部分浏览器存在**兼容性问题**。

为了确保 `hexo generate` 构建成功,建议使用 Node.js 14.x 或更新版本。

您需要首先引入自定义字体功能,在 `layout/layout.ejs` 中对应部分添加如下字段:

``` ejs
<!-- import experimental options here -->
<%- partial('_partial/custom-font.ejs') %>
```

接下来配置 Archer 主题目录下的 `_config.yml` 文件即可:

``` yml
custom_font:
enable: true
name: 'Noto Sans SC:n3,n4,n5,n7'
url: 'https://fonts.googleapis.cnpmjs.org/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap'
```

其中,`name` 为引入的自定义字体名称。`:` 后跟引入字体的变体和字重,使用 `,` 间隔。例如 `name: 'Noto Sans SC:i5,n7'` 表示引入 `Noto Sans SC` 的斜体 500 字重和正常 700 字重。

`url` 为引入的自定义字体的 CDN 链接或本地链接。

## 文章撰写增强

Archer 主题为您撰写的文章提供了一些增强的展示内容,这需要您手动在文章的 Front-matter 处配置。包括如下:
Archer 主题为您撰写的文章提供了一些增强的展示内容。

请注意,这些增强的展示内容**仅保证**在 Archer 主题中能够顺利渲染显示。

文章属性配置。在文章的 Front-matter 处配置:

- [置顶文章](#置顶文章)
- [隐藏文章目录](#隐藏文章目录)

正文内容增强。在编写正文时根据自己的需要使用:

- [浮动元素](#浮动元素)

### 置顶文章

Archer 主题在主页为置顶的文章显示一个小标记。

在默认情况下,Hexo 使用 [`hexo-generator-index`](https://github.com/hexojs/hexo-generator-index) 生成文章索引。假如您需要置顶某篇文章,只需要在它的 Front-matter 处添加 `sticky` 属性即可:

```md
``` md
---
title: Hello World
date: 2013/7/13 20:46:25
Expand All @@ -285,7 +325,7 @@ sticky: 100

假如您使用其它的插件生成索引,也可以手动添加 `top` 属性以显示小标记:

```md
``` md
---
title: Hello World
date: 2013/7/13 20:46:25
Expand All @@ -299,22 +339,47 @@ top: true

您可以通过配置 Archer 主题目录下的 `_config.yml` 以**全局**关闭文章目录:

```yml
``` yml
toc: false
```

或者,您也可以指定某些文章不显示目录。只需要在文章的 Front-matter 部分设置 `toc` 属性即可:

```md
``` md
---
title: Hello World
date: 2013/7/13 20:46:25
toc: false
---
```

当然,在全局关闭文章目录的情况下,您也可以在文章中手动设置 `toc: true`,以显示该文章的目录。

### 浮动元素

Archer 主题内置了对[浮动元素](https://developer.mozilla.org/zh-CN/docs/Web/CSS/float)的样式表支持。

- `archer-float-left`:设置元素靠左浮动。
- `archer-float-right`:设置元素靠右浮动。

浮动元素仅在桌面端生效。在移动端中,浮动元素将恢复正常文档流。

例如:

``` md
Nullam et orci eu lorem consequat tincidunt vivamus et sagittis magna sed nunc rhoncus condimentum sem. In efficitur ligula tate urna. Maecenas massa vel lacinia pellentesque lorem ipsum dolor.

<div class="archer-float-right">
<img src="https://cdn.jsdelivr.net/gh/fi3ework/hexo-theme-archer/source/avatar/Misaka.jpg" alt="this is a float image!">
</div>

Nullam et orci eu lorem consequat tincidunt. Vivamus et sagittis libero. Nullam et orci eu lorem consequat tincidunt vivamus et sagittis magna sed nunc rhoncus condimentum sem. In efficitur ligula tate urna.
```

## 更新主题

主题的更新内容发布在仓库的 [Release](https://github.com/fi3ework/hexo-theme-archer/releases) 页面。

提供两种方法供参考:

- 使用 `git` 命令进行更新,但是可能需要手动合并代码,解决冲突;
Expand All @@ -330,34 +395,6 @@ toc: false

首先备份 Archer 主题目录下所有您自定义过的文件(包括 `_config.yml` 和 `source` 文件夹下添加的文件等),然后删除 Archer 主题目录,再重新安装,最后将备份的文件替换到原来的位置即可。

## 更新日志

- 2017.08.17 - 『添加了置顶显示』
- 2017.08.26 - 『添加了二次开发文档,文章页 header 在下滑时隐藏』
- 2017.09.10 - 『添加了 about 页面』
- 2017.09.25 - 『可以直接添加 disqus,gitment 了』
- 2017.09.30 - 『添加了 rss,修复了 placeholder 的 bug,更流畅』
- 2017.10.05 - 『添加 toc,默认开启,可在配置中关闭』
- 2017.10.16 - 『修复移动端 bug,增加渐入效果』
- 2017.12.17 - 『增加阅读进度条,在 post 页的顶部』
- 2017.12.27 - 『增加~~百度分享和~~页面浏览量统计』
- 2018.02.04 - 『代码重构,性能优化,样式更新,V1.0.0』
- 2018.02.24 - 『支持显示微信和 QQ 二维码』
- 2018.02.28 - 『重写分享功能,分享按钮在头图上』
- 2018.03.04 - 『头图的高度可以自定义了,配置 \_config 即可』
- 2018.03.11 - 『toc 可以根据阅读位置自动展开和收缩了』
- 2018.03.18 - 『添加 fancybox』
- 2018.05.01 - 『添加 license』
- 2018.05.24 - 『可自定义访问量统计/增加字数统计及阅读时间』
- 2018.06.04 - 『添加 Algolia 搜索,[详情](https://github.com/fi3ework/hexo-theme-archer/wiki/%E5%90%AF%E7%94%A8-Algolia-%E6%90%9C%E7%B4%A2)』
- 2018.06.23 - 『添加 Valine 评论,感谢 [hulichao](https://github.com/fi3ework/hexo-theme-archer/issues/115) 同学』
- 2018.07.09 - 『可以切换深/浅色代码配色方案了,[详情](https://github.com/fi3ework/hexo-theme-archer/wiki/%E5%88%87%E6%8D%A2%E4%BB%A3%E7%A0%81%E9%85%8D%E8%89%B2%E6%96%B9%E6%A1%88)』
- 2018.08.26 - 『添加 i18n 支持』
- 2020.03.02 - 『添加 Gitalk评论 支持』
- 2020.03.04 - 『添加 utteranc评论 支持』
- 2021.01.26 - 『更新使用的 nodejs,以及相关依赖包的版本』
- 2021.02.03 - 『添加“文章时效性”提示』

## 许可证

MIT
Loading