نشر صفحات ويب من Markdown باستخدام Docsify-This

مقدمة:

هل تريد استخدام Markdown لنشر محتواك عبر الإنترنت دون إعداد موقع أو تنفيذ عملية بناء؟ وهل تريد تضمين Markdown أو HTML بحرية وسلاسة في منصات متعددة، مثل نظام إدارة المحتوى أو نظام إدارة التعلم؟ يوفر المشروع المفتوح المصدر Docsify-This ، المبني على Docsify.js ، طريقة سهلة لنشر محتوى Markdown ومشاركته وإعادة استخدامه.

ما Docsify-This ؟

يمكنك باستخدام Docsify-This تحويل أي ملف Markdown متاح للجمهور فورًا إلى صفحة ويب مستقلة ومتجاوبة. ويمكنك ربط ملفات متعددة لإنشاء موقع بسيط. ويستطيع المصمم تغيير مظهر الصفحات المعروضة عبر واجهة «منشئ صفحات الويب» التي تعمل بالتأشير والنقر، أو باستخدام معاملات عنوان URL. ويمكن كذلك استخدام مجموعة فئات CSS المخصصة لـ Markdown عند إعداد المحتوى. وإذا خزنت الملفات في Codeberg أو GitHub ، أمكن توفير رابط «حرر هذه الصفحة» تلقائيًا لكل صفحة دعمًا للتأليف التعاوني.

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

استخدام منشئ صفحات الويب

افتح موقع Docsify-This أو نسختك المحلية منه في المتصفح. وفي قسم Web Page Builder أدخل عنوان ملف Markdown في مستودع عام على Codeberg أو GitHub ، ثم اضغط «النشر بوصفه صفحة ويب مستقلة». ويمكن استخدام خدمات استضافة Git الأخرى عبر معاملات عنوان Docsify-This ، وإن لم يدعمها منشئ الصفحات نفسه.

يُعرض الملف في صفحة ويب مستقلة لها عنوان تستطيع نسخه ومشاركته. وهذا مثال:

https://docsify-this.net/?basePath=https://raw.githubusercontent.com/hibbitts-design/docsify-this-one-page-article/main&homepage=home.md

تصلح الصفحات الناتجة للتضمين داخل منصات أخرى، مع إمكان تعديل مظهرها كي ينسجم مع المنصة المستهدفة.

عرض ملفات أخرى من المستودع نفسه

يمكنك عرض ملف Markdown آخر من المستودع نفسه بتعديل معامل homepage مباشرة في عنوان Docsify-This. مثلًا:

https://docsify-this.net/?basePath=https://raw.githubusercontent.com/hibbitts-design/docsify-this-one-page-article/main&homepage=anotherfile.md

تعديل مظهر الصفحة

تستطيع تغيير مظهر أي ملف Markdown معروض عبر معاملات عنوان URL. ومن أمثلتها font-family و font-size و link-color و line-height ، وهي خصائص CSS شائعة تُقبل أيضًا معاملات في Docsify-This:

https://docsify-this.net/?basePath=https://raw.githubusercontent.com/hibbitts-design/docsify-this-one-page-article/main&homepage=home.md&font-family=Open%20Sans,sans-serif

ويمكن تعديل المظهر باستخدام مجموعة من فئات CSS الخاصة بـ Markdown. فمثلًا أضف الفئة button إلى الرابط:

