解决思路
typecho 的 markdown 支持以!!!<-- html tag -->!!! 的方式嵌入 html 内容，所以可以把原来的脚本嵌入到这里面，这样就不用修改主题了。

为了使显示效果不过分依赖 css，我特意重写、精简了 css，同样把 css 也嵌入到 html tag 里面，使得与主题分离而独立。

如何使用

 # 本页面仅作为演示使用
    
    友链页面请转至 https://www.onesrc.cn/links.html
    
    ## 友情链接:
    
    <ul class="flinks">
    <li>一元-ONESRC</li>
    <li>https://www.onesrc.cn/</li>
    <li>https://cdn.onesrc.cn/uploads/images/favicon.png</li>
    <li>onesrc.cn</li>
    
    <li>Baidu</li>
    <li>https://www.baidu.com/</li>
    <li>https://www.baidu.com/favicon.ico</li>
    <li>baidu.com</li>
    
    <li>一元-ONESRC</li>
    <li>https://www.onesrc.cn/</li>
    <li>https://cdn.onesrc.cn/uploads/images/favicon.png</li>
    <li>onesrc.cn</li>
    
    <li>一元-ONESRC</li>
    <li>https://www.onesrc.cn/</li>
    <li>https://cdn.onesrc.cn/uploads/images/favicon.png</li>
    <li>onesrc.cn</li>
    </ul>
    
    ## 其他内容
    
    又有一些链接
    
    <ul class="flinks">
    <li>一元-ONESRC</li>
    <li>https://www.onesrc.cn/</li>
    <li>https://cdn.onesrc.cn/uploads/images/favicon.png</li>
    <li>onesrc.cn</li>
    
    <li>Baidu</li>
    <li>https://www.baidu.com/</li>
    <li>https://www.baidu.com/favicon.ico</li>
    <li>baidu.com</li>
    
    <li>一元-ONESRC</li>
    <li>https://www.onesrc.cn/</li>
    <li>https://cdn.onesrc.cn/uploads/images/favicon.png</li>
    <li>onesrc.cn</li>
    
    <li>一元-ONESRC</li>
    <li>https://www.onesrc.cn/</li>
    <li>https://cdn.onesrc.cn/uploads/images/favicon.png</li>
    <li>onesrc.cn</li>
    </ul>
    
    ## 结尾内容
    
    这是文章结尾。
    

CSS

<script>document.querySelectorAll('ul.flinks').forEach(function(e){let
> a=e;if(a){let ns=a.querySelectorAll("li");let str='<div
> style="display:inline-block;">';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<ns.length;i+=4){str+=(`<div class="flink-item
> ${bgs[Math.floor(Math.random() * 9)]}"><div class="flink-title"><a
> href="${ns[i+1].innerText}"target="_blank"rel="external nofollow
> ugc">${ns[i].innerText}</a></div><div class="flink-link"><div
> class="flink-link-ico"style="background:
> url(${ns[i+2].innerText});background-size: 42px auto;"></div><div
> class="flink-link-text">${ns[i+3].innerText}</div></div></div>`)}str+=`</div>`;let n1=document.createElement("div");n1.innerHTML=str;a.parentNode.insertBefore(n1,a);a.style="display:
> none;"}else{console.log('No such id "flinks"')}});</script>
>     <style>.flink-item{width:300px;height:100px;position:relative;margin:10px;background-color:#fff;border-radius:3px;float:left}.flink-title{left:25px;top:25px;position:absolute}.flink-title
> a{font-size:17px;color:#f1f1f1;line-height:17px;word-break:break-all;text-decoration:none;outline:0}.flink-link{right:0;bottom:0;padding:0
> 15px
> 15px;position:absolute;text-align:center}.flink-link-text{font-size:12px;color:#f1f1f1}.flink-link-ico{display:inline-block;width:42px;height:42px;border-radius:50%}.bg-white{background-color:#fff!important}.bg-grey{background-color:#f7f7f7!important}.bg-deepgrey{background-color:rgba(0,0,0,.5)!important}.bg-blue{background-color:#6fa3ef!important}.bg-purple{background-color:#bc99c4!important}.bg-green{background-color:#46c47c!important}.bg-yellow{background-color:#f9bb3c!important}.bg-red{background-color:#e8583d!important}.bg-orange{background-color:#f68e5f!important}</style>