onehot处理nsl_如何为typecho添加独立友链页面

做了博客，自然也要添加一些友链，和大佬们促进一下交流，顺便再多蹭些访问量。但是如何添加友链却是一个令人困扰的问题，尤其是对于typecho来说，实在不容易，更不用去提那些没有友链相关配置的typecho主题了，更难！

基本需求

友链页面大致需要满足下面的三个条件：添加修改方便

改格式，导出数据方便

样式优美、好看

探索过程

在我用的主题中，作者没有提供特别方便的友链添加方式。而插件又是不可能用的，一个小功能再去用插件、数据库，太浪费了！

起初想的是在typecho中直接放置类似的静态页面，div、a格式什么的直接写好，再添加到模板里面，需要使用时就直接使用模板。但同时也带来了一个修改不易的难题——typecho文章里面没有实质内容，添加、修改不方便。

于是尝试把< div >直接写到文章里面，以后需要修改时就可以直接修改了。

typecho可以用！！！+html+！！！的格式嵌入html文档，但生成的html给人一种分裂的感觉。而typcho的markdown编辑器居然解析不了< div> 标签 ，我总不能为typecho换个解析器吧(parsedown了解一下)！没办法，不用 < div> 了，改用< ul >吧！

于是我决定只让文章中记录数据，至于样式表什么的后期处理。我把这个处理过程放到了用户的客户端里面，用一小段js脚本去处理。会php的朋友也可以自己改一改，放到服务器上面处理。

基本思路

友链数据的存储放到独立页面的内容里面，并以< ul > 和 < li > 两标签做标记，方便定位。

从第一个 < li > 开始，以连续的四个 < li >为一组友链单位，分别存储 网站名、网站地址、网站图标和网站简述。再利用js将其整合成html语句块并配以显示样式，添加到ul块的前面，最后将ul块删除或移除。

我的代码<?php

/**

* Template Page of Links by onesrc.cn

*

* @package custom

*/

if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?>

<?php $this->need('header.php'); ?>

<?php $this->title() ?>

Published on <?php $this->date('M j, Y'); ?>

(function(){

let a =document.getElementById("flinks");

if(a){

let ns = a.querySelectorAll("li");

let nsl = ns.length;

let str ='

';

let bgid = 0;

const bgs =["bg-white","bg-grey","bg-deepgrey","bg-blue","bg-purple","bg-green","bg-yellow","bg-red","bg-orange"];

for(let i = 0;i<=nsl-4;i+=4){

bgid = Math.floor(Math.random() * 9);

str += (`

${ns[i].innerText}

${ns[i+3].innerText}

`);

}

str+='

';

let n1 = document.createElement("div");

n1.innerHTML = str;

a.parentNode.insertBefore(n1,a);

a.style="display: none;";

}else{

console.log('No such id "flinksH"');

}

}())

<?php $this->need('comments.php'); ?>

<?php $this->need('footer.php'); ?>

核心代码在 < script >块之间，其余的部分可以根据你自己的主题更改。

使用方式

如果需要使用，首先需要建立一个id为flinks的ul块，然后每一个友链添加四条信息。## 友情链接:

• 一元-ONESRC
• https://www.onesrc.cn/
• https://cdn.onesrc.cn/uploads/images/favicon.png
• onesrc.cn
• Baidu
• https://www.baidu.com/
• https://www.baidu.com/favicon.ico
• baidu.com

## 其他内容

如果和我使用的是同一个主题，直接复制上面的代码新建一个模板文件，使用时选择这个模板就可以了。

如果不一样，你可以自己改一改 str +=XXX 语句部分，配合你自己的主题，相信你最后一定能改出属于自己的独立样式！加油！

我的页面

代码部分

显示效果

本文由 ukuq 创作，采用 知识共享署名4.0 国际许可协议进行许可

本站文章除注明转载/出处外，均为本站原创或翻译，转载前请务必署名

最后编辑时间为: Aug 20, 2019 at 10:49 pm