javascript - 在页面上列出博客文章,带有图像并使用 css 进行样式化
问题描述
下面的代码是用于在标签名称中列出博主的帖子但它只列出了帖子的标题,我想知道是否可以将帖子图像一起显示,并且还可以使用 css 进行样式化,我该怎么做?您可以更改标签名称,并且/feeds/posts/summary/-/NAME?alt=json&callback=processPostList12&start-index="
只会显示与标签名称相关的帖子。
我更改了创建类的代码并将图像的位置更改为行首,但现在它不再按字母顺序排列,我尝试了我所知道的一切并且无法修复它。图片是否也有可能指向帖子?就像标题一样
这是我改变的部分:
a1E.href = url;
a1E.textContent = title;
a1E.className += "aclass";
postImage.src = imageThumb;
postImage.className += "imclass";
var startIndex = 1;
var maxResults = 150;
var allResults = [];
function sendQuery12()
{
var scpt = document.createElement("script");
scpt.src = "/feeds/posts/summary/-/Series?alt=json&callback=processPostList13&start-index=" + startIndex + "&max-results=" + maxResults;
document.body.appendChild(scpt);
}
function printArrayResults(root)
{
//Sort Alphebetically
allResults.sort(function(a, b){
var a_string = a.children[0].textContent ;
var b_string = b.children[0].textContent ;
if(a_string < b_string) return -1;
if(a_string > b_string) return 1;
return 0;
})
var elmt = document.getElementById("postList13");
for (index = 0; index < allResults.length; index++) {
elmt.appendChild(allResults[index]);
}
}
function processPostList13(root)
{
var elmt = document.getElementById("postList13");
if (!elmt)
return;
var feed = root.feed;
if (feed.entry.length > 0)
{
for (var i = 0; i < feed.entry.length; i++)
{
var entry = feed.entry[i];
var title = entry.title.$t;
var date = entry.published.$t;
if( entry.media$thumbnail != undefined ){
var imageThumb = entry.media$thumbnail.url ;
} else {
var imageThumb = 'https://i.imgur.com/PqPqZQN.jpg' ;
}
for (var j = 0; j < entry.link.length; j++)
{
if (entry.link[j].rel == "alternate")
{
var url = entry.link[j].href;
if (url && url.length > 0 && title && title.length > 0)
{
var liE = document.createElement("li");
var a1E = document.createElement("a");
var postImage = document.createElement("img");
a1E.href = url;
a1E.textContent = title;
a1E.className += "aclass";
postImage.src = imageThumb;
postImage.className += "imclass";
liE.appendChild(postImage);
liE.appendChild(a1E);
//elmt.appendChild(liE);
allResults.push(liE);
}
break;
}
}
}
if (feed.entry.length >= maxResults)
{
startIndex += maxResults;
sendQuery12();
} else {
printArrayResults();
}
}
}
sendQuery12();
<div class="postlist1" id="postList13">
</div>
解决方案
1- 从 APi 检索帖子图像
在这些行之后:
var entry = feed.entry[i];
var title = entry.title.$t;
var date = entry.published.$t;
你可以使用:
var imageThumb = entry.media$thumbnail.url;
它将检索帖子的第一个图像缩略图。您应该验证它,因为没有图像的帖子将返回undefined
并media$thumbnail
导致 javascript 错误。所以 :
if( entry.media$thumbnail != undefined ){
var imageThumb = entry.media$thumbnail.url;
} else {
var imageThumb = 'alternative_image_path' ;
}
2-附加帖子图片:
...
var postImage= document.createElement("img");
postImage.src = imageThumb;
liE.appendChild(postImage);
...
最终代码应该是这样的:
<div>
<ul id="postList12"></ul>
</div>
<script type="text/javascript">
var startIndex = 1;
var maxResults = 150;
var allResults = [];
function sendQuery12()
{
var scpt = document.createElement("script");
scpt.src = "/feeds/posts/summary/-/NAME?alt=json&callback=processPostList12&start-index=" + startIndex + "&max-results=" + maxResults;
document.body.appendChild(scpt);
}
function printArrayResults(root)
{
//Sort Alphebetically
allResults.sort(function(a, b){
var a_string = a.children[0].textContent ;
var b_string = b.children[0].textContent ;
if(a_string < b_string) return -1;
if(a_string > b_string) return 1;
return 0;
})
var elmt = document.getElementById("postList12");
for (index = 0; index < allResults.length; index++) {
elmt.appendChild(allResults[index]);
}
}
function processPostList12(root)
{
var elmt = document.getElementById("postList12");
if (!elmt)
return;
var feed = root.feed;
if (feed.entry.length > 0)
{
for (var i = 0; i < feed.entry.length; i++)
{
var entry = feed.entry[i];
var title = entry.title.$t;
var date = entry.published.$t;
if( entry.media$thumbnail != undefined ){
var imageThumb = entry.media$thumbnail.url ;
} else {
var imageThumb = 'https://i.imgur.com/PqPqZQN.jpg' ;
}
for (var j = 0; j < entry.link.length; j++)
{
if (entry.link[j].rel == "alternate")
{
var url = entry.link[j].href;
if (url && url.length > 0 && title && title.length > 0)
{
var liE = document.createElement("li");
var a1E = document.createElement("a");
var postImage = document.createElement("img");
a1E.href = url;
a1E.textContent = title;
postImage.src = imageThumb;
liE.appendChild(a1E);
liE.appendChild(postImage);
//elmt.appendChild(liE);
allResults.push(liE);
}
break;
}
}
}
if (feed.entry.length >= maxResults)
{
startIndex += maxResults;
sendQuery12();
} else {
printArrayResults();
}
}
}
sendQuery12();
</script>
推荐阅读
- r - 我的条形图不断返回“找不到对象'x'”
- c# - C#,带有 UserPrincipal 的显示名称不起作用
- jira - jira 软件服务器的所有流量是否首先通过 atlassian 路由?
- stored-procedures - Snowflake 程序中 IF 条件下的变量比较
- asp.net-mvc - 命名空间“System.Data”中不存在“实体”
- c# - 动态创建测试用例
- python - 让移动更真实
- javascript - model.detect 不是 HTMLVideoElement.predictWebcam JS 错误中的函数
- python - 单击时如何修复数字不变
- python - 标记和编码数据集使用太多 RAM