تنزيل tinystatic - تنزيل كود المصدر tinystatic

tinystatic

فئات أخرى

JS helper functions; Dynamic URLs

تنزيل

com.tinystatic

منشئ مواقع ويب ثابت صغير الحجم ومرن وسهل الاستخدام. إنه مرن، حيث لا يوجد هيكل مطلوب لموقع الويب ولا أي مفاهيم خاصة بالمدونة. إنه سهل الاستخدام، حيث يمكننا البدء بموقع HTML قياسي وتقديم tinystatic تدريجيًا.

مفهوم tinystatic بسيط: من كل ملف في دليل الإدخال، قم بإنشاء ملف في دليل الإخراج والذي يمكننا بعد ذلك استخدامه كدليل عام لخادم الويب الخاص بنا. تعتمد كيفية إنشاء tinystatic لملف إخراج على امتداد ملف الإدخال: يتم تحويل Markdown إلى HTML، بينما يتم نسخ CSS وJS والصور ببساطة. بالنسبة لملفات Markdown وHTML، يمكنك تحديد بيانات التعريف في أعلى الملف. من خلال تحديد قالب في البيانات التعريفية للملف، وتوفير القوالب في أدلة منفصلة، يمكنك الاستفادة من محرك قوالب HTML الخاص بـ Go. فيما يلي مثال لموقع مدونة نموذجي وللحصول على دليل البدء السريع، انظر أدناه.

ثَبَّتَ

الثنائيات المعدة مسبقا

قم بتنزيل الملف الثنائي tinystatic لنظام التشغيل الخاص بك:

لينكس
ماك

اختياريًا، قم بإضافة الملف الثنائي إلى مسار الصدفة الخاص بك، إما عن طريق وضع الملف الثنائي في دليل موجود مثل /usr/bin أو عن طريق إضافة الدليل الأصلي للملف الثنائي إلى متغير المسار الخاص بك.

إذا أضفت tinystatic إلى المسار الخاص بك، فمن المفترض أن تكون قادرًا على الاتصال

tinystatic -help

بخلاف ذلك، ستحتاج إلى تحديد المسار إلى الملف الثنائي الصغير عند الاتصال به

/path/to/tinystatic -help

التجميع من المصدر

إذا كنت لا ترغب في استخدام الثنائيات المعدة مسبقًا، فستحتاج إلى تثبيت مترجم Golang لتجميع tinystatic. وبعد ذلك، يمكنك تثبيت tinystatic عن طريق التشغيل

go install -u github.com/julvo/tinystatic

أو عن طريق استنساخ المستودع وتشغيل go install أو go build في الدليل الجذر لهذا المستودع.

بداية سريعة

هذا برنامج تعليمي مدته 10 دقائق نقوم من خلاله ببناء مدونة صغيرة، بدءًا بصفحة HTML واحدة وتقديم ميزات tinystatic واحدة تلو الأخرى.

أولا، نقوم بإنشاء مجلد يسمى routes . داخل هذا المجلد، نقوم بإنشاء ملف HTML واحد index.html بالمحتويات التالية:

 <!doctype html >
< html >
  < head >
    < title > Our first tinystatic website </ title >
  </ head >
  < body >
      < h1 > Welcome to our blog </ h1 >
  </ body >
</ html >

الآن، يمكننا تشغيل tinystatic لأول مرة. افتراضيًا، يتوقع tinystatic أن يتم استدعاؤه في الدليل الذي يحتوي على دليل routes ، ولكن يمكنك تغيير ذلك باستخدام المعلمة -routes . بعد تشغيل الأمر، يجب أن تشاهد output المجلد التي تظهر بجوار مجلد routes . يبدو هيكل ملفنا الآن كما يلي:

 my-blog/
    routes/
        index.html
    output/
        index.html

يمكننا الآن تشغيل خادم ويب في دليل الإخراج، على سبيل المثال باستخدام خادم Python المدمج لفتح موقعنا على http://localhost:8000 :

 cd output
python3 -m http.server

حتى الآن، كل ما فعلته tinystatic هو نسخ index.html من routes إلى output - ليس كل ذلك مفيدًا، ولكن انتظر...

