Hexo+Github实现相册功能 | Lawlite的博客

lawlite19 commented 5 years ago

http://lawlite.me/2017/04/13/Hexo-Github%E5%AE%9E%E7%8E%B0%E7%9B%B8%E5%86%8C%E5%8A%9F%E8%83%BD/

最终效果请看这里：http://lawlite.me/photos/ 粗略实现，有问题可以在下方评论区评论，或者留言区留言一、说明1、关于我使用的主题是hexo-theme-yilia，其中实现相册功能的方案是同步instagram上面的图片，但是现在instagram被禁，不能使用了下面是通过自己的方式实现了相册功能，其中的样式还是使用该主题提供的2、方案在github上新建一个仓库

YueAndLi commented 5 years ago

为什么我的做出来小图没问题，点击图片时报错,错误如下：

ins.js:548 Uncaught ReferenceError: PhotoSwipe is not defined
    at openPhotoSwipe (ins.js:548)
    at HTMLDivElement.onThumbnailsClick (ins.js:457)

ins.js 548行内容如下:

 // Pass data to PhotoSwipe and initialize it
        gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);
        gallery.init();

怎么引入PhotoSwipe.js呢

lawlite19 commented 5 years ago

@YueAndLi 为什么我的做出来小图没问题，点击图片时报错,错误如下：
ins.js:548 Uncaught ReferenceError: PhotoSwipe is not defined
    at openPhotoSwipe (ins.js:548)
    at HTMLDivElement.onThumbnailsClick (ins.js:457)
ins.js 548行内容如下:
 // Pass data to PhotoSwipe and initialize it
        gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);
        gallery.init();
怎么引入PhotoSwipe.js呢

我用的Yilia主题，可能用到了里面的样式。

YueAndLi commented 5 years ago

@lawlite19
@YueAndLi 为什么我的做出来小图没问题，点击图片时报错,错误如下：
ins.js:548 Uncaught ReferenceError: PhotoSwipe is not defined
    at openPhotoSwipe (ins.js:548)
    at HTMLDivElement.onThumbnailsClick (ins.js:457)
ins.js 548行内容如下:
 // Pass data to PhotoSwipe and initialize it
        gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);
        gallery.init();
怎么引入PhotoSwipe.js呢
我用的Yilia主题，可能用到了里面的样式。

谢谢！ 我现在换用了Yilia主图，没有小图了，点击能展示大图，我看网上说是少了empty.png，请问这个图片是放在哪里的呢？

YueAndLi commented 5 years ago

@lawlite19
@YueAndLi 为什么我的做出来小图没问题，点击图片时报错,错误如下：
ins.js:548 Uncaught ReferenceError: PhotoSwipe is not defined
    at openPhotoSwipe (ins.js:548)
    at HTMLDivElement.onThumbnailsClick (ins.js:457)
ins.js 548行内容如下:
 // Pass data to PhotoSwipe and initialize it
        gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);
        gallery.init();
怎么引入PhotoSwipe.js呢
我用的Yilia主题，可能用到了里面的样式。

可能没有表达清楚，我的意思是这个图片我应该放在哪个路径下

lawlite19 commented 5 years ago

@lawlite19
@YueAndLi 为什么我的做出来小图没问题，点击图片时报错,错误如下：
ins.js:548 Uncaught ReferenceError: PhotoSwipe is not defined
    at openPhotoSwipe (ins.js:548)
    at HTMLDivElement.onThumbnailsClick (ins.js:457)
ins.js 548行内容如下:
 // Pass data to PhotoSwipe and initialize it
        gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);
        gallery.init();
怎么引入PhotoSwipe.js呢
我用的Yilia主题，可能用到了里面的样式。
可能没有表达清楚，我的意思是这个图片我应该放在哪个路径下

我是放在这里。

YueAndLi commented 5 years ago

@lawlite19
@lawlite19
@YueAndLi 为什么我的做出来小图没问题，点击图片时报错,错误如下：
ins.js:548 Uncaught ReferenceError: PhotoSwipe is not defined
    at openPhotoSwipe (ins.js:548)
    at HTMLDivElement.onThumbnailsClick (ins.js:457)
ins.js 548行内容如下:
 // Pass data to PhotoSwipe and initialize it
        gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);
        gallery.init();
怎么引入PhotoSwipe.js呢
我用的Yilia主题，可能用到了里面的样式。
可能没有表达清楚，我的意思是这个图片我应该放在哪个路径下
我是放在这里。

好的谢谢

wanghaoListening commented 5 years ago

你好作者，我按照你的方法结果图片一直显示在加载中，图片正在加载中…，我不太了解前端，可以给指教一下吗

