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

يدعم 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 "الالتزام الأول"

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

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

من الأفضل أن تنشئ موضوعًا في فئة Customization > 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 "إضافة المزيد من التفاصيل"
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)