كيف تدعم لغات متعددة في روابط الأقسام والتصنيفات في هوجو ؟

واجهت هذه المشكلة في ثيم هوجو الذي صممته. أستخدم ثيم كمت على هذا الموقع الذي تقرأ أنت عليه حالياً. الموقع ثنائي اللغة. تجد تدوينات ومقالات مكتوبة باللغة العربية وترجمة هذه المقالات باللغة الإنجليزية. لكن عندما أضغط على زرار أحد الأقسام أو التصنيفات في الجزء الخاص باللغة العربية، الرابط يعطي 404 الرابط غير موجود! المفروض اللينك شغال!

المشكلة في رابط التصنيف (tag) وهو /tags/the-tag-itself لكن لكي يعمل هذا الرابط لابد أن يكون /ar/tags/the-tag-itself. لذلك عرفت أنها مشكلة ترجمة! أن الرابط لا يدعم لغات مختلفة.

كنت أستخدم هذا الكود لإظهار روابط التصنيفات (tags) والأقسام (categories).

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

{{ with .Params.tags }}
<div class="tags">
    {{ T "tags" }}:
    {{ range . }}
        <a href="{{ "tags/" | relURL }}{{ . | urlize }}">{{ . }}</a>
    {{ end }}
</div>
{{ end}}

{{ with .Params.categories }}
    <div class="categories">
    {{ T "categories" }}:
    {{ range . }}
        <a href="{{ "categories/" | relURL }}{{ . | urlize }}">{{ . }}</a>
    {{ end }}
    </div>
{{ end}}

حل يدوي سيئ 🔗

فكرت في طريقة لإنشاء الرابط بشكل يدوي بهذا الشكل.

1

{{ printf "%s/%s" .Lang "tags" | absURL }}{{ . | urlize }}

ولكن لم يعجبني الكود، به كثير من التفاصيل التي ربما تكون غير معرفة عند أحد المواقع التي تستخدم ثيم كمت. لذلك بدأت في البحث والقراءة داخل توثيق وشرح هوجو (Hugo docs). وجدت طريقة أخرى أفضل وأسهل بشكل واضح وسلس.

طريقة عرض التصنيفات والأقسام في هوجو 🔗

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

{{ range .GetTerms "tags" }}
    <a href="{{ .RelPermalink }}">
    {{- .LinkTitle -}}
    </a>
{{ end }}

{{ range .GetTerms "categories" }}
    <a href="{{ .RelPermalink }}">
    {{- .LinkTitle -}}
    </a>
{{ end }}

أخذت هذا الكود من documentation هوجو نفسه من هنا . هذا الكود قوي وسلس ومختصر وليس به أجزاء غير معرفة.

ولكني أعدت كتابته بشكل أفضل مع with لعرض الجزء الخاص بالتصنيفات والأقسام في حال وجودهم فقط. فأصبح الكود النهائي بهذا الشكل.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

{{ with .GetTerms "tags" }}
<div class="tags">
    {{ T "tags" }}:
    {{ range . }}
    <a href="{{ .RelPermalink }}">
        {{- .LinkTitle -}}
    </a>
    {{ end }}
</div>
{{ end }}

نفس الطريقة استخدمتها لعرض الأقسام .

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

{{ with .GetTerms "categories" }}
<div class="categories">
    {{ T "categories" }}:
    {{ range . }}
    <a href="{{ .RelPermalink }}">
        {{- .LinkTitle -}}
    </a>
    {{ end }}
</div>
{{ end }}

ثيم كمت مجاني ومفتوح المصدر. لا تتردد في الإطلاع على الكود وطلب التعديلات والإضافات عليه.

أتمنى أن تكون قد استفدت من الموضوع ، إن كنت تعرف أي شخص يُمكنه الإستفادة من هذه المعلومات، ارسل له رابط هذا المقال. إن أردت معرفة الموضوعات الجديدة بعد نشرها مباشرةً على موقع أبانوب حنا ، تابعني على يوتيوب و تيليجرام ، و فيسبوك ، و واتساب .