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

[Discourse]

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

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

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

en:
  theme_metadata:
    description: "This is a description for my theme"
    settings:
      theme_setting_name: "This is a description for the setting `theme_setting_name`"
      another_theme_setting_name:
        description: "This is a description for the setting `another_theme_setting_name`"
  sidebar:
    welcome: "Welcome"
    back: "back,"
    welcome_subhead: "We're glad you're here!"
    likes_header: "Share the Love"
    badges_header: "Your Top Badges"
    full_profile: "View your full profile"

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

يمكن للمشرفين أيضاً إدارة هذه الترجمات في Appearance → Site texts. اختر سمة أو مكوّناً للبحث في نصوص ملف اللغة الخاصة به، أو عدّل ترجمة في اللغة المحددة، أو أعد تجاوزاً إلى القيمة الافتراضية لملف اللغة. يمكن ربط الاختيار باستخدام /admin/customize/site_texts?theme_id=THEME_ID. تحدد نصوص الموقع هذه الإدخالات على أنها js.theme_translations.THEME_ID.KEY؛ تستخدم التعديلات نفس تجاوزات ترجمة السمة كما في محرر السمات.

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

theme_translation.{theme_id}.sidebar.welcome

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

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

// In JS code:
const result = i18n(themePrefix("my_translation_key"));
console.log("From Javascript", result);

// In a template tag:
<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 "