wanghaoListening commented 5 years ago

layout: post slug: "photos" title: "相册" noDate: "true" comments: "false"

Photos 待续

图片正在加载中…

这段代码应该需要修改一下吧

wanghaoListening commented 5 years ago

layout: post slug: "photos" title: "相册" noDate: "true" comments: "false"

Photos 待续

图片正在加载中…

这段代码应该需要修改一下吧

yansheng836 commented 4 years ago

其实我觉得你应该打个标签（就比如是在刚配置好相册时），现在仓库传了那么多照片，很大了，不方便下载你的代码。

widem commented 4 years ago

谢谢您的建议，我当时也是摸索，参考别人的博客整的，也没考虑那么多！

	王伟东

wangweidongip@163.com | 签名由网易邮箱大师定制

在2019年07月29日 14:55，yansheng836notifications@github.com 写道：

其实我觉得你应该打个标签（就比如是在刚配置好相册时），现在仓库传了那么多照片，很大了，不方便下载你的代码。

— You are receiving this because you commented. Reply to this email directly, view it on GitHub, or mute the thread.

lawlite19 commented 4 years ago

@yansheng836 其实我觉得你应该打个标签（就比如是在刚配置好相册时），现在仓库传了那么多照片，很大了，不方便下载你的代码。

有道理

note4 commented 4 years ago

有一个小问题，图片加载的都是githubusercontent下面的，如果这个域名蛋蛋了岂不是满城尽是叉烧包

janlee151 commented 4 years ago

你好，我的相册页面一直加载不出图片，是什么原因啊

ChemLez commented 4 years ago

为什么我调好以后，最后是原作者的相册，内容也是啊

janlee151 commented 4 years ago

@ChemLez 为什么我调好以后，最后是原作者的相册，内容也是啊我这里报api.github.com 401错误，没有权限，不知道咋配置

yansheng836 commented 4 years ago

为什么我调好以后，最后是原作者的相册，内容也是啊

修改下图中的链接地址为自己的，一般换lawlite19/blog-back-up/master/min_photos/这部分就可以了，分别表示：用户名、仓库名、分支名、存放照片的位置。

而且你每次上传照片前，都要先将照片备份到github，然后才能显示出来。

janlee151 commented 4 years ago

@yansheng836

为什么我调好以后，最后是原作者的相册，内容也是啊

修改下图中的链接地址为自己的，一般换lawlite19/blog-back-up/master/min_photos/这部分就可以了，分别表示：用户名、仓库名、分支名、存放照片的位置。

而且你每次上传照片前，都要先将照片备份到github，然后才能显示出来。

我这实现了一次，后来就报错了

yansheng836 commented 4 years ago

@janlee151 如果你有使用压缩插件压缩文件，请忽略和相册相关文件；或者F12看下是哪个文件报错或缺失就忽略那个文件。

ChemLez commented 4 years ago

@janlee151

@ChemLez 为什么我调好以后，最后是原作者的相册，内容也是啊我这里报api.github.com 401错误，没有权限，不知道咋配置

@yansheng836

为什么我调好以后，最后是原作者的相册，内容也是啊

修改下图中的链接地址为自己的，一般换lawlite19/blog-back-up/master/min_photos/这部分就可以了，分别表示：用户名、仓库名、分支名、存放照片的位置。

而且你每次上传照片前，都要先将照片备份到github，然后才能显示出来。我这里已经修改成自己的地址了，但是原作者的还在，包括页面有个摄影，点进去，完全就进到原作者的摄影的图片页面了...怎么办

yansheng836 commented 4 years ago

@ChemLez 我猜这个没改tool.py:

注意代码中../lawlite19.github.io/source/photos/data.json是对应到我的博客的路径，这里根据需要改成自己博客的路径

ChemLez commented 4 years ago

@yansheng836 @ChemLez 我猜这个没改tool.py:

注意代码中../lawlite19.github.io/source/photos/data.json是对应到我的博客的路径，这里根据需要改成自己博客的路径

改了啊一共是改三个地址是吧，为什么我出来的还是原作者的呢

ChemLez commented 4 years ago

@yansheng836 @ChemLez 我猜这个没改tool.py:

注意代码中../lawlite19.github.io/source/photos/data.json是对应到我的博客的路径，这里根据需要改成自己博客的路径

"E:/blog/source/photos/data.json" 这是我自己的，我就改成的这样的

ChemLez commented 4 years ago

@yansheng836 @ChemLez 我猜这个没改tool.py:

