ልጥፍ

በPolyglot በመጠቀም በJekyll ብሎግ ውስጥ ብዙ ቋንቋ ድጋፍ እንዴት እንደሚጨምሩ (1) - Polyglot ፕላግን መተግበር & html ሄደር እና sitemap ማስተካከል

'jekyll-theme-chirpy' ላይ የተመሠረተ Jekyll ብሎግ ላይ Polyglot ፕላግን በመተግበር ብዙ ቋንቋ ድጋፍ እንዴት እንደተገነባ ያብራራል። ይህ የተከታታይ ጽሑፎች የመጀመሪያው ሲሆን Polyglot ፕላግኑን መተግበር እና html ሄደርን ከ sitemap ጋር ማስተካከልን ይሸፍናል።

ተለጠፈ
Preview Image
በ Yunseo Kim
እይታዎች 9 ደቂቃ ንባብ
በPolyglot በመጠቀም በJekyll ብሎግ ውስጥ ብዙ ቋንቋ ድጋፍ እንዴት እንደሚጨምሩ (1) - Polyglot ፕላግን መተግበር & html ሄደር እና sitemap ማስተካከል

አጠቃላይ እይታ

በ12024 ዓ.ም. ጁላይ መጀመሪያ ላይ፣ በGithub Pages በኩል የሚስተናገድ ይህ በJekyll የተመሠረተ ብሎግ ላይ Polyglot ፕላግን በመተግበር ብዙ ቋንቋ ድጋፍ አክዬበታለሁ። ይህ ተከታታይ ጽሑፎች በChirpy ገጽታ ላይ Polyglot ፕላግን ሲተገበር የተፈጠሩ ችግኞችን እና የመፍትሄ ሂደታቸውን፣ እንዲሁም SEO ን በማሰብ html ሄደር እና sitemap.xml እንዴት እንደሚጻፉ ያጋራል። ይህ ተከታታይ 3 ጽሑፎችን ያካትታል፣ እያነበቡት ያሉትም ይህ ጽሑፍ የመጀመሪያው ነው።

በመጀመሪያ በአጠቃላይ 2 ክፍሎች ብቻ እንዲሆን አድርጌ ነበር፣ ነገር ግን ከዚያ በኋላ በበርካታ ዙሮች ይዘቱን እየጨመርኩ ስሄድ መጠኑ እጅግ ስለጨመረ ወደ 3 ክፍሎች እንዲሆን አሻሽዬዋለሁ።

መስፈርቶች

  • የገነባው ውጤት(ድረ ገጽ) በቋንቋ ልዩ መንገዶች(ex. /posts/ko/, /posts/ja/) ተለይቶ መቅረብ አለበት።
  • ለብዙ ቋንቋ ድጋፍ ተጨማሪ የሚፈልገውን ጊዜና ጉልበት እስከሚቻል ድረስ ለመቀነስ፣ በተጻፈው የመጀመሪያ የMarkdown ፋይል YAML front matter ውስጥ ‘lang’ እና ‘permalink’ ታጎችን በእያንዳንዱ ፋይል ላይ በተናጠል ማስገባት ሳያስፈልግ፣ በግንባታ ጊዜ ፋይሉ ያለበትን አካባቢያዊ መንገድ(ex. /_posts/ko/, /_posts/ja/) መሰረት በማድረግ ቋንቋውን በራሱ መለየት መቻል አለበት።
  • በጣቢያው ውስጥ ያሉ እያንዳንዱ ገጽ ሄደር ክፍሎች ተገቢ Content-Language ሜታ ታግ፣ hreflang ተለዋጭ ታጎች እና canonical አገናኝ በመያዝ ለብዙ ቋንቋ ፍለጋ የGoogle SEO መመሪያዎችን ማሟላት አለባቸው።
  • በጣቢያው ውስጥ ያሉ የእያንዳንዱ ቋንቋ ስሪት ገጽ አገናኞች ምንም ሳይቀሩ በsitemap.xml መቅረብ አለባቸው፣ እና sitemap.xml ራሱ በስር መንገድ ላይ ብቻ አንድ መኖር አለበት።
  • በChirpy ገጽታ የሚሰጡ ሁሉም ባህሪዎች በእያንዳንዱ ቋንቋ ገጽ ላይ በመደበኛነት መስራት አለባቸው፣ ካልሆነም እንዲሰሩ ማስተካከል አለበት።
    • ‘Recently Updated’, ‘Trending Tags’ ባህሪዎች በመደበኛነት መስራት
    • GitHub Actions በመጠቀም በሚካሄደው የግንባታ ሂደት ውስጥ ስህተት እንዳይፈጠር
    • በብሎጉ በላይ ቀኝ ጠርዝ ያለው የፖስት ፍለጋ ባህሪ በመደበኛነት መስራት

