Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Middleman
Webdesign

Project: Build a Complete Website With Middleman 

by
Length:LongLanguages:
This post is part of a series called Building Static Websites with Middleman.
Working With Data, Assets, and Templates in Middleman
Project: Continuing Our Website Build With Middleman

Arabic (العربية/عربي) translation by miahood (you can also view the original English article)

في الجزء الثالث من هذه السلسلة ، سنحصل على أيدينا القذرة ونبدأ في إنشاء موقع لموقع podcast وهمي: "Matcha Nerdz". سنستخدم Middleman و Bourbon و Neat و Bitters. لنذهب! 

في هذا المنصب

  • Roadmap 
  • Basic Blog Setup 
  • LiveReload 
  • Organizing Posts 
  • جيثب الصفحات النشر 
  • أصول أذكى 
  • إعداد بوربون 
  • تطبيع و jQuery 

خريطة الطريق 

دعونا نبدأ مع القليل من المواقف حيث يجري هذا.  خلال المادتين التاليتين ، سأقوم ببناء موقع ثابت صغير لبودكاست وهمي يسمى "Matcha Nerdz" ، وهو بودكاست للأشخاص الذين يرغبون في الغوص في الشاي الأخضر المجفف.سيكون لديه الصفحات التالية: 

  •  صفحة لكل علامة
  •  صفحة تفاصيل لكل حلقة
  • صفحة فهرس لالبودكاست السابقة 

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

بالنسبة لجميع الأشياء المتعلقة بالتصميم ، كنت أعتمد بشدة على بوربون لفترة طويلة. أيضا ، أنا حقا حفر بناء جملة Sass المسندة - أنا أفضل ذلك إلى بناء الجملة .scss .  و .sassبناء الجملة الوحيد (ربما) بعض الشيء غير مألوف أود رمي في نوبي، لأنني أشعر أنه حقا يستحق الحصول على معرفة. 

إعداد المدونة الأساسية 

لنبدأ تطبيقًا جديدًا لموقعنا للبودكاست ، عن طريق الدخول إلى المحطة: 

ثم التغيير إلى دليل مشروعنا: 

الآن سوف نحصل على Git: 

بعد ذلك نضيف قالب المدونة إلى المزيج. هذا هو أساس جيد لموقعنا podcast. في وقت لاحق سوف نقوم بتعديل المواد لعرض podcast مسارات الصوت من SoundCloud.لكن في الوقت الحالي ، إنها مجرد مدونة. 

في Gemfile أضف: 

ثم عبر المحطة: 

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

انتقل إلى: 

خلق مقالات جديدة 

الآن يمكنك إنشاء مقالات جديدة عبر سطر الأوامر: 

هذا يخلق مقال جديد لخفض السعر تحت عنوان "/ المصدر". هذا ليس التخزين الأمثل  ولكن سنصل إلى هناك. أطلق النار على خادمك لرؤية مقالتك الأولى على سبيل المثال:

ترتيب الاشياء 

بعد ذلك نحتاج إلى بعض التدبير المنزلي للقيام به. إنشاء قالب المدونة تخطيطًا جديدًا تحت "source / layout.erb". نحتاج إلى حذف النموذج الأصلي في "المصدر / التخطيطات / التخطيط" وتحريك الرقم الجديد إلى هناك. لذلك ، عبر المحطة: 

نحتاج أيضًا إلى تحديث "layout" new "" الجديد مع الأشياء التي تم حذفها في ملف التخطيط. أضف التالي إلى العلامة <head> في "source / layouts / layout.erb": 

الأهم من ذلك ، يتأكد هذا من أن أصول JS والأسلوب الخاص بك متوفرة. 

اذهب 

LiveReload 

لجعل حياتنا أكثر ملاءمة ، سنقوم بإضافة LiveReload إلى هذا المزيج. نحن بحاجة إلى الاستيلاء على الأحجار الكريمة ثم تنشيطها في ملف "config.rb" لدينا. 

في Gemfile لدينا: 

في المحطة: 

ثم في config.rb: 

وأخيرًا لدينا أوامر Git: 

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

انتباه! كلمة تحذير: إذا كان لديك خادم محلي آخر يعمل ، فقد لا يلعب LiveReload الكرة.ستحتاج إلى قتل هذا الخادم الآخر في الوقت الحالي. 

