使用 Flarum Ads 外掛製作網站友情連結側邊欄

2018.07.29 4,475 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 外掛製作網站友情連結側邊欄

評論

發佈評論