Merge pull request #9 from xaoxuu/master

up
master
H 4 years ago committed by GitHub
commit 8febc7f6d0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 82
      .github/ISSUE_TEMPLATE/1-a.md
  2. 80
      .github/ISSUE_TEMPLATE/1-b.md
  3. 77
      .github/ISSUE_TEMPLATE/bug-report.md
  4. 22
      .github/ISSUE_TEMPLATE/feature-request.md
  5. 15
      .github/ISSUE_TEMPLATE/other-issue.md
  6. 55
      .github/ISSUE_TEMPLATE/question-report.md
  7. 30
      _config.yml
  8. 8
      layout/_meta/counter.ejs
  9. 9
      layout/_partial/head.ejs
  10. 38
      layout/_partial/header.ejs
  11. 32
      layout/_partial/scripts.ejs
  12. 11
      layout/_third-party/comments.ejs
  13. 53
      layout/_third-party/fancybox.ejs
  14. 4
      scripts/tags/fancybox.js
  15. 21
      scripts/tags/image.js
  16. 4
      scripts/tags/media.js
  17. 2
      source/css/_layout/article.styl
  18. 26
      source/css/_tag-plugins/media.styl
  19. 79
      source/css/_third-party/fancybox.styl
  20. 6
      source/css/_third-party/valine.styl
  21. 1168
      source/js/valine.js

