إنشاء ومشاركة مكوّن سمة الخط

يدعم Discourse استيراد القوالب (Themes) التي تحتوي على أصول (Assets) من مستودع (Repository) بعيد.

يتيح ذلك لمطوري القوالب مشاركة الخطوط والصور.

إنشاء مستودع git جديد يحتوي على الخط

mkdir discourse-roboto-theme
cd discourse-roboto-theme
git init .
vim about.json

أضف ملف إعدادات أساسي (Skeleton) لـ about.json

{
  "name": "Roboto theme component",
  "about_url": "",
  "license_url": "",
  "assets": {
    "roboto": "assets/roboto.woff2"
  }
}

أضف ملف LICENSE، أنا أستخدم عادةً MIT

vim LICENSE

تنزيل الخط

موقع http://localfont.com/ مفيد للحصول على الخطوط

mkdir assets
cp ~/Downloads/roboto.woff2 roboto.woff2

إضافة CSS لاستهلاك القالب

mkdir common
cd common

أنشئ ملفاً باسم common.scss يحتوي على:

@font-face {
  font-family: Roboto;
  src: url($roboto) format("woff2");
}

body {
  font-family: Roboto;
}

دفع التغييرات إلى GitHub

قم بتسجيل جميع تغييراتك:

git add LICENSE
git add about.json
git add assets/roboto.woff2
git add common/common.scss
git commit -am "first commit"

أنشئ حساباً على GitHub.com ثم أنشئ مستودعاً جديداً.

(اختياري) إنشاء موضوع على Discourse كنقطة انطلاق لمناقشة ألوانك

من الأفضل أن تنشئ موضوعاً في فئة Customization > Theme مع بعض لقطات الشاشة من مخطط الألوان الخاص بك. ستستخدم هذا الرابط كـ about_url

ملء المعلومات الناقصة في ملف about.json الخاص بك

  • انتقل إلى صفحة LICENSE الخاصة بك على GitHub، واملأ هذا الرابط كـ license_url

  • استخدم إما رابط مشروع GitHub أو رابط موضوع Discourse كـ about_url

في نهاية العملية، سيبدو ملف about.json الخاص بك على النحو التالي تقريباً:

{
  "name": "Roboto theme component",
  "about_url": "https://github.com/SamSaffron/discourse-roboto-theme",
  "license_url": "https://github.com/SamSaffron/discourse-roboto-theme/blob/master/LICENSE",
  "assets": {
    "roboto": "assets/roboto.woff2"
  }
}

سجّل التغيير ودفعه إلى GitHub

git commit -am "added more details"
git push

اختبار مكوّن الخط الخاص بك

  • في شاشة admin/customize/theme، استورد قالبك من GitHub

:confetti_ball:

يمكنك الآن مشاركة الخطوط بسهولة!

انظر أيضاً:


هذا المستند مُدار بإصداراته - اقترح التغييرات على github.

19 إعجابًا

Great tutorial.

Worked like a charm except it looks like localfont.com is down or no more.

I used this Google webfonts helper site to download a .woff2 version of the font I was after.

See also Install the Discourse Theme CLI console app to help you build themes

إعجاب واحد (1)

عندما اتبعت الخطوات، تلقيت خطأ: Error: Undefined variable: "$fontname".

لذا:
أعلنت المتغير في $variables:
fontname: \"assets/fontname.woff2\";

يبدو لي أنه يجب عليك ملؤه، ولكن ما هو المسار الذي يجب استخدامه في $variables؟

عندما تسمح لـ Discourse بتحميل الملفات باستخدام

\"assets\": {
        \"fontname\": \"assets/fontname.woff2\"
   }

يقوم بتحميل الملف إلى مسار آخر غير assets/roboto.woff2 على ما يبدو
(/uploads/db0202/original/1X/...)

تعديل:
لا حاجة لـ $variables، السحر يحدث مع التحميلات. ولكن كان لدي assets/font.svg#regular في الأصول، وقد أنشأ الهاشتاج المشكلة.

إعجابَين (2)

أواجه نفس الخطأ Error: Undefined variable. وأيضًا، لا تظهر أي أصول في التحميلات أو التحميل كعنوان.

هل يحتاج هذا الدليل إلى تحديث؟

شكراً مقدماً

إعجاب واحد (1)