Open joeyliu6 opened 5 years ago
我考虑用你介绍的第二种方法“使用 Javascript 代码”,在修改的过程中,存在问题: 1、我使用的是blogger官方的Emporio主题,在模板中修改添加你的第二段代码时,不知我找到的下面这部分代码是不是对应的放缩略图的地方?
<div class='snippet-thumbnail-container'> <div expr:class='"snippet-thumbnail " + data:thumbClassName'/> </div>
2、我是将你第二段代码放在中间部分,结果没有加载出来图片。
烦请博主抽空回复。
@lawpai 我考虑用你介绍的第二种方法“使用 Javascript 代码”,在修改的过程中,存在问题: 1、我使用的是blogger官方的Emporio主题,在模板中修改添加你的第二段代码时,不知我找到的下面这部分代码是不是对应的放缩略图的地方...
你好,法律兄。我花了点时间调试出来了。
因为每个模板中,缩略图的显示方法各有千秋,在 Contempo主题中,缩略图是在 img
标签中。在 Emporio 主题中,缩略图是以 CSS 样式的 backgroundimage
实现的。
所以说,针对不同的主题模板,JS 代码就略有区别。缩略图代码的位置也是不同。
Emporio 主题缩略图的添加方法:
<b:includable id='feedPostImage'>..</b:includable>
,用以下内容替换。<b:includable id='feedPostImage'>
<b:if cond='data:post.featuredImage'>
<div class='snippet-thumbnail-container'>
<div class="snippet-thumbnail" style='background-image:url(https://ae01.alicdn.com/kf/HTB1lc4SakH0gK0jSZPi5javapXaz.gif);'></div>
<textarea class='post-text' style='display:none;'><data:post.body.escaped/></textarea>
</div>
<b:else/>
<div class='snippet-thumbnail-container'>
<div expr:class= 'data:thumbClassName'/>
</div>
</b:if>
</b:includable>
</body>
标签前插入 JS 代码:
<b:if cond='data:blog.pageType in {"index","searchQuery","searchLabel","archive"}'> <!--如果当前页是首页,搜索页,标签页,那么代码继续执行-->
<script defer='defer'>
//<![CDATA[
var postThumbnails = document.getElementsByClassName("snippet-thumbnail");
var postContents = document.getElementsByClassName("post-text");
for (var i=0;i<postContents.length;i++)
{
var postContent = postContents[i].innerText;
var imgReg = /<img.*?(?:>|\/>)/gi;
var srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i;
var imgTags = postContent.match(imgReg);
imgSrcs = imgTags[0].match(srcReg);
imgSrc = imgSrcs[1];
postThumbnails[i].style.background = "url(" + imgSrc + ")"
}
//]]>
</script>
</b:if>
大功告成,我这边测试成功。详见:http://demo.iljw.me (后续网站内容会变化)。若有疑问,欢迎继续来问我。
知名主题的缩略图 Javascript 解决步骤:
</body>
之前:
<b:if cond='data:blog.pageType in {"index","searchQuery","searchLabel","archive","item"}'>
<script defer='defer'>
//<![CDATA[
var postThumbnails = document.getElementsByClassName("snippet-thumbnail-img");
var postContents = document.getElementsByClassName("post-text");
for (var i=0;i<postContents.length;i++)
{
var postContent = postContents[i].innerText;
var imgReg = /<img.*?(?:>|\/>)/gi;
var srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i;
var imgTags = postContent.match(imgReg);
imgSrcs = imgTags[0].match(srcReg);
imgSrc = imgSrcs[1];
postThumbnails[i].setAttribute('src', imgSrc);
}
//]]>
</script>
</b:if>
<b:includable id='normalPost'></b:includable>
将其中的<b:if></b:if>
:
<b:if cond='data:post.featuredImage.isResizable'>
<span class='snippet-thumbnail-img' expr:id='"snippet_thumbnail_id_" + data:post.id'/>
<style>
@media (min-width: 1168px) {
<b:eval expr='"#snippet_thumbnail_id_" + data:post.id'/> {
background-image: url(<b:eval expr='resizeImage(data:post.featuredImage, 256, "1:1").cssEscaped'/>);
}
}
@media (min-width: 969px) and (max-width: 1167px) {
<b:eval expr='"#snippet_thumbnail_id_" + data:post.id'/> {
background-image: url(<b:eval expr='resizeImage(data:post.featuredImage, 1167, "3:2").cssEscaped'/>);
}
}
@media (min-width: 601px) and (max-width: 968px) {
<b:eval expr='"#snippet_thumbnail_id_" + data:post.id'/> {
background-image: url(<b:eval expr='resizeImage(data:post.featuredImage, 968, "3:2").cssEscaped'/>);
}
}
@media (max-width: 600px) {
<b:eval expr='"#snippet_thumbnail_id_" + data:post.id'/> {
background-image: url(<b:eval expr='resizeImage(data:post.featuredImage, 600, "3:2").cssEscaped'/>);
}
}
</style>
<b:else/>
<img expr:src='data:post.featuredImage'/>
</b:if>
</a>
<b:else/>
<div class='snippet-thumbnail thumbnail-empty'/>
</b:if>
</b:if>
改为:
<b:if cond='(not data:view.isSingleItem or data:widget.type == "PopularPosts")'>
<b:if cond='data:post.featuredImage and (data:widget.type != "PopularPosts" or data:this.postDisplay.showFeaturedImage)'>
<a class='snippet-thumbnail' expr:href='data:post.url'>
<b:if cond='data:post.featuredImage'>
<img class='snippet-thumbnail-img' src='https://ae01.alicdn.com/kf/Hf61c317e5081417fb7ea53a1b3a4254eg.gif'/>
<textarea class='post-text' style='display:none;'><data:post.body.escaped/></textarea>
</b:if>
</a>
<b:else/>
<div class='snippet-thumbnail thumbnail-empty'/>
</b:if>
</b:if>
.post-outer .snippet-thumbnail-img{...}
这段代码,插入object-fit: cover;
,即:
.post-outer .snippet-thumbnail-img{
background-position:center;
background-repeat:no-repeat;
background-size:cover;
object-fit: cover;
width:100%;
height:100%
}
给大佬点赞
你好,我用Contempo主题模板,按照你第二种方法设置成功了,现在我想修改缩略图的大小,应该怎么修改呢
@Jinunmeng 你好,我用Contempo主题模板,按照你第二种方法设置成功了,现在我想修改缩略图的大小,应该怎么修改呢
你好,这个代码引用的博文的第一张图片链接来当缩略图。
如果想修改大小,可以通过添加 CSS 样式来达到目的。
@joeyliu6
@Jinunmeng 你好,我用Contempo主题模板,按照你第二种方法设置成功了,现在我想修改缩略图的大小,应该怎么修改呢
你好,这个代码引用的博文的第一张图片链接来当缩略图。
如果想修改大小,可以通过添加 CSS 样式来达到目的。 主要是不知道在哪里修改,我现在把缩略图给去掉了,不显示。大佬有时间帮忙看下吧,我也找找在哪个地方修改
@Jinunmeng
后面的交流我们用邮箱联系吧(●'◡'●),我的邮箱在我的 Github 个人页可以找到。 记得先把缩略图加上去,把博客地址发我,我好帮你查看修改。
博主好!
我想使用方法3,但是一直没有搞定。我用的主题也是基于Contempo,但是我并没有找到'
<b:if cond='data:post.featuredImage'>
<div class='snippet-thumbnail'>
<b:include data='{ image: data:post.featuredImage, imageSizes: [32, 64, 128, 256], imageRatio: "1:1", sourceSizes: "(max-width: 800px) 20vw, 128px" }' name='responsiveImage'/>
</div>
</b:if>
我应该怎么修改代码才能正确的处理缩略图呢?另外如果这个方法可行,那其实不用找GitHub图床了,就用Blogger自带的图像上传发布,再返回文章编辑HTML,所有的图片前面加上
https://images.weserv.nl/?url=
就可以在境内访问了吧?这样也可以吗?
@lollxxox 博主好! 我想使用方法3,但是一直没有搞定。我用的主题也是基于Contempo,但是我并没有找....
你好,lollxxox。
在 Blogger 的模板中 data:post.featuredImage
会返回当前博文的缩略图链接(如果文章中有图片的话)。
返回的链接是存储谷歌服务器中,链接形式为 https://lh3.googleusercontent.com/proxy/
,大陆无法访问,所以需要方法三提到的工具来反代该缩略图。形式如下
https://images.weserv.nl/?url + data:post.featuredImage
以你的例子,在 Blogger 模板可以这么修改:
<b:if cond='data:post.featuredImage'>
<div class='snippet-thumbnail'>
<img expr:src='"https://images.weserv.nl/?url=" + data:post.featuredImage'/>
</div>
</b:if>
后续的 CSS 样式,需要根据各自模板来调整。
求助博主,notable主题的缩略图怎么改呢?
@joeyliu6 知名主题的缩略图 Javascript 解决步骤:
- 将以下代码放置在
</body>
之前:<b:if cond='data:blog.pageType in {"index","searchQuery","searchLabel","archive","item"}'> <script defer='defer'> //<![CDATA[ var postThumbnails = document.getElementsByClassName("snippet-thumbnail-img"); var postContents = document.getElementsByClassName("post-text"); for (var i=0;i<postContents.length;i++) { var postContent = postContents[i].innerText; var imgReg = /<img.*?(?:>|\/>)/gi; var srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i; var imgTags = postContent.match(imgReg); imgSrcs = imgTags[0].match(srcReg); imgSrc = imgSrcs[1]; postThumbnails[i].setAttribute('src', imgSrc); } //]]> </script> </b:if>
- 找到这一段代码
<b:includable id='normalPost'></b:includable>
将其中的
<b:if></b:if>
:<b:if cond='data:post.featuredImage.isResizable'> <span class='snippet-thumbnail-img' expr:id='"snippet_thumbnail_id_" + data:post.id'/> <style> @media (min-width: 1168px) { <b:eval expr='"#snippet_thumbnail_id_" + data:post.id'/> { background-image: url(<b:eval expr='resizeImage(data:post.featuredImage, 256, "1:1").cssEscaped'/>); } } @media (min-width: 969px) and (max-width: 1167px) { <b:eval expr='"#snippet_thumbnail_id_" + data:post.id'/> { background-image: url(<b:eval expr='resizeImage(data:post.featuredImage, 1167, "3:2").cssEscaped'/>); } } @media (min-width: 601px) and (max-width: 968px) { <b:eval expr='"#snippet_thumbnail_id_" + data:post.id'/> { background-image: url(<b:eval expr='resizeImage(data:post.featuredImage, 968, "3:2").cssEscaped'/>); } } @media (max-width: 600px) { <b:eval expr='"#snippet_thumbnail_id_" + data:post.id'/> { background-image: url(<b:eval expr='resizeImage(data:post.featuredImage, 600, "3:2").cssEscaped'/>); } } </style> <b:else/> <img expr:src='data:post.featuredImage'/> </b:if> </a> <b:else/> <div class='snippet-thumbnail thumbnail-empty'/> </b:if> </b:if>
改为:
<b:if cond='(not data:view.isSingleItem or data:widget.type == "PopularPosts")'> <b:if cond='data:post.featuredImage and (data:widget.type != "PopularPosts" or data:this.postDisplay.showFeaturedImage)'> <a class='snippet-thumbnail' expr:href='data:post.url'> <b:if cond='data:post.featuredImage'> <img class='snippet-thumbnail-img' src='https://ae01.alicdn.com/kf/Hf61c317e5081417fb7ea53a1b3a4254eg.gif'/> <textarea class='post-text' style='display:none;'><data:post.body.escaped/></textarea> </b:if> </a> <b:else/> <div class='snippet-thumbnail thumbnail-empty'/> </b:if> </b:if>
- 修改 css 让图片居中裁剪显示,找到
.post-outer .snippet-thumbnail-img{...}
这段代码,插入object-fit: cover;
,即:.post-outer .snippet-thumbnail-img{ background-position:center; background-repeat:no-repeat; background-size:cover; object-fit: cover; width:100%; height:100% }
第二段修改,系统给出的错误反馈是:
org.xml.sax.SAXParseException; lineNumber: 3006; columnNumber: 11; The element type "a" must be terminated by the matching end-tag "</a>".
@mkyos
第二段修改,系统给出的错误反馈是:
org.xml.sax.SAXParseException; lineNumber: 3006; columnNumber: 11; The element type "a" must be terminated by the matching end-tag "</a>".
把你修改的代码放到 Github 或私发给我,我帮你检查一下。
实在太感谢了!!
@mkyos 第二段修改,系统给出的错误反馈是:
org.xml.sax.SAXParseException; lineNumber: 3006; columnNumber: 11; The element type "a" must be terminated by the matching end-tag "</a>".
把你修改的代码放到 Github 或私发给我,我帮你检查一下。
[Uploading theme-2545038909748151405_1.xml.zip…]()
@mkyos 还没收到你发的文件。
我发到您的邮箱了,是不是在垃圾桶中呢?
@mkyos
你好,邮件进垃圾箱了。问题出在有两个 a 标签,但只有一个结尾。所以会报错。
将此段代码代替上面一段即可。
<b:if cond='(not data:view.isSingleItem or data:widget.type == "PopularPosts")'>
<b:if cond='data:post.featuredImage and (data:widget.type != "PopularPosts" or data:this.postDisplay.showFeaturedImage)'>
<a class='snippet-thumbnail' expr:href='data:post.url'>
<b:if cond='data:post.featuredImage'>
<img class='snippet-thumbnail-img' src='https://ae01.alicdn.com/kf/Hf61c317e5081417fb7ea53a1b3a4254eg.gif'/>
<textarea class='post-text' style='display:none;'><data:post.body.escaped/></textarea>
</b:if>
</a>
<b:else/>
<div class='snippet-thumbnail thumbnail-empty'/>
</b:if>
</b:if>
感谢!
@mkyos 你好,邮件进垃圾箱了。问题出在有两个 a 标签,但只有一个结尾。所以会报错。
将此段代码代替上面一段即可。
<b:if cond='(not data:view.isSingleItem or data:widget.type == "PopularPosts")'> <b:if cond='data:post.featuredImage and (data:widget.type != "PopularPosts" or data:this.postDisplay.showFeaturedImage)'> <a class='snippet-thumbnail' expr:href='data:post.url'> <b:if cond='data:post.featuredImage'> <img class='snippet-thumbnail-img' src='https://ae01.alicdn.com/kf/Hf61c317e5081417fb7ea53a1b3a4254eg.gif'/> <textarea class='post-text' style='display:none;'><data:post.body.escaped/></textarea> </b:if> </a> <b:else/> <div class='snippet-thumbnail thumbnail-empty'/> </b:if> </b:if>
感谢!但是这样好像有个问题:featurepost似乎不会消失,也就是说,点击任何的post都会在网页上保留它,而且它的缩略图非常顽固地由谷歌的服务器提供。我想是否有以下修改方式:
迫切的需要您的支援!如果打扰到您,万请见谅!
再次感谢!
大佬 请问下 文章里面的图片 输出地址在哪修改啊 万分感谢
@mkyos .... 我想是否有以下修改方式:
回复: 1.第一种方案可以做到,关闭或删去 FeaturePost 这个 Section 就行。 2.打开你的网站,浏览器按 F12 调出调试页面,就可以看到网页所加载的 js 文件。存放位置你可以放在 Github 上,然后用 jsDelivr CDN 加速。详见我另一篇博文。
这个可能对你偏难了,可以加群问下大家,因为工作上的事情没法及时回复,抱歉。
@red521 大佬 请问下 文章里面的图片 输出地址在哪修改啊 万分感谢
具体模板具体分析,关键词有 image url。
谢谢了啊! 已经搞定 用的图片代理
joeyliu6 notifications@github.com 于2020年10月27日周二 下午9:20写道:
@red521 https://github.com/red521 大佬 请问下 文章里面的图片 输出地址在哪修改啊 万分感谢 具体模板具体分析,关键词有 image url。
— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/joeyliu6/Blogger/issues/43#issuecomment-717238009, or unsubscribe https://github.com/notifications/unsubscribe-auth/AQ4IGEQGZSZPMZQMKUXLIDTSM3CKDANCNFSM4IAWVTSA .
文章缩略图如何显示为原来的样子呢,这样改后裁切显示一小部分。很不美观呢!
https://blog.iljw.me/2019/07/blogger-thumbnail.html