szhshp 为啥这个demo 跟你的主网站好像有点不太一样?

[Guang1234567]

Hello szhshp:

主网站 Home 那个"文章"列表(带搜索), 怎么跟 Demo 的截图有点不太一样的? 是部分功能开源吗?

[szhshp]

没错, 除了一些无法在Demo中使用的部分(例如Disqus通过AWS中转), 其他没同步过来的功能都是因为我太懒了...
哪天我找个时间把搜索功能迁移过来...
其实还有个全局BGM的功能加入TODO已经几个月了....(:з」∠)

[Guang1234567]

@szhielelp
看了你下面这边文章, 我想在 jekyll 博客里加这个控件 lightbox 控件

http://szhshp.org/tech/2016/04/19/letsrockwithpic.html

您写的其中一种方法是: 好像需要额外打个标记 #subcontainer

$('#subcontainer img').on("click",function(){
    event.preventDefault();
    $(this).ekkoLightbox({
        remote: $(this).attr('src'),
        title: $(this).next().html()
    });
})

不知道有没有更简单的办法, 如通过javascript 去自动加上 data-toggle="lightbox
由于本人搞android的, 不太懂 javascript, 结果参照别人的做法(不知道是不是最优的? 如能改进能否告知一下我):

<!-- lightbox 图片插件 -->
<script type="text/javascript" src="{{ "/lightbox/dist/ekko-lightbox.js" | prepend: site.baseurl }}"></script>
<script type="text/javascript">
    (function(){
        $("article img").each(function(index,value){

            var aDom=$("<a></a>").attr({"href":$(value).attr("src")+"?inlineId=myOnPageContent"}).addClass("ekko-lightbox");
            $(value).wrap(aDom);

        });
    })();
    
    $(document).on('click', '[class="ekko-lightbox"]', function(event) {
                event.preventDefault();
                $(this).ekkoLightbox();
            });
</script>

[szhshp]

这个其实是我很早就安装的插件, 几个要点:

1. lightbox官方推荐将img外层放一个a, 然后通过a引用
2. 我用的Markdown编译器是kramdown

Markdown编译后的HTML格式必然和推荐格式不同, 因此只需要使用任何方法将格式改变成推荐格式并进行init即可:

<a rel="lightbox" href="path" data-lightbox="roadtrip" title="Enjoy It！">
    <img src="path" alt="" class="img-fluid">
</a>

另外你提供的代码原理应该没有问题