Polyglot ፕላግን መተግበር

Jekyll በመሠረታዊነት ብዙ ቋንቋ ብሎግን አይደግፍም፣ ስለዚህ ከላይ ያሉትን መስፈርቶች የሚያሟላ ብዙ ቋንቋ ብሎግ ለመገንባት የውጭ ፕላግን መጠቀም ያስፈልጋል። ፍለጋ ሳደርግ Polyglot ለብዙ ቋንቋ ድረ ገጽ ግንባታ ብዙ ጊዜ እንደሚጠቀሙበት አግኝቻለሁ፣ እና ከላይ ያሉትን መስፈርቶች አብዛኛውን ማሟላት ስለሚችል ይህን ፕላግን መርጬዋለሁ።

ፕላግን መጫን

እኔ Bundler እጠቀማለሁ፣ ስለዚህ ወደ Gemfile የሚከተለውን ይዘት አክዬ ነበር።

1
2
3

group :jekyll_plugins do
   gem "jekyll-polyglot"
end

ከዚያ በኋላ በተርሚናል ላይ bundle update ካስኬዱ መጫኑ በራሱ ይጠናቀቃል።

Bundler ካልተጠቀሙ ግን፣ በተርሚናል ውስጥ gem install jekyll-polyglot ትእዛዝ በመጠቀም gem በቀጥታ ከጫኑ በኋላ _config.yml ውስጥ እንደሚከተለው ፕላግኑን ማከል ይችላሉ።

1
2

plugins:
  - jekyll-polyglot

ቅንብር ማዋቀር

በመቀጠል _config.yml ፋይሉን ይክፈቱ እና ከታች ያለውን ይዘት ያክሉ።

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: ለመደገፍ የሚፈልጉት የቋንቋ ዝርዝር
  • default_lang: ነባሪ fallback ቋንቋ
  • exclude_from_localization: ከቋንቋ አካባቢያዊ ማድረግ ውጭ የሚሆኑ የስር ፋይል/አቃፊ መንገድ ህብረቁምፊ መደበኛ መግለጫዎች
  • parallel_localization: በግንባታ ሂደት ውስጥ የብዙ ቋንቋ ሂደትን በትይዩ ለማስኬድ ወይም አለመስኬድን የሚወስን boolean እሴት
  • lang_from_path: boolean እሴት ነው፣ ‘true’ ሲሆን በፖስት Markdown ፋይሉ ውስጥ በYAML front matter ‘lang’ ባህሪ በተናጠል ካልተገለጸም፣ የዚያ የMarkdown ፋይል መንገድ ህብረቁምፊ የቋንቋ ኮድ ካካተተ ይህን በራሱ አውቆ ይጠቀማል

የSitemap ፕሮቶኮል ኦፊሴላዊ ሰነድ የሚከተለውን በግልፅ ይገልጻል።

“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.”

ይህን ለማክበር፣ ተመሳሳይ ይዘት ያለው sitemap.xml ፋይል በእያንዳንዱ ቋንቋ እንዳይፈጠር እና በስር ዳይሬክተሪ ውስጥ አንድ ብቻ እንዲኖር፣ ‘exclude_from_localization’ ዝርዝር ውስጥ ማከል አለብዎት፣ እንዲሁም ከታች እንዳለው የተሳሳተ ምሳሌ እንዳይሆን መከላከል አለብዎት።

የተሳሳተ ምሳሌ(የእያንዳንዱ ፋይል ይዘት በቋንቋ አይለያይም፣ ሁሉም አንድ ናቸው)፦

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

