feat: Add lazyload of images

docs: Update

feat: Add lazyload of images
docs: Update
0699e519 · EvanOne(文一) · fb2a61f1 · 0699e519 · 0699e519 · 0699e519
12 changed file
--- a/README.md
+++ b/README.md
@@ -86,7 +86,7 @@ $ git pull

 | <img src="https://raw.githubusercontent.com/liuyib/picBed/master/collection/20190723235410.png" alt="IE" width="32px" height="32px" /></br> IE | <img src="https://cdnjs.cloudflare.com/ajax/libs/browser-logos/35.1.0/edge/edge_64x64.png" alt="Edge" width="32px" height="32px" /></br> Edge | <img src="https://raw.githubusercontent.com/liuyib/picBed/master/collection/20190723235406.png" alt="Firefox" width="32px" height="32px" /></br> Firefox | <img src="https://raw.githubusercontent.com/liuyib/picBed/master/collection/20190723235407.png" alt="Chrome" width="32px" height="32px" /></br> Chrome | <img src="https://raw.githubusercontent.com/liuyib/picBed/master/collection/20190723235409.png" alt="Safari" width="32px" height="32px" /></br> Safari | <img src="https://raw.githubusercontent.com/liuyib/picBed/master/collection/20190723235411.png" alt="Opera" width="32px" height="32px" /></br> Opera |
 | :---: | :---: | :---: |:---: | :---: | :---: |
-| Not Support | 12+ | 28+ | 21+ | 6.1+ | 12.1+ |
+| 9+ | 12+ | 41+ | 42+ | 10+ | 29+ |

 ## :handshake: 开源协议


