Piè Di Pagina Personalizzato

Sempre prendendo come esempio il progetto demo, .i18n/htm/foot.pug nella directory md definisce il footer del sito web.

Stile Piè Di Pagina

Ci sono tre file css sotto md/.i18n/htm nel progetto demo.

Carattere Dell'icona

L'icona del piè di pagina viene generata creando un carattere denominato F iconfont.cn ( versione inglese /中文版).

Crea il tuo carattere dell'icona e sostituisci il carattere dell'icona nella configurazione in 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;
}

Si prega di non fare riferimento direttamente al file del carattere di iconfont.cn perché non può essere caricato sul browser Safari.

Piè Di Pagina Multilingue

Il codice in .i18n/htm/foot.pug è il seguente :

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

Qui ${I18N.C} corrisponde a en/i18n.yml :

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

Utilizzando ${I18N.xxx} simile a questo metodo di scrittura, combinato con i18n.yml , puoi ottenere l'internazionalizzazione multilingue del footer.

Aggiungere class="a" al collegamento impedisce che il collegamento venga convertito in MarkDown Vedere : ➔ YAML : Come evitare che il collegamento HTML venga convertito in Markdown .