دعونا نضيف ملف HTML ثانيًا إلى routes ، على سبيل المثال about.html :

 <!doctype html >
< html >
  < head >
    < title > Our first tinystatic website </ title >
  </ head >
  < body >
      < h1 > About us </ h1 >
  </ body >
</ html >

بعد أن نقوم بتشغيل tinystatic مرة أخرى، ومع استمرار تشغيل خادم الويب الخاص بنا، يمكننا الآن الانتقال إلى http://localhost:8000/about . لاحظ كيف لم يعد هناك .html في هذا المسار بعد الآن، حيث أنشأ tinystatic مجلدًا about على ملف index.html واحد فيه، كما يلي:

 output/
    index.html
    about/
        index.html

ما لا نحبه في صفحاتنا الحالية هو تكرار جميع هياكل HTML الأساسية. ألن يكون من الأفضل استخدام قالب مشترك لـ index.html و about.html ؟. للقيام بذلك، نقوم بإنشاء مجلد يسمى templates بجوار مجلد routes الخاص بنا ونضع ملف HTML default.html بداخله:

 my-blog/
    routes/
        index.html
        about.html
    templates/
        default.html

يجب أن يكون محتوى default.html :

 <!doctype html >
< html >
  < head >
    < title > Our first tinystatic website </ title >
  </ head >
  < body >
      {{template "body" .}}
  </ body >
</ html >

كما نقوم بتغيير محتوى routes/index.html إلى

---
template: default.html
---
{{define "body"}}
< h1 > Welcome to our blog </ h1 >
{{end}}

ومحتوى routes/about.html إلى

---
template: default.html
---
{{define "body"}}
< h1 > About us </ h1 >
{{end}}

عند تشغيل tinystatic مرة أخرى، يكون الناتج مطابقًا للإخراج السابق، ولكننا قمنا بدمج هيكل HTML في مكان واحد.

كما رأينا الآن، يمكننا تحديد قالب لعرض المحتوى الخاص بنا من خلال توفير اسم القالب في البيانات التعريفية أعلى الملف. يمكننا أيضًا تضمين قوالب أخرى (انظر أدناه) واستخدام مسارات قوالب Go. أثناء العرض، لدينا إمكانية الوصول إلى البيانات التعريفية المحددة في الجزء العلوي من الملف، وهي عبارة عن Route هيكلي يحتوي على الحقول Route.Href و Route.FilePath و Route.Meta والتي تعد مرة أخرى خريطة للبيانات التعريفية المحددة في الجزء العلوي من الملف. علاوة على ذلك، يمكننا الوصول إلى Routes ، وهي شريحة (فكر: مصفوفة للأشخاص الجدد على الذهاب) من جميع المسارات، والتي سنتعلم المزيد عنها لاحقًا.

دعونا نستخدم هذه البيانات الوصفية مع أوليات القوالب الخاصة بـ Go لتغيير عنوان الصفحة اعتمادًا على الصفحة الحالية. لهذا، نقوم بتغيير البيانات الوصفية في routes/about.html إلى

 ---
template: default.html
title: About
---

وأخيرًا قم بتغيير templates/default.html إلى

 <!doctype html >
< html >
  < head >
    < title > {{if .title}} {{.title}} | {{end}}Our first tinystatic website </ title >
  </ head >
  < body >
      {{template "body" .}}
  </ body >
</ html >

بعد إعادة إنشاء موقع الويب، يجب أن يعرض المتصفح الآن عناوين صفحات مختلفة لفهرسنا وصفحة "نبذة عنا".

الآن، لنقم بإنشاء بعض منشورات المدونة في مجلد المسارات لدينا، على سبيل المثال

 routes/
    index.html
    about.html
    posts/
        first_post.md
        second_post.md

ضع بعض العلامات داخل ملفات .md هذه مع قسم بيانات التعريف في الأعلى مع تحديد القالب كـ default.html ، على غرار الطريقة التي حددنا بها بيانات التعريف في routes/index.html و routes/about.html . بالنسبة إلى first_post.md ، قد يبدو هذا كما يلي:

 ---
