نمذجة المحتوى مع Jekyll

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

بدلاً من تعليم الأشخاص كيفية تصميم المحتوى ، ينتهي بنا الأمر بتعليمهم كيفية تصميم المحتوى في دروبال ، أو كيفية تصميم المحتوى في WordPress. لكنني أفضل أن نتعامل معها من خلال التركيز على المصالح الفضلى للمستخدمين ، بغض النظر عن النظام الأساسي الذي قال إن المحتوى سينتهي به.

مزيد من القراءة على SmashingMag:

• أنشئ مدونة باستخدام صفحات Jekyll و GitHub
• لماذا تعتبر مولدات مواقع الويب الثابتة هي الشيء الكبير التالي
• مولدات موقع الويب الثابت تمت مراجعتها: Jekyll، Middleman، Roots، Hugo
• أتمتة تطوير أسلوب يحركها

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

وهكذا ، انتهى بي الأمر بطرح السؤال على نفسي: هل كانت هناك أداة يمكنني استخدامها لمساعدة الأشخاص في نمذجة المحتوى بسرعة بطريقة لا تعتمد على النظام الأساسي وفي نفس الوقت إنشاء قطعة أثرية كانت مثالية لإيصال النية إلى العميل أو الفريق؟

نظرية عالية المستوى لنمذجة المحتوى

دعونا نتحول قليلاً قبل أن ندخل في جيكل. أعتقد أنه يمكنك إزالة جميع الاصطلاحات واللغة الخاصة بالنظام الأساسي من مناقشة نمذجة المحتوى وتعريفها كنظام من ثلاثة أجزاء:

1. الفكرة الأساسية هي كائن : وحدة من المحتوى تتماسك عبر الموقع. على سبيل المثال ، قد يكون منشور مدونة أو شخص ما كائنًا على أحد المواقع.
2. الكائنات لها سمات تحددها . يمكن أن تحتوي مشاركة المدونة على عنوان أو مجموعة محتوى أو مؤلف. يمكن لأي شخص أن يكون له اسم أو صورة أو سيرة ذاتية.
3. تحتوي الكائنات على علاقات تحدد مكان وصولها إلى الموقع ، وتحتوي التخطيطات على منطق يحدد سمات الكائن التي يتم استخدامها وأين. كائن منشور المدونة الخاص بنا على سبيل المثال متصل بكائن شخص لأن مؤلفه شخص. نخرج اسم المؤلف ورابطًا إلى ملفه الشخصي على صفحة المنشور ، ونخرج سيرته الذاتية الكاملة على صفحة ملفه الشخصي.

كنت أرغب في إنشاء نظام يحترم الأفكار رفيعة المستوى التي أوجزتها ، لكنه أتاح للفريق حرية تكوين سمات وعلاقات كما يرونها مناسبة دون القلق بشأن الأفكار الخاصة بمنصات معينة. بدلاً من ذلك ، يمكنهم التركيز على تحديد المحتوى بناءً على الأفضل للمستخدمين . واتضح أن Jekyll لديه الميزات لجعل هذا ممكنًا.

أدخل جيكل

Jekyll هو إطار تدوين ثابت. وقبل أن تتوجه إلى قسم التعليقات ، نعم ، أدرك أنه من الصحيح اعتبارها منصة في حد ذاتها. ومع ذلك ، فإنه يتمتع ببعض المزايا مقارنة بشيء مثل Drupal أو WordPress.

يأخذ Jekyll البساطة على محمل الجد. لا يحتوي على قاعدة بيانات ، وبدلاً من ذلك يعتمد على الملفات المسطحة وبعض علامات القوالب السائلة التي تنشئ HTML عاديًا قديمًا. السائل محدود وبسيط ويسهل على الإنسان قراءته. لقد اكتشفت أنه يمكنني أن أظهر لشخص ما نموذجًا تم إنشاؤه باستخدام بعض العلامات السائلة وطالما أن لديهم القليل من الخبرة في التعليمات البرمجية للواجهة الأمامية ، فهم يفهمون ما يفعله النموذج.

