pug
is a template language for generating HTML
.
➔ Click here to learn the grammar of pug
Do not write css
and js
in foot.pug
, otherwise there will be errors.
Please refer to the following: the style is written into the corresponding .css
, and the interaction is achieved by creating web components.
There are three css
files under md/.i18n/htm
in the demo project.
foot.css
: Footer styleimport.css
: Default style for i18n.site
for the entire siteconf.css
: Footer icons and fontsThe footer icon is generated by creating a font named F
through iconfont.cn ( English version / Chinese version).
Please create your own icon font as needed and replace the following configuration in conf.css
:
@font-face {
font-family: "F";
src: url("//at.alicdn.com/t/c/font_4281991_urfar2m2zce.woff2?t=1716188208767") format("woff2");
}
You cannot write js
in foot.pug
. If interaction is required, please customize the web component.
A web component can be defined in md/.i18n/htm/index.js
and then used in foot.pug
.
It is easy to create web components, such as custom <x-img>
.
customElements.define(
'x-img',
class extends HTMLElement {
constructor() {
super();
var img = document.createElement('img');
img.src = '//p.3ti.site/i18n.svg';
img.style = "height:99px;width:99px;";
this.append(img);
}
}
)
The code in .i18n/htm/foot.pug
is as follows:
#Ft
b
a.site(href="/")
b ${I18N.C}
Here ${I18N.C}
corresponds to that in en/i18n.yml
:
C: Power By <a class="a" href="https://i18n.site">i18n.site</a>
Using ${I18N.xxx}
in a similar way like this, combined with i18n.yml
, can achieve multilingual internationalization of the footer.
Adding class="a"
to the link is to prevent the link from being converted to MarkDown
. See:
➔ YAML
: How to prevent the HTML
of the link from being converted to MarkDown
.