--- a/README_en_US.md
+++ b/README_en_US.md
@@ -84,7 +84,7 @@ If you have problems, please read [documentation](https://liuyib.github.io/hexo-

 | <img src="https://raw.githubusercontent.com/liuyib/picBed/master/collection/20190723235410.png" alt="IE" width="32px" height="32px" /></br> IE | <img src="https://cdnjs.cloudflare.com/ajax/libs/browser-logos/35.1.0/edge/edge_64x64.png" alt="Edge" width="32px" height="32px" /></br> Edge | <img src="https://raw.githubusercontent.com/liuyib/picBed/master/collection/20190723235406.png" alt="Firefox" width="32px" height="32px" /></br> Firefox | <img src="https://raw.githubusercontent.com/liuyib/picBed/master/collection/20190723235407.png" alt="Chrome" width="32px" height="32px" /></br> Chrome | <img src="https://raw.githubusercontent.com/liuyib/picBed/master/collection/20190723235409.png" alt="Safari" width="32px" height="32px" /></br> Safari | <img src="https://raw.githubusercontent.com/liuyib/picBed/master/collection/20190723235411.png" alt="Opera" width="32px" height="32px" /></br> Opera |
 | :---: | :---: | :---: |:---: | :---: | :---: |
-| Not Support | 12+ | 28+ | 21+ | 6.1+ | 12.1+ |
+| 9+ | 12+ | 41+ | 42+ | 10+ | 29+ |

 ## :handshake: License


--- a/_config.yml
+++ b/_config.yml
@@ -538,6 +538,13 @@ gallery_waterfall:
  gap_x: 10px
  gap_y: 10px

+# Lazy load the images of post.
+# See: https://github.com/tuupola/lazyload
+lazyload:
+  enable: false
+  # Available values: gif | block
+  placeholder: gif
+
 # Google AdSense
 google_adsense:
  enable: false

--- a/docs/zh-CN/advanced/assist.md
+++ b/docs/zh-CN/advanced/assist.md
 # 辅助功能

-## FancyBox <Badge text="stable"/> <Badge text="v1.1.4"/>
-
-如果想要使用 fancybox 功能，只需要修改主题配置文件即可：
-
-``` yaml
-fancybox: true
-```
-
-效果如下：
-
-![](https://raw.githubusercontent.com/liuyib/picBed/master/hexo-theme-stun/doc/20190724173526.png)
-
-你可以在这里在线体验效果：[https://liuyib.github.io/2019/05/15/hello-stun/index.html](https://liuyib.github.io/2019/05/15/hello-stun/index.html)
-
 ## 快捷键

 - 快速切换文章 <Badge text="beta" type="warn"/> <Badge text="v1.1.3"/>

--- a/docs/zh-CN/advanced/theme-config.md
+++ b/docs/zh-CN/advanced/theme-config.md
@@ -3,7 +3,7 @@
 ::: tip 前言
 - 修改配置文件、安装新的依赖等，都需要重启 hexo 服务器。
 - 没有特别说明，配置项默认从 `v1.0.0` 版本开始支持。
- 稳定的配置使用 <Badge text="stable"/> 标明，表示基本不会变动。不稳定的配置使用 <Badge text="beta" type="warn"/> 标明，表示未来可能会变动甚至删除。目前还不支持的配置使用 <Badge text="not support" type="error"/> 标明。最早开始支持的版本号使用 <Badge text="v x.x.x"/> 标明。与主题无关的配置项使用 <Badge text="disrelated" type="warning"/> 标明。
+- 稳定的配置使用 <Badge text="Stable"/> 标明，表示基本不会变动。不稳定的配置使用 <Badge text="Beta" type="warn"/> 标明，表示未来可能会变动甚至删除。目前还不支持的配置使用 <Badge text="Not Support" type="error"/> 标明。被废弃的配置使用 <Badge text="Deprecated" type="error"/> 标明。最早开始支持的版本号使用 <Badge text="v x.x.x"/> 标明。与主题无关的配置项使用 <Badge text="Disrelated" type="warning"/> 标明。
 :::

 ## 配置文件
@@ -13,14 +13,18 @@
 - Hexo 根目录下的 `_config.yml`。这是站点配置文件，里面的配置作用于整个网站。
 - Stun 根目录下的 `_config.yml`。这是主题配置文件，里面的配置只对当前主题生效。

-## 保留主题配置数据
+## 平滑升级 <Badge text="Stable"/>

-如果你不想每次升级主题时，都要进行如下重复的操作：先将主题配置文件复制一份，等主题升级后再复制回去。那么你可以进行以下设置：将主题配置文件复制到 Hexo 根目录下的 `source/_data/stun.yml` 文件中（没有此目录和文件就新建。目录名称不能改变，文件名称可以是任意的）。
+更新 Hexo 主题时，一般都会有这样的经历：先将主题目录下的 `_config.yml` 文件备份，更新完主题后，再将备份的数据复制粘贴还原回去。

-如果你进行了上述操作，当你需要修改主题配置时，只需要修改 `stun.yml` 文件即可。更新主题时，主题根目录下的 `_config.yml` 文件（可能）会更新，而你对主题配置的数据仍保留在 `stun.yml` 文件中。
+这个过程繁琐又浪费时间，因此我们需要一种友好的更新方式。如果你也经历着这样的痛苦，那么不妨尝试 Hexo 3.0 新增的功能 -- [数据文件](https://hexo.io/zh-cn/docs/data-files)。
+
+Stun 主题利用该功能实现了平滑升级的特性，使用步骤如下：将主题目录下的 `_config.yml` 文件复制到博客根目录下的 `/source/_data/` 中，并重命名为主题名称。例如使用 `stun` 主题，那么就叫做 `stun.yml` 。如果 `source` 目录下没有 `_data` 文件夹请自行创建。

 ::: warning 注意 ！！！
-上面这种做法虽然方便你保留主题的配置数据，但是当更新主题后，配置文件变动时，如果你不及时手动更新 `stun.yml` 文件，主题很可能会报错。也就是说你必须同步 `stun.yml` 文件和主题的 `_config.yml` 文件。所以，如果更新主题后，Hexo 服务器启动报错，首先应该想到的就是同步这两个文件。
+**主题更新后，如果主题目录下的 `_config.yml` 文件里出现了新的选项，那么你必须从该文件中将它们复制到 `/source/_data/stun.yml` 中，并设置它们的值为你想要的选项。**
+
+如果你使用了平滑升级这一特性，那么 `/themes/stun/_config.yml` 和 `/source/_data/stun.yml` 这两个文件里的选项没有同步，是更新主题后，启动报错的最主要的原因！
 :::

 ## 国际化（i18n）
@@ -33,7 +37,7 @@ language: zh-CN # 可选值 zh-CN 或 en-US

 语言文件在主题文件夹的 languages 目录下。Stun 主题默认有 `zh-CN.yml` 和 `en.yml` 两种语言文件，如果需要支持其他语言，请自行编写语言文件。语言文件的命名请参考：[https://github.com/theme-next/hexo-theme-next/tree/master/languages](https://github.com/theme-next/hexo-theme-next/tree/master/languages)

-## 顶部菜单栏 <Badge text="stable"/>
+## 顶部菜单栏 <Badge text="Stable"/>

 网站顶部菜单栏默认有 `/` 和 `/archives` 两个路径，它们分别对应于网站首页和归档页。如果你想添加：`categories`、`tags`、`about` 等页面，你需要进行以下操作：

@@ -68,7 +72,7 @@ menu:

 > 如果只添加路径，没有添加图标名称，会使用默认图标进行显示。

-你可以通过修改 `menu_settings` <Badge text="stable"/> 配置项来控制菜单项的图标或文字是否显示：
+你可以通过修改 `menu_settings` <Badge text="Stable"/> 配置项来控制菜单项的图标或文字是否显示：

 ``` yaml
 menu_settings:
@@ -86,11 +90,11 @@ menu_settings:
 $ hexo new page xxx # xxx 表示页面名称，需要和对应的路径名称保持一致
 ```

-执行这条命令后，会在以下目录生成文件：`source/xxx/index.md`
+执行这条命令后，会在以下目录生成文件：`source/xxx/index.md`，然后重启 Hexo 服务器即可。

-## 自定义页面 <Badge text="stable"/>
+## 自定义页面 <Badge text="Stable"/>

-如果你想在网站顶部菜单栏中添加自定义页面，请进行以下操作：
+如果你想在网站顶部菜单栏中添加自定义页面（除**分类页**、**标签页**、**关于页**以外的页面），请进行以下操作：

 - 添加路径
 - 添加图标
@@ -100,7 +104,7 @@ $ hexo new page xxx # xxx 表示页面名称，需要和对应的路径名称保

 - 国际化设置

-找到 languages 目录下的语言文件进行修改。例如，自定义页面名称为 `read`，修改如下：
+找到 `languages` 目录下的语言文件进行修改。例如，自定义页面名称为 `read`，修改如下：

 `zh-CN.yml`：

@@ -116,7 +120,7 @@ nav:
  read: Read
 ```

-这样就完成了自定义页面的添加。
+这样就完成了自定义页面的添加。重启 Hexo 服务器即可看到效果。

 ## Front-matter

@@ -124,9 +128,9 @@ nav:

 下面是 Hexo 中默认提供的几种 `Front-matter` 属性。

- `title` <Badge text="stable"/> - 标题
- `date` <Badge text="stable"/> - 文件建立日期
- `updated` <Badge text="stable"/> - 文件更新日期
+- `title` <Badge text="Stable"/> - 标题
+- `date` <Badge text="Stable"/> - 文件建立日期
+- `updated` <Badge text="Stable"/> - 文件更新日期

 例如：

@@ -144,15 +148,15 @@ updated: 2019-5-16 10:23:46
 Hexo 会帮你记录文件的更新日期，所以一般不需要手动指定 `updated` 属性。并且当你使用 `hexo new xxx` 指令生成文件时，Hexo 会帮你添加好 `title` 和 `date` 属性。因此这三个属性一般不需要手动设置。
 :::

- `comments` <Badge text="stable"/> - 是否开启评论功能
+- `comments` <Badge text="Stable"/> - 是否开启评论功能

 在 Stun 主题中，如果你启用了某个评论系统，默认是对所有通过 markdown 文件生成的页面（除首页，归档页，单个分类页，单个标签页以外的所有页面）生效。因此，你可以使用该属性单独设置某个页面 / 文章是否启用评论。

- `permalink` <Badge text="stable"/> - 覆盖文章网址
+- `permalink` <Badge text="Stable"/> - 覆盖文章网址

 使用该属性可以为某篇文章单独指定一个网址。

- `categories` <Badge text="stable"/> - 设置文章分类
+- `categories` <Badge text="Stable"/> - 设置文章分类

 你可以同时设置几个同级分类，例如：

@@ -170,7 +174,7 @@ categories:
 - [foo, bar, baz]
 ```

- `tags` <Badge text="stable"/> - 设置文章标签
+- `tags` <Badge text="Stable"/> - 设置文章标签

 标签**只能设置为同级的**。也就是说，如果你将标签设置为：

@@ -181,17 +185,17 @@ tags:

 那么它会被解析为 `foo,bar,baz`，也就是一个标签。

- `layout` <Badge text="not support" type="error"/> - 布局
+- `layout` <Badge text="Not Support" type="error"/> - 布局

 > Stun 主题目前暂时还不支持，最近的版本中考虑进行支持。

 还有几种 `Front-matter` 属性在 Hexo 文档中并没有出现（也许是 Hexo 的文档没有更新吧），但在 Hexo 官方提供的主题开发测试文件中出现。按照测试文件的要求，一个合格的 Hexo 主题都应该支持它们。这些属性如下：

- `link` <Badge text="stable"/> <Badge text="v1.1.3"/> - 链接
+- `link` <Badge text="Stable"/> <Badge text="v1.1.3"/> - 链接

 如果指定该属性，当点击该文章标题时，应该在新窗口或新的标签页中，打开所指定的链接地址。

- `photos` <Badge text="stable"/> <Badge text="v1.1.4"/> - 图片
+- `photos` <Badge text="Stable"/> <Badge text="v1.1.4"/> - 图片

 用于指定一些图片，这些图片会显示在文章中，Stun 主题将其显示在文章最顶部。使用如下：

@@ -206,7 +210,7 @@ photos:

 ![](https://raw.githubusercontent.com/liuyib/picBed/master/hexo-theme-stun/doc/20190724170139.png)

-为了优化这些图片的显示效果，Stun 主题提供了**瀑布流布局** <Badge text="beta" type="warning"/> <Badge text="v1.1.4"/>（**只对文章中通过 `Front-matter` 的 `photos` 属性指定的图片起作用**），修改主题配置文件：
+为了优化这些图片的显示效果，Stun 主题提供了**瀑布流布局** <Badge text="Stable"/> <Badge text="v1.1.4"/>（**只对文章中通过 `Front-matter` 的 `photos` 属性指定的图片起作用**），修改主题配置文件：

 ``` yaml
 gallery_waterfall:
@@ -226,7 +230,7 @@ gallery_waterfall:

 ::: tip
 - 启用瀑布流效果后，还可以再启用 [fancybox 效果](https://liuyib.github.io/hexo-theme-stun/zh-CN/advanced/assist.html#fancybox)。
- 通常利用 `photos` 这个属性，来建立一个相册页面 或 专门展示图片的文章。
+- 通常利用 `photos` 这个属性，来建立一个**相册页面** 或 **专门展示图片的文章**。
 :::

 ---
@@ -235,27 +239,27 @@ gallery_waterfall:

 > 这些属性在后面的文档中会有详细说明，这里可以跳过。

- `top_image: https://xxxx.jpg` <Badge text="stable"/>
+- `top_image: https://xxxx.jpg` <Badge text="Stable"/>

 用于设置文章顶部的大图。详情：[指定顶部图](https://liuyib.github.io/hexo-theme-stun/zh-CN/advanced/theme-config.html#指定顶部图)

- `toc_max_depth: 6` <Badge text="stable"/>
+- `toc_max_depth: 6` <Badge text="Stable"/>

 用于设置文章中，解析标题生成目录的最大深度。取值 `1 ~ 6`。例如：`toc_max_depth: 3`，只会解析文中的 `h1`, `h2`, `h3` 来生成目录。详情：[文章目录](https://liuyib.github.io/hexo-theme-stun/zh-CN/advanced/theme-config.html#文章目录)

- `math: true` <Badge text="stable"/> <Badge text="v1.1.2"/>
+- `math: true` <Badge text="Stable"/> <Badge text="v1.1.2"/>

 是否需要解析数学公式。详情：[数学公式](https://liuyib.github.io/hexo-theme-stun/zh-CN/advanced/third-part.html#数学公式)

- `toc: true` <Badge text="stable"/> <Badge text="v1.2.0"/>
+- `toc: true` <Badge text="Stable"/> <Badge text="v1.2.0"/>

 文章是否启用目录。会覆盖主题配置文件中的全局设置。详情：[文章目录](https://liuyib.github.io/hexo-theme-stun/zh-CN/advanced/theme-config.html#%E6%96%87%E7%AB%A0%E7%9B%AE%E5%BD%95)

- `reward: true` <Badge text="stable"/> <Badge text="v1.2.0"/>
+- `reward: true` <Badge text="Stable"/> <Badge text="v1.2.0"/>

 文章是否启用打赏功能。会覆盖主题配置文件中的全局设置。详情：[赞赏码](https://liuyib.github.io/hexo-theme-stun/zh-CN/advanced/theme-config.html#%E8%B5%9E%E8%B5%8F%E7%A0%81)

- `copyright: true` <Badge text="stable"/> <Badge text="v1.2.0"/>
+- `copyright: true` <Badge text="Stable"/> <Badge text="v1.2.0"/>

 文章是否启用版权信息。会覆盖主题配置文件中的全局设置。详情：[知识共享许可协议（cc）](https://liuyib.github.io/hexo-theme-stun/zh-CN/advanced/theme-config.html#%E7%9F%A5%E8%AF%86%E5%85%B1%E4%BA%AB%E8%AE%B8%E5%8F%AF%E5%8D%8F%E8%AE%AE%EF%BC%88cc%EF%BC%89)

@@ -265,15 +269,15 @@ gallery_waterfall:

 > 这些属性在后面的文档中会有详细说明，这里可以跳过。

- `top: true` <Badge text="stable"/>
+- `top: true` <Badge text="Stable"/>

 文章是否置顶。详情：[文章置顶](https://liuyib.github.io/hexo-theme-stun/zh-CN/advanced/theme-config.html#文章置顶)

- `no-emoji: true` <Badge text="disrelated" type="warning"/>
+- `no-emoji: true` <Badge text="Disrelated" type="warning"/>

 是否解析文章中的 emoji 代码。详情：[添加-emoji-支持](https://liuyib.github.io/hexo-theme-stun/zh-CN/advanced/third-part.html#%E6%B7%BB%E5%8A%A0-emoji-%E6%94%AF%E6%8C%81)

-## Favicon <Badge text="stable"/>
+## Favicon <Badge text="Stable"/>

 设置网站图标（favicon），修改主题配置文件：

@@ -285,9 +289,7 @@ favicon:
  # safari_pinned_tab: /imgs/logo-stun.svg
 ```

-有关 favicon 的相关知识，请访问：[https://developers.google.com/web/fundamentals/design-and-ux/browser-customization/](https://developers.google.com/web/fundamentals/design-and-ux/browser-customization/)
-
-## 网站顶部栏信息 <Badge text="stable"/>
+## 网站顶部栏信息 <Badge text="Stable"/>

 修改主题配置文件：

@@ -314,7 +316,7 @@ header:
 其中 `mask` 选项，即遮罩效果，从 `v1.1.1` 版本开始支持。`blur_effect` 选项，即模糊滤镜效果，从 `v1.1.1` 版本开始弃用。
 :::

-## 指定顶部图 <Badge text="stable"/>
+## 指定顶部图 <Badge text="Stable"/>

 如果想要为某个页面或某篇文章单独指定顶部图，你只需要在页面或文章 markdown 源文件的 [Front-matter](https://hexo.io/zh-cn/docs/front-matter) 中，添加 `top_image` 项，然后填入的图片 url 或路径即可。例如：

@@ -326,7 +328,7 @@ top_image: https://xxxxx.jpg
 ---
 ```

-## 知识共享许可协议（cc） <Badge text="stable"/>
+## 知识共享许可协议（cc） <Badge text="Stable"/>

 修改主题配置文件：

@@ -349,7 +351,7 @@ creative_commons:

 ![](https://raw.githubusercontent.com/liuyib/picBed/master/hexo-theme-stun/doc/20190619210339.png)

-## 返回顶部 <Badge text="beta" type="warn"/>
+## 返回顶部 <Badge text="Beta" type="warn"/>

 修改主题配置文件：

@@ -370,7 +372,7 @@ back2top:
    hover_color: "#fc6423"
 ```

-## 网站底部栏信息 <Badge text="stable"/>
+## 网站底部栏信息 <Badge text="Stable"/>

 修改主题配置文件：

@@ -433,7 +435,7 @@ footer:

 ![](https://raw.githubusercontent.com/liuyib/picBed/master/hexo-theme-stun/doc/20190623192514.png)

-## 侧边栏设置 <Badge text="beta" type="warn"/>
+## 侧边栏设置 <Badge text="Beta" type="warn"/>

 修改主题配置文件：

@@ -445,13 +447,15 @@ sidebar:
  position: right
  # 侧边栏距离顶部的距离（只支持 px 单位）
  offsetTop: 20px
-  # 侧边栏的宽度（建议：260px ~ 360px。支持所有 CSS 长度单位）
-  width: 300px
  # 是否显示水平分割线
  horizon_line: true
 ```

-## 侧边栏作者信息 <Badge text="stable"/>
+::: danger <Badge text="Deprecated" type="error"/>
+该配置项的 `width` 属性在 `v1.2.0` 版本中移除。
+:::
+
+## 侧边栏作者信息 <Badge text="Stable"/>

 修改主题配置文件：

@@ -473,7 +477,7 @@ author:
  motto: hello world
 ```

-## 社交链接 <Badge text="stable"/>
+## 社交链接 <Badge text="Stable"/>

 修改主题配置文件：

@@ -504,12 +508,12 @@ social_setting:
  enable: true
  # 是否只显示图标
  icon_only: true
-  # 社交链接之间的排列方式，取值同 CSS 的 "justify-content" 属性（兼容性自知）。
-  # 可选值：flex-start | center | flex-end | space-between 等。
-  # 更多取值请查看：https://developer.mozilla.org/zh-CN/docs/Web/CSS/justify-content/
-  text_align: center
 ```

+::: danger <Badge text="Deprecated" type="error"/>
+其中，配置项 `social_setting` 的 `text_align` 属性在 `v1.2.0` 版本中移除。
+:::
+
 当你添加一个默认没有的社交链接时，你需要进行国际化设置。这里以添加链接 `掘金` 为例，步骤如下：

 1. 修改主题配置文件
@@ -543,7 +547,7 @@ social:

 ![](https://raw.githubusercontent.com/liuyib/picBed/master/hexo-theme-stun/doc/20190717165333.png)

-## 文章目录 <Badge text="stable"/>
+## 文章目录 <Badge text="Stable"/>

 修改主题配置文件：

@@ -565,7 +569,7 @@ toc:

 其中 `expand_all` <Badge text="v1.0.2"/>。可以在文章的 markdown 源文件中的 `Front-matter` 里，指定 `toc: true / false` 来设置某篇文章是否启用目录。

-## 订阅设置 <Badge text="stable"/>
+## 订阅设置 <Badge text="Stable"/>

 设置邮件订阅和 RSS 订阅，修改主题配置文件：

@@ -597,7 +601,7 @@ feed:

 配置完成之后，访问你设置的订阅地址，如：`https://yoursite.com/atom.xml`，即可看到 RSS 订阅信息。

-## 文章阅读进度条 <Badge text="stable"/>
+## 文章阅读进度条 <Badge text="Stable"/>

 修改主题配置文件：

@@ -615,7 +619,7 @@ reading_progress:

 ![](https://raw.githubusercontent.com/liuyib/picBed/master/hexo-theme-stun/doc/20190619211446.png)

-## 文章顶部信息 <Badge text="stable"/>
+## 文章顶部信息 <Badge text="Stable"/>

 修改主题配置文件：

@@ -661,7 +665,7 @@ post_meta:

 效果如下：![](https://raw.githubusercontent.com/liuyib/picBed/master/hexo-theme-stun/doc/20190619210334.png)

-## 文章列表分页 <Badge text="stable"/> <Badge text="v1.0.3"/>
+## 文章列表分页 <Badge text="Stable"/> <Badge text="v1.0.3"/>

 ::: tip
 该功能从 `v1.0.1` 版本开始支持，在 `v1.0.3` 版本中对配置项进行了更改。
@@ -685,7 +689,7 @@ post_list:

 ![](https://raw.githubusercontent.com/liuyib/picBed/master/hexo-theme-stun/doc/20190713173927.png)

-## 文章列表封面图片 <Badge text="stable"/> <Badge text="v1.1.2"/>
+## 文章列表封面图片 <Badge text="Stable"/> <Badge text="v1.1.2"/>

 ::: tip
 该功能从 `v1.0.3` 版本开始支持，在 `v1.1.2` 版本中对配置项进行了更改。
@@ -704,7 +708,7 @@ post_list:

 ![](https://raw.githubusercontent.com/liuyib/picBed/master/hexo-theme-stun/doc/20190713173929.jpg)

-## 文章标签 <Badge text="stable"/> <Badge text="v1.0.3"/>
+## 文章标签 <Badge text="Stable"/> <Badge text="v1.0.3"/>

 ::: tip
 该功能从 `v1.0.0-beta.0` 版本开始支持，在 `v1.0.3` 版本中对配置项进行了更改。
@@ -722,7 +726,7 @@ post_widget:

 ![](https://raw.githubusercontent.com/liuyib/picBed/master/hexo-theme-stun/doc/20190713173926.png)

-## 文章结束提示信息 <Badge text="stable"/> <Badge text="v1.0.3"/>
+## 文章结束提示信息 <Badge text="Stable"/> <Badge text="v1.0.3"/>

 ::: tip
 该功能从 `v1.0.0-beta.1` 版本开始支持，在 `v1.0.3` 版本中对配置项进行了更改。
@@ -742,7 +746,7 @@ post_widget:

 效果如下：![](https://raw.githubusercontent.com/liuyib/picBed/master/hexo-theme-stun/doc/20190619210335.png)

-## 文章摘要 <Badge text="stable"/>
+## 文章摘要 <Badge text="Stable"/>

 如果想要保留文章摘要，需要**手动**在文章的 markdown 源文件中添加 `<!-- more -->` 标记。标记之前的部分都会被保留为文章摘要，显示在文章列表中。

@@ -758,7 +762,7 @@ auto_excerpt:

 > 由于自动保留摘要的效果并不理想，所以这里不建议开启。

-## 文章置顶 <Badge text="stable"/>
+## 文章置顶 <Badge text="Stable"/>

 想要使用文章置顶功能，首先你需要安装 hexo 插件 [hexo-generator-index-pin-top](https://github.com/netcan/hexo-generator-index-pin-top)，然后执行命令：

@@ -788,7 +792,7 @@ stick_top:

 ![](https://raw.githubusercontent.com/liuyib/picBed/master/hexo-theme-stun/doc/20190713174424.jpg)

-## 代码高亮 <Badge text="stable"/>
+## 代码高亮 <Badge text="Stable"/>

 设置代码高亮以及高亮样式，修改主题配置文件：

@@ -810,7 +814,7 @@ highlight_theme: light

 ![](https://raw.githubusercontent.com/liuyib/picBed/master/hexo-theme-stun/doc/20190608175154.png)

-## 代码溢出换行 <Badge text="stable"/>
+## 代码溢出换行 <Badge text="Stable"/>

 修改主题配置文件：

@@ -828,7 +832,7 @@ code_word_wrap: false

 ![](https://raw.githubusercontent.com/liuyib/picBed/master/hexo-theme-stun/doc/20190608214539.png)

-## 图片水平对齐方式 <Badge text="beta" type="warn"/>
+## 图片水平对齐方式 <Badge text="Beta" type="warn"/>

 设置文章中图片的水平对齐方式，修改主题配置文件：

@@ -858,31 +862,13 @@ img_horizonal_align:

 ![](https://raw.githubusercontent.com/liuyib/picBed/master/hexo-theme-stun/doc/20190608215838.png)

-## 文字与图片的垂直对齐方式 <Badge text="beta" type="warn"/>
-
-如果你没有手动设置**图片的水平对齐方式**（手动设置了请忽略此配置项），那么图片将支持和文字在同一行内显示。此时，如果你想设置文字与图片的垂直对齐方式，修改主题配置文件：
-
-``` yaml
-text_vertical_align_with_img: bottom
-```
-
-可选的值有：`top`, `middle`, `bottom`。默认值为 `bottom`。
-
-效果分别如下：
-
- `text_vertical_align_with_img: top`
-
-![](https://raw.githubusercontent.com/liuyib/picBed/master/hexo-theme-stun/doc/20190608232755.png)
-
- `text_vertical_align_with_img: middle`
+## 文字与图片的垂直对齐方式

-![](https://raw.githubusercontent.com/liuyib/picBed/master/hexo-theme-stun/doc/20190608232756.png)
-
- `text_vertical_align_with_img: bottom`
-
-![](https://raw.githubusercontent.com/liuyib/picBed/master/hexo-theme-stun/doc/20190608232754.png)
+::: danger <Badge text="Deprecated" type="error"/>
+该配置项，即 `text_vertical_align_with_img` 在 `v1.2.0` 版本中移除。
+:::

-## 赞赏码 <Badge text="stable"/>
+## 赞赏码 <Badge text="Stable"/>

 设置文章的赞赏码，修改主题配置文件：

@@ -901,7 +887,7 @@ reward:

 ![](https://raw.githubusercontent.com/liuyib/picBed/master/hexo-theme-stun/doc/20190608175556.png)

-## 标签云 <Badge text="beta" type="warn"/>
+## 标签云 <Badge text="Beta" type="warn"/>

 如果你启用了 `tags` 页面，想要对其进行设置，修改主题配置文件：

@@ -925,19 +911,19 @@ tag_cloud:

 1. 使用 HTML 中的 `img` 标签，通过 `style` 属性控制图片大小。
 2. 使用 hexo 提供的语法 `{% https://xxxxx.png width height %}`，填入宽、高即可设置大小。
-3. stun 主题提供了一个便捷的方法来指定图片大小，你只需要在图片路径后面添加 `?size=宽度x高度` <Badge text="stable"/> 后缀即可。例如：
+3. stun 主题提供了一个便捷的方法来指定图片大小，你只需要在图片路径后面添加 `?size=宽度x高度` <Badge text="Stable"/> 后缀即可。例如：

 ``` markdown
 ![](https://xxxxx.png?size=200x100)
 ```

-### 自定义样式 <Badge text="stable"/> <Badge text="v1.0.3"/>
+### 自定义样式 <Badge text="Stable"/> <Badge text="v1.0.3"/>

 如果你想修改主题的样式，推荐将样式代码添加到 `source/css/_custom` 目录下的 `index.styl` 文件中。这样，当主题更新时，不会覆盖你已经修改了的样式代码。

 > 当然，你也可以进行模块化分类：在该目录下新建样式文件，然后通过 `@import xxx` 语句在同目录下的 `index.styl` 文件中引入你新建的样式文件。

-### 标识外部链接  <Badge text="stable"/> <Badge text="v1.1.3"/>
+### 标识外部链接  <Badge text="Stable"/> <Badge text="v1.1.3"/>

 从 `v1.1.3` 版本开始，除了侧边栏，顶部栏以外的区域，Stun 主题默认会在具有 `target="_blank"` 属性的链接后面加上一个 Icon，用于标识这是一个外部链接。

@@ -954,3 +940,55 @@ external_link:
    # 请使用引号包括值（支持所有 CSS 单位）
    color: "#aaa"
 ```
+
+## FancyBox <Badge text="stable"/> <Badge text="v1.1.4"/>
+
+如果想要使用 fancybox 功能，只需要修改主题配置文件即可：
+
+``` yaml
+fancybox: true
+```
+
+效果如下：
+
+![](https://raw.githubusercontent.com/liuyib/picBed/master/hexo-theme-stun/doc/20190724173526.png)
+
+你可以在这里在线体验效果：[https://liuyib.github.io/2019/05/15/hello-stun/index.html](https://liuyib.github.io/2019/05/15/hello-stun/index.html)
+
+### 图片放大效果 <Badge text="Stable"/> <Badge text="v1.2.0"/>
+
+从 `v1.2.0` 版本开始，Stun 主题开始支持图片点击放大的效果（无第三方依赖）。你可以配置该功能，修改主题配置文件：
+
+``` yaml
+zoom_image:
+  # 是否启用
+  enable: true
+  # 遮罩的颜色
+  mask_color: "rgba(0,0,0,0.6)"
+```
+
+::: tip
+如果你启用了 fancybox，那么主题会优先使用 fancybox 效果。
+:::
+
+### 图片懒加载 <Badge text="beta" type="warning"/> <Badge text="v1.2.0"/>
+
+从 `v1.2.0` 版本开始，Stun 主题开始支持图片懒加载，但是**该功能只对文章页面起作用**。你可以配置该功能，修改主题配置文件：
+
+``` yaml
+lazyload:
+  # 是否启用
+  enable: true
+  # 图片未加载前的占位符，可选值有：gif 和 block
+  placeholder: gif
+```
+
+占位符取不同的值效果如下：
+
+- `gif`
+
+![](https://raw.githubusercontent.com/liuyib/picBed/master/hexo-theme-stun/doc/20190801204631.png)
+
+- `block`
+
+![](https://raw.githubusercontent.com/liuyib/picBed/master/hexo-theme-stun/doc/20190801204629.png)
--- a/layout/_common/config.pug
+++ b/layout/_common/config.pug
@@ -35,6 +35,11 @@
    gallery_waterfall = JSON.stringify(theme.gallery_waterfall);
  }

+  var lazyload = 'undefined';
+  if (theme.lazyload.enable) {
+    lazyload = JSON.stringify(theme.lazyload);
+  }
+
  var zoom_image = 'undefined';
  if (theme.zoom_image.enable) {
    zoom_image = JSON.stringify(theme.zoom_image);
@@ -70,6 +75,7 @@ script.
    fancybox: !{ theme.fancybox },
    zoom_image: !{ zoom_image },
    gallery_waterfall: !{ gallery_waterfall },
+    lazyload: !{ lazyload },
    external_link: !{ external_link },
    shortcuts: !{ shortcuts },
    notification: !{ notification }

--- a/layout/_scripts/cdn.pug
+++ b/layout/_scripts/cdn.pug
@@ -16,6 +16,9 @@ if theme.fancybox
 if theme.gallery_waterfall
  script(src="https://cdn.jsdelivr.net/npm/masonry-layout@4.2.2/dist/masonry.pkgd.min.js")

+if theme.lazyload
+  script(src="https://cdn.jsdelivr.net/npm/lazyload@2.0.0-rc.2/lazyload.min.js")
+
 if theme.canvas_ribbon && theme.canvas_ribbon.enable
  - var ribbon = theme.canvas_ribbon;
  script(src=theme.cdn.canvas_ribbon size=ribbon.size alpha=ribbon.alpha zIndex=ribbon.zIndex)

--- a/source/css/_components/index.styl
+++ b/source/css/_components/index.styl
@@ -3,6 +3,7 @@
 @import './back2top.styl' if (hexo-config('back2top.enable'))
 @import './external-link.styl' if (hexo-config('external_link.icon.enable'))
 @import './fancybox.styl' if (hexo-config('fancybox'))
+@import './lazyload.styl' if (hexo-config('lazyload.enable'))
 @import './recent-posts.styl'
 @import './pagination.styl'
 @import './comments.styl'

--- a/source/css/_components/lazyload.styl
+++ b/source/css/_components/lazyload.styl
+.lazyload
+  &.block
+    box-sizing: content-box
+    min-width: 30px
+    min-height: 30px
--- a/source/images/loading.svg
+++ b/source/images/loading.svg
+<svg class="lds-spinner" width="32px"  height="32px"  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" style="background: none;"><g transform="rotate(0 50 50)">
+  <rect x="46.5" y="9" rx="37.2" ry="7.2" width="7" height="16" fill="#888888">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.9230769230769231s" repeatCount="indefinite"></animate>
+  </rect>
+</g><g transform="rotate(27.692307692307693 50 50)">
+  <rect x="46.5" y="9" rx="37.2" ry="7.2" width="7" height="16" fill="#888888">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.8461538461538461s" repeatCount="indefinite"></animate>
+  </rect>
+</g><g transform="rotate(55.38461538461539 50 50)">
+  <rect x="46.5" y="9" rx="37.2" ry="7.2" width="7" height="16" fill="#888888">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.7692307692307693s" repeatCount="indefinite"></animate>
+  </rect>
+</g><g transform="rotate(83.07692307692308 50 50)">
+  <rect x="46.5" y="9" rx="37.2" ry="7.2" width="7" height="16" fill="#888888">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.6923076923076923s" repeatCount="indefinite"></animate>
+  </rect>
+</g><g transform="rotate(110.76923076923077 50 50)">
+  <rect x="46.5" y="9" rx="37.2" ry="7.2" width="7" height="16" fill="#888888">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.6153846153846154s" repeatCount="indefinite"></animate>
+  </rect>
+</g><g transform="rotate(138.46153846153845 50 50)">
+  <rect x="46.5" y="9" rx="37.2" ry="7.2" width="7" height="16" fill="#888888">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.5384615384615384s" repeatCount="indefinite"></animate>
+  </rect>
+</g><g transform="rotate(166.15384615384616 50 50)">
+  <rect x="46.5" y="9" rx="37.2" ry="7.2" width="7" height="16" fill="#888888">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.46153846153846156s" repeatCount="indefinite"></animate>
+  </rect>
+</g><g transform="rotate(193.84615384615384 50 50)">
+  <rect x="46.5" y="9" rx="37.2" ry="7.2" width="7" height="16" fill="#888888">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.38461538461538464s" repeatCount="indefinite"></animate>
+  </rect>
+</g><g transform="rotate(221.53846153846155 50 50)">
+  <rect x="46.5" y="9" rx="37.2" ry="7.2" width="7" height="16" fill="#888888">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.3076923076923077s" repeatCount="indefinite"></animate>
+  </rect>
+</g><g transform="rotate(249.23076923076923 50 50)">
+  <rect x="46.5" y="9" rx="37.2" ry="7.2" width="7" height="16" fill="#888888">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.23076923076923078s" repeatCount="indefinite"></animate>
+  </rect>
+</g><g transform="rotate(276.9230769230769 50 50)">
+  <rect x="46.5" y="9" rx="37.2" ry="7.2" width="7" height="16" fill="#888888">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.15384615384615385s" repeatCount="indefinite"></animate>
+  </rect>
+</g><g transform="rotate(304.61538461538464 50 50)">
+  <rect x="46.5" y="9" rx="37.2" ry="7.2" width="7" height="16" fill="#888888">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.07692307692307693s" repeatCount="indefinite"></animate>
+  </rect>
+</g><g transform="rotate(332.3076923076923 50 50)">
+  <rect x="46.5" y="9" rx="37.2" ry="7.2" width="7" height="16" fill="#888888">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="0s" repeatCount="indefinite"></animate>
+  </rect>
+</g></svg>
\ No newline at end of file
--- a/source/js/stun-boot.js
+++ b/source/js/stun-boot.js
@@ -3,8 +3,7 @@ $(document).ready(function () {
  CONFIG.reward && Stun.utils.registerShowReward();
  CONFIG.back2top && Stun.utils.back2top();
  CONFIG.gallery_waterfall && Stun.utils.galleryWaterFall();
-  
-  // CONFIG.lazyload && Stun.utils.lazyLoadImages();
+  CONFIG.lazyload && Stun.utils.lazyLoadImages();
  
  if (CONFIG.external_link) {
    var WRAPPER = '.archive-inner, .post-title, #footer';

--- a/source/js/utils.js
+++ b/source/js/utils.js
@@ -213,17 +213,9 @@ Stun.utils = Stun.$u = {
      });
    });
  },
+  // Lazy load the images of post.
  lazyLoadImages: function () {
-    $('.content img').not(':hidden').each(function () {
-      var $img = $(this);
-      var PLACEHOLDER =
-        'data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=';
-      
-      $img.attr('class', 'lazyload');
-      $img.attr('data-original', $img.attr('src'));
-      $img.attr('src', PLACEHOLDER);
-    });
-    $('.content').find('img').lazyload();
+    $('img.lazyload').lazyload();
  },
  // Add a mark icon to the link with `target="_blank"` attribute.
  addIconToExternalLink: function (container) {