الشيء الجميل في هذا هو أنه لا يتعين علينا أن نظهر لشخص ما كيفية تشغيل قاعدة بيانات ، وكيفية ربط القوالب الخاصة بهم بها ، وكيفية تكوين منطقة المسؤول في نظام إدارة المحتوى الخاص بهم للعمل مع القوالب الخاصة بهم ، وما إلى ذلك. بدلاً من ذلك ، يمكننا تثبيت Jekyll وتعليم كيفية بدء تشغيل الخادم. إذا كان المستخدم على جهاز Mac ، فهناك فرصة ممتازة لأن تكون هذه عملية دقيقتين تعمل فقط في المرة الأولى التي نجربها فيها.

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

استخدام المجموعات لإنشاء كائنات واحتوائها

بينما لا تزال تعتبر ميزة تجريبية ، لدى Jekyll ما يسمى المجموعات التي ستسمح لنا بإنشاء النظام الذي أصفه.

بشكل أساسي ، تقوم بإنشاء مجلد وتسميته بعد نوع الكائن الذي تقوم بإنشائه. ثم تقوم بإضافة ملفات إلى هذا المجلد ، ويمثل كل ملف كائنًا في تلك المجموعة. بمجرد أن يكون لديك كائنات ، يمكنك إنشاء سمات لها باستخدام YAML في بداية كل ملف. YAML هو بناء جملة يسمح لك بتحديد أزواج المفاتيح / القيمة التي تخزن المعلومات بسهولة.

ما هو لطيف في هذا النظام هو مدى بساطته بشكل لا يصدق. كل شيء يمكن قراءته من قبل الإنسان ويعمل بطريقة يسهل على المستخدم الجديد تعلمها. بدلاً من إنشاء الكثير من الوثائق حول كيفية إنشاء شخص ما للمحتوى والعلاقات في النظام النهائي ، يمكنك فقط إنشاؤه. يمكن للمصممين رؤية الكائنات وسماتها حتى يتمكنوا من تخطيط نظام التصميم الخاص بهم. يمتلك مطورو الواجهة الأمامية موقع ويب فعال لتصميم العلامات و CSS الخاصة بهم.

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

لنقم ببناء موقع بسيط به كائنات وعلاقات

إذا كنا سنأخذ هذه الفكرة في جولة ، فسنحتاج إلى إنشاء موقع Jekyll بسيط ثم بناء كائناتنا وعلاقاتنا. إذا كنت تريد أن ترى المنتج النهائي ، يمكنك الحصول عليه من GitHub repo. (ملاحظة: سيتعين عليك استخدام الجهاز لبعض من هذا ، لكنه استخدام أساسي جدًا ، أعدك.)

تركيب جيكل

إذا كنت تستخدم جهاز Mac ، فهذا سهل جدًا. تم تثبيت Ruby بالفعل ، ما عليك سوى تثبيت Jekyll. افتح الجهاز واكتب:

 gem install jekyll

سيؤدي هذا إلى تثبيت جوهرة جيكل روبي وتوابعها. بمجرد الانتهاء من الجري ، هذا كل شيء: لقد حصلت على Jekyll.

انشاء الموقع الخاص بك

الآن نحن بحاجة لبدء سقالة Jekyll. أقوم بتخزين جميع مشاريع الويب الخاصة بي في مجلد على جهاز Mac يسمى المواقع ، في المجلد الرئيسي. لذلك أحتاج أولاً إلى الانتقال إليه باستخدام:

 cd ~/Sites

بعد ذلك يمكنني إنشاء مجلد بالملفات والبنية المناسبة باستخدام هذا الأمر:

 jekyll new my-new-site

يمكنك استبدال "موقعي الجديد" بكل ما تريد الاتصال به في مشروعك. ما ستحصل عليه هو مجلد بهذا الاسم وجميع الملفات الصحيحة بداخله.

افتح Finder وانتقل إلى مجلدك الجديد لترى ما بداخله. يجب أن نرى شيئا من هذا القبيل:

نظرًا لأننا لا نحتاج إلى كل ما تقدمه Jekyll ، فسنحذف بعض الملفات والمجلدات أولاً. دعونا نرمي / _includes ، / _posts ، / _sass ، about.md و feed.xml .

إعدادات

سنقوم الآن بإعداد تكوينات على مستوى الموقع. افتح _config.yml . هناك مجموعة من الأشياء التمهيدية هناك. سأحذف ذلك فقط واستبدله بتكويناتي المفضلة. إليك التكوين الجديد لهذا المشروع:

 permalink: pretty collections: projects people

