search

joeyliu6 / Blogger

利用 Github 存储和管理：博文、静态文件、评论。
https://blog.meeo.io
10 stars 0 forks source link

Blogger 博文首页缩略图解决方法 #43

Open joeyliu6 opened 5 years ago

joeyliu6 commented 5 years ago

https://blog.iljw.me/2019/07/blogger-thumbnail.html

milefu commented 5 years ago

我考虑用你介绍的第二种方法“使用 Javascript 代码”，在修改的过程中，存在问题： 1、我使用的是blogger官方的Emporio主题，在模板中修改添加你的第二段代码时，不知我找到的下面这部分代码是不是对应的放缩略图的地方？

     <div class='snippet-thumbnail-container'>
        <div expr:class='&quot;snippet-thumbnail &quot; + data:thumbClassName'/>
     </div>

2、我是将你第二段代码放在中间部分，结果没有加载出来图片。

烦请博主抽空回复。

joeyliu6 commented 5 years ago

@lawpai 我考虑用你介绍的第二种方法“使用 Javascript 代码”，在修改的过程中，存在问题： 1、我使用的是blogger官方的Emporio主题，在模板中修改添加你的第二段代码时，不知我找到的下面这部分代码是不是对应的放缩略图的地方...

你好，法律兄。我花了点时间调试出来了。

因为每个模板中，缩略图的显示方法各有千秋，在 Contempo主题中，缩略图是在 img 标签中。在 Emporio 主题中，缩略图是以 CSS 样式的 backgroundimage 实现的。

所以说，针对不同的主题模板，JS 代码就略有区别。缩略图代码的位置也是不同。

Emporio 主题缩略图的添加方法：

  1. 找到 <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>
  1. 在 </body> 标签前插入 JS 代码： 
    <b:if cond='data:blog.pageType in {&quot;index&quot;,&quot;searchQuery&quot;,&quot;searchLabel&quot;,&quot;archive&quot;}'> <!--如果当前页是首页&#65292;搜索页&#65292;标签页&#65292;那么代码继续执行-->
<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 （后续网站内容会变化）。若有疑问，欢迎继续来问我。

joeyliu6 commented 5 years ago

知名主题的缩略图 Javascript 解决步骤：

  1. 将以下代码放置在</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>
  2. 找到这一段代码 
    <b:includable id='normalPost'></b:includable>

    将其中的<b:if></b:if>：

    <b:if cond='data:post.featuredImage.isResizable'>
