解决思路
typecho 的 markdown 支持以!!!<-- html tag -->!!! 的方式嵌入 html 内容，所以可以把原来的脚本嵌入到这里面，这样就不用修改主题了。
为了使显示效果不过分依赖 css，我特意重写、精简了 css，同样把 css 也嵌入到 html tag 里面，使得与主题分离而独立。
如何使用
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
| <ul class="flinks">
<li>网站名称</li>
<li>https://www.baidu.ccom/</li>
<li>https://www.baidu.com/favicon.ico</li>
<li>baidu.ccom</li>
<li>网站名称</li>
<li>https://www.baidu.ccom/</li>
<li>https://www.baidu.com/favicon.ico</li>
<li>baidu.ccom</li>
<li>网站名称</li>
<li>https://www.baidu.ccom/</li>
<li>https://www.baidu.com/favicon.ico</li>
<li>baidu.ccom</li>
<li>网站名称</li>
<li>https://www.baidu.ccom/</li>
<li>https://www.baidu.com/favicon.ico</li>
<li>baidu.ccom</li>
</ul>
!!!
<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:275px;
height:100px;
position:relative;
margin:10px;
background-color:#bc99c4;
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-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>
！！！
|
直接将上面的内容作为 markdown 文章内容使用即可，其余的我已经处理好。
常见问题
与 ShortLinks 冲突
链接中的 nofollow，_blank 等属性我已经添加好，可以不用担心外链问题。至于冲突，可以通过添加自定义字段 noshort 解决。当然，你如果没有使用 ShortLinks，就可以忽略这个问题了。
显示效果不佳
按照自己的需求，修改代码中的style部分即可，思路还是一样的。
来源：https://www.onesrc.cn/
补充
纯色版代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
| <ul class="flinks">
<li>网站名称</li>
<li>https://www.baidu.ccom/</li>
<li>https://www.baidu.com/favicon.ico</li>
<li>baidu.ccom</li>
<li>网站名称</li>
<li>https://www.baidu.ccom/</li>
<li>https://www.baidu.com/favicon.ico</li>
<li>baidu.ccom</li>
<li>网站名称</li>
<li>https://www.baidu.ccom/</li>
<li>https://www.baidu.com/favicon.ico</li>
<li>baidu.ccom</li>
<li>网站名称</li>
<li>https://www.baidu.ccom/</li>
<li>https://www.baidu.com/favicon.ico</li>
<li>baidu.ccom</li>
</ul>
!!!
<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-blue"];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:275px;
height:100px;
position:relative;
margin:10px;
background-color:#3354aa;
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-deepgrey{
background-color:rgba(0,0,0,.5)!important
}
.bg-blue{
background-color:#3354aa!important
}
</style>
！！！
|