注意代码中../lawlite19.github.io/source/photos/data.json是对应到我的博客的路径，这里根据需要改成自己博客的路径

我是把原作者的Litten的photo样式文件复制过来，改的

yansheng836 commented 4 years ago

@ChemLez 我知道了，你忘了一个最重要的步骤py tool.py

lawlite19 commented 4 years ago

有问题可以F12调试调试哦 :smile:
还有之前用的来必力评论插件不知道你们能不能正常加载，里面问的问题有帮助。

ChemLez commented 4 years ago

@yansheng836 @ChemLez 我知道了，你忘了一个最重要的步骤py tool.py

我来试试，之前是blogPicture仓库没放图片，就用了这一步，我现在放了一张图片，我现在试试

ChemLez commented 4 years ago

@yansheng836 @ChemLez 我知道了，你忘了一个最重要的步骤py tool.py

E:\blog\blog-Picture>python tool.py

This program helps compress many image files
you can choose which scale you want to compress your img(jpg/png/etc)
1) normal compress(4M to 1M around)
2) small compress(4M to 500K around)
3) smaller compress(4M to 300K around)

下一步命令怎么敲

janlee151 commented 4 years ago

@lawlite19

有问题可以F12调试调试哦 :smile:

还有之前用的来必力评论插件不知道你们能不能正常加载，里面问的问题有帮助。可以加个好友吗

yansheng836 commented 4 years ago

hexo s

看图片能不能出来

janlee151 commented 4 years ago

@lawlite19

有问题可以F12调试调试哦 :smile:

还有之前用的来必力评论插件不知道你们能不能正常加载，里面问的问题有帮助。我的相册开始能正常显示，后来就说api.github.com服务器访问失败，怎么的仓库怎么创建的，需要token吗？

ChemLez commented 4 years ago

@yansheng836 hexo s

看图片能不能出来

还是不行

lawlite19 commented 4 years ago

@janlee151

@lawlite19

有问题可以F12调试调试哦 :smile:

还有之前用的来必力评论插件不知道你们能不能正常加载，里面问的问题有帮助。

我的相册开始能正常显示，后来就说api.github.com服务器访问失败，怎么的仓库怎么创建的，需要token吗？

没遇到过，不需要token，就是访问仓库的照片，感觉是网络的问题。

ChemLez commented 4 years ago

博主，为什么我的一直都会显示，主题作者的相册页面，都有他摄影页面，点进去直接是他的

yansheng836 commented 4 years ago

@ChemLez hexo s 截张图

ChemLez commented 4 years ago

@yansheng836 @ChemLez hexo s 截张图

ChemLez commented 4 years ago

@yansheng836 @ChemLez hexo s 截张图

全是原主题 latten的格式，并且，点击摄影，能跳转他的摄影页面

yansheng836 commented 4 years ago

@ChemLez 加下我qq吧

ChemLez commented 4 years ago

作者你好，pIL模块只能python2.x版本能用吧，我3.x怎么总是报错

wowooowow commented 4 years ago

我的相册缩略图不显示

wowooowow commented 4 years ago

底下好像报错:http://localhost:4000/photos/ins.j/img/empty.png

wowooowow commented 4 years ago

我找出问题了,但是我解决不了,求助

yansheng836 commented 4 years ago

我找出问题了,但是我解决不了,求助

我看了下你的博客：https://letmequadrakill.github.io/photos/，好像没有问题了啊

articalman commented 4 years ago

博主你好，我的相册里面只有个空页面，但是图片、缩略图和data.json文件都能在路径和远程仓库中找到。请问是哪里出了问题？

50mengzhu commented 4 years ago

@wuoouw

底下好像报错:http://localhost:4000/photos/ins.j/img/empty.png

这个问题可以直接在photos下面新建一个ins.j/img这样的目录，然后再目录下放一个empty.png的文件就可以解决了

50mengzhu commented 4 years ago

@wuoouw

底下好像报错:http://localhost:4000/photos/ins.j/img/empty.png

或者将ins.js中的代码修改为以下——

liTmpl += '<figure class="thumb" itemprop="associatedMedia" itemscope="" itemtype="http://schema.org/ImageObject">\
<a href="' + minSrc + '" itemprop="contentUrl" data-size="1080x1080" data-type="' + type + '" data-target="' + src + '">\
<img class="reward-img" data-type="' + type + '" data-src="' + minSrc + '" src="/assets/img/empty.png" itemprop="thumbnail" onload="lzld(this)">\
</a>\
<figcaption style="display:none" itemprop="caption description">' + data.text[i] + '</figcaption>\
</figure>';

lawlite19 / blog_gitalk_comments