맞춤형 바닥글

데모 프로젝트를 예로 들면, md 디렉토리의 .i18n/htm/foot.pug 웹사이트의 바닥글을 정의합니다.

바닥글 스타일

데모 프로젝트에는 md/.i18n/htm 아래에 3개의 css 파일이 있습니다.

• foot.css : 바닥글 스타일
• import.css : 1전체 사이트의 i18n.site 스타일
• conf.css : 바닥글 아이콘 및 글꼴

아이콘 글꼴

바닥글 아이콘은 F iconfont.cn ( 영어 버전 /中文版)이라는 글꼴을 생성하여 생성됩니다.

자신만의 아이콘 글꼴을 생성하고 conf.css 의 구성에서 아이콘 글꼴을 교체하세요 :

@font-face {
  font-family: "F";
  src: url(//p.3ti.site/ico1.woff2) format("woff2");
}

#Ft>b>a.site {
  background: url("//p.3ti.site/i18n.svg") 0 0 / cover;
  display: block;
  height: 24px;
  opacity: 0.8;
  width: 115px;
  flex-shrink: 0;
}

iconfont.cn의 글꼴 파일은 사파리 브라우저에서 불러올 수 없으므로 직접 참조하지 마세요.

다국어 바닥글

.i18n/htm/foot.pug 의 코드는 다음과 같습니다 :

#Ft
  b
    a.site(href="/")
    b ${I18N.C}

여기서 ${I18N.C} en/i18n.yml 에 해당합니다 :

C: Power By <a class="a" href="https://i18n.site">i18n.site</a>

이 작성 방법과 유사한 ${I18N.xxx} i18n.yml 과 결합하여 사용하면 바닥글의 다국어 국제화를 달성할 수 있습니다.

링크에 class="a" 추가하면 링크가 MarkDown 로 변환되는 것을 방지할 수 있습니다. 참조 : ➔ YAML : 링크 HTML Markdown 로 변환되는 것을 방지하는 방법 .