تنظيم المشاركات 

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

ثم نضيف "/ المشاركات" كمصدر لمقالات المدونة. في config.rb: 

ثم أوامر Git لدينا: 

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

جيثب الصفحات النشر 

بالنسبة لي ، فإن دفع المواقع الثابتة إلى GitHub Pages هو حل مناسب لا أريد أن أضعك فيه عبر خدمة Heroku أو Amazon S3. دعونا نبقيه بسيط! 

في Gemfile: 

ثم في المحطة: 

نحتاج إلى إضافة كتلة نشر إلى "config.rb": 

كي تتمكن صفحات GitHub من العثور على أصول CSS و JS ، سنحتاج إلى تنشيط ما يلي في config.rb أيضًا: 

بعد ذلك ، أنشئ ريبوًا على GitHub ، وأضف البُعد البعيد وانتشر: 

Boom! Your site is live under “yourusername.github.io/projectname” and your assets should be sorted out. I love this process—it couldn’t be easier and more user friendly. Great job GitHub! 

 need to know at least three things to buy the right memory. Is it ECC or non-ECC? DDR1, DDR2 or DDR3? And its speed.

في الخطوة الأخيرة قبل الدخول في إعداد Bourbon ، أود التخلص من الأنماط التي تأتي مع Middleman ، وتحسين أصولنا للحصول على أداء أفضل في المتصفح - تصغير الأصول وسَلسَلة.  انتقل إلى "source / stylesheets / all.css" وحذف محتواه. فقط احتفظ بالخط الأول: 

أوامر Git: 

 بعد ذلك ، نريد تنشيط خيارين لتحسين الأداء في "config.rb":

ثم مرة أخرى ، أوامر Git: 

اسمحوا لي أن أشرح بسرعة ما فعلناه هنا: 

  • : غزيب

في الوقت الحالي ، تعتبر gzip طريقة الضغط الأكثر شيوعًا وفعالية. تعثر خوارزمية الضغط الخاصة به على سلاسل متماثلة داخل ملف وتقوم بضغطها.  بالنسبة إلى HTML ، المليء بالحيز الأبيض والعلامات المطابقة ، هذا فعال للغاية ويقلل عادة حجم استجابة HTTP بنسبة مذهلة تبلغ 70٪.  لا يؤدي تنشيط ذلك إلى ضغط شفرة HTML فقط ، بل إلى ملفات CSS و JS أيضًا. أثناء الإنشاء ، ينشئ Middleman ملفاتك كالمعتاد ، ولكنه يكررها أيضًا باستخدام إصدار ".gz".  عندما يتصل المتصفح بملفاتك ، يمكنه اختيار ما إذا كان يف ضل عرض ملفات مضغوطة بتنسيق gzip أو ملفات عادية. يتم دعم gzipping بشكل كبير بواسطة متصفحات الويب والمتصفحات.

  • minify_css 

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

  • :minify_javascript 

هذا هو نفس minify_css ، ولكنه أكثر تعقيدًا وأكثر تعقيدًا. 

  • asset_hash 

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

لقطات 

file
file
file

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

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

 "/build/index.html(.gz)":

في مجلد "الإنشاء" ، تتم الإشارة إلى ملفات JS و CSS باستخدام أسماء الأصول المجزأة تلقائيًا.  نتيجةً لعملية التجزئة هذه ، عندما تمر عبر صفحات مختلفة في الجلسة نفسها ، أو تعيد زيارة صفحة مرة أخرى لاحقًا ، فقد تم تخزين هذه الأصول مؤقتًا ولا يلزم طلبها مرة أخرى - حتى تغير شيئًا.  تقلل هذه العملية من عدد طلباتك بمقدار مذهل. أليس هذا رائع؟ كل ذلك مع سطر واحد من التعليمات البرمجية في "config.rb" وبعض السحر Sprockets . Booyakasha! 

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

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

دعونا نلقي نظرة على المرحلة الحالية لدينا. من المفترض أن تبدو صفحة الفهرس الخاصة بك غير ممهدة الآن: 

file

إعداد بوربون 

 بالنسبة لهذا المشروع ، أريد استخدام ثلاث جواهر من بوربون: 

  • بربون 
  • أنيق 
  • افضل 

