我不确定从哪条路线开始,也不知道什么是合适的方式来做我在这里想要完成的事情。无论是否可以在PHP中完成,或者如何在JS中完成,任何帮助都是非常感谢的。
对于在页面上找到的每个链接,(可能在小部件,主题的模板页面,论坛等中找到),我如何搜索并找出post_type,然后为该特定类型添加特定的链接颜色?
例如:
查看侧边栏小部件中最近发布的文章列表
(这是我描述代码意图的最好方式):
For each post_type, dynamically set the following
'post'= color:black,
'project' = color:dark blue,
'topics' = color:dark green,
and so on.
此外,如果有一个链接到另一个帖子在网站的其他地方,如在另一个帖子的正文内容,甚至一个论坛主题,我需要追加一个类到该链接。然后我的CSS可以像
这样.forum-post-link{color: #006400;}
.project-post-link{color: #00008B;}
.standard-post-link{color:#000;}
这里有一个现成的解决方案。你可能需要稍微调整一下选择器,以避免主站导航链接。
具有href
的锚点<a>
自动具有许多属性,如hostname
, pathname
, origin
等,这些属性与url的各个部分相关。下面使用这些属性来隔离外部(非同一域)链接,并查找主页链接。
它应该是相当容易适应的基于评论的活网站,以及扩展超过3个主要路线提到的问题。
/* set according to site domain */
var siteHost = "myurl.com";
var linkClasses = {
/* adjust string values as classes to suit css rules, keys match term to look for in url */
post: 'post',
forum: 'forum',
project: 'project'
}
$('a').each(function () {
var host = this.hostname; /* returns domain.com */
if (host !== siteHost) {
return; /* not a local link, quit here */
}
var newClass = '';
var path = this.pathname; /* returns eveything after http://myurl.com */
if (path && path !== '/') {
/* we only want to look at first part of path*/
var mainPath = path.split('/')[1];
/* now check all the various terms in linkClasses object */
$.each(linkClasses, function (key, value) {
if (mainPath.indexOf(key) > -1) {
newClass = linkClasses[key];
}
});
$(this).addClass(newClass);
} else {
/* is home page link */
$(this).addClass('home'); /* to test home page link finding ability */
}
});
演示