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

[Discourse]

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

يمكن للسمات توفير ملفات ترجمة بتنسيق مثل /locales/{locale}.yml. يجب أن تكون هذه الملفات YAML صالحة، مع مفتاح رئيسي واحد يساوي اللغة المحددة. يمكن تعريف هذه الملفات باستخدام أداة discourse_theme CLI، أو عن طريق استيراد ملف .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. تتم معالجة النسخ الاحتياطي بنفس طريقة المعالجة الأساسية، لذا لا بأس في وجود ترجمات غير مكتملة للغات غير الإنجليزية، حيث سيتم استخدام المفاتيح الإنجليزية.

في الخلفية، يتم تخزين هذه الترجمات بجوار الترجمات الأساسية، تحت مساحة اسم خاصة بالسمة. على سبيل المثال:

theme_translation.{theme_id}.sidebar.welcome

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

في ملفات .hbs، يمكنك استخدام المساعد المخصص:

{{theme-i18n "my_translation_key"}}

أو، إذا كنت بحاجة إلى تمرير مفتاح الترجمة إلى مكون آخر، يمكنك استخدام المساعد theme-prefix:

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

في Javascript، أو في ملفات .gjs، يمكنك استخدام الدالة themePrefix. يتم حقن هذه الدالة تلقائيًا، ولا تحتاج إلى استيرادها:

const result = I18n.t(themePrefix("my_translation_key"));

<template>{{i18n (themePrefix "blah")}}</template>

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

---

يتم التحكم في إصدار هذه الوثيقة - اقترح التغييرات على github.

[evantill (Eric Vantillard)]

Howto use theme translations in CSS ? I know we can use theme parameters but I need theme translations.

[david (David Taylor)]

You can’t, they’re only available in templates and javascript. That’s the same as core/plugin translations.

Ideally, refactor things so that the string is set in a template. But if you really need a customisable string in a css file, you could use theme settings: Developer’s guide to Discourse Themes

[evantill (Eric Vantillard)]

And if I use theme setting, is it possible to translate it ?

[david (David Taylor)]

No, not in to multiple languages, but it would allow admins to customize it for their site.

[Mikhail_Tyuftyaev]

Hello everyone.
I’m redefining the template upload-selector.hbs
I want to add a translatable phrase.
I created a new variable upload_selector.upload_images
For example

Please tell me what to do next?

[Theudebart (Marcel Patzsch)]

Hello,

when i try this technic in the discourse theme creator (see here) everything works fine and as explained here in the post.

However if I import the very same theme on my own server only " [en.theme_translations.12.blog]" appears. Also in the theme settings page there is no “Theme Translations” section like on the theme creator.

I really don’t know where to search for this error anymore. Has anybody a hint for me?

[Edit]
I’m using discourse 2.6.7 ( [f73cdbbd2f ] ) in an docker environment.

[IAmGav (Gavin Perch)]

@Theudebart

I’m using discourse 2.6.7 ( [f73cdbbd2f ] ) in an docker environment.

can you update discourse ?

you are using an old version

[Theudebart (Marcel Patzsch)]

@IAmGav

can you update discourse ?

you are using an old version

Yeah i’m trying that, that is another thing i need help with but, I don’t want to post it here, that’s another topic.

Anyway I thought that shouldn’t be problem as the translation feature was included in version 2.2.0.beta9, see commit.

[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 "