Makala

Jinsi ya kusaidia lugha nyingi katika blogu ya Jekyll kwa kutumia Polyglot (1) - Kutumia plagin ya Polyglot & kurekebisha HTML header na sitemap

Makala hii inaeleza mchakato wa kutekeleza usaidizi wa lugha nyingi kwa kutumia plagin ya Polyglot kwenye blogu ya Jekyll inayotegemea 'jekyll-theme-chirpy'. Kama sehemu ya kwanza ya mfululizo huu, inaangazia matumizi ya plagin ya Polyglot na marekebisho ya HTML header pamoja na sitemap.

Imechapishwa
Preview Image
Na Yunseo Kim
mitazamo 11 dk kusoma
Jinsi ya kusaidia lugha nyingi katika blogu ya Jekyll kwa kutumia Polyglot (1) - Kutumia plagin ya Polyglot & kurekebisha HTML header na sitemap

Muhtasari

Mwanzoni mwa Julai 12024, niliongeza utekelezaji wa usaidizi wa lugha nyingi kwenye blogu hii inayotegemea Jekyll na inayohostiwa kupitia Github Pages kwa kutumia plagin ya Polyglot. Mfululizo huu unashiriki hitilafu zilizotokea wakati wa kutumia plagin ya Polyglot kwenye mandhari ya Chirpy, namna zilivyotatuliwa, na jinsi ya kuandika html header pamoja na sitemap.xml kwa kuzingatia SEO. Mfululizo huu una makala 3, na unayosoma sasa ni makala ya kwanza katika mfululizo huu.

Hapo awali niliupanga kama mfululizo wa sehemu 2 kwa jumla, lakini baadaye maudhui yalipanuliwa mara kadhaa, kiasi kwamba urefu wa maandishi uliongezeka sana na hivyo nikaunda upya kuwa sehemu 3.

Mahitaji

  • Matokeo ya build (ukurasa wa wavuti) lazima yaweze kutolewa kwa kutenganishwa kwa njia za lugha tofauti (mf. /posts/ko/, /posts/ja/).
  • Ili kupunguza kadiri iwezekanavyo muda na juhudi za ziada zinazohitajika kwa usaidizi wa lugha nyingi, faili ya asili ya markdown isiwe lazima ipewe lebo za ‘lang’ na ‘permalink’ moja kwa moja kwenye YAML front matter; badala yake, wakati wa build lugha lazima itambulike kiotomatiki kulingana na njia ya ndani ya faili hiyo (mf. /_posts/ko/, /_posts/ja/).
  • Sehemu ya header ya kila ukurasa katika tovuti lazima itimize miongozo ya Google SEO kwa utafutaji wa lugha nyingi, ikijumuisha meta tag sahihi ya Content-Language, hreflang alternate tag, na canonical link.
  • Lazima iwezekane kutoa viungo vya kila toleo la lugha ya ukurasa bila kukosa lolote kupitia sitemap.xml, na sitemap.xml yenyewe lazima iwepo mara moja tu kwenye root path bila kurudiwa.
  • Vipengele vyote vinavyotolewa na mandhari ya Chirpy lazima vifanye kazi ipasavyo katika kurasa za kila lugha, na kama sivyo lazima virekebishwe ili vifanye kazi vizuri.
    • Vipengele vya ‘Recently Updated’ na ‘Trending Tags’ vifanye kazi kawaida
    • Kusiwe na hitilafu katika mchakato wa build unaotumia GitHub Actions
    • Kipengele cha kutafuta machapisho kilicho juu kulia mwa blogu kifanye kazi kawaida

Kutumia plagin ya Polyglot

Jekyll haitoi usaidizi wa lugha nyingi kwa msingi, hivyo ili kutekeleza blogu ya lugha nyingi inayotimiza mahitaji yaliyo hapo juu, ni lazima kutumia plagin ya nje. Nilipotafuta, niligundua kuwa Polyglot hutumika sana kwa ajili ya kutengeneza tovuti za lugha nyingi, na inaweza kutimiza sehemu kubwa ya mahitaji hayo, hivyo nikaichagua.

Kusakinisha plagin

Kwa kuwa ninatumia Bundler, niliongeza yaliyomo yafuatayo kwenye Gemfile.

1
2
3

group :jekyll_plugins do
   gem "jekyll-polyglot"
end

Baada ya hapo, ukikimbiza bundle update kwenye terminal, usakinishaji hukamilika kiotomatiki.

Ikiwa hutumii Bundler, unaweza pia kusakinisha gem moja kwa moja kwa amri ya gem install jekyll-polyglot kwenye terminal, kisha kuongeza plagin kwenye _config.yml kama ifuatavyo.

1
2

plugins:
  - jekyll-polyglot

Kuweka usanidi

Hatua inayofuata ni kufungua faili ya _config.yml na kuongeza maudhui yafuatayo.

