Flarum Ads プラグインで友達リンクサイドバーを作成

まずはデモ画像で効果をご覧ください。以下で操作方法を説明します：

デモ画像

管理画面で Ads プラグインを有効にします（何？アンインストールした？それなら、さようならです）。
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>

サンプルには3つのURLを追加しています。各URLについて変更する必要があるのは3か所で、2つはURLリンクとアイコンリンク、もう1つはサイト名です。百度のリンクを当サイトに変更する例は以下のとおりです：

変更前：

<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> で終わることに注意してください。

友達リンクが3つでは少ないと思う場合は、上記の方法（テキスト編集ツールの使用をおすすめします）で作成し、コード全体の最後にある </li>这里</ul></div>（つまり、1つ追加するごとに </ul> の前に置けばよいです）に貼り付けます。

非常に重要な手順です。2つ目の手順が完了したら、管理画面の「外观设置」-「自定义样式」でボタンをクリックし、以下のコードを入力して保存します：

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

これでチュートリアル全体が完了です。

何？友達リンクを配置した後に広告画像も配置したい？広告画像のコードを私のこのコードの後ろに貼り付ければいいだけではありませんか？

補足として、カスタムスタイルを1つ紹介します。スマートフォンで閲覧すると、この友達リンクモジュールがホームページの上部に直接表示されて目障りなので、以下の CSS を追加してスマートフォンで閲覧した際に非表示にします：

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