「小红帽友链」

发布日期: 2018-07-14
更新日期: 2018-10-25 17:29
最新版本: V1.01
浏览次数: 1158次
这是一个友情链接的服务,数据来自『个站商店』,你不需要像传统的方式那样自己写友链的代码,例如填写友链名称,链接,LOGO图,简介等,还是不是有点麻烦?用『小红帽友链』你就能轻松搞定。你只需要在个站商店里添加你感兴趣的网站的友链,点一个按钮,即添加完成。然后,就是在你的博客的友链页面,嵌入『小红帽友链』的代码(html + js,不是php的),稍微排查下错误,就可以完成啦!
『小红帽友链』是个站商店的一个子项目,属于api服务,提供动态生成的友链列表。

你可以不需要会写html代码,很简单的你只要在个站上点击添加友链,再插入代码到你的博客里,就完成啦!
这样还可以在友链上显示有文章更新的小红点哦!那样你博客的友链就很强大了,很个性!

<( ̄︶ ̄)>
如何设置个站上的友链?去你感兴趣的网站页,发现一个按钮叫:添加他的友情链接


小红帽最大的特色是:



1. 可以显示最近有文章更新的数量
2. 不用自己写链接代码,按一个按钮搞定添加友链。

以下是效果图:




demo 1:笔记星球:


http://note-star.cn/links.html




2018-07-14日 v1.00 发布



食用方法:




直接在你的博客的独立页面里,插入里面的代码,即可。!! 注意,前提是:你要在个站上设置友链。设置方法是去你感兴趣的TA的网站上,点击按钮【设置TA为友情链接】

【原理】
大致的原理其实很简单,嵌入了我的代码后,前端会发送一个api请求到【个站商店】,个站商店会根据你的域名来源,自动判断你的友情链接数据库,然后返回这些数据给你的博客。这个是跨域进行的api请求。最后你们前端拿到数据后,渲染模板,输出友链列表的html

这段代码,是引入常用库,jquery(如果你博客本身已有jquery库,则不能重复引入)



这段代码就是ajax请求api了



这段代码是拿到数据后,渲染前端模板用的



这段很重要,是渲染数据的模版,你的友链展现成什么样式,由这里 + CSS 定义共同决定,如果你想自定义友链列表样式,改这些可以了




这里是安装使用教程

以Typecho为例,去你的友链页面,编辑:



可以编辑html代码的地方,是个编辑器:



插入【个站友链代码】,然后保存

以上,初步就完成了。

不过,且慢,请注意:



不过不会那么顺利,因为Typecho会把一些html代码格式化,注入一些< pre>< code>之类的标签,使代码失效。
这里就要大家排查下了,一般去掉多余的换行和空格可以解决。如果你的Typecho v1.1版本,还有个更简单的处理办法:

!!!
< 这里插入 小红帽友链 的代码 >
!!!

Typecho 1.1的参考(本人没试过@ω@):
https://get233.com/archives/output-raw-html-in-typecho-dev.html

还有一种懒人办法,有些博客程序,可以直接引入php文件,你可以使用这种语法,直接引入下载的代码文件,一句搞定。只是这样样式就是默认的。

对了,大家务必不要删除代码里关于『个站商店』的链接和描述哦。因为这是唯一一个可以让大家知道个站的途径了,亲们~



以上,慢慢享用~


http://storeweb.cn/forum/one/61