如题

仅供参考

从wordpress转到typecho,虽然资源占用少了,但是有一个问题就出来了————很多typecho的主题都没有自带的友链页面,而typecho的默认编辑器玩不了<div>总不能为了一个友链换解析器吧(parsedown)而且换了写<div>也很麻烦。
##我有一个一劳永逸的方法不知当讲不当讲 ?
准

不如用插件+自义定页面

我使用的插件是 Links(是大佬)下载:http://www.imhan.com/archives/typecho-links/
看完这个插件的介绍和帮助文档是不是感觉就很简单了呢?
先,
创建一个自义定的页面
随便取个名字xxx.php,我取的page-links.php方便区分。
然后输入

<?php
/**
 * links
 *
 * @package custom
 */
  $this->need('header.php'); 
?>

links可随便改 @package custom不可改动
接着到主题安装目录下找到page.php,将里面的内容从<!-- content start --><!-- content end -->复制到新创建的文件里面(也可以自己照着写)别忘了加上最后的<?php $this->need('footer.php');?>。然后删掉里面的内容提供
<?php $this->content(); ?>并加上刚才Links插件帮助文档里的<?php Links_Plugin::output(); ?>让插件来提供内容。output调用方式先不填(不想继续的话到这里就完了,不过没有样式,调用方式参考插件帮助文档)。
下来找好你想用的友链页面(也可以自己写)

注意:应使用<ul><li></li></ul>形式的友链页面。

css引入header.php(样式不要重名)。接着打开Links插件的Plugin.php在里面找到控制输出格式,在最后一个else后在加一个自己的else如图
最后一个else
格式仿照前面的,我加的是

else if ($pattern == "cos_akina") {
			$pattern = "<li class=\"link-item\"><a class=\"link-item-inner effect-apollo\" href=\"{url}\" title=\"{title}\" target=\"_blank\"><img src=\"{image}\" class=\"round_icon\" alt=\"{name}\" /><span class=\"sitename\">{name}</span><div class=\"linkdes\">\"{title}\"</div></a></li>\n";
	}

看过帮助文档后可知$pattern后面就是调用方式,这时再回去把刚才建的页面里的<?php Links_Plugin::output(); ?>括号里填上调用方式(记得加引号)。这时就算是完成了大部分了。
##注意:将<?php Links_Plugin::output(); ?>替换掉友链页中的<li></li>如图
替换
我的代码

                <div class="links">
                <ul class="link-items fontSmooth">
               <?php Links_Plugin::output("cos_akina");?>
            </ul>
          </div>

然后在typecho后台-管理-独立页面创建一个页面模板选刚才随意修改的link就完成了
最后我添加的css

/*友链*/	
.links {
font-family: miranafont,"Hiragino Sans GB",STXihei,"Microsoft YaHei",SimSun,sans-serif;
margin-bottom:80px
}
.links ul {
margin: 0;
list-style: none;
padding: 0;
width: 100%;
display: inline-block;
}
.links ul li {
width: 32%;
float: left;
border: 1px solid #ECECEC;
padding: 10px 30px; 
margin: 4px 4px;
position: relative;
overflow: hidden;
-webkit-transition: all .3s;
transition: all .3s;
}



span.sitename {
color: #363433;
padding-bottom: 10px;
display: block;
-webkit-transition: all .3s;
transition: all .3s;
}
.linkdes {
color: #949494;
font-size: 13px;
padding: 10px 0;
border-top: 1px dashed #ddd;
min-height: 46px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
line-height: 25px;
-webkit-transition: all .5s;
transition: all .5s;
}
.link-title {
font-weight: 400;
color: #6D6D6D;
padding-left: 10px;
border-left: 3px solid #A0DAD0;
margin: 50px 0 20px;
}
.links ul li:before {
content: "";
background-color: #93d5dc;
-webkit-transform: skew(45deg, 0);
transform: skew(45deg, 0);
width: 0;
height: 100%;
position: absolute;
top: 0px;
left: -60px;
z-index: -1;
-webkit-transition: all .5s;
transition: all .5s;
}



.links ul li:hover {
color: #27323A;
border: 1px solid #93d5dc;
}
.links ul li:hover:before {
width: 180%;
}
.links ul li:hover .sitename  {
color: #fff;
}
.links ul li:hover .linkdes {
color: #fff;
border-top: 1px dashed #fff;
}
span.linkss-title {
font-size: 25px;
/* margin: 0 auto; */
text-align: center;
display: block;
margin: 50px 0 30px;
font-family: miranafont,"Hiragino Sans GB",STXihei,"Microsoft YaHei",SimSun,sans-serif;
letter-spacing: 5px;
}
a:link,a:visited{
 text-decoration:none; 
}



@media (max-width: 630px) {
.links ul li {
width: 100% !important;
}
.links ul li {
width: 48.6%;
}
.links ul li:before {
display:none
}
.links ul li:hover .sitename  {
color: #93d5dc;
}
.links ul li:hover .linkdes {
color: #949494;
border-top: 1px dashed #ddd;
}
}
.round_icon{
  width: 34px;
  height: 34px;
  display: flex;
  border-radius: 50%;
}

css除了最后一个.round_icon,其余来自主题Akina
友链页面效果:本站友链(已经更换)
原效果:http://blog.yhsjmc.fun/ex/links.html

转载请注明出处