لقد صنعته بحيث تبدو عناوين URL الخاصة بي مثل / path / to / file / بدلاً من /path/to/file.html وهو مجرد تفضيل شخصي. لقد أنشأت أيضًا مجموعتين: المشاريع والأشخاص . يجب إضافة أي مجموعة جديدة إلى ملف التكوين.

يمكنني الآن إنشاء مجلدات لهذه المجموعات في مشروعي:

يجب أن تبدأ أسماء المجلدات بحرف _ (شرطة سفلية) حتى يعرف Jekyll ماذا يفعل بها.

صنع بعض الأشياء

أول الأشياء التي سنصنعها ستكون شعبنا. سنستخدم Markdown لإنشاء هذه الملفات بحيث تكون لطيفة ونظيفة ولكنها لا تزال تنشئ HTML دلالي مناسب. يمكنك أن ترى أنني أنشأت بعض الملفات لأرقام من التاريخ الأمريكي (قد يكون هذا مرتبطًا أو لا يرتبط بحقيقة أنني كنت أستمع إلى Hamilton بدون توقف لمدة شهر الآن):

ستكون السمات التي سنضعها في ملفنا لشخص ما هي:

 --- object-id: first-name: last-name: job: listing-priority: wikipedia-url: ---

سنستخدم object-id للإشارة تحديدًا إلى أي من هذه الكائنات لاحقًا. سنقوم بتقسيم الاسم الأول والأخير حتى نتمكن من تحديد المجموعة المراد استخدامها في أماكن مختلفة (إذا كان نظامك يستدعي ذلك) وسنستخدم job لتحديد ما يفعلونه. (أنا أتجنب "العنوان" لأن هذا بالفعل متغير تمتلكه الصفحات في Jekyll افتراضيًا.) لقد قمت أيضًا بتضمين سمة لسرد الأولوية والتي ستسمح لي بفرز كل شخص وفقًا للأهواء ، ولكن يمكنك أيضًا الفرز حسب بعض الطرق المضمنة مثل الأبجدية أو العددية. أخيرًا ، لدينا حقل للرابط إلى صفحة ويكيبيديا الخاصة بهذا الشخص.

كل هذا موجود بين ثلاث واصلات في الأعلى والأسفل لتعريفه على أنه عنصر YAML الأمامي. سيتبع محتوى كل سيرة ذاتية YAML ويمكن أن يكون مقدارًا عشوائيًا وهيكل HTML (لكننا سنستخدم تنسيق Markdown للحفاظ على كل شيء جميلًا ونظيفًا).

يبدو كائن الشخص المأهولة بالكامل كالتالي (المحتوى مقطوع للتوضيح):

 --- object-id: alexander-hamilton first-name: Alexander last-name: Hamilton job: 1st United States Secretary of the Treasury listing-priority: 1 wikipedia-url: https://en.wikipedia.org/wiki/Alexander_Hamilton --- Alexander Hamilton (January 11, 1755 or 1757 – July 12, 1804) was...

وإليك كائن مشروع (المحتوى مقطوع من أجل الوضوح):

 --- object-id: united-states-coast-guard title: United States Coast Guard featured: true featured-priority: 2 listing-priority: 1 architect-id: alexander-hamilton wikipedia-url: https://en.wikipedia.org/wiki/United_States_Coast_Guard --- The United States Coast Guard (USCG) is...

هذا واحد لديه بعض الاختلافات. لقد قمت بتعيين سمة featured . إذا تم عرض مشروع ما ، فسيتم إدراجه في الصفحة الرئيسية. سيتم إدراج جميع المشاريع في صفحة المشاريع. لدينا أيضًا مجموعة ترتيب الفرز المفضل لدينا لكل موضع. وقمنا بتضمين مرجع id الشخص الذي أنشأ المشروع ، حتى نتمكن من الرجوع إليهم مباشرة لاحقًا.

توليد صفحات من كائناتنا

من خلال تعديل ملف _config.yml الخاص بي ، يمكنني إنشاء صفحات لكل من هذه الكائنات.

 permalink: pretty collections: projects: output: true people: output: true

ضبط output: true على كل مجموعة إلى إنشاء صفحة لكل كائن بداخلها. ولكن نظرًا لعدم وجود محتوى في ملفات كائناتنا ، فإنها لا تنتج حاليًا أي بيانات ، مما يعني أننا سنحصل فقط على صفحات فارغة. لنقم ببناء قالب تخطيط للقيام بذلك من أجلنا.