<span class='snippet-thumbnail-img' expr:id='&quot;snippet_thumbnail_id_&quot; + data:post.id'/>
<style>
    @media (min-width: 1168px) {
    <b:eval expr='&quot;#snippet_thumbnail_id_&quot; + data:post.id'/> {
    background-image: url(<b:eval expr='resizeImage(data:post.featuredImage, 256, &quot;1:1&quot;).cssEscaped'/>);
    }
    }
    @media (min-width: 969px) and (max-width: 1167px) {
    <b:eval expr='&quot;#snippet_thumbnail_id_&quot; + data:post.id'/> {
    background-image: url(<b:eval expr='resizeImage(data:post.featuredImage, 1167, &quot;3:2&quot;).cssEscaped'/>);
    }
    }
    @media (min-width: 601px) and (max-width: 968px) {
    <b:eval expr='&quot;#snippet_thumbnail_id_&quot; + data:post.id'/> {
    background-image: url(<b:eval expr='resizeImage(data:post.featuredImage, 968, &quot;3:2&quot;).cssEscaped'/>);
    }
    }
    @media (max-width: 600px) {
    <b:eval expr='&quot;#snippet_thumbnail_id_&quot; + data:post.id'/> {
    background-image: url(<b:eval expr='resizeImage(data:post.featuredImage, 600, &quot;3:2&quot;).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 == &quot;PopularPosts&quot;)'>
<b:if cond='data:post.featuredImage and (data:widget.type != &quot;PopularPosts&quot; 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>
  3. 修改 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%
}
mai1me commented 4 years ago

给大佬点赞

Jinunmeng commented 4 years ago

你好，我用Contempo主题模板，按照你第二种方法设置成功了，现在我想修改缩略图的大小，应该怎么修改呢

joeyliu6 commented 4 years ago

@Jinunmeng 你好，我用Contempo主题模板，按照你第二种方法设置成功了，现在我想修改缩略图的大小，应该怎么修改呢

你好，这个代码引用的博文的第一张图片链接来当缩略图。

如果想修改大小，可以通过添加 CSS 样式来达到目的。

Jinunmeng commented 4 years ago

@joeyliu6

@Jinunmeng 你好，我用Contempo主题模板，按照你第二种方法设置成功了，现在我想修改缩略图的大小，应该怎么修改呢

你好，这个代码引用的博文的第一张图片链接来当缩略图。

如果想修改大小，可以通过添加 CSS 样式来达到目的。 主要是不知道在哪里修改，我现在把缩略图给去掉了，不显示。大佬有时间帮忙看下吧，我也找找在哪个地方修改

joeyliu6 commented 4 years ago

@Jinunmeng

后面的交流我们用邮箱联系吧(●'◡'●)，我的邮箱在我的 Github 个人页可以找到。 记得先把缩略图加上去，把博客地址发我，我好帮你查看修改。

lollxxox commented 4 years ago

博主好！ 我想使用方法3，但是一直没有搞定。我用的主题也是基于Contempo，但是我并没有找到''这个链接，只有data:post.featuredImage这么一个参数，但是从代码看起来并不像是一个链接，类似于：

    <b:if cond='data:post.featuredImage'>
                  <div class='snippet-thumbnail'>
                    <b:include data='{                                     image: data:post.featuredImage,                                     imageSizes: [32, 64, 128, 256],                                     imageRatio: &quot;1:1&quot;,                                     sourceSizes: &quot;(max-width: 800px) 20vw, 128px&quot;                                  }' name='responsiveImage'/>
                  </div>
                </b:if>

我应该怎么修改代码才能正确的处理缩略图呢？另外如果这个方法可行，那其实不用找GitHub图床了，就用Blogger自带的图像上传发布，再返回文章编辑HTML，所有的图片前面加上

https://images.weserv.nl/?url=

就可以在境内访问了吧？这样也可以吗？

joeyliu6 commented 4 years ago

@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 样式，需要根据各自模板来调整。

Pathsis commented 3 years ago

求助博主，notable主题的缩略图怎么改呢？

Pathsis commented 3 years ago

@joeyliu6 知名主题的缩略图 Javascript 解决步骤：

  1. 将以下代码放置在</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>
  2. 找到这一段代码 
    <b:includable id='normalPost'></b:includable>

    将其中的<b:if></b:if>：

    <b:if cond='data:post.featuredImage.isResizable'>
<span class='snippet-thumbnail-img' expr:id='&quot;snippet_thumbnail_id_&quot; + data:post.id'/>
<style>
    @media (min-width: 1168px) {
    <b:eval expr='&quot;#snippet_thumbnail_id_&quot; + data:post.id'/> {
    background-image: url(<b:eval expr='resizeImage(data:post.featuredImage, 256, &quot;1:1&quot;).cssEscaped'/>);
    }
    }
    @media (min-width: 969px) and (max-width: 1167px) {
    <b:eval expr='&quot;#snippet_thumbnail_id_&quot; + data:post.id'/> {
    background-image: url(<b:eval expr='resizeImage(data:post.featuredImage, 1167, &quot;3:2&quot;).cssEscaped'/>);
    }
    }
    @media (min-width: 601px) and (max-width: 968px) {
    <b:eval expr='&quot;#snippet_thumbnail_id_&quot; + data:post.id'/> {
    background-image: url(<b:eval expr='resizeImage(data:post.featuredImage, 968, &quot;3:2&quot;).cssEscaped'/>);
    }
    }
    @media (max-width: 600px) {
    <b:eval expr='&quot;#snippet_thumbnail_id_&quot; + data:post.id'/> {
    background-image: url(<b:eval expr='resizeImage(data:post.featuredImage, 600, &quot;3:2&quot;).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 == &quot;PopularPosts&quot;)'>
<b:if cond='data:post.featuredImage and (data:widget.type != &quot;PopularPosts&quot; 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>
  3. 修改 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>".
joeyliu6 commented 3 years ago

@mkyos

第二段修改，系统给出的错误反馈是：

org.xml.sax.SAXParseException; lineNumber: 3006; columnNumber: 11; The element type "a" must be terminated by the matching end-tag "</a>".

把你修改的代码放到 Github 或私发给我，我帮你检查一下。

Pathsis commented 3 years ago

实在太感谢了！！

Pathsis commented 3 years ago

@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…]()

joeyliu6 commented 3 years ago

@mkyos 还没收到你发的文件。

Pathsis commented 3 years ago

我发到您的邮箱了，是不是在垃圾桶中呢？

joeyliu6 commented 3 years ago

@mkyos
你好，邮件进垃圾箱了。问题出在有两个 a 标签，但只有一个结尾。所以会报错。

将此段代码代替上面一段即可。

<b:if cond='(not data:view.isSingleItem or data:widget.type == &quot;PopularPosts&quot;)'>
    <b:if cond='data:post.featuredImage and (data:widget.type != &quot;PopularPosts&quot; 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>
Pathsis commented 3 years ago

感谢！

@mkyos 你好，邮件进垃圾箱了。问题出在有两个 a 标签，但只有一个结尾。所以会报错。

将此段代码代替上面一段即可。

<b:if cond='(not data:view.isSingleItem or data:widget.type == &quot;PopularPosts&quot;)'>
    <b:if cond='data:post.featuredImage and (data:widget.type != &quot;PopularPosts&quot; 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都会在网页上保留它，而且它的缩略图非常顽固地由谷歌的服务器提供。我想是否有以下修改方式：

  1. 去掉featurepost模块，仅以普通post展示于首页；然后参照lawpai的方法使用weserv来代理图片。
  2. 将搜索和菜单的js文件转移到墙内。（目前我的困难是：我不知道涉及的js文件时什么；我不知道如何修改涉及js的xml代码；我自己没有可用的cdn存储js文件。）

迫切的需要您的支援！如果打扰到您，万请见谅！

再次感谢！

red521 commented 3 years ago

大佬 请问下 文章里面的图片 输出地址在哪修改啊 万分感谢

joeyliu6 commented 3 years ago

@mkyos .... 我想是否有以下修改方式：

  1. 去掉featurepost模块，仅以普通post展示于首页；然后参照lawpai的方法使用weserv来代理图片。
  2. 将搜索和菜单的js文件转移到墙内。（目前我的困难是：我不知道涉及的js文件时什么；我不知道如何修改涉及js的xml代码；我自己没有可用的cdn存储js文件。）

回复： 1.第一种方案可以做到，关闭或删去 FeaturePost 这个 Section 就行。 2.打开你的网站，浏览器按 F12 调出调试页面，就可以看到网页所加载的 js 文件。存放位置你可以放在 Github 上，然后用 jsDelivr CDN 加速。详见我另一篇博文。

这个可能对你偏难了，可以加群问下大家，因为工作上的事情没法及时回复，抱歉。

joeyliu6 commented 3 years ago

@red521 大佬 请问下 文章里面的图片 输出地址在哪修改啊 万分感谢

具体模板具体分析，关键词有 image url。

red521 commented 3 years ago

谢谢了啊！ 已经搞定 用的图片代理

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 .

x2928393337 commented 3 years ago

文章缩略图如何显示为原来的样子呢，这样改后裁切显示一小部分。很不美观呢！