(12025.01.14. ዝማኔ) ከላይ የተገለጸውን ይዘት README ውስጥ በማጠናከር ያስገባሁት Pull Request ከተቀበለ በኋላ፣ አሁን በPolyglot ኦፊሴላዊ ሰነድ ውስጥም ተመሳሳይ መመሪያ ማየት ይቻላል።

‘parallel_localization’ ን ‘true’ ብለው ከገለጹ የግንባታ ጊዜን በእጅጉ የሚቀንስ ጥቅም አለው፣ ግን በ12024 ዓ.ም. ጁላይ ጊዜ ላይ ለዚህ ብሎግ ይህን ባህሪ እንዳበራሁት ጊዜ በገጹ ቀኝ ያለው ሳይድባር ውስጥ ‘Recently Updated’ እና ‘Trending Tags’ ክፍሎች የአገናኝ ርዕሶች በትክክል አልተሰሩም እና ከሌሎች ቋንቋዎች ጋር ተቀላቀሉ። እስካሁን ድረስ በቂ ያልተረጋጋ ይመስላል፣ ስለዚህ በጣቢያዎ ላይ ከመተግበርዎ በፊት በመደበኛነት እንደሚሰራ ፈተና ማድረግ ያስፈልጋል። በተጨማሪም Windows ተጠቃሚ ከሆኑ ይህ ባህሪ ስለማይደገፍ መሰናከል አለበት።

(12025.09 ዝማኔ) በ12025 ዓ.ም. የበጋ ወቅት ላይ አሁን ያለውን ይህን ብሎግ መሰረት አድርጌ ‘parallel_localization’ ባህሪን እንደገና ሞክሬው ጊዜ ያለ ችግኝ በመደበኛነት እንደሚሰራ አገኘሁ። ስለዚህ አሁን ይህን ባህሪ አብርቼዋለሁ፣ ለዚህም ምክንያት የግንባታ ጊዜ በእጅጉ ተቀንሷል።

በተጨማሪም በJekyll 4.0 ውስጥ CSS sourcemaps ፍጠራ እንደሚከተለው መሰናከል አለበት።

1
2

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

ፖስቶችን ሲጽፉ ማስታወስ ያለባቸው ነገሮች

ብዙ ቋንቋ ፖስቶችን ሲጽፉ መጠንቀቅ ያለባቸው ነገሮች እንደሚከተሉት ናቸው።

  • ተገቢ የቋንቋ ኮድ መግለጽ፦ የፋይል መንገድ(ex. /_posts/ko/example-post.md) ወይም በYAML front matter ውስጥ ያለው ‘lang’ ባህሪ(ex. lang: ko) በመጠቀም ተገቢውን ISO የቋንቋ ኮድ መግለጽ አለብዎት። የChrome አበልጻጊ ሰነድ ውስጥ ያሉትን ምሳሌዎች ይመልከቱ።

ነገር ግን የChrome አበልጻጊ ሰነድ የክልል ኮድን እንደ ‘pt_BR’ ቅርጽ ቢያሳይም፣ በእውነቱ በኋላ html ሄደር ውስጥ hreflang ተለዋጭ ታጎችን ሲጨምሩ በትክክል እንዲሰራ _ ፋንታ - በመጠቀም እንደ ‘pt-BR’ መጻፍ አለብዎት።

  • የፋይል መንገድና ስም ተደጋጋሚ ቅጥ ያለው መሆን አለበት።

ተጨማሪ ዝርዝሮች ለማወቅ የGitHub untra/polyglot ሪፖዚቶሪ README ይመልከቱ።

html ሄደር እና sitemap ማስተካከል

አሁን ለSEO ሲባል በብሎጉ ውስጥ ባሉ እያንዳንዱ ገጾች html ሄደር ውስጥ Content-Language ሜታ ታግ እና hreflang ተለዋጭ ታጎችን ማስገባት ያስፈልጋል፣ እንዲሁም መደበኛ URL(canonical URL) በተገቢው ሁኔታ መወሰን ያስፈልጋል።

html ሄደር

