不装插件， 轻松给Typecho添加友情链接

我血槽空了。 在Typecho博客中添加友情链接，不仅Ke以增加博客的交互性，还Neng提升SEO效果。今天我们将介绍如何在Typecho中不使用插件，轻松添加友情链接。

一、 准备工作

在开始之前，请确保您Yi经安装了Typecho，并且Yi经熟悉了基本的使用方法。

所需材料：

• Typecho博客系统
• 友情链接信息

二、 添加友情链接

1. 创建友情链接页面

先说说我们需要创建一个用于展示友情链接的页面。在Typecho后台，点击“页面”菜单，然后点击“添加新页面”。

在“页面名称”中输入“友情链接”， 在“页面内容”中添加以下代码：，我不敢苟同...

    
域名名称
    
域名地址
    
域名图标
    
描述
    
域名名称
    
域名地址
    
域名图标
    
描述
    

这段代码定义了一个无序列表，用于存放友情链接信息。

2. 添加JavaScript代码

接下来 我们需要添加JavaScript代码来处理友情链接信息， 可以。 并将其隐藏。在页面内容的底部添加以下代码：

这段代码通过JavaScript获取无序列表中的信息，并创建一个新的列表来展示友情链接。 实际上... 一边，将原始列表隐藏起来。

3. 添加CSS样式

为了使友情链接页面geng加美观，我们Ke以添加一些CSS样式。在页面内容的底部添加以下代码：，另起炉灶。

.post-lists {
    position: relative;
    display: block;
    overflow: hidden;
}
.post-list-item {
    float: left;
    width: 33.3333%;
    height: auto;
    padding: 15px;
    align-items: center;
}
.post-list-item .item-title {
    font-size: 18px;
}
.post-list-item a {
    color: #fff;
    border-bottom: 0px solid #00000070;
}
.post-list-item-container {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding: 0;
    border-radius: 3px;
    background-color: #fff;
    -webkit-box-shadow: 0 1px 4px rgba;
    box-shadow: 0 1px 4px rgba;
}
.post-list-item-container .item-label {
    position: relative;
    height: 130px;
    padding: 25px 20px 40px;
    background-color: #fff;
}
.post-list-item-container .item--purple .item-title a {
    color: #fff;
}
.post-list-item-container .item-label .item-meta {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 100%;
    padding: 0 15px 15px;
    text-align: right;
}
.post-list-item-container .item-label .item-meta .item-meta-ico {
    display: inline-block;
    float: right;
    width: 42px;
    height: 42px;
    border: 1px solid #eaeaea;
    border-radius: 50%;
}
.post-list-item-container .item--purple .item-meta .item-meta-date {
    color: #fff;
}
.post-list-item-container .item-label .item-meta .item-meta-date {
    font-size: 12px;
    position: relative;
    float: left;
    padding-left: 5px;
    text-align: left;
    text-transform: none;
    color: #f1f1f1;
    max-width: 75%;
}
.bg-purple {
    background-color: #bc99c4!important;
}
.bg-yellow {
    background-color: #f9bb3c!important;
}
.bg-orange {
    background-color: #f68e5f!important;
}
.bg-red {
    background-color: #e8583d!important;
}
.bg-green {
    background-color: #46c47c!important;
}
.bg-blue {
    background-color: #6fa3ef!important;
}
.bg-grey {
    background-color: #f7f7f7!important;
}
.bg-deepgrey {
    background-color: rgba!important;
}
.bg-white {
    background-color: #fff!important;
}

一言难尽。 这段代码定义了友情链接页面的样式， 包括布局、字体、颜色等。

通过以上步骤，您就Ke以在不安装插件的情况下轻松给Typecho添加友情链接了。 我服了。 这种方法简单易行，适合新手快速上手。

我晕... 当然您还Ke以根据自己的需求，对友情链接页面进行进一步的优化和美化。

---