起因
在使用Icarus的过程中，需要制作一个阅读列表，我的想法是，在列出图书列表之后，使用Icarus
自带的相册功能将书籍封面列出来，所以，我按照官方的示例，写了如下代码：
1
2
3
4
5
6
| <div class="justified-gallery">
</div>
|
链接
发现，hexo渲染出来的内容如下：
 
问题
直接将markdown原样输出了
解决
1
2
3
4
5
6
7
8
9
| // markdown的html内容中，上下添加空行
<div class="justified-gallery">
</div>
|
但是出现了一个新问题
markdown渲染时会自动在添加一个p标签：
1
2
3
4
5
6
7
8
9
10
11
12
13
| <div class="justified-gallery">
<p>
<img src="/assets/images/imgs20190625111151.webp="人类简史：从动物到上帝">
<br>
<img src="/assets/images/imgs20190625111220.webp="三体全集">
<br>
<img src="/assets/images/imgs20190625111101.webp="哲学家们都干了些什么?">
<br>
<img src="/assets/images/imgs20190625111325.webp="星空的琴弦">
<br>
<img src="/assets/images/imgs20190625111310.webp="《时间的形状:相对论史话》(彩图升级版)">
</p>
</div>
|
所以，修改gallery.js文件：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| // themes/icarus/source/js/gallery.js
$(function(){
if (typeof ($.fn.justifiedGallery)
+ let justifiedGallery = $('.justified-gallery')
+ if(justifiedGallery.length > 0) {
+ for (let i = 0; i < justifiedGallery.length; i ++){
+ let html = justifiedGallery[i].childNodes[0].innerHTML
+ justifiedGallery[i].innerHTML = html
+ }
+ }
+ justifiedGallery.justifiedGallery({
cssAnimation: true,
imagesAnimationDuration: 1000
});
}
if (typeof ($.fn.lightGallery)
$('.article').lightGallery({ selector: '.gallery-item' });
}
})
|
手动删除p标签
新问题
在hexo-neat压缩代码时，修改过的这里会报错，导致gallery.js最后输出的是个空文件，原因没有深究。
所以如果开启了代码压缩的情况下，需要在全局配置文件_config.yml中设置不要压缩这个文件。
1
2
3
4
5
6
7
8
9
10
|
neat_js:
enable: true
mangle: true
output:
compress:
exclude:
- '**/gallery.js'
- '**/clipboard.js'
- '**/back-to-top.js'
|
完美解决
