إضافة سلاسل قابلة للترجمة إلى السمات ومكونات السمات

[Discourse]

لأولئك الذين يسعون لإضافة لغات وترجمات مخصصة إلى سمة Discourse أو مكون سمة، يمكنهم الآن تضمين سلاسل محلية، والتي تُتاح للاستخدام في مكونات واجهة المستخدم. تُخزَّن الترجمات بنفس تنسيق ترجمات النواة/الإضافات، ويمكن استخدامها بنفس الطريقة تقريبًا.

يمكن للسِمات توفير ملفات ترجمة بتنسيق مثل /locales/{locale}.yml. يجب أن تكون هذه الملفات صالحة بصيغة YAML، مع مفتاح واحد على المستوى العلوي يساوي اللغة المحلية المحددة. يمكن تعريف هذه الملفات باستخدام أداة سطر الأوامر discourse_theme، أو باستيراد ملف .tar.gz، أو بالتثبيت من مستودع GIT، أو عبر المحرر على theme-creator.discourse.org.

قد يبدو ملف اللغة المحلية مثالًا على النحو التالي:

ar:
  theme_metadata:
    description: "هذه وصف لسمتي"
    settings:
      theme_setting_name: "هذه وصف للإعداد `theme_setting_name`"
      another_theme_setting_name:
        description: "هذه وصف للإعداد `another_theme_setting_name`"
  sidebar:
    welcome: "مرحبًا"
    back: "رجوع،"
    welcome_subhead: "نحن سعداء لوجودك هنا!"
    likes_header: "شارك الحب"
    badges_header: "أفضل الشارات لديك"
    full_profile: "عرض ملفك الشخصي الكامل"

يمكن للمسؤولين تجاوز المفاتيح الفردية على أساس كل سمة في واجهة المستخدم /admin/customize/themes. يتم التعامل مع التراجع بنفس الطريقة كما في النواة، لذا لا بأس من وجود ترجمات غير مكتملة للغات غير الإنجليزية، حيث سيتم استخدام المفاتيح الإنجليزية.

في الخلفية، تُخزَّن هذه الترجمات جنبًا إلى جنب مع ترجمات النواة، ضمن مساحة أسماء خاصة بالسمة. على سبيل المثال:

theme_translation.{theme_id}.sidebar.welcome

يجب ألا تقوم أبدًا بتشفير معرف السمة (theme_id) بشكل ثابت في كود السمة. لبناء مفتاح الترجمة ديناميكيًا، استخدم الدالة المساعدة themePrefix:

import { i18n } from "discourse-i18n";
import { themePrefix } from "virtual:theme";

// في كود JS:
const result = i18n(themePrefix("my_translation_key"));
console.log("من JavaScript", result);

// في وسم القالب:
<template>{{i18n (themePrefix "blah")}}</template>

لنموذج كامل لاستخدام الترجمات في سمة، راجع سمة Fakebook التي أنشأها @awesomerobot: GitHub - discourse/Fakebook · GitHub

---

يخضع هذا المستند للتحكم في الإصدار - اقترح التغييرات على GitHub.

[evantill (Eric Vantillard)]

كيفية استخدام ترجمات السمات في CSS؟ أعرف أنه يمكننا استخدام معلمات السمات، لكنني بحاجة إلى ترجمات السمات.

[david (David Taylor)]

لا يمكنك ذلك، فهي متاحة فقط في القوالب و JavaScript. هذا هو نفس الأمر مع ترجمات النواة/الإضافات.

يفضل إعادة هيكلة الأمور بحيث يتم تعيين النص في قالب. ولكن إذا كنت بحاجة ماسة إلى نص قابل للتخصيص في ملف CSS، فيمكنك استخدام إعدادات السمة: Developing Discourse Themes & Theme Components

[evantill (Eric Vantillard)]

وإذا استخدمت إعدادات السمة، هل من الممكن ترجمتها؟

[david (David Taylor)]

لا، ليس إلى لغات متعددة، لكنه سيسمح للمسؤولين بتخصيصه لموقعهم.

[Mikhail_Tyuftyaev]

مرحبًا بالجميع.
أقوم بإعادة تعريف القالب upload-selector.hbs
أود إضافة عبارة قابلة للترجمة.
لقد أنشأت متغيرًا جديدًا upload_selector.upload_images
على سبيل المثال

يرجى إخباري بما يجب فعله بعد ذلك؟

[Theudebart (Marcel Patzsch)]

مرحباً،

عندما أجرب هذه التقنية في منشئ سمات ديسكورد (انظر هنا)، يعمل كل شيء بشكل جيد تماماً كما هو موضح في هذا المنشور.

ومع ذلك، عند استيراد نفس السمة على خادمي الخاص، يظهر فقط “[en.theme_translations.12.blog]”. أيضاً، في صفحة إعدادات السمة، لا توجد قسم “ترجمات السمة” كما هو موجود في منشئ السمات.

أنا حقاً لا أعرف أين أبحث عن هذا الخطأ بعد الآن. هل لدى أي شخص تلميح لي؟

[تعديل]
أستخدم ديسكورد 2.6.7 ( [f73cdbbd2f] ) في بيئة Docker.

[IAmGav (Gavin Perch)]

@Theudebart

أنا أستخدم discourse 2.6.7 ( [f73cdbbd2f ] ) في بيئة Docker.

هل يمكنك تحديث discourse؟

أنت تستخدم إصدارًا قديمًا.

[Theudebart (Marcel Patzsch)]

@IAmGav

هل يمكنك تحديث Discourse؟

أنت تستخدم إصدارًا قديمًا.

نعم، أحاول ذلك، وهذه مشكلة أخرى أحتاج إلى مساعدة فيها، لكنني لا أريد نشرها هنا، فهذا موضوع آخر.

