From 0699e5199e3abb61d03f43ff7fcb609e43e65f7c Mon Sep 17 00:00:00 2001 From: liuyib <1656081615@qq.com> Date: Thu, 1 Aug 2019 20:33:08 +0800 Subject: [PATCH] feat: Add lazyload of images docs: Update --- README.md | 2 +- README_en_US.md | 2 +- _config.yml | 7 + docs/zh-CN/advanced/assist.md | 14 -- docs/zh-CN/advanced/theme-config.md | 216 ++++++++++++++++----------- layout/_common/config.pug | 6 + layout/_scripts/cdn.pug | 3 + source/css/_components/index.styl | 1 + source/css/_components/lazyload.styl | 5 + source/images/loading.svg | 53 +++++++ source/js/stun-boot.js | 3 +- source/js/utils.js | 12 +- 12 files changed, 207 insertions(+), 117 deletions(-) create mode 100644 source/css/_components/lazyload.styl create mode 100644 source/images/loading.svg diff --git a/README.md b/README.md index 0b6d84d..4baa08d 100644 --- a/README.md +++ b/README.md @@ -86,7 +86,7 @@ $ git pull | IE
IE | Edge
Edge | Firefox
Firefox | Chrome
Chrome | Safari
Safari | Opera
Opera | | :---: | :---: | :---: |:---: | :---: | :---: | -| Not Support | 12+ | 28+ | 21+ | 6.1+ | 12.1+ | +| 9+ | 12+ | 41+ | 42+ | 10+ | 29+ | ## :handshake: 开源协议 diff --git a/README_en_US.md b/README_en_US.md index 01a19cf..fa50a09 100644 --- 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- | IE
IE | Edge
Edge | Firefox
Firefox | Chrome
Chrome | Safari
Safari | Opera
Opera | | :---: | :---: | :---: |:---: | :---: | :---: | -| Not Support | 12+ | 28+ | 21+ | 6.1+ | 12.1+ | +| 9+ | 12+ | 41+ | 42+ | 10+ | 29+ | ## :handshake: License diff --git a/_config.yml b/_config.yml index 962d580..5800b1f 100644 --- 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 diff --git a/docs/zh-CN/advanced/assist.md b/docs/zh-CN/advanced/assist.md index cefe1ce..ea07c2c 100644 --- a/docs/zh-CN/advanced/assist.md +++ b/docs/zh-CN/advanced/assist.md @@ -1,19 +1,5 @@ # 辅助功能 -## FancyBox - -如果想要使用 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) - ## 快捷键 - 快速切换文章 diff --git a/docs/zh-CN/advanced/theme-config.md b/docs/zh-CN/advanced/theme-config.md index a12b9cd..32f63b7 100644 --- 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` 版本开始支持。 -- 稳定的配置使用 标明，表示基本不会变动。不稳定的配置使用 标明，表示未来可能会变动甚至删除。目前还不支持的配置使用 标明。最早开始支持的版本号使用 标明。与主题无关的配置项使用 标明。 +- 稳定的配置使用 标明，表示基本不会变动。不稳定的配置使用 标明，表示未来可能会变动甚至删除。目前还不支持的配置使用 标明。被废弃的配置使用 标明。最早开始支持的版本号使用 标明。与主题无关的配置项使用 标明。 ::: ## 配置文件 @@ -13,14 +13,18 @@ - Hexo 根目录下的 `_config.yml`。这是站点配置文件，里面的配置作用于整个网站。 - Stun 根目录下的 `_config.yml`。这是主题配置文件，里面的配置只对当前主题生效。 -## 保留主题配置数据 +## 平滑升级 -如果你不想每次升级主题时，都要进行如下重复的操作：先将主题配置文件复制一份，等主题升级后再复制回去。那么你可以进行以下设置：将主题配置文件复制到 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) -## 顶部菜单栏 +## 顶部菜单栏 网站顶部菜单栏默认有 `/` 和 `/archives` 两个路径，它们分别对应于网站首页和归档页。如果你想添加：`categories`、`tags`、`about` 等页面，你需要进行以下操作： @@ -68,7 +72,7 @@ menu: > 如果只添加路径，没有添加图标名称，会使用默认图标进行显示。 -你可以通过修改 `menu_settings` 配置项来控制菜单项的图标或文字是否显示： +你可以通过修改 `menu_settings` 配置项来控制菜单项的图标或文字是否显示： ``` yaml menu_settings: @@ -86,11 +90,11 @@ menu_settings: $ hexo new page xxx # xxx 表示页面名称，需要和对应的路径名称保持一致 ``` -执行这条命令后，会在以下目录生成文件：`source/xxx/index.md` +执行这条命令后，会在以下目录生成文件：`source/xxx/index.md`，然后重启 Hexo 服务器即可。 -## 自定义页面 +## 自定义页面 -如果你想在网站顶部菜单栏中添加自定义页面，请进行以下操作： +如果你想在网站顶部菜单栏中添加自定义页面（除**分类页**、**标签页**、**关于页**以外的页面），请进行以下操作： - 添加路径 - 添加图标 @@ -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` - 标题 -- `date` - 文件建立日期 -- `updated` - 文件更新日期 +- `title` - 标题 +- `date` - 文件建立日期 +- `updated` - 文件更新日期 例如： @@ -144,15 +148,15 @@ updated: 2019-5-16 10:23:46 Hexo 会帮你记录文件的更新日期，所以一般不需要手动指定 `updated` 属性。并且当你使用 `hexo new xxx` 指令生成文件时，Hexo 会帮你添加好 `title` 和 `date` 属性。因此这三个属性一般不需要手动设置。 ::: -- `comments` - 是否开启评论功能 +- `comments` - 是否开启评论功能 在 Stun 主题中，如果你启用了某个评论系统，默认是对所有通过 markdown 文件生成的页面（除首页，归档页，单个分类页，单个标签页以外的所有页面）生效。因此，你可以使用该属性单独设置某个页面 / 文章是否启用评论。 -- `permalink` - 覆盖文章网址 +- `permalink` - 覆盖文章网址 使用该属性可以为某篇文章单独指定一个网址。 -- `categories` - 设置文章分类 +- `categories` - 设置文章分类 你可以同时设置几个同级分类，例如： @@ -170,7 +174,7 @@ categories: - [foo, bar, baz] ``` -- `tags` - 设置文章标签 +- `tags` - 设置文章标签 标签**只能设置为同级的**。也就是说，如果你将标签设置为： @@ -181,17 +185,17 @@ tags: 那么它会被解析为 `foo,bar,baz`，也就是一个标签。 -- `layout` - 布局 +- `layout` - 布局 > Stun 主题目前暂时还不支持，最近的版本中考虑进行支持。 还有几种 `Front-matter` 属性在 Hexo 文档中并没有出现（也许是 Hexo 的文档没有更新吧），但在 Hexo 官方提供的主题开发测试文件中出现。按照测试文件的要求，一个合格的 Hexo 主题都应该支持它们。这些属性如下： -- `link` - 链接 +- `link` - 链接 如果指定该属性，当点击该文章标题时，应该在新窗口或新的标签页中，打开所指定的链接地址。 -- `photos` - 图片 +- `photos` - 图片 用于指定一些图片，这些图片会显示在文章中，Stun 主题将其显示在文章最顶部。使用如下： @@ -206,7 +210,7 @@ photos: ![](https://raw.githubusercontent.com/liuyib/picBed/master/hexo-theme-stun/doc/20190724170139.png) -为了优化这些图片的显示效果，Stun 主题提供了**瀑布流布局** （**只对文章中通过 `Front-matter` 的 `photos` 属性指定的图片起作用**），修改主题配置文件： +为了优化这些图片的显示效果，Stun 主题提供了**瀑布流布局** （**只对文章中通过 `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` +- `top_image: https://xxxx.jpg` 用于设置文章顶部的大图。详情：[指定顶部图](https://liuyib.github.io/hexo-theme-stun/zh-CN/advanced/theme-config.html#指定顶部图) -- `toc_max_depth: 6` +- `toc_max_depth: 6` 用于设置文章中，解析标题生成目录的最大深度。取值 `1 ~ 6`。例如：`toc_max_depth: 3`，只会解析文中的 `h1`, `h2`, `h3` 来生成目录。详情：[文章目录](https://liuyib.github.io/hexo-theme-stun/zh-CN/advanced/theme-config.html#文章目录) -- `math: true` +- `math: true` 是否需要解析数学公式。详情：[数学公式](https://liuyib.github.io/hexo-theme-stun/zh-CN/advanced/third-part.html#数学公式) -- `toc: true` +- `toc: true` 文章是否启用目录。会覆盖主题配置文件中的全局设置。详情：[文章目录](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` +- `reward: true` 文章是否启用打赏功能。会覆盖主题配置文件中的全局设置。详情：[赞赏码](https://liuyib.github.io/hexo-theme-stun/zh-CN/advanced/theme-config.html#%E8%B5%9E%E8%B5%8F%E7%A0%81) -- `copyright: true` +- `copyright: true` 文章是否启用版权信息。会覆盖主题配置文件中的全局设置。详情：[知识共享许可协议（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` +- `top: true` 文章是否置顶。详情：[文章置顶](https://liuyib.github.io/hexo-theme-stun/zh-CN/advanced/theme-config.html#文章置顶) -- `no-emoji: true` +- `no-emoji: true` 是否解析文章中的 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 +## Favicon 设置网站图标（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/) - -## 网站顶部栏信息 +## 网站顶部栏信息 修改主题配置文件： @@ -314,7 +316,7 @@ header: 其中 `mask` 选项，即遮罩效果，从 `v1.1.1` 版本开始支持。`blur_effect` 选项，即模糊滤镜效果，从 `v1.1.1` 版本开始弃用。 ::: -## 指定顶部图 +## 指定顶部图 如果想要为某个页面或某篇文章单独指定顶部图，你只需要在页面或文章 markdown 源文件的 [Front-matter](https://hexo.io/zh-cn/docs/front-matter) 中，添加 `top_image` 项，然后填入的图片 url 或路径即可。例如： @@ -326,7 +328,7 @@ top_image: https://xxxxx.jpg --- ``` -## 知识共享许可协议（cc） +## 知识共享许可协议（cc） 修改主题配置文件： @@ -349,7 +351,7 @@ creative_commons: ![](https://raw.githubusercontent.com/liuyib/picBed/master/hexo-theme-stun/doc/20190619210339.png) -## 返回顶部 +## 返回顶部 修改主题配置文件： @@ -370,7 +372,7 @@ back2top: hover_color: "#fc6423" ``` -## 网站底部栏信息 +## 网站底部栏信息 修改主题配置文件： @@ -433,7 +435,7 @@ footer: ![](https://raw.githubusercontent.com/liuyib/picBed/master/hexo-theme-stun/doc/20190623192514.png) -## 侧边栏设置 +## 侧边栏设置 修改主题配置文件： @@ -445,13 +447,15 @@ sidebar: position: right # 侧边栏距离顶部的距离（只支持 px 单位） offsetTop: 20px - # 侧边栏的宽度（建议：260px ~ 360px。支持所有 CSS 长度单位） - width: 300px # 是否显示水平分割线 horizon_line: true ``` -## 侧边栏作者信息 +::: danger +该配置项的 `width` 属性在 `v1.2.0` 版本中移除。 +::: + +## 侧边栏作者信息 修改主题配置文件： @@ -473,7 +477,7 @@ author: motto: hello world ``` -## 社交链接 +## 社交链接 修改主题配置文件： @@ -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 +其中，配置项 `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) -## 文章目录 +## 文章目录 修改主题配置文件： @@ -565,7 +569,7 @@ toc: 其中 `expand_all` 。可以在文章的 markdown 源文件中的 `Front-matter` 里，指定 `toc: true / false` 来设置某篇文章是否启用目录。 -## 订阅设置 +## 订阅设置 设置邮件订阅和 RSS 订阅，修改主题配置文件： @@ -597,7 +601,7 @@ feed: 配置完成之后，访问你设置的订阅地址，如：`https://yoursite.com/atom.xml`，即可看到 RSS 订阅信息。 -## 文章阅读进度条 +## 文章阅读进度条 修改主题配置文件： @@ -615,7 +619,7 @@ reading_progress: ![](https://raw.githubusercontent.com/liuyib/picBed/master/hexo-theme-stun/doc/20190619211446.png) -## 文章顶部信息 +## 文章顶部信息 修改主题配置文件： @@ -661,7 +665,7 @@ post_meta: 效果如下：![](https://raw.githubusercontent.com/liuyib/picBed/master/hexo-theme-stun/doc/20190619210334.png) -## 文章列表分页 +## 文章列表分页 ::: 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) -## 文章列表封面图片 +## 文章列表封面图片 ::: 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) -## 文章标签 +## 文章标签 ::: 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) -## 文章结束提示信息 +## 文章结束提示信息 ::: 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) -## 文章摘要 +## 文章摘要 如果想要保留文章摘要，需要**手动**在文章的 markdown 源文件中添加 `` 标记。标记之前的部分都会被保留为文章摘要，显示在文章列表中。 @@ -758,7 +762,7 @@ auto_excerpt: > 由于自动保留摘要的效果并不理想，所以这里不建议开启。 -## 文章置顶 +## 文章置顶 想要使用文章置顶功能，首先你需要安装 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) -## 代码高亮 +## 代码高亮 设置代码高亮以及高亮样式，修改主题配置文件： @@ -810,7 +814,7 @@ highlight_theme: light ![](https://raw.githubusercontent.com/liuyib/picBed/master/hexo-theme-stun/doc/20190608175154.png) -## 代码溢出换行 +## 代码溢出换行 修改主题配置文件： @@ -828,7 +832,7 @@ code_word_wrap: false ![](https://raw.githubusercontent.com/liuyib/picBed/master/hexo-theme-stun/doc/20190608214539.png) -## 图片水平对齐方式 +## 图片水平对齐方式 设置文章中图片的水平对齐方式，修改主题配置文件： @@ -858,31 +862,13 @@ img_horizonal_align: ![](https://raw.githubusercontent.com/liuyib/picBed/master/hexo-theme-stun/doc/20190608215838.png) -## 文字与图片的垂直对齐方式 - -如果你没有手动设置**图片的水平对齐方式**（手动设置了请忽略此配置项），那么图片将支持和文字在同一行内显示。此时，如果你想设置文字与图片的垂直对齐方式，修改主题配置文件： - -``` 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 +该配置项，即 `text_vertical_align_with_img` 在 `v1.2.0` 版本中移除。 +::: -## 赞赏码 +## 赞赏码 设置文章的赞赏码，修改主题配置文件： @@ -901,7 +887,7 @@ reward: ![](https://raw.githubusercontent.com/liuyib/picBed/master/hexo-theme-stun/doc/20190608175556.png) -## 标签云 +## 标签云 如果你启用了 `tags` 页面，想要对其进行设置，修改主题配置文件： @@ -925,19 +911,19 @@ tag_cloud: 1. 使用 HTML 中的 `img` 标签，通过 `style` 属性控制图片大小。 2. 使用 hexo 提供的语法 `{% https://xxxxx.png width height %}`，填入宽、高即可设置大小。 -3. stun 主题提供了一个便捷的方法来指定图片大小，你只需要在图片路径后面添加 `?size=宽度x高度` 后缀即可。例如： +3. stun 主题提供了一个便捷的方法来指定图片大小，你只需要在图片路径后面添加 `?size=宽度x高度` 后缀即可。例如： ``` markdown ![](https://xxxxx.png?size=200x100) ``` -### 自定义样式 +### 自定义样式 如果你想修改主题的样式，推荐将样式代码添加到 `source/css/_custom` 目录下的 `index.styl` 文件中。这样，当主题更新时，不会覆盖你已经修改了的样式代码。 > 当然，你也可以进行模块化分类：在该目录下新建样式文件，然后通过 `@import xxx` 语句在同目录下的 `index.styl` 文件中引入你新建的样式文件。 -### 标识外部链接 +### 标识外部链接 从 `v1.1.3` 版本开始，除了侧边栏，顶部栏以外的区域，Stun 主题默认会在具有 `target="_blank"` 属性的链接后面加上一个 Icon，用于标识这是一个外部链接。 @@ -954,3 +940,55 @@ external_link: # 请使用引号包括值（支持所有 CSS 单位） color: "#aaa" ``` + +## FancyBox + +如果想要使用 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) + +### 图片放大效果 + +从 `v1.2.0` 版本开始，Stun 主题开始支持图片点击放大的效果（无第三方依赖）。你可以配置该功能，修改主题配置文件： + +``` yaml +zoom_image: + # 是否启用 + enable: true + # 遮罩的颜色 + mask_color: "rgba(0,0,0,0.6)" +``` + +::: tip +如果你启用了 fancybox，那么主题会优先使用 fancybox 效果。 +::: + +### 图片懒加载 + +从 `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) diff --git a/layout/_common/config.pug b/layout/_common/config.pug index ee873a4..ad11104 100644 --- 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 } diff --git a/layout/_scripts/cdn.pug b/layout/_scripts/cdn.pug index 0224de3..d10ad13 100644 --- 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) diff --git a/source/css/_components/index.styl b/source/css/_components/index.styl index 0092006..d208f23 100644 --- 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' diff --git a/source/css/_components/lazyload.styl b/source/css/_components/lazyload.styl new file mode 100644 index 0000000..62a79f7 --- /dev/null +++ b/source/css/_components/lazyload.styl @@ -0,0 +1,5 @@ +.lazyload + &.block + box-sizing: content-box + min-width: 30px + min-height: 30px diff --git a/source/images/loading.svg b/source/images/loading.svg new file mode 100644 index 0000000..4ae992c --- /dev/null +++ b/source/images/loading.svg @@ -0,0 +1,53 @@ + \ No newline at end of file diff --git a/source/js/stun-boot.js b/source/js/stun-boot.js index 8dee235..800ac87 100644 --- 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'; diff --git a/source/js/utils.js b/source/js/utils.js index a438250..7cfa668 100644 --- 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) { -- GitLab