1
2
3
4
5
6

# Polyglot Settings
languages: ["en", "ko", "ja", "zh-TW", "es", "pt-BR", "fr", "de"]
default_lang: "en"
exclude_from_localization: ["javascript", "images", "css", "public", "assets", "sitemap.xml"]
parallel_localization: false
lang_from_path: true
  • languages: Orodha ya lugha unazotaka kusaidia
  • default_lang: Lugha ya msingi ya fallback
  • exclude_from_localization: Hufafanua regular expression ya mfuatano wa njia ya faili/folda ya root itakayoondolewa kwenye ulughaishaji
  • parallel_localization: Boolean inayobainisha kama usindikaji wa lugha nyingi uendeshwe kwa sambamba wakati wa build
  • lang_from_path: Thamani ya boolean; ikiwekwa kuwa ‘true’, hata kama sifa ya ‘lang’ haijaainishwa tofauti katika YAML front matter ya faili ya post markdown, ikiwa mfuatano wa njia ya faili hiyo ya markdown una msimbo wa lugha, basi utatambuliwa na kutumika kiotomatiki

Hati rasmi ya Sitemap Protocol inaeleza yafuatayo.

“The location of a Sitemap file determines the set of URLs that can be included in that Sitemap. A Sitemap file located at http://example.com/catalog/sitemap.xml can include any URLs starting with http://example.com/catalog/ but can not include URLs starting with http://example.com/images/.”

“It is strongly recommended that you place your Sitemap at the root directory of your web server.”

Ili kutii hili, ni lazima faili ya sitemap.xml yenye maudhui yale yale isitengenezwe kwa kila lugha, bali iwepo mara moja tu kwenye root directory. Kwa hiyo, unapaswa kuiongeza kwenye orodha ya ‘exclude_from_localization’ ili kuepuka hali kama mfano mbaya ulio hapa chini.

Mfano mbaya (maudhui ya kila faili hayana tofauti kwa lugha na yote ni sawa):

  • /sitemap.xml
  • /ko/sitemap.xml
  • /es/sitemap.xml
  • /pt-BR/sitemap.xml
  • /ja/sitemap.xml
  • /fr/sitemap.xml
  • /de/sitemap.xml

(Sasisho la 12025.01.14.) Kwa kuwa Pull Request niliyowasilisha ili kuongeza maelezo hayo kwenye README ilikubaliwa, sasa unaweza pia kuona maelekezo hayo hayo kwenye nyaraka rasmi za Polyglot.

Ukiweka ‘parallel_localization’ kuwa ‘true’, kuna faida ya kupunguza sana muda wa build, lakini kufikia Julai 12024, nilipowasha kipengele hiki kwenye blogu hii, kulikuwa na hitilafu ambapo vichwa vya viungo katika sehemu za ‘Recently Updated’ na ‘Trending Tags’ kwenye sidebar ya kulia ya ukurasa havikuchakatwa vizuri na vilichanganyika na lugha nyingine. Inaonekana bado haijatulia kabisa, hivyo ikiwa unataka kuitumia kwenye tovuti yako, ni muhimu kwanza kupima kama inafanya kazi ipasavyo. Zaidi ya hayo, kipengele hiki pia hakitumiki ukiwa unatumia Windows, hivyo kinapaswa kuzimwa.

(Sasisho la 12025.09) Nilipojaribu tena kipengele cha ‘parallel_localization’ katika kiangazi cha 12025 kwa kutumia blogu hii kama msingi, kilifanya kazi vizuri bila matatizo. Kwa hiyo kwa sasa nimekiwasha, na kwa msaada wake muda wa build umepunguzwa sana.

Pia, katika Jekyll 4.0 lazima uzime utengenezaji wa CSS sourcemaps kama ifuatavyo.

1
2

sass:
  sourcemap: never # In Jekyll 4.0 , SCSS source maps will generate improperly due to how Polyglot operates

Mambo ya kuzingatia unapoandika post

Mambo ya kuzingatia unapoandika post za lugha nyingi ni haya yafuatayo.

  • Kuweka msimbo sahihi wa lugha: Lazima ueleze msimbo sahihi wa ISO wa lugha kwa kutumia njia ya faili (mf. /_posts/ko/example-post.md) au sifa ya ‘lang’ katika YAML front matter (mf. lang: ko). Tazama mifano katika nyaraka za Chrome Developer.

Hata hivyo, ingawa nyaraka za Chrome Developer huandika msimbo wa eneo katika muundo kama ‘pt_BR’, kwa vitendo lazima utumie ‘-‘ badala ya ‘_’ kama ‘pt-BR’ ili ifanye kazi vizuri baadaye unapoongeza hreflang alternate tag kwenye html header.

  • Njia ya faili na jina la faili lazima viwe thabiti.