template : default.html
title : First Post
---

# Here could be some fine content

عند تشغيل tinystatic مرة أخرى لإعادة إنشاء المخرجات، يمكننا الآن زيارة http://localhost:8000/posts/first_post و http://localhost:8000/posts/second_post . لقد تم تحويل علامة التخفيض إلى HTML ووضعها داخل قالب يُسمى body بالنسبة لنا، بحيث يتم عرضه في العنصر النائب {{template "body" .}} في templates/default.html . لاحظ كيف يختلف هذا عن ملفات .html ، حيث نحتاج إلى استدعاء {{define "body"}} ... {{end}} يدويًا.

بعد ذلك، لنقم بإنشاء قائمة بمنشوراتنا باستخدام شريحة Routes المذكورة أعلاه. نقوم بتغيير محتوى routes/index.html إلى:

---
template: default.html
---
{{define "body"}}
< h1 > Welcome to our blog </ h1 >

< ul >
{{range .Routes | filterFilePath "**/posts/*.md"}}
< li >
    < a href = {{.Href}} > {{.title}} </ a >
</ li >
{{end}}
</ ul >

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

.Routes | filterFilePath "**/posts/*.md" لعرض جميع الملفات التي تنتهي بـ .md في أي مجلد يسمى المشاركات
.Routes | sortAsc "title" لفرز المسارات بناءً على title حقل بيانات التعريف
.Routes | limit 10 للحصول على أول 10 طرق فقط
.Routes | offset 3 لتخطي المسارات الثلاثة الأولى
.Routes | filter "title" "*Post" للتصفية بناءً على title حقل البيانات التعريفية المطابق للنمط *Post
.Routes | filterFileName "*.md" للحصول على كافة الملفات التي تنتهي بـ *.md
.Routes | filterHref "/*" للحصول على كافة المسارات ذات المستوى الأعلى
.Routes | filterFilePath "**/posts/*.md" | sortDesc "title" | limit 10 للجمع بين بعض ما سبق

بعد ذلك، نود استخدام تخطيط مختلف للمقالات عن الصفحات الأخرى. يجب أن تحتوي المشاركات على صورة قبل النص، حيث نريد تحديد عنوان URL للصورة في البيانات التعريفية للمنشور. لذلك، نضيف قالبًا ثانيًا يسمى templates/post.html بالمحتوى التالي:

 <!doctype html >
< html >
  < head >
    < title > {{if .title}} {{.title}} | {{end}}Our first tinystatic website </ title >
  </ head >
  < body >
      < img src = {{.image}} />
      {{template "body" .}}
  </ body >
</ html >

نقوم بتغيير البيانات التعريفية للنشر إلى

 ---
template: post.html
title: First Post
image: https://some-image.url
---

من المفترض أن يمنحنا تجديد المخرجات صورة جميلة أعلى منشورنا. ومع ذلك، انتهى بنا الأمر أيضًا إلى وجود تعليمات برمجية HTML مكررة في قوالبنا مرة أخرى. لتحسين ذلك، قمنا بإنشاء مجلد آخر بجوار routes templates يسمى partials . داخل الأجزاء الجزئية، نقوم بإنشاء ملف يسمى head.html مع

{{define "head"}}
< head >
  < title > {{if .title}} {{.title}} | {{end}}Our first tinystatic website </ title >
</ head >
{{end}}

ونستبدل <head>...</head> في قوالبنا بـ {{template "head" .}} ، هكذا

 <!doctype html >
< html >
  {{template "head" .}}
  < body >
      {{template "body" .}}
  </ body >
</ html >

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

لاحظ أننا لا نحتاج فعليًا إلى هيكلة المشروع باستخدام أسماء المجلدات التي استخدمناها في هذا البرنامج التعليمي. أسماء هذه المجلدات هي مجرد أسماء افتراضية، ولكن يمكن تغييرها باستخدام وسيطات سطر الأوامر المعنية (راجع tinystatic -help للمزيد).

يوجد مثال كامل للمدونة هنا.

يوسع

معلومات إضافية