英文:
How to create list of posts in blogger post with images
问题
你好，我正在尝试创建类似分类的帖子列表，但我不知道如何创建带有图像和描述的列表，就像下面这样 -
我尝试创建，但数据的格式不正确，您可以在以下截图中看到 -
英文:
Hello I am trying to create list of post for similar categories but I am not getting how to create list with image and description like below -
I tried to create but formatting of data is not correct, you can see in following screen shot-
答案1
得分: 2
以下是您提供的HTML和JavaScript代码的翻译部分：
<style type='text/css'>
.post {
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: 1px solid #EEE;
overflow: hidden;
font-family: tahoma;
}
.post-thumb {
float: left;
margin-right: 10px;
border: 3px solid #fff;
box-shadow: 0 0 1px #000;
}
.post-title {
margin: 0 0 5px;
line-height: 12px
}
.post-title a {
font-size: 12px;
color: #222;
text-decoration: none
}
.post-title a:hover{
color: coral;
text-decoration: underline
}
.post-snippet{
font-size: 12px;
color: #666;
margin: 5px 0;
}
.post-date {
font-size: 12px;
color: #999;
}
</style>
<div id='posts'></div>
<script type='text/javascript'>
function FeedPosts(jsondata){
if(jsondata.feed.entry){
var markup='';
for( var p=0; p < jsondata.feed.entry.length; p++){
var item = jsondata.feed.entry[p],
thumbnail = item['media$thumbnail'] ? item['media$thumbnail'].url.replace(/s72-c/, 'w150-h80-p') : '',
title = item.title.$t,
link = item.link.filter(function(l){ return l.rel == 'alternate' })[0].href,
snippet = item.content.$t.replace(/<\/?[^>]+(>|$)/g, '').substr(0, 80) + '...',
date = new Date(item.published.$t).toLocaleDateString();
markup += '<div class="post">';
markup += thumbnail ? '<img class="post-thumb" src="'+ thumbnail +'">' : '';
markup += '<h2 class="post-title"><a href="'+ link +'">'+ title +'</a></h2>';
markup += '<p class="post-snippet">'+ snippet +'</p>';
markup += '<abbr class="post-date">'+ date +'</abbr>';
markup += '</div>';
}
document.querySelector('#posts').innerHTML = markup;
}
}
</script>
这是您提供的代码的翻译部分，没有其他内容。
英文:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<style type='text/css'>/*<![CDATA[*/
.post {
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: 1px solid #EEE;
overflow: hidden;
font-family: tahoma;
}
.post-thumb {
float: left;
margin-right: 10px;
border: 3px solid #fff;
box-shadow: 0 0 1px #000;
}
.post-title {
margin: 0 0 5px;
line-height: 12px
}
.post-title a {
font-size: 12px;
color: #222;
text-decoration: none
}
.post-title a:hover{
color: coral;
text-decoration: underline
}
.post-snippet{
font-size: 12px;
color: #666;
margin: 5px 0;
}
.post-date {
font-size: 12px;
color: #999;
}
/*]]>*/</style>
<div id='posts'></div>
<script type='text/javascript'>/*<![CDATA[*/
function FeedPosts(jsondata){
if(jsondata.feed.entry){
var markup='';
for( var p=0; p < jsondata.feed.entry.length; p++){
var item = jsondata.feed.entry,
thumbnail = item['media$thumbnail'] ? item['media$thumbnail'].url.replace(/s72-c/, 'w150-h80-p') : '',
title = item.title.$t,
link = item.link.filter(function(l){ return l.rel == 'alternate' })[0].href,
snippet = item.content.$t.replace(/<\/?[^>]+(>|$)/g, '').substr(0, 80) + '...',
date = new Date(item.published.$t).toLocaleDateString();
markup += '<div class="post">';
markup += thumbnail ? '<img class="post-thumb" src="'+ thumbnail +'">' : '';
markup += '<h2 class="post-title"><a href="'+ link +'">'+ title +'</a></h2>';
markup += '<p class="post-snippet">'+ snippet +'</p>';
markup += '<abbr class="post-date">'+ date +'</abbr>';
markup += '</div>';
}
document.querySelector('#posts').innerHTML = markup;
}
}
/*]]>*/</script>
<!-- Replace "6224600608277196834" with your blog id -->
<!-- OR Replace script source with "/feeds/posts/default/-/Reactions?alt=json-in-script&max-results=5&callback=FeedPosts" -->
<!-- Replace "Reactions" with your category name -->
<script src="https://www.blogger.com/feeds/6224600608277196834/posts/default/-/Reactions?alt=json-in-script&max-results=5&callback=FeedPosts"></script>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论