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개의 웹사이트 주소가 추가되어 있으며, 각 웹사이트에서 수정해야 할 부분은 3곳입니다. URL 링크 2곳과 아이콘 링크 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>에 붙여 넣으면 됩니다(즉, 하나를 추가할 때마다 </ul> 앞에 넣으면 됩니다).

매우 중요한 단계입니다. 두 번째 단계를 완료한 후 관리자 화면의 - 외관 설정 - 사용자 정의 스타일에서 버튼을 클릭하고 다음 코드를 입력하여 저장합니다:

.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;}
}