@ -0,0 +1,82 @@
---
name: 帮助流程A:使用遇到问题(主题未经修改)
about: 此流程适用于直接使用主题搭建博客的用户,在仅仅修改了主题配置文件、Hexo配置文件、增加了自己的文章,这种情况下无法成功搭建或者部署的问题。
title: ''
labels: 'help-a'
assignees: ''
---
<!-- 如果您删除此模版,我们可能会在不进行调查的情况下关闭您的 Issue。 -->
## 自检报告
分类:使用遇到问题(主题未经修改)
<!-- 如果您未按照模板中的步骤进行自检,我们可能不会阅读您的 Issue。 -->
<!-- 90% 的问题可通过自检解决。 -->
<!-- Change [ ] to [x] to select (将 [ ] 换成 [x] 来完成选择) -->
### 第一步 <!-- 60% 的问题通过这一步就解决了。 -->
- [ ] 在 [Volantis](https://volantis.js.org) 文档中搜索关键词,并未找到相关内容。
- [ ] 在 [Hexo](https://hexo.io/zh-cn/docs/) 官方文档 中搜索关键词,并未找到相关内容。
### 第二步 <!-- 30% 的问题通过这一步就解决了。 -->
下载[文档源码](https://github.com/xaoxuu/volantis-docs/),然后下载主题源码到 themes/volantis ,执行 `npm install` 安装依赖包,执行 `hexo s` 运行,查看结果是否存在相同的问题。
- A. 如果正常,请一步一步将配置文件修改为您原来的设定,直至找到出问题的地方。
- B. 如果依然存在异常,请检查 Hexo 环境配置,或者重新安装 Hexo。
- [ ] 我已完成上述操作,结果是:____
### 第三步
- [ ] 我已经将主题升级到最新版本。
## 问题描述
<!-- 尽可能详细地描述您的问题 -->
## 环境信息
<!-- 请务必提供以下信息 -->
### 复现地址:
<!-- 如果使用文档官网源码本地运行也存在异常,可以不用提供复现地址。 -->
### 截图:
<!-- 不同系统、浏览器效果可能不同,提供截图有助于发现问题所在。 -->
### 浏览器、操作系统
### 站点配置文件
<!-- 只粘贴 `blog/_config.yml` 中修改过的部分 -->
```yml
```
### 主题配置文件
<!-- 只粘贴 `themes/volantis/_config.yml` 中修改过的部分 -->
```yml
```
#### 更多信息
<!-- 要求提供时再回来补全即可 -->
#### node.js & npm
<!-- 粘贴 `node -v && npm -v` 输出的信息 -->
```
```
#### package.json
<!-- 粘贴 `npm ls --depth 0` 输出的信息 -->
```
```

@ -0,0 +1,80 @@
---
name: 帮助流程B:使用遇到问题(主题文件 ejs、js、css、第三方插件等有修改)
about: 此流程适用于 fork 主题并对主题文件(ejs、js、css 等)进行了修改后搭建博客的用户,无法成功搭建或者部署的问题。
title: ''
labels: 'help-b'
assignees: ''
---
<!-- 如果您删除此模版,我们可能会在不进行调查的情况下关闭您的 Issue。 -->
## 自检报告
分类:使用遇到问题(主题文件 ejs、js、css、第三方插件等有修改)
<!-- 如果您未按照模板中的步骤进行自检,我们可能不会阅读您的 Issue。 -->
<!-- 80% 的问题可通过自检解决。 -->
<!-- Change [ ] to [x] to select (将 [ ] 换成 [x] 来完成选择) -->
### 第一步 <!-- 80% 的问题通过这一步就解决了。 -->
查看未经修改的主题是否也存在此问题:
- A. 未经修改的主题也存在此问题,请使用 issue 模板「帮助流程A. 使用遇到问题(主题未经修改)」。
- B. 未经修改的主题不存在此问题,在 git 历史中新建分支还原修改,直至找到出问题的地方。
- [ ] 我已完成上述操作,结果是:____
### 第二步
这部分内容是否与第三方插件有关?
- A. 是主题文档中提到过的第三方插件(意味着有主动兼容),请在问题描述中描述清楚。
- B. 是主题文档中没有提到过的第三方插件,可能存在没有兼容的情况,请使用 issue 模板「提交一个建议」。
## 问题描述
<!-- 尽可能详细地描述您的问题 -->
## 环境信息
<!-- 请务必提供以下信息 -->
### 复现地址:
<!-- 如果使用文档官网源码本地运行也存在异常,可以不用提供复现地址。 -->
### 截图:
<!-- 不同系统、浏览器效果可能不同,提供截图有助于发现问题所在。 -->
### 浏览器、操作系统
### 站点配置文件
<!-- 只粘贴 `blog/_config.yml` 中修改过的部分 -->
```yml
```
### 主题配置文件
<!-- 只粘贴 `themes/volantis/_config.yml` 中修改过的部分 -->
```yml
```
#### 更多信息
<!-- 要求提供时再回来补全即可 -->
#### node.js & npm
<!-- 粘贴 `node -v && npm -v` 输出的信息 -->
```
```
#### package.json
<!-- 粘贴 `npm ls --depth 0` 输出的信息 -->
```
```

@ -1,67 +1,72 @@
---
name: Bug Report
about: Something isn't working as expected
name: 反馈一个明确的BUG
about: 此流程适用于您已经定位到了问题的具体所在,不需要协助定位问题。希望开发者予以修正。
title: ''
labels: 'new,question'
labels: 'bug-report'
assignees: ''
---
If you delete this template, we may close your issue without conducting an investigation.
如果您删除此模版,我们可能会在不进行调查的情况下关闭您的 Issue。
<!-- 如果您删除此模版,我们可能会在不进行调查的情况下关闭您的 Issue。 -->
Please check if your Issue fulfills the following requirements. This will guide you to resolve the issue quickly.
请务必确认您在提交此 Issue 前已经查看并完成了下列检查单中的所有事项。这会指导您快速地解决问题。
## BUG描述
## Issue Checklist <!-- 我确认我已经查看了 -->
<!-- Change [ ] to [x] to select (将 [ ] 换成 [x] 来选择) -->
<!-- 尽可能详细地描述您的问题,包括预期与实际表现的区别 -->
- [ ] I am using [the latest](https://github.com/xaoxuu/hexo-theme-volantis/releases/latest) version of Volantis.
- [ ] I have reviewed [guidelines for Volantis](https://volantis.js.org), which does not help me.
- [ ] I have reviewed the latest Roadmap on GitHub and searched for current issues, which does not help me.
## 复现报告
***
分类:反馈一个明确的BUG
## Expected behavior <!-- 预期行为 -->
<!-- 如果您未按照模板中的步骤进行自检,我们可能不会阅读您的 Issue。 -->
<!-- Change [ ] to [x] to select (将 [ ] 换成 [x] 来完成选择) -->
## Actual behavior <!-- 实际行为 -->
<!-- Please provide at least one of the following information (请至少提供以下的一项信息) -->
- [ ] 将主题升级至最新版本。
- [ ] 下载主题官网源码运行,经过一定的步骤,可以复现此BUG。
- Links to demo site with this issue: N/A
- Links to repository or source code of the blog: N/A
### 复现步骤
1. xxx
2. xxx
3. xxx
## Steps to reproduce the behavior <!-- 重现步骤 -->
1. N/A
2. N/A
3. N/A
## 环境信息
<!-- 请务必提供以下信息 -->
## Environment Information
### 复现地址:
<!-- 如果使用文档官网源码本地运行也存在异常,可以不用提供复现地址。 -->
### Node.js and NPM Information
<!-- Paste output from `node -v && npm -v` (粘贴 `node -v && npm -v` 输出的信息) -->
```
### 截图:
<!-- 不同系统、浏览器效果可能不同,提供截图有助于发现问题所在。 -->
```
### 浏览器、操作系统
### Package dependencies Information
<!-- Paste output from `npm ls --depth 0` (粘贴 `npm ls --depth 0` 输出的信息) -->
```
### 站点配置文件
<!-- 只粘贴 `blog/_config.yml` 中修改过的部分 -->
```yml
```
### Hexo Configuration
<!-- Paste configuration from Hexo `_config.yml` (粘贴 Hexo `_config.yml` 中的内容) -->
### 主题配置文件
<!-- 只粘贴 `themes/volantis/_config.yml` 中修改过的部分 -->
```yml
```
### Volantis Configuration
<!-- Paste ONLY CHANGED CONFIGURATION from Volantis `_config.yml` (只粘贴 Volantis 主题配置文件 `_config.yml` 中修改过的部分) -->
```yml
#### 更多信息
<!-- 要求提供时再回来补全即可 -->
#### node.js & npm
<!-- 粘贴 `node -v && npm -v` 输出的信息 -->
```
```
## Other Information <!-- (Like Browser, System, Screenshots) -->
#### package.json
<!-- 粘贴 `npm ls --depth 0` 输出的信息 -->
```
```

@ -1,21 +1,21 @@
---
name: Feature Request
about: Suggest an idea for this project
name: 提交一个建议
about: 希望增加或者调整某项功能
title: ''
labels: 'new,suggest'
labels: 'suggest'
assignees: ''
---
If you delete this template, we may close your issue without conducting an investigation.
如果您删除此模版,我们可能会在不进行调查的情况下关闭您的 Issue。
<!-- 如果您删除此模版,我们可能会在不进行调查的情况下关闭您的 Issue。 -->
Please check if your Issue fulfills the following requirements. This will guide you to resolve the issue quickly.
请务必确认您在提交此 Issue 前已经查看并完成了下列检查单中的所有事项。这会指导您快速地解决问题。
### 自检报告
## Issue Checklist <!-- 我确认我已经查看了 -->
<!-- Change [ ] to [x] to select (将 [ ] 换成 [x] 来选择) -->
- [ ] I am using [the latest](https://github.com/xaoxuu/hexo-theme-volantis/releases/latest) version of Volantis.
- [ ] I have reviewed [guidelines for Volantis](https://volantis.js.org), which does not help me.
- [ ] I have reviewed the latest Roadmap on GitHub and searched for current issues, which does not help me.
- [ ] 我已阅读主题文档,确认不存在此功能。
- [ ] 我已阅读Hexo官方文档,确认不存在此功能。
## 需求描述
<!-- 如果能够提供参考链接或者示意图更好 -->

@ -1,21 +1,14 @@
---
name: Other Issue
about: Others
about: 要表述的内容不属于上述模板的范围
title: ''
labels: 'new'
labels: ''
assignees: ''
---
If you delete this template, we may close your issue without conducting an investigation.
如果您删除此模版,我们可能会在不进行调查的情况下关闭您的 Issue。
<!-- 如果您删除此模版,我们可能会在不进行调查的情况下关闭您的 Issue。 -->
Please check if your Issue fulfills the following requirements. This will guide you to resolve the issue quickly.
请务必确认您在提交此 Issue 前已经查看并完成了下列检查单中的所有事项。这会指导您快速地解决问题。
## Issue Checklist <!-- 我确认我已经查看了 -->
<!-- Change [ ] to [x] to select (将 [ ] 换成 [x] 来选择) -->
- [ ] I am using [the latest](https://github.com/xaoxuu/hexo-theme-volantis/releases/latest) version of Volantis.
- [ ] I have reviewed [guidelines for Volantis](https://volantis.js.org), which does not help me.
- [ ] I have reviewed the latest Roadmap on GitHub and searched for current issues, which does not help me.
- [ ] 我要说的内容与帮助或者BUG、建议都无关。(如果有关,请使用相关模板)

@ -1,55 +0,0 @@
---
name: Question Report
about: I have a question for Volantis (e.g. Customize)
title: ''
labels: 'new,question'
assignees: ''
---
If you delete this template, we may close your issue without conducting an investigation.
如果您删除此模版,我们可能会在不进行调查的情况下关闭您的 Issue。
Please check if your Issue fulfills the following requirements. This will guide you to resolve the issue quickly.
请务必确认您在提交此 Issue 前已经查看并完成了下列检查单中的所有事项。这会指导您快速地解决问题。
## Issue Checklist <!-- 我确认我已经查看了 -->
<!-- Change [ ] to [x] to select (将 [ ] 换成 [x] 来选择) -->
- [ ] I am using [the latest](https://github.com/xaoxuu/hexo-theme-volantis/releases/latest) version of Volantis.
- [ ] I have reviewed [guidelines for Volantis](https://volantis.js.org), which does not help me.
- [ ] I have reviewed the latest Roadmap on GitHub and searched for current issues, which does not help me.
***
## Describe your question <!-- 描述您的问题 -->
## Environment Information
### Node.js and NPM Information
<!-- Paste output from `node -v && npm -v` (粘贴 `node -v && npm -v` 输出的信息) -->
```
```
### Package dependencies Information
<!-- Paste output from `npm ls --depth 0` (粘贴 `npm ls --depth 0` 输出的信息) -->
```
```
### Hexo Configuration
<!-- Paste configuration from Hexo `_config.yml` (粘贴 Hexo `_config.yml` 中的内容) -->
```yml
```
### Volantis Configuration
<!-- Paste ONLY CHANGED CONFIGURATION from Volantis `_config.yml` (只粘贴 Volantis 主题配置文件 `_config.yml` 中修改过的部分) -->
```yml
```
## Other Information <!-- (Like Browser, System, Screenshots) -->

@ -403,10 +403,6 @@ plugins:
js: https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.18.1/build/highlight.min.js
css: https://cdn.jsdelivr.net/npm/highlight.js@9.18.1/styles/solarized-light.css
# more: https://www.jsdelivr.com/package/npm/highlight.js?path=styles
# Picture Zoom
fancybox:
css: https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css
js: https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js
# https://scrollrevealjs.org/api/reveal.html
scrollreveal:
@ -489,6 +485,8 @@ comments:
title: <i class='fas fa-comments'></i> 评论
subtitle:
service: valine # valine, minivaline, disqus, gitalk, livere
# Valine
# https://valine.js.org/
valine:
appId: dogUA2FSKGTo029M1SEwGROT-MdYXbMMI # your appId
appKey: u0NdtQ8nvHoMdJPSYqm1LRxE # your appKey
@ -505,7 +503,7 @@ comments:
visitor: true
mathJax: false
# MiniValine
# See: https://github.com/MiniValine/MiniValine
# https://github.com/MiniValine/MiniValine
minivaline:
appId: # Your leancloud application appid
appKey: # Your leancloud application appkey
@ -528,15 +526,27 @@ comments:
emoticonUrl:
- https://cdn.jsdelivr.net/gh/MiniValine/Bilibilis@master
- https://cdn.jsdelivr.net/npm/alus
# Disqus
# https://disqus.com
disqus:
shortname:
# Gitalk
# https://gitalk.github.io/
gitalk:
clientID:
clientSecret:
repo:
owner:
admin: # []
# Vssue
# https://vssue.js.org/zh/
vssue:
owner:
repo:
clientId:
clientSecret:
# LiveRe
# https://www.livere.com
livere:
uid:
@ -549,7 +559,7 @@ comments:
search:
enable: true
service: hexo # hexo, google, algolia, azure, baidu
js: https://cdn.jsdelivr.net/gh/xaoxuu/cdn-volantis@2.6.4/js/search.js
js: https://cdn.jsdelivr.net/gh/xaoxuu/cdn-volantis@2.6.5/js/search.js
google:
apiKey:
engineId:
@ -569,8 +579,8 @@ search:
############################### Theme Information ###############################
info:
name: Volantis # This is theme's name.
version: '2.6.5' # This is theme's version.
version: '2.6.6' # This is theme's version.
docs: https://volantis.js.org/ # This is theme's URL.
cdn:
# css: https://cdn.jsdelivr.net/gh/xaoxuu/cdn-volantis@2.6.4/css/style.css
# js: https://cdn.jsdelivr.net/gh/xaoxuu/cdn-volantis@2.6.4/js/app.js
js: https://cdn.jsdelivr.net/gh/xaoxuu/cdn-volantis@2.6.5/js/app.js
css:

@ -2,7 +2,13 @@
<div class="new-meta-item browse valine">
<a class='notlink'>
<i class="<%- theme.meta.counter.icon %> fa-fw" aria-hidden="true"></i>
<span id="<%- url_for(post.path || page.path) %>" class="leancloud_visitors" data-flag-title="<%- post.title || page.title %>">
<%
var path = post.path || page.path;
if (path.length > 9 && (path.substring(path.length - 10) == 'index.html')) {
path = path.substring(0, path.length - 10);
}
%>
<span id="<%- url_for(path) %>" class="leancloud_visitors" data-flag-title="<%- post.title || page.title %>">
<p>
<span class="leancloud-visitors-count"></span>
</p>

@ -84,9 +84,8 @@
<!-- link -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.13/css/all.min.css">
<% if (theme.plugins.fancybox && theme.plugins.fancybox.css) { %>
<%- css(theme.plugins.fancybox.css) %>
<% } %>
<%- css('https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css') %>
<% if (theme.plugins.nodewaves && theme.plugins.nodewaves.css) { %>
<%- css(theme.plugins.nodewaves.css) %>
<% } %>
@ -99,6 +98,10 @@
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10/dist/APlayer.min.css">
<% } %>
<% if (theme.comments.vssue && theme.comments.vssue.clientId) { %>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/meteorlxy/vssue@1.4.4/packages/vssue/dist/vssue.min.css">
<% } %>
<!-- import link -->
<% if (config.import && config.import.link){ %>
<% (config.import.link||[]).forEach(function(item){ %>

@ -43,22 +43,24 @@
}
menu_list = menu_list || [];
%>
<% function menu(value) { %>
<% function menu(value, type) { %>
<% if (value.name == 'hr') { %>
<hr>
<% } else if (value.icon && value.icon.indexOf('fa-compact-disc') > -1 && value.url == undefined && value.rows == undefined) { %>
<li>
<a class="flat-box">
<i class='<%= value.icon %> fa-fw music'></i><%- value.name %>
</a>
<ul class="list-v">
<li>
<div class="aplayer-container">
<%- partial('../_third-party/aplayer', {post: null, where: 'footer'}) %>
</div>
</li>
</ul>
<li>
<% if (type == 'pc') { %>
<li>
<a class="flat-box">
<i class='<%= value.icon %> fa-fw music'></i><%- value.name %>
</a>
<ul class="list-v">
<li>
<div class="aplayer-container">
<%- partial('../_third-party/aplayer', {post: null, where: 'footer'}) %>
</div>
</li>
</ul>
<li>
<% } %>
<% } else if (value.name != undefined && value.url == undefined && value.rows == undefined) { %>
<li class='header'>
<% if (value.icon) { %><i class='<%= value.icon %> fa-fw'></i><% } %><%- value.name %>
@ -80,7 +82,7 @@
<% if (value.rows) { %>
<ul class="list-v">
<% value.rows.forEach(function(value){ %>
<% menu(value) %>
<% menu(value, type) %>
<%})%>
</ul>
<% } %>
@ -88,8 +90,8 @@
<% } %>
<% } %>
<% menu_list.forEach(function(value){ %>
<% menu(value) %>
<%})%>
<% menu(value, 'pc') %>
<% }) %>
</ul>
</div>
@ -108,8 +110,8 @@
<a class="s-menu fas fa-bars fa-fw" target="_self" href='javascript:void(0)'></a>
<ul class="menu-phone list-v navigation white-box">
<% menu_list.forEach(function(value){ %>
<% menu(value) %>
<%})%>
<% menu(value, 'mobile') %>
<% }) %>
</ul>
</li>
</ul>

@ -109,6 +109,7 @@
var enableDisqus = false;
var enableLivere = false;
var enableGitalk = false;
var enableVssue = false;
var enableValine = false;
var enableMiniValine = false;
if (theme.comments && page && page.comments == true) {
@ -121,6 +122,9 @@
if (theme.comments.gitalk && theme.comments.gitalk.clientID) {
enableGitalk = true;
}
if (theme.comments.vssue && theme.comments.vssue.clientId) {
enableVssue = true;
}
if (theme.comments.valine && theme.comments.valine.appId) {
enableValine = true;
}
@ -179,6 +183,29 @@
gitalk.render('gitalk-container');
</script>
<% } %>
<% if (enableVssue) { %>
<script src="https://cdn.jsdelivr.net/gh/vuejs/vue@2.6.11/dist/vue.runtime.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/meteorlxy/vssue@1.4.4/packages/vssue/dist/vssue.github.min.js"></script>
<script>
new Vue({
el: '#vssue',
render: h => h('Vssue', {
props: {
title: "<%- (page.seo_title || page.title) + ' - ' + config.title %>",
options: {
owner: '<%- theme.comments.vssue.owner %>',
repo: '<%- theme.comments.vssue.repo %>',
clientId: '<%- theme.comments.vssue.clientId %>',
clientSecret: '<%- theme.comments.vssue.clientSecret %>',
prefix: '',
autoCreateIssue: true,
},
}
})
})
</script>
<% } %>
<% if (enableValine){ %>
<% if (theme.comments.valine.js) { %>
@ -297,10 +324,7 @@
<!-- fancybox -->
<% if (theme.plugins.fancybox) { %>
<%- partial('_third-party/fancybox') %>
<% } %>
<%- partial('_third-party/fancybox') %>
<% if (config.import && config.import.script){ %>
<% (config.import.script||[]).forEach(function(item){ %>

@ -3,6 +3,7 @@
var enableDisqus = false;
var enableLivere = false;
var enableGitalk = false;
var enableVssue = false;
var enableValine = false;
var enableMiniValine = false;
if (theme.comments && page && page.comments == true) {
@ -15,6 +16,9 @@
if (theme.comments.gitalk && theme.comments.gitalk.clientID) {
enableGitalk = true;
}
if (theme.comments.vssue && theme.comments.vssue.clientId) {
enableVssue = true;
}
if (theme.comments.valine && theme.comments.valine.appId) {
enableValine = true;
}
@ -24,7 +28,7 @@
}
%>
<% if (enableDisqus || enableLivere || enableGitalk || enableValine || enableMiniValine) { %>
<% if (enableDisqus || enableLivere || enableGitalk || enableVssue || enableValine || enableMiniValine) { %>
<article class="post white-box reveal comments <%- theme.style.body.effect.join(' ') %>">
<section class="article typo">
<p ct><%- theme.comments && theme.comments.title %></p>
@ -50,6 +54,11 @@
<div id="gitalk-container"></div>
</section>
<% } %>
<% if (enableVssue){ %>
<section id="comments">
<div id="vssue"></div>
</section>
<% } %>
<% if (enableValine){ %>
<section id="comments">
<div id="valine_container" class="valine_thread">

@ -1,18 +1,43 @@
<script src="<%- theme.plugins.fancybox.js %>"></script>
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>
<script>
let LAZY_LOAD_IMAGE = "<%- config.lazyload %>";
$(".article-entry").find("div.fancybox").find("img").each(function () {
var element = document.createElement("a");
$(element).attr("data-fancybox", "gallery");
function pjax_fancybox() {
$(".article-entry").find("img").not('.inline').not('a img').each(function () { //渲染 fancybox
var element = document.createElement("a"); // a 标签
$(element).attr("pjax-fancybox", ""); // 过滤 pjax
$(element).attr("href", $(this).attr("src"));
/* 图片采用懒加载处理时,
* 一般图片标签内会有个属性名来存放图片的真实地址,比如 data-original,
* 那么此处将原本的属性名src替换为对应属性名data-original,
* 修改如下
*/
if (LAZY_LOAD_IMAGE) {
$(element).attr("href", $(this).attr("data-original"));
}
$(this).wrap(element);
if ($(this).attr("data-original")) {
$(element).attr("href", $(this).attr("data-original"));
}
$(element).attr("data-fancybox", "images");
var caption = ""; // 描述信息
if ($(this).attr('alt')) { // 标准 markdown 描述信息
$(element).attr('data-caption', $(this).attr('alt'));
caption = $(this).attr('alt');
}
var div = document.createElement("div");
$(div).addClass("fancybox");
$(this).wrap(div); // 最外层套 div ,其实主要作用还是 class 样式
var span = document.createElement("span");
$(span).addClass("image-caption");
$(span).text(caption); // 加描述
$(this).after(span); // 再套一层描述
$(this).wrap(element); // 最后套 a 标签
})
$(".article-entry").find("img").fancybox({
selector: '[data-fancybox="images"]',
hash: false,
loop: false,
closeClick: true,
helpers: {
overlay: {closeClick: true}
},
buttons: [
"zoom",
"close"
]
});
};
$(function () {
pjax_fancybox();
});
</script>

@ -5,11 +5,11 @@ function postFancybox(args, content) {
var cls = args[0];
var col = Number(args[1]) || 0;
if (col > 0) {
return `<div class="fancybox ${cls}" col='${col}'>
return `<div class="gallery ${cls}" col='${col}'>
${hexo.render.renderSync({text: content, engine: 'markdown'}).split('\n').join('')}
</div>`;
} else {
return `<div class="fancybox ${cls}">
return `<div class="gallery ${cls}">
${hexo.render.renderSync({text: content, engine: 'markdown'}).split('\n').join('')}
</div>`;
}

@ -5,10 +5,13 @@ function postImage(args) {
let url = (args[0]||'').trim()
let title = ''
let width = ''
let cls = ''
function getP2(p2) {
let px = p2.match(/^[0-9]*px$/g)
if (px) {
width = px[0]
} else if (p2 == 'inline') {
cls = 'class="inline"'
} else {
title = p2
}
@ -21,25 +24,15 @@ function postImage(args) {
}
if (width.length > 0) {
if (title.length > 0) {
return `<div class="fancybox caption">
<img src='${url}' style='width:${width}'>
<span class='image-caption'>${title}</span>
</div>`;
return `<img src='${url}' alt='${title}' style='width:${width}'>`;
} else {
return `<div class="fancybox caption">
<img src='${url}' style='width:${width}'>
</div>`;
return `<img src='${url}' style='width:${width}'>`;
}
} else {
if (title.length > 0) {
return `<div class="fancybox caption">
<img src='${url}'>
<span class='image-caption'>${title}</span>
</div>`;
return `<img src='${url}' alt='${title}'>`;
} else {
return `<div class="fancybox caption">
<img src='${url}'>
</div>`;
return `<img src='${url}'>`;
}
}
}

@ -2,12 +2,12 @@
function postAudio(args) {
let src = args[0].trim()
return `<audio controls preload><source src='${src}' type='audio/mp3'>Your browser does not support the audio tag.</audio>`;
return `<div class="audio"><audio controls preload><source src='${src}' type='audio/mp3'>Your browser does not support the audio tag.</audio></div>`;
}
function postVideo(args) {
let src = args[0].trim()
return `<video controls preload><source src='${src}' type='video/mp4'>Your browser does not support the video tag.</video>`;
return `<div class="video"><video controls preload><source src='${src}' type='video/mp4'>Your browser does not support the video tag.</video></div>`;
}
function postVideos(args, content) {

@ -18,6 +18,8 @@
// word-break: break-all
word-wrap: break-word
img
&.inline
display: inline
position: relative
trans()
@media screen and (max-width: $device-mobile)

@ -3,21 +3,27 @@ $sp = 4px
audio,video
border-radius: $border-codeblock
max-width: 100%
video
z-index: 1
trans()
&:hover
box-shadow: 0 4px 8px 0px rgba(0, 0, 0, 0.24), 0 8px 16px 0px rgba(0, 0, 0, 0.24)
div.video
line-height: 0
text-align: center
div.videos
max-width: "calc(100% + 2 * %s)" % $sp
display: flex
flex-wrap: wrap
justify-content: space-start
justify-content: flex-start
align-items: flex-end
margin: $gap-row 0 - $sp
video,iframe
.video,iframe
width: 100%
margin: $sp
video
trans()
&:hover
box-shadow: 0 4px 8px 0px rgba(0, 0, 0, 0.24), 0 8px 16px 0px rgba(0, 0, 0, 0.24)
iframe
border-radius: $border-codeblock
width: 100%
@ -31,14 +37,14 @@ div.videos
&.stretch
align-items: stretch
&[col='1']
video,iframe
.video,iframe
width: 100%
&[col='2']
video,iframe
.video,iframe
width: "calc(50% - 2 * %s)" % $sp
&[col='3']
video,iframe
.video,iframe
width: "calc(33.33% - 2 * %s)" % $sp
&[col='4']
video,iframe
.video,iframe
width: "calc(25% - 2 * %s)" % $sp

@ -1,42 +1,51 @@
div.fancybox
div.gallery
margin: $gap-row 0
overflow: hidden
$sp = 1px
>a,>p>a
>.fancybox,>p>.fancybox
margin: $sp
padding: 0
line-height: 0
overflow: hidden
align-items: stretch
border-radius: 2px
cursor: zoom-in
@media screen and (max-width: $device-mobile)
border-radius: 1px
br
display: none !important
position: relative
.image-caption
opacity: 0
transform: translateY(100%)
transition: all 0.3s ease
pointer-events: none
position: absolute
width: 100%
bottom: 0
text-align: center
background: rgba(0, 0, 0, 0.3)
color: #fff
&:empty
display:none
&:hover
.image-caption
opacity: 1
transform: translateY(0)
&,>p
display: flex
justify-content: center
align-items: center
flex-wrap: nowrap
padding: 0 !important
align-items: stretch
&[col]>p
flex-wrap: wrap
justify-content: flex-start
&[col='2']>p>a
&[col='2']>p>.fancybox
width: "calc(50% - 2 * %s)" % $sp
&[col='3']>p>a
&[col='3']>p>.fancybox
width: "calc(33.33% - 2 * %s)" % $sp
&[col='4']>p>a
&[col='4']>p>.fancybox
width: "calc(25% - 2 * %s)" % $sp
&[col='5']>p>a
&[col='5']>p>.fancybox
width: "calc(20% - 2 * %s)" % $sp
&[col='6']>p>a
&[col='6']>p>.fancybox
width: "calc(16.66% - 2 * %s)" % $sp
&[col='7']>p>a
&[col='7']>p>.fancybox
width: "calc(14.2857% - 2 * %s)" % $sp
&[col='8']>p>a
&[col='8']>p>.fancybox
width: "calc(12.5% - 2 * %s)" % $sp
>p
margin: 0
@ -56,13 +65,25 @@ div.fancybox
cursor: zoom-out
.fancybox
&.caption
flex-direction: column
a
margin: 0
.gallery
overflow: hidden
.image-caption
font-size: $fontsize-code
margin-top: $gap-row
color: $color-meta
display: flex
flex-direction: column
justify-content: center
align-items: center
flex-wrap: nowrap
padding: 0 !important
overflow: hidden
border-radius: 2px
@media screen and (max-width: $device-mobile)
border-radius: 1px
a
line-height: 0
margin: 0
align-items: stretch
cursor: zoom-in
.gallery
overflow: hidden
.image-caption
font-size: $fontsize-code
padding-top: $gap-row
padding-bottom: $gap-row
color: $color-meta

@ -35,6 +35,7 @@
scrollbar()
.vemoji
max-height: 22px
max-width: 100px
i
width: auto
padding: 8px
@ -97,7 +98,7 @@
.vhead
span
&.vnick
color: $color-meta
color: lighten($color-p, 10)
cursor: default
a
&.vnick
@ -147,7 +148,8 @@
.vemoji
max-height: 24px
border-radius: 0
margin-top: -5px
margin-top: -10px
max-width: 100px
.vempty
color: $color-meta
.vpower

File diff suppressed because one or more lines are too long
Loading…
Cancel
Save