在脚本中添加CSS,可以吗?
我有这个脚本,站点上的一个人帮我修复了.
I have this script that a fellow here on the site helped me fix.
这是代码的第一部分,您可以按标记选择和分隔博客文章.
This is the first part of the code where you can choose and separate blog articles by tag.
是否可以在代码的第一部分中添加CSS,使我们拥有Terror,Shounen,Ação标签,并使每个标签具有不同的颜色?
Would it be possible to add CSS in this first part of the code where we have the tags Terror, Shounen, Açãoand make each tag a different color?
例如:恐怖:蓝色-少年:黄色-ção:绿色
For example: Terror: blue - Shounen: yellow - Ação: green
此脚本通过标记拉博客内容,但是所有列都是相同的颜色,我想在每个列中添加一个CSS来区分它们.
This script pulls the blogger content by the tag, but all columns are the same color, I would like to add a css in each to differentiate them.
<div id="feed-list-container"></div>
<div style="clear:both;"></div>
<script type="text/javascript">
var multiFeed = {
feedsUri: [
{
name: "Judul Widget 1",
url: "https://elfenliedbrazil.blogspot.com/",
tag: "Terror"
},
{
name: "Judul Widget 2",
url: "https://elfenliedbrazil.blogspot.com/",
tag: "Shounen"
},
{
name: "Judul Widget 1",
url: "https://elfenliedbrazil.blogspot.com/",
tag: "Ação"
}
],
numPost: 3,
showThumbnail: true,
showSummary: true,
summaryLength: 80,
titleLength: "auto",
thumbSize: 200,
containerId: "feed-list-container",
readMore: {
text: "Selengkapnya",
endParam: "?max-results=20"
}
};
</script>
This is the second part of the code.
<script>
/*<![CDATA[*/
var mf_defaults = {
feedsUri: [{
name: "Posting JQuery",
url: " ",
tag: "JQuery"
}, {
name: "Posting CSS",
url: "",
tag: "CSS"
}, {
name: "Widget-Widget Blogger",
url: " ",
tag: "Widget"
}],
numPost: 4,
showThumbnail: true,
showSummary: true,
summaryLength: 80,
titleLength: "auto",
thumbSize: 200,
thumbWidth: 200, // new setting
thumbHeight: 90, // new setting
newTabLink: false,
containerId: "feed-list-container",
listClass: "list-entries",
readMore: {
text: "More",
endParam: "?max-results=20"
},
autoHeight: false,
current: 0,
onLoadFeed: function(a) {},
onLoadComplete: function() {},
loadFeed: function(c) {
var d = document.getElementsByTagName("head")[0],
a = document.getElementById(this.containerId),
b = document.createElement("script");
b.type = "text/javascript";
b.src = this.feedsUri[c].url + "/feeds/posts/summary" + (this.feedsUri[c].tag ? "/-/" + this.feedsUri[c].tag : "") + "?alt=json-in-script&max-results=" + this.numPost + "&callback=listEntries";
d.appendChild(b)
}
};
for(var i in mf_defaults) {
mf_defaults[i] = (typeof(multiFeed[i]) !== undefined && typeof(multiFeed[i]) !== "undefined") ? multiFeed[i] : mf_defaults[i]
}
function listEntries(q) {
var p = q.feed.entry,
c = mf_defaults,
h = document.getElementById(c.containerId),
a = document.createElement("div"),
d = "",
l = c.feedsUri.length,
n, k, m, g;
for(var f = 0; f < c.numPost; f++) {
if(f == p.length) {
break
}
n = (c.titleLength !== "auto") ? p[f].title.$t.substring(0, c.titleLength) + (c.titleLength < p[f].title.$t.length ? "…" : "") : p[f].title.$t;
m = ("summary" in p[f]) ? p[f].summary.$t.replace(/<br ?\/?>/g, " ").replace(/<.*?>/g, "").replace(/[<>]/g, "") : "";
m = (c.summaryLength < m.length) ? m.substring(0, c.summaryLength) + "…" : m;
g = ("media$thumbnail" in p[f]) ? '<img src="' + p[f].media$thumbnail.url.replace(/\/s72(\-c)?\//, "/w" + c.thumbWidth + "-h" + c.thumbHeight + "-c/") + '" style="width:' + c.thumbWidth + "px;height:" + c.thumbHeight + 'px;">' : '';
for(var e = 0, b = p[f].link.length; e < b; e++) {
k = (p[f].link[e].rel == "alternate") ? p[f].link[e].href : "#"
}
d += '<div class="post hentry"' + (!c.autoHeight ? ' style="height' + c.thumbHeight + 'px;overflow:hidden;"' : "") + ">";
d += (c.showThumbnail) ? g : "";
d += '<div class="post-title entry-title"><a href="' + k + '"' + (c.newTabLink ? ' target="_blank"' : "") + ">" + n + "</a></div>";
d += '<div class="summary">';
d += "<span" + (!c.showSummary ? ' style="display:none;"' : "") + ">";
d += (c.showSummary) ? m : "";
d += "</span></div>";
d += '<span style="display:block;clear:both;"></span></div>'
}
d += "";
d += '<div class="more-link"><a href="' + c.feedsUri[c.current].url.replace(/\/$/, "") + "/search/label/" + c.feedsUri[c.current].tag + c.readMore.endParam + '"' + (c.newTabLink ? ' target="_blank"' : "") + ">" + c.readMore.text + "</a></div>";
a.className = c.listClass;
a.innerHTML = '<div class="main-title"><h4>' + c.feedsUri[c.current].name + "</h4></div>" + d;
h.appendChild(a);
c.onLoadFeed(c.current);
if((c.current + 1) < l) {
c.loadFeed(c.current + 1)
}
if((c.current + 1) == l) {
c.onLoadComplete()
}
c.current++
}
mf_defaults.loadFeed(0);
/*]]>*/
</script>
扩大我的评论:
可能值得使用数据属性.尽管您还可以在json中添加颜色代码属性,并在javascript部分的a.innerHTML处进行内联css/设置div的背景颜色.
Might be worthwhile to explore using data attributes. Though you could also add a color code attribute to your json, and at a.innerHTML in your javascript section have it do inline css/set the background-color for the div.
请务必注意,您的问题可能有很多解决方案,这就是我的解决方法.
It's important to note though, there are likely many solutions to your question, this is just how I'd do it.
您的css文件可能看起来像这样:
Your css file could look something like this:
div[data-tag='Terror'] {
background-color: blue;
}
div[data-tag='Shounen'] {
background-color: yellow;
}
div[data-tag='Ação'] {
background-color: green;
}
,您将更新javascript以在感兴趣的html元素上包含data-tag="'+c.feedsUri[c.current].tag+'"
.
and you'd update your javascript to include a data-tag="'+c.feedsUri[c.current].tag+'"
on your html element of interest.
anchor标签可能并不是您真正想要的位置,但这至少可以使您朝着我认为您要去的方向入手.
The anchor tag may not be where exactly you'd want it, but this would at least get you started in the direction I perceive you're attempting to go.
a.innerHTML = '<div data-tag="'+c.feedsUri[c.current].tag+'" +class="main-title"><h4>' + c.feedsUri[c.current].name + "</h4></div>" + d;