Flarum Ads 插件制作友链侧边栏

先来一个演示图看看效果，下面说下操作方法：

演示图

1. 后台开启 Ads 插件（什么？你卸载了？那我跟你说拜拜了）。
2. 在 Ads 设置页面里的 - 首页左侧节点栏下方的广告位 - 下方代码输入框输入如下范例代码：

<div class="sideNav links">
  <a>
    <i class="fa fa-link Button-icon"></i>
    <span class="Button-label">友情链接</span>
  </a>
  <li class="Dropdown-separator"></li>
  <ul class="links-list">
    <li>
      <img src="" width="16" height="16" />
      <a href="https://www.baidu.com/" target="_blank">百度</a>
    </li>
    <li>
      <img src="" width="16" height="16" />
      <a href="http://www.163.com" target="_blank">网易</a>
    </li>
    <li>
      <img src="" width="16" height="16" />
      <a href="http://music.163.com" target="_blank">网易云音乐</a>
    </li>
  </ul>
</div>

范例中添加了三个网址，每个网址你需要改的是三个地方：两个是 URL 链接和图标链接，一个是网站名称。以将百度的链接改为本站为例：

修改前：

<li><img src="https://a.5e.cx/getFavicon/?url=https://www.baidu.com/" width="16" height="16" /><a href="https://www.baidu.com/" target="_blank">百度</a></li>

修改后：

<li><img src="https://a.5e.cx/getFavicon/?url=https://www.ikxin.com/" width="16" height="16" /><a href="https://www.ikxin.com/" target="_blank">Notte博客</a></li>

注意：修改第一个链接位置是修改 https://a.5e.cx/getFavicon/?url= 后面部分，这个链接是获取网站图标的，不要误删。另外，如果你没有 HTML 基础的话，要注意每个网站完整代码是 <li> 开始，</li> 结尾的。

如果你觉得三个友链太少的话，按以上方法（推荐用文本编辑工具）写完粘贴在整段代码最后的 </li>这里</ul></div>（也就是每添加一条就放到 </ul> 前面就行了）。

3. 很重要的一步，完成第二步之后，在后台 - 外观设置 - 自定义样式里点击按钮输入以下代码保存：

.links {margin-top: 10px;}
.links .links-list {margin-top: 10px;}
.links .links-list a {position: absolute; margin-left: 10px; line-height: 16px;}

至此整个教程已完成。

什么？你想放完友链再放广告图？你直接把你的广告图代码贴在我这段代码后面不就行了？

补充一个自定义样式，因为手机浏览时这个友链模块直接显示在主页上方，比较碍眼，所以加入这个 CSS 让其在手机浏览时隐藏：

@media (max-width: 995px) {
  .item-flagrow-ad .sideNav {display: none !important;}
}