سينتقل هذا الملف إلى المجلد _layouts . لكن أولاً ، لدينا ملف default.html هناك للتعامل معه. سيحتوي هذا على أي ترميز متسق عبر جميع ملفات HTML الخاصة بنا.

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>{{ page.title }}</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="/css/styles.css" /> </head> <body> <header role="banner"> ... </header> <div role="main"> <div class="container"> {{ content }} </div> </div> <footer role="contentinfo"> ... </footer> </body> </html>

ستلاحظ علامة Liquid تشبه هذا: {{ content }} . يحتاج كل ملف يتم عرضه في صفحة بواسطة Jekyll إلى قالب محدد له. بمجرد تحديد القالب الخاص به ، يتم عرض المحتوى من هذا الملف في موقع علامة {{ content }} في قالب التخطيط. الآن لا يتعين علينا تكرار الأشياء التي ستكون على كل صفحة.

بعد ذلك ، سنقوم ببناء قالب تخطيط فريد لكائناتنا الشخصية. سيبدو هذا كالتالي:

 --- layout: default --- <header class="intro person-header"> <h1>{{ page.first-name }} {{ page.last-name }}</h1> <h2>{{ page.job }}</h2> </header> <div class="person-body"> {{ page.content }} <a href="{{ page.wikipedia-url }}">Read more about {{ page.first-name }} {{ page.last-name }} on Wikipedia</a> </div>

يحدد هذا الملف أن الكود الخاص به يتم إدراجه في قالب التخطيط الافتراضي ، ومن ثم يتم ملء ترميزه من البيانات الموجودة في ملفات كائن الشخص.

الخطوة الأخيرة هي التأكد من أن كل كائن شخص يحدد أنه يستخدم ملف تخطيط person.html . عادة ، نقوم فقط بإدخال ذلك في YAML في ملفاتنا الشخصية مثل:

 --- object-id: first-name: last-name: job: listing-priority: wikipedia-url: layout: person ---

لكني أفضل أن تحتوي البيانات الموجودة في ملفات الكائنات الخاصة بي على سمات ذات صلة بنموذج المحتوى فقط. لحسن الحظ ، يمكنني تغيير ملف _config.yml الخاص بي للتعامل مع هذا الأمر نيابةً عني:

 exclude: - README.md permalink: pretty collections: projects: output: true people: output: true defaults: - scope: type: projects values: layout: project - scope: type: people values: layout: person

يعرف موقعي الآن أن أي كائن في مجموعة المشروع يجب أن يستخدم قالب تخطيط المشروع ، وأي كائن في مجموعة الأشخاص يجب أن يستخدم تخطيط الشخص. هذا يساعدني في الحفاظ على كائنات المحتوى الخاصة بي لطيفة ونظيفة.

عرض الكائنات على صفحة القائمة

سواء اخترنا إخراج صفحات لكائناتنا أم لا ، يمكننا سردها وفرزها حسب معلمات مختلفة. إليك كيفية سرد جميع مشاريعنا على الصفحة:

 --- layout: default title: Projects --- <header class="intro"> <h1>{{ page.title }}</h1> </header> <div class="case-studies-body"> <ul class="listing"> {% assign projects = site.projects | sort: 'listing-priority' %} {% for project in projects %} <li> <h2><a href="{{ project.url }}">{{ project.title }}</a></h2> {{ project.content }} </li> {% endfor %} </ul> </div>

ما فعلناه هو إنشاء <ul> لوضع قائمتنا بالداخل. بعد ذلك ، أنشأنا متغيرًا على الصفحة يسمى projects ، وقمنا بتعيين جميع كائنات مشروعنا إليه ، وقمنا بفرزها حسب متغير listing-priority الذي أنشأناه في كل منها. أخيرًا ، لكل مشروع في متغير projects ، نخرج <li> يتضمن بيانات من السمات في كل ملف. يمنحنا هذا قائمة يمكن التحكم فيها بدرجة كبيرة من كائنات مشروعنا مع روابط لصفحاتها الفريدة.

في الصفحة الرئيسية ، بدلاً من عرض جميع المشاريع ، سنعرض فقط المشاريع المميزة لدينا:

 <ul class="listing"> {% assign projects = site.projects | where: "featured", "true" | sort: 'featured-priority' %} {% for project in projects %} <li> <h3>{{ project.title }}</h3> <a href="{{ project.url }}">Learn about {{ project.title }}</a> </li> {% endfor %} </ul>