በ12024.11. ወቅት ከነበረው የቅርብ ጊዜ ስሪት 1.8.1 ልቀት መሰረት፣ Polyglot በገጽ ሄደር ክፍል ውስጥ {% I18n_Headers %} Liquid ታግ ሲጠራ ከላይ ያሉትን ስራዎች በራሱ የሚያከናውን ባህሪ አለው። ነገር ግን ይህ ማለት በዚያ ገጽ ላይ ‘permalink’ ባህሪ ታግ በግልፅ እንደተገለጸ ይገምታል፣ ካልሆነ ግን በመደበኛነት አይሰራም።

ስለዚህ እኔ የChirpy ገጽታ head.html አውጥቼ ከዚያ በኋላ ከታች እንደሚታየው ይዘቱን በቀጥታ ጨመርኩ። የPolyglot ኦፊሴላዊ ብሎግ SEO Recipes ገጽ ን አጣቅሼ ሰራሁት፣ ነገር ግን ለእኔ የአጠቃቀም አካባቢ እና መስፈርቶች እንዲስማማ page.permalink ፋንታ page.url ባህሪ እንዲጠቀም አስተካክዬዋለሁ።

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 %}

(12025.07.29. ተጨማሪ) እንዲሁም Chirpy ገጽታ Jekyll SEO Tag ፕላግንን በነባሪነት ውስጥ ያካትታል፣ እና Jekyll SEO Tag በራሱ የሚፈጥራቸው og:locale, og:url Open Graph ሜታዳታ ባህሪዎች እና መደበኛ URL(canonical URL)(rel="canonical" link ንጥል) በጣቢያው ነባሪ ቋንቋ(site.lang, site.default_lang) ላይ የተመሠረቱ ስለሆኑ ተጨማሪ ሂደት እንደሚያስፈልግ አረጋግጫለሁ።
ስለዚህ {{ 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

(전략)...

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

  ...(중략)...

  {%- 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 }}

  ...(후략)

የGoogle አበልጻጊ ሰነድ መሠረት፣ አንድ ገጽ ብዙ የቋንቋ ስሪቶች ሲኖሩት ዋና ይዘቱ ተመሳሳይ ቋንቋ ሲሆን ብቻ ነው እንደ ተደጋጋሚ የሚቆጠረው፤ ማለትም ራስጌ፣ ግርጌ እና ሌሎች አስፈላጊ ያልሆኑ ጽሑፎች ብቻ ተተርጉመው ዋናው የአካል ጽሑፍ ተመሳሳይ ከሆነ ብቻ። ስለዚህ እንደዚህ ብሎግ ውስጥ ዋና የአካል ጽሑፍ በብዙ ቋንቋዎች የሚቀርብ ከሆነ፣ የእያንዳንዱ ቋንቋ ስሪቶች ሁሉ ተደጋጋሚ ሳይሆኑ እርስ በርሳቸው ገለልተኛ ገጾች እንደሆኑ ይቆጠራሉ፣ ስለዚህም በቋንቋ መሰረት የተለያዩ canonical URL ዎችን መወሰን አለብዎት።
ለምሳሌ አሁን ያለው የዚህ ገጽ የኮሪያኛ ስሪት ከተመለከቱ፣ canonical URL ው ` “https://www.yunseo.kim/posts/how-to-support-multi-language-on-jekyll-blog-with-polyglot-1/” ሳይሆን “https://www.yunseo.kim/ko/posts/how-to-support-multi-language-on-jekyll-blog-with-polyglot-1/”` ነው።

sitemap

በተለየ ሁኔታ ቴምፕሌት ካልተገለጸ፣ Jekyll በግንባታ ጊዜ በራሱ የሚፈጥረው sitemap ብዙ ቋንቋ ገጾችን በመደበኛነት አይደግፍም፣ ስለዚህ በስር ዳይሬክተሪ ላይ sitemap.xml ፋይል ፍጠሩ እና እንደሚከተለው ይዘት ያስገቡ።

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>

ተጨማሪ ንባብ

በክፍል 2 ይቀጥላል

Dev, Web Dev
Static Site Jekyll Polyglot Markdown
ይህ ልጥፍ በ CC BY-NC 4.0 ፈቃድ ስር ነው።

© Yunseo Kim. አንዳንድ መብቶች የተጠበቁ ናቸው።

በ Jekyll የተገነባ፣ ከ Chirpy ገጽታ ጋር።