맞춤형 탐색

탐색을 사용자 정의하는 방법을 설명하기 위해 데모 사이트를 예로 들어 보겠습니다 i18n-demo.github.io

위 그림에서 번호가 매겨진 영역에 해당하는 파일은 다음과 같습니다.

왼쪽 .i18n/htm/t1.pug
오른쪽 .i18n/htm/t2.pug

pug HTML 을 생성하는 템플릿 언어입니다.

➔ 의 문법을 배우려면 여기를 클릭하세요 pug

형식 문자열 ${I18N.sponsor} 파일에서 국제화를 구현하는 데 사용되며 해당 내용은 소스 언어 디렉터리의 해당 i18n.yml 로 대체됩니다.

.i18n/htm/topbar.css 바의 스타일에 해당하는 파일은 :

[!WARN] pug 에 css 과 js 쓰지 마십시오 . 그렇지 않으면 오류가 발생합니다.

웹 구성 요소

js pug 에 쓸 수 없습니다. 상호 작용이 필요한 경우 웹 구성 요소를 생성하여 구현할 수 있습니다.

구성 요소는 md/.i18n/htm/index.js 에서 웹 페이지 구성 요소를 정의한 다음 foot.pug 에서 해당 구성 요소를 사용할 수 있습니다.

사용자 정의 <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);
    }
  }
)

현재 x/i-h.js 탐색 및 바닥글 사용자 정의 콘텐츠 텍스트의 국제화에 사용되는 웹 구성 요소인 md/.i18n/htm/index.js 에서 참조됩니다. 소스 코드를 참조하세요 18x/src/i-h.js