سيتم عرض أي كائن مشروع تم تعيين السمة featured له على " true " على هذه الصفحة ، وسيتم فرزها حسب ترتيب الأولوية الخاص الذي قمنا بتعيينه للمشاريع المميزة.

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

الارتباط بكائن معين

الميزة الأخيرة التي سنقوم ببنائها هي الارتباط بكائن معين. هذا شيء قد ترغب في القيام به إذا كنت تربط مؤلفًا بمنشور مدونة أو شيء مشابه. في حالتنا ، سنقوم بإرفاق شخص بالمشروع الذي يرتبط به بشكل عام. إذا كنت تتذكر ، فإن كائن مشروعنا له سمة architect-id ولكل فرد لدينا سمة object-id . يمكننا إرفاق الشخص المناسب بمشروع معين باستخدام هذه السمات.

هذا هو نموذج تخطيط المشروع الخاص بنا:

 --- layout: default --- {% assign architect = site.people | where: "object-id", page.architect-id | first %} <header class="intro project-header"> <h1>{{ page.title }}</h1> <p>Architected by: <a href="{{ architect.url }}">{{ architect.first-name }} {{ architect.last-name }}</a></p> </header> <div class="project-body"> {{ page.content }} <a href="{{ page.wikipedia-url }}">Read more about {{ page.title }} on Wikipedia</a> </div>

ينشئ السطر 4 متغيرًا يسمى architect ويبحث في جميع كائنات الأشخاص لدينا عن أي كائن به object-id يطابق سمة architect-id من المشروع. يجب علينا تعيين معرفات object-id بحيث يتم إرجاع نتيجة واحدة فقط ، ولكن للتأكد من حصولنا على إجابة واحدة فقط والإشارة إليها بدلاً من قائمة عنصر واحد لدينا ، يتعين علينا تعيين | first | first في نهاية العلامة السائلة {% assign %} . هذا يتغلب على قيود Jekyll حيث لا تحتوي الكائنات في المجموعات على معرفات فريدة لتبدأ بها. هناك ميزة أخرى تسمى البيانات التي تسمح بمعرفات فريدة ، لكنها لا تخرج الصفحات بسهولة أو تمنحنا القدرة على فرز كائناتنا ؛ كان العمل حول قيود المجموعات طريقة أسهل وأنظف للحصول على الوظيفة التي نريدها.

الآن بعد أن أصبحت الصفحة تحتوي على كائن فريد يمثل مهندس ذلك المشروع ، يمكننا استدعاء سماتها بأشياء مثل الاسم الأول للمهندس وعنوان URL لصفحة ويكيبيديا الخاصة بهم. هاهو! سهولة ربط الكائنات بمعرف فريد.

تغليف

هناك بعض الميزات الأخرى الرائعة التي يمكن إنشاؤها عن طريق البحث في مستندات Jekyll بمزيد من التفصيل ، ولكن ما لدينا هنا هو أساسيات نموذج أولي جيد لنمذجة المحتوى: القدرة على تحديد أنواع مختلفة من الكائنات ، والسمات المرتبطة بهذه الكائنات ، والمعرفات التي تسمح لنا باستدعاء كائنات معينة من أي مكان. نحصل أيضًا على منطق مرن للغاية لقوالب وإخراج كائناتنا في أماكن مختلفة. أفضل ما في الأمر هو أن النظام بأكمله بسيط وسهل القراءة ، ويخرج HTML عادي للاستخدام في أي مكان آخر إذا لزم الأمر.

لأغراض الاتصال ، لدينا الآن نموذج أولي قابل للنقر مستقل عن النظام الأساسي (موقع ويب حقيقي) سيحدد النظام بشكل أفضل من ملف PDF الذي يحتوي على مجموعة من المخططات. يمكننا تغيير نموذج المحتوى الخاص بنا بسرعة بينما نتعلم أشياء جديدة ونحتاج إلى التكيف. يمكننا إدخال المصمم والمطور في النظام لإنشاء أنماطهما وبنيتهما الأمامية لأنه سيقبل أي ترميز و CSS يريدون استخدامه. يمكننا حتى إدخال محرري المحتوى فيه عن طريق إعدادهم بإمكانية الوصول من خلال واجهة المستخدم الرسومية GitHub أو منصة استضافة تسمح باستخدام محرر مرئي مثل Prose.io أو GitHub Pages أو CloudCannon أو Netlify.

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