على أي حال، ظننت أن هذا لا ينبغي أن يكون مشكلة، حيث تم تضمين ميزة الترجمة في الإصدار 2.2.0.beta9، راجع التعديل.

[Jerome_Hordies]

مرحباً، أعتذر مقدماً عن سؤال المبتدئين هذا.
لقد أنشأت ترويسة باستخدام HTML و CSS فقط

        <div class="top-navbar">
         <span class="j_menu_item" ><a>Download</a></span>     
        </div>

ثم أريد ترجمة كلمة “Download”
لقد أنشأت ملف الترجمة الإنجليزية

en: 
  top-navbar: 
    download: "Yeah"

ثم قمت بتغيير كود HTML كما في مثال فيسبوك

    <script type="text/x-handlebars" data-template-name="/connectors/discovery-below/sidebar">
        <div class="top-navbar">
         <a>{{i18n (theme-prefix "top-navbar.download")}}</a><span></span>     
        </div>
    </script>

هذا يترجم ويطبع “Yeah” ولكنه يكسر تخطيطي، أعتقد أن السبب هو أنني أستخدم “/connectors/discovery-below/sidebar”. أريد فقط تطبيق ترجمتي دون العبث بأي قالب ولكنني لا أفهم كيف أطبق الترجمة مباشرة.

هل يمكنك تقديم مثال بسيط حول كيفية استخدام الترجمة في HTML المخصص لموضوع ما؟

شكرا!

[Don]

مرحباً،
المشكلة هي أن data-template-name يجب أن يكون اسمًا فريدًا. Developing Discourse Themes & Theme Components. مثل هذا: data-template-name=\"/connectors/PLUGIN-OUTLET-NAME/UNIQUE-NAME\" الآن أنت تستخدم اسم sidebar في مثالك والذي أعتقد أنه يتجاوز قالب الشريط الجانبي لـ Fakebook.

على سبيل المثال، يجب أن يعمل هذا

<script type="text/x-handlebars" data-template-name="/connectors/discovery-below/downloadlink">
  <div class="top-navbar">
    <span class="j_menu_item" ><a href="https://www.example.com/download">{{i18n (theme-prefix "top-navbar.download")}}</a></span>     
  </div>
</script>

[Jerome_Hordies]

شكراً @Don

نسيت أن أذكر أن المكون الإضافي غير مثبت وأنني حاولت بالفعل تغيير data-template-name إلى اسم فريد عشوائي بنفس النتيجة أو عدم ظهور اللافتة على الإطلاق إذا قمت بإنشاء PLUGIN-OUTLET-NAME.
ربما يمكنك أن تخبرني الآن، أنا لست على دراية على الإطلاق بـ handlebars/ember
فهمي هو أنني أقوم بتخصيص قالب له مكانه المحدد مسبقًا في html وله نتيجة، لم يعد html المخصص فوق /html/body/section main ولكن في العمق مما يؤدي إلى وراثة CSS لم تكن لدي من قبل.
ما أواجه صعوبة في فهمه هو لماذا أحتاج إلى تخصيص أي قالب لاستخدام ترجمة…
تمكنت من تحديد القالب لتخصيصه باستخدام Ember inspector كما هو موصى به هنا
وبفضل إجابتك ورابطك حول plugin-outlet وجدت data-template-name الصحيح = “/connectors/above-site-header/my-navbar”
شكراً مرة أخرى على مساعدتك.

[Don]

أوه، فهمت… اعتقدت أنك تستخدم سمة Fakebook وتريد وضع الكود الخاص بك أسفل قسم الشريط الجانبي.

طريقة جيدة لرؤية منافذ المكونات إضافية بصريًا يمكنك استخدام مكون السمة Plugin Outlet Locations.

[Jerome_Hordies]

مرحباً @Don،

السبب في استخدامي لمثال فيسبوك هذا هو:

@david

للحصول على مثال كامل لاستخدام الترجمات في سمة، تحقق من سمة Fakebook الخاصة بـ @awesomerobot: GitHub - discourse/Fakebook

شكراً مرة أخرى!

[misham (Mykhailo)]

ماذا عن المفرد والجمع، كيف تترجم النص باستخدام {{theme-i18n}} إذا كان لديه ترجمة واحدة وكثيرة؟ على سبيل المثال “Result” و “Results”

[awesomerobot (Kris)]

هناك بعض الأمثلة على كيفية قيامنا بذلك في مصدر Discourse، وعادةً ما يكون لدينا سلسلتان ونقوم بالتبديل بناءً على عدد صحيح:

يجب أن يعمل هذا في سمة أيضًا، وبشكل عام ستبدو جافا سكريبت شيئًا كهذا:

I18n.t(themePrefix("confirm_remove_tags"), {
  count: exampleCountValue,
});

[misham (Mykhailo)]

وماذا عن hbs، هل يمكن القيام بذلك في قوالب hbs؟

[david (David Taylor)]

نعم يمكن ذلك:

{{theme-i18n "confirm_remove_tags" count=this.exampleCountValue}}

[merefield (Robert)]

@Discourse

<DButton @label={{theme-prefix "my_translation_key"}} />

عندما أفعل ذلك في قالب مكون .gjs داخل سمة، أحصل على:
Error: Attempted to resolve a helper in a strict mode template, but that value was not in scope: theme-prefix

لذا أحاول استيراده:
import themePrefix from "discourse/helpers/theme-prefix";

لكنه يتذمر:
Identifier 'themePrefix' has already been declared

(لقد بحثت عن مثال في "hub ولكن لا يبدو أن هناك واحدًا)

[merefield (Robert)]

تحديث: تحتاج إلى استخدام {{i18n (themePrefix "