javascript - 如何根据 div 类分配元标记图像内容 url 值？

Question

我的目标是如果我的帖子在分享时包含特定的 class/es，则有一个特定的图像预览。

我正在使用博客平台及其默认代码。

<b:if cond='data:post.labels any (l  =&gt; l.name in {"video", "youtube"})'>
    <meta content='post-with-video-class.jpg' property='og:image'/>

<b:elseif cond='data:post.labels any (l  =&gt; l.name in {"gallery"})'/>
    <meta content='post-with-gallery-class.jpg' property='og:image'/>

<b:else/>
    <meta content='default-class-url.jpg' property='og:image'/>
</b:if>

...和我的内容

<div id='posts'>
    <div class='video and youtube'>
        post 1
    </div>
    <div class='gallery'>
        post 2
    </div>
    <div class='default'>
        post 3
    </div>
</div>

此代码只有在 body 内时才有效，并且为了获得预览图像，meta 标记应位于 head 内。

我尝试用 jquery 附加它，但仍然没有预览图像。

$("[property*='og:image']").appendTo ("head");

有没有jQuery代码可以代替blogger的代码？ 我正在阅读有关 classList 和 hasClass 的内容，但执行它们仍然离我的知识还很远。请帮忙。

Answer 1

可能有更好的解决方案，但这里有一个可行的解决方法。
在此假设下:

• 对于 ListView ，应显示博客的一张默认图像。
• 对于详细 View ，将显示视频或图库图像。
• Post-Title 可以有一个关键字来过滤，而不是标签。

此代码可以输入到 head 标签中，并创建指定的 meta 标签。对于此示例，我为 post-with-video-class.jpg 图像和关键字 (video) 使用了关键字em>(pics) 用于图像 post-with-gallery-class.jpg，在任何其他情况下将显示默认图像。

可以使用任何其他关键字，但限制标题选项

<b:with value='data:widgets.Blog.first.posts.first' var='post'>
    <b:if cond='data:view.isSingleItem and data:post.title contains &quot;(video)&quot;'>
        <meta content='post-with-video-class.jpg' property='og:image'/>
    <b:elseif cond="data:view.isSingleItem and data:post.title contains &quot;(pics)&quot;"/>
        <meta content='post-with-gallery-class.jpg' property='og:image'/>
    <b:else/>
        <meta content='default-class-url.jpg' property='og:image'/>
    </b:if>
</b:with> 

这并不优雅，但可能是一种或多或少简单的解决方法。

Hint: for this to work, it should be based on a new Theme (like Contempo) since some functions, tags and data elements are not available in older themes.
  
Here some good documentation, that might help http://template-data.blogspot.co.at

由于没有太多文档，我不能说 labels 属性是否可以在 data:widgets.Blog.first.posts.first< 上访问 发布对象。