Flarum Ads 外掛製作友鏈側邊欄

2018.07.29 4,443 0

先來一個演示圖看看效果，下面說下操作方法：

示範圖

後台開啟 Ads 外掛（什麼？你卸載了？那我跟你說拜拜了）。
在 Ads 設定頁面裡的 - 首頁左側節點欄下方的廣告位 - 下方程式碼輸入框輸入如下範例程式碼：

HTML

<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 連結和圖示連結，一個是網站名稱。以將百度的連結改為本站為例：

修改前：

HTML

<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>

修改後：

HTML

<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> 前面就行了）。

很重要的一步，完成第二步之後，在後台 - 外觀設定 - 自訂樣式裡點擊按鈕輸入以下程式碼儲存：

CSS

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

至此整個教學已完成。

什麼？你想放完友鏈再放廣告圖？你直接把你的廣告圖程式碼貼在我這段程式碼後面不就行了？

補充一個自訂樣式，因為手機瀏覽時這個友鏈模組會直接顯示在首頁上方，比較礙眼，所以加入這個 CSS 讓其在手機瀏覽時隱藏：

CSS

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

Flarum Ads 外掛製作友鏈側邊欄

評論

發佈評論