دعنا نضيفها إلى Gemfile والحزمة الخاصة بنا: 

في المحطة: 

بوربون ونيت هي الآن جيدة للذهاب (تقريبا). يحتاج المولّد لتثبيت بعض الأشياء أولاً. نحتاج للتغيير في دليل صفحات الأنماط وتنشيط مولد يضع مجموعة من ملفات Bitters في مجلد "/ base". 

ألقِ نظرة على ما لدينا بعد هذا: 

 لقطة شاشة

file

Bitters هو شيء من خط الأساس للتصميمات الخاصة بك. فهو يمنحك تصميمًا عاقلًا لعناصر واجهة المستخدم مثل الأزرار ، والنوع ، والنماذج ، ورسائل الخطأ ، وما إلى ذلك.  كما تقوم Bitters بإعداد ملف "إعدادات الشبكة" لشبكة Neat الخاصة بك والتي يتعين علينا أيضًا إعدادها عن طريق إلغاء ربط السطر التالي في "source / stylesheets / base / _base.scss": 

لإكمال إعدادات Bourbon الخاصة بنا الآن ، أود إضافة المتغيرات التالية إلى إعدادات الشبكة لدينا. يضعون الأساس لقياس شبكتنا وتنشيط الشبكة البصرية التي  تساعدنا على تحسين تصميمنا بشكل أفضل.

في "/source/stylesheets/base/_grid-settings.scss": 

الخطوة الأخيرة لجعل هذا العمل هو إعادة تسمية "/stylesheets/all.css" إلى "/stylesheets.all.sass" واستيراد ملفات Bourbon الخاصة بنا. 

ملاحظة: بما أننا تحولنا إلى بناء جملة Sass ، سنحتاج أيضًا إلى قتل الفاصلة  المنقوطة في نهاية السطر charset .

 "all.css.scss":

نحن نستورد ملف Bitters الأساسي مباشرة بعد Bourbon لأننا نحتاج إلى الوصول إلى ملف إعدادات الشبكة Neat (الموجود في المجلد "/ base") قبل أن نستورد  Neat.

 انتقل إلى:

لنلقي نظرة! يمكنك رؤية الشبكة المرئية الحمراء ، وأيضاً بفضل Bitters ، تحسنت  الطباعة لدينا قليلاً بعد التخلف عن المتصفح. ألق نظرة على لقطة شاشة:

file

 تطبيع و jQuery

يأتي Middleman مع ملف Normalize الذي يتم استيراده إلى "all.css" افتراضيًا. هذا طلب واحد لأصول غير ضرورية يمكننا التخلص منه بسهولة ، لذا قم بإعادة تسمية "source / stylesheets / normalize.css" إلى "source / stylesheets / _normalize.css.scss" أولاً.  الآن لدينا جزئية نحتاج إلى استيرادها مباشرة في الجزء العلوي بعد charset في "المصدر / الأنماط / all.sass": 

شيء واحد لا ينبغي لنا أن نتغاضى عنه هو رابط أوراق الأنماط الخاصة بنا في تخطيطنا.نظرًا لأننا نستخدم أجزاء Sass الجزئية التي يتم استيرادها جميعًا إلى ورقة نهائية "عامة" نهائية ، فنحن لا نحتاج إلى رابط إلى normalize.css بعد الآن - يكفي وجود رابط للجميع. 

في "source / layouts / layout.erb": 

 ثم جيت:

أخيرًا ، قبل أن نأخذ استراحة ، يجب أن نضيف jQuery الذي سنحتاج إليه لاحقًا. في Gemfile: 

وفي المحطة: 

بما أنني أريد استخدام CoffeeScript لهذا المشروع ، نحتاج إلى إعادة تسمية "source / javascripts / all.js" إلى "source / javascripts / all.coffee". في هذا المجال ، نحتاج إلى jQuery لعنابر خط الأساس / خط أنابيب  الأصول.

في كل شيء.الكوفي: 

أوامر Git لدينا: 

ونشر 

بعد النشر ، افتح موقعك على صفحات GitHub لمعرفة ما إذا كان كل شيء يعمل كما  هو متوقع. عمل رائع!

 استراحة

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

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.