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

يدعم Discourse استيراد السمات التي تحتوي على أصول من مستودع بعيد.

هذا يسمح لمؤلفي السمات بمشاركة الخطوط والصور.

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

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

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

{
  "name": "مكون سمة Roboto",
  "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 ليكون مكانًا لمناقشة ألوانك

من المثالي إنشاء موضوع في فئة #plugin:theme مع بعض لقطات الشاشة لمخطط الألوان الخاص بك. ستستخدم هذا كـ about_url الخاص بك.

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

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

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

في نهاية العملية، سيبدو ملف about.json الخاص بك شيئًا مثل:

{
  "name": "مكون سمة Roboto",
  "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)