feat: 不蒜子可配置 CDN closed #1132

feat: gallery 標簽外掛增加圖片懶加載,增加 lazyload rowHeight 和 limit 屬性配置
feat: 可設置固定導航欄 closed #1150
fix: 修復開啟懶加載後,再使用 flink_url 的方式引入友鏈數據,友鏈頭像有可能不顯示的 bug closed #1146
fix: 修復閲讀模式下,代碼塊的背景顏色仍顯示彩色背景的 bug (自定義代碼塊) closed #1139
improvement: 搜索結果換行時不會拆分單詞顯示
improvement: 優化搜索結果顯示滾動條位置
improvement: css/js 優化
This commit is contained in:
Jerry
2023-01-14 00:36:34 +08:00
parent 0f915f47ef
commit 9a3b41912a
28 changed files with 244 additions and 135 deletions

View File

@@ -1,6 +1,8 @@
/**
* Butterfly
* galleryGroup and allery
* galleryGroup and gallery
* {% galleryGroup [name] [descr] [url] [img] %}
* {% gallery [lazyload],[rowHeight],[limit] %}
*/
'use strict'
@@ -8,13 +10,38 @@
const urlFor = require('hexo-util').url_for.bind(hexo)
function gallery (args, content) {
return `<div class="fj-gallery">${hexo.render.renderSync({ text: content, engine: 'markdown' }).split('\n').join('')}
</div>`
const { data, languages } = hexo.theme.i18n
args = args.join(' ').split(',')
const rowHeight = args[1] || 220
const limit = args[2] || 10
const lazyload = args[0] === 'true'
const regex = /!\[(.*?)\]\((.*?)\s*(?:["'](.*?)["']?)?\s*\)/g
const lazyloadClass = lazyload ? 'lazyload' : ''
let m
const arr = []
while ((m = regex.exec(content)) !== null) {
if (m.index === regex.lastIndex) {
regex.lastIndex++
}
arr.push({
url: m[2],
alt: m[1],
title: m[3]
})
}
return `<div class="gallery">
<div class="fj-gallery ${lazyloadClass}" data-rowHeight="${rowHeight}" data-limit="${limit}">
<span class="gallery-data">${JSON.stringify(arr)}</span>
</div>
<button class="gallery-load-more"><span>${data[languages[0]].load_more}</span><i class="fa-solid fa-arrow-down"></i></button>
</div>`
}
function galleryGroup (args) {
const name = args[0]
const desrc = args[1]
const descr = args[1]
const url = urlFor(args[2])
const img = urlFor(args[3])
@@ -23,7 +50,7 @@ function galleryGroup (args) {
<img class="gallery-group-img no-lightbox" src='${img}' alt="Group Image Gallery">
<figcaption>
<div class="gallery-group-name">${name}</div>
<p>${desrc}</p>
<p>${descr}</p>
<a href='${url}'></a>
</figcaption>
</figure>