[Required Reading Quiz due Jun 4th](https://canvas.sfu.ca/courses/44038/quizzes/166553 ':class=button')

فينتج زر بدل الاكتفاء برابط نصي.

وإلى جانب الفئات المدعومة أصلًا في Docsify-This ، تستطيع تعريف فئاتك الخاصة داخل ملفات Markdown المعروضة، كما في المثال التالي:

<style>
.markdown-section .mybutton, .markdown-section .mybutton:hover {
  cursor: pointer;
  color: #CC0000;
  height: auto;
  display: inline-block;
  border: 2px solid #CC0000;
  border-radius: 4rem;
  margin: 2px 0px 2px 0px;
  padding: 8px 18px 8px 18px;
  line-height: 1.2rem;
  background-color: white;
  font-family: -apple-system, "Segoe UI", "Helvetica Neue", sans-serif;
  font-weight: bold;
  text-decoration: none;
}
</style>

[Custom CSS Class Button](# ‘:class=mybutton’)

ينتج عن هذا المثال زر بتنسيق CSS مخصص.

تضمين مقاطع HTML

وفق ما يسمح به Markdown المعتاد، يمكنك تضمين مقاطع HTML ، وبذلك تضيف عناصر تخطيط إلى العرض الناتج. مثال:

<div class="row">
<div class="column">

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

</div>
<div class=”column”>

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

</div>
</div>

تضمين Docsify-This داخل إطار iFrame

يمكن تضمين صفحات Docsify-This باستخدام iFrame في معظم المنصات تقريبًا. كما تستطيع استعمال معاملات العنوان لضمان تطابق مظهر المحتوى المضمّن مع المنصة المستهدفة:

<p><iframe style="overflow: hidden; border: 0px #ffffff none; margin-top: -26px; background: #ffffff;" src="https://docsify-this.net/?basePath=https://raw.githubusercontent.com/paulhibbitts/cmpt-363-222-pages/main&homepage=home.md&font-family=Lato%20Extended,Lato,Helvetica%20Neue,Helvetica,Arial,sans-serif&font-size=1&hide-credits=true" width="800px" height="950px" allowfullscreen="allowfullscreen"></iframe></p>

تضمين Docsify-This بعنوان خارجي

تتيح بعض نظم إدارة التعلم، ومنها Moodle المفتوح المصدر وحتى Canvas المملوك، ربط صفحات ويب خارجية بقائمة التنقل في المقرر، وأحيانًا في مواضع أخرى. فمثلًا تستطيع استخدام أداة Redirect Tool في Canvas لعرض صفحات Docsify-This:

url=https://docsify-this.net/?basePath=https://raw.githubusercontent.com/paulhibbitts/cmpt-363-222-pages/main&homepage=resources.md&edit-link=https://github.com/paulhibbitts/cmpt-363-222-pages/blob/main/resources.md&font-family=Lato%20Extended,Lato,Helvetica%20Neue, Helvetica,Arial,sans-serif&font-size=1&hide-credits=true

دمج Docsify-This مع Git

للاستفادة الكاملة من التحكم في الإصدارات، وربما من التعاون أيضًا عبر رابط «حرر هذه الصفحة» الاختياري، خزّن صفحات Markdown في مستودع Git على Codeberg أو GitHub. وتوفر أدوات مفتوحة المصدر متعددة واجهة رسومية لـ Git ، منها GitHub Desktop الذي أتيح حديثًا بوصفه مشروعًا مفتوح المصدر، و Git-Cola و SparkleShare. ويحتوي محررا النصوص VSCode و Pulsar Edit ، المعروف سابقًا باسم Atom.io ، على تكامل مع Git كذلك.

تيسير النشر باستخدام Markdown

أصبحت فوائد النشر القائم على Markdown متاحة للجميع بفضل Docsify. وبفضل Docsify-This ، صار استخدامها أسهل من أي وقت مضى. جرّب الأداة على موقع Docsify-This.

المراجع:

https://docsify-this.net

https://docsify.js.org

https://docsify-this.net/#/?id=page-appearance-url-parameters

https://docsify-this.net/#/?id=supported-markdown-css-classes

https://github.com/instructure/canvas-lms

https://developers.redhat.com/cheat-sheets/advanced-linux-commands/?intcmp=7016000000127cYAAQ

https://www.redhat.com/en/services/training/rh024-red-hat-linux-technical-overview?intcmp=7016000000127cYAAQ

https://console.redhat.com?intcmp=7016000000127cYAAQ

https://github.com/desktop/desktop