Kwa maelezo zaidi, tafadhali rejelea README ya GitHub ya hazina ya untra/polyglot.

Kurekebisha html header na sitemap

Sasa, kwa ajili ya SEO, unahitaji kuingiza meta tag ya Content-Language na hreflang alternate tag kwenye html header ya kila ukurasa wa blogu, na pia kuweka vizuri standard URL (canonical URL).

html header

Kufikia 12024.11, kwa kuzingatia toleo jipya zaidi la 1.8.1, Polyglot ina kipengele kinachofanya kazi hii kiotomatiki unapoitisha Liquid tag ya {% I18n_Headers %} katika sehemu ya header ya ukurasa. Hata hivyo, hilo linadhania kuwa tag ya sifa ya ‘permalink’ imeainishwa wazi kwa ukurasa huo, na ikiwa sivyo halifanyi kazi ipasavyo.

Kwa hiyo nilichukua head.html ya mandhari ya Chirpy, kisha nikaongeza mwenyewe maudhui kama yafuatayo. Nilifanya kazi hii kwa kurejelea ukurasa wa SEO Recipes wa blogu rasmi ya Polyglot, lakini nikaunda marekebisho ili kutumia sifa ya page.url badala ya page.permalink kulingana na mazingira yangu ya matumizi na mahitaji yangu.

1
2
3
4
5
6
7
8
9
10
11

  <meta http-equiv="Content-Language" content="{{site.active_lang}}">
  
  {% if site.default_lang -%}
  <link rel="alternate" hreflang="{{site.default_lang}}" href="{{site.url}}{{page.url}}" />
  {%- endif -%}
  {% for lang in site.languages -%}
    {% if lang == site.default_lang -%}
      {%- continue -%}
    {%- endif %}
  <link rel="alternate" hreflang="{{lang}}" href="{{site.url}}/{{lang}}{{page.url}}" />
  {%- endfor %}

(Iliongezwa 12025.07.29.) Aidha, mandhari ya Chirpy huja ikiwa tayari imejumuisha plagin ya Jekyll SEO Tag, na nilibaini kuwa sifa za metadata za Open Graph za og:locale na og:url, pamoja na standard URL (canonical URL) (rel="canonical" kipengele cha link) vinavyozalishwa kiotomatiki na Jekyll SEO Tag hutegemea lugha msingi ya tovuti (site.lang, site.default_lang), hivyo usindikaji wa ziada ulihitajika.
Kwa hiyo niliongeza msimbo ufuatao kabla ya {{ seo_tags }}.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

(imeachwa)...

  {% capture seo_tags -%}
    {% seo title=false %}
  {%- endcapture %}

  ...(imeachwa)...

  {%- capture old_og_locale -%}
    <meta property="og:locale" content="{{site.lang}}" />
  {%- endcapture -%}
  {%- capture new_og_locale -%}
    <meta property="og:locale" content="{{site.active_lang}}" />
    {% for lang in site.languages -%}
      {%- if lang == site.active_lang -%}
        {%- continue -%}
      {%- endif %}
    <meta property="og:locale:alternate" content="{{lang}}" />
    {%- endfor %}
  {%- endcapture -%}
  {% assign seo_tags = seo_tags | replace: old_og_locale, new_og_locale %}
  
  {% unless site.active_lang == site.default_lang -%}
    {%- capture old_canonical_link -%}
      <link rel="canonical" href="{{site.url}}{{page.url}}" />
    {%- endcapture -%}
    {%- capture old_og_url -%}
      <meta property="og:url" content="{{site.url}}{{page.url}}" />
    {%- endcapture -%}
    {%- capture new_canonical_link -%}
      <link rel="canonical" href="{{site.url}}/{{site.active_lang}}{{page.url}}" />
    {%- endcapture -%}
    {%- capture new_og_url -%}
      <meta property="og:url" content="{{site.url}}/{{site.active_lang}}{{page.url}}" />
    {%- endcapture -%}
    {% assign seo_tags = seo_tags | replace: old_canonical_link, new_canonical_link %}
    {% assign seo_tags = seo_tags | replace: old_og_url, new_og_url %}
  {%- endunless %}

  {{ seo_tags }}

  ...(imeachwa baadaye)

Kulingana na nyaraka za Google Developer, ukurasa wenye matoleo ya lugha nyingi huzingatiwa kuwa rudufu tu ikiwa lugha ya maudhui makuu ni ile ile, yaani ni kichwa, footer, na maandishi mengine yasiyo muhimu pekee ndiyo yametafsiriwa huku mwili wa maandishi ukiwa ule ule. Kwa hiyo, katika hali kama blogu hii ambapo maandishi ya mwili hutolewa katika lugha nyingi, matoleo ya kila lugha huzingatiwa kuwa kurasa huru zisizo rudufu, hivyo ni lazima uweke standard URL tofauti kwa kila lugha.
Kwa mfano, kwa toleo la Kikorea la ukurasa huu wa sasa, standard URL si “https://www.yunseo.kim/posts/how-to-support-multi-language-on-jekyll-blog-with-polyglot-1/” bali ni “https://www.yunseo.kim/ko/posts/how-to-support-multi-language-on-jekyll-blog-with-polyglot-1/”.

sitemap

Iwapo hutaainisha templeti tofauti, sitemap inayozalishwa kiotomatiki na Jekyll wakati wa build haitoi usaidizi sahihi kwa kurasa za lugha nyingi. Hivyo, tengeneza faili ya sitemap.xml kwenye root directory, kisha andika maudhui yafuatayo.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83

---
layout: content
---
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml">
{% for lang in site.languages -%}

  {% for node in site.pages %}
    {%- comment -%}<!-- very lazy check to see if page is in the exclude list - this means excluded pages are not gonna be in the sitemap at all, write exceptions as necessary -->{%- endcomment -%}
    {%- comment -%}<!-- Exclude redirects from sitemap -->{%- endcomment -%}
    {%- if node.redirect.to -%}
      {%- continue -%}
    {%- endif -%}
    {%- unless site.exclude_from_localization contains node.path -%}
      {%- comment -%}<!-- assuming if there's not layout assigned, then not include the page in the sitemap, you may want to change this -->{%- endcomment -%}
      {% if node.layout %}
        <url>
          <loc>
            {%- if lang == site.default_lang -%}
              {{ node.url | absolute_url }}
            {%- else -%}
              {{ node.url | prepend: lang | prepend: '/' | absolute_url }}
            {%- endif -%}
          </loc>
          {% if node.last_modified_at and node.last_modified_at != node.date -%}
          <lastmod>{{ node.last_modified_at | date: '%Y-%m-%dT%H:%M:%S%:z' }}</lastmod>
          {%- elsif node.date -%}
          <lastmod>{{ node.date | date: '%Y-%m-%dT%H:%M:%S%:z' }}</lastmod>
          {% endif -%}
          {% if site.default_lang -%}
          <xhtml:link rel="alternate" hreflang="{{site.default_lang}}" href="{{site.url}}{{node.url}}" />
          {%- endif -%}
          {% for lang in site.languages -%}
            {% if lang == site.default_lang -%}
              {%- continue -%}
            {%- endif %}
          <xhtml:link rel="alternate" hreflang="{{lang}}" href="{{site.url}}/{{lang}}{{node.url}}" />
          {%- endfor %}
        </url>
      {% endif %}
    {%- elsif site.default_lang -%}
        <url>
          <loc>{{ node.url | absolute_url }}</loc>
      {% if node.last_modified_at and node.last_modified_at != node.date -%}
          <lastmod>{{ node.last_modified_at | date: '%Y-%m-%dT%H:%M:%S%:z' }}</lastmod>
      {%- elsif node.date -%}
          <lastmod>{{ node.date | date: '%Y-%m-%dT%H:%M:%S%:z' }}</lastmod>
      {% endif -%}
        </url>
    {%- endunless -%}
  {% endfor %}

  {%- comment -%}<!-- This loops through all site collections including posts -->{%- endcomment -%}
  {% for collection in site.collections %}
    {% for node in site[collection.label] %}
      <url>
        <loc>
          {%- if lang == site.default_lang -%}
            {{ node.url | absolute_url }}
          {%- else -%}
            {{ node.url | prepend: lang | prepend: '/' | absolute_url }}
          {%- endif -%}
        </loc>
        {% if node.last_modified_at and node.last_modified_at != node.date -%}
        <lastmod>{{ node.last_modified_at | date: '%Y-%m-%dT%H:%M:%S%:z' }}</lastmod>
        {%- elsif node.date -%}
        <lastmod>{{ node.date | date: '%Y-%m-%dT%H:%M:%S%:z' }}</lastmod>
        {%- endif %}
        {% if site.default_lang -%}
        <xhtml:link rel="alternate" hreflang="{{site.default_lang}}" href="{{site.url}}{{node.url}}" />
        {%- endif -%}
        {% for lang in site.languages -%}
          {% if lang == site.default_lang -%}
            {%- continue -%}
          {%- endif %}
        <xhtml:link rel="alternate" hreflang="{{lang}}" href="{{site.url}}/{{lang}}{{node.url}}" />
        {%- endfor %}
      </url>
    {% endfor %}
  {% endfor %}

{%- endfor %}
</urlset>

Usomaji Zaidi

Inaendelea katika Sehemu ya 2

Dev, Web Dev
Static Site Jekyll Polyglot Markdown
Makala hii iko chini ya leseni ya CC BY-NC 4.0 ya mwandishi.