the mvm.github.io
Initial Release of V2.0.0
الموقع التجريبي ينعكس الآن في IPFs!
بقلم أرماندو ماينيز بناءً على v1.0 من قبل أرتيم شيلودكو.
Adam Blog 2.0 هو موضوع Jekyll الذي تم تصميمه ليكون متوافقًا بنسبة 100 ٪ مع صفحات GitHub. إذا لم تكن على دراية بصفحات GitHub ، فيمكنك الاطلاع على وثائقها للحصول على مزيد من المعلومات. يعد دليل Jonathan McGlone على إنشاء موقع شخصي على Github واستضافة موقع شخصي على Github مورد جيد أيضًا.
Jekyll هو مولد موقع بسيط ومدرب للمدونة أو ثابت للمواقع الشخصية أو المشروع أو المؤسسة. في الأساس ، يأخذ Jekyll محتوى صفحتك مع ملفات القالب وينتج موقعًا كاملاً. لمزيد من المعلومات ، تفضل بزيارة موقع Jekyll الرسمي لوثائقهم. يقدم Codecademy أيضًا دورة رائعة حول كيفية نشر موقع Jekyll للمبتدئين الكامل.
إن جمال استضافة موقع الويب الخاص بك على Github هو أنه ليس عليك بالفعل تثبيت Jekyll على جهاز الكمبيوتر الخاص بك. يمكن القيام بكل شيء من خلال محرر رمز Github ، مع الحد الأدنى من المعرفة بكيفية استخدام Jekyll أو سطر الأوامر. كل ما عليك فعله هو إضافة مشاركاتك إلى دليل _posts وتحرير ملف _config.yml لتغيير إعدادات الموقع. مع بعض المعرفة البدائية بـ HTML و CSS ، يمكنك حتى تعديل الموقع حسب رغبتك. يمكن أن يتم كل هذا من خلال محرر رمز Github ، والذي يعمل مثل نظام إدارة المحتوى (CMS).
<tweet> </tweet> في علامة التبريد الخاصة بك.تحقق من السمة في العمل
الصفحة الرئيسية تبدو هكذا:
محدد الوضع المظلم في القائمة الرئيسية:
تبدو صفحة البريد مثل:
استجابة مخصصة 404:
يبدو الوضع المظلم هكذا:
للحصول على تثبيت محلي كامل لـ Adam Blog 2.0 ، قم بتنزيل نسختك الخاصة من Adam Blog 2.0 وقم بفك ضغطها في دليلها الخاص. من هناك ، افتح أداة سطر الأوامر المفضلة لديك ، وأدخل bundle install ، ثم أدخل jekyll serve . يجب أن يكون موقعك قيد التشغيل محليًا على http: // localhost: 4000.
إذا كنت جديدًا تمامًا على Jekyll ، أوصي بمراجعة الوثائق على https://jekyllrb.com/ أو يوجد برنامج تعليمي من مجلة Smashing.
إذا كنت تستضيف موقعك على صفحات GitHub ، فإن الالتزام بتغيير في ملف _config.yml (أو أي ملف آخر) سيفرض إعادة بناء موقعك مع Jekyll. يجب عرض أي تغييرات تم إجراؤها بعد فترة وجيزة. إذا كنت تستضيف موقعك محليًا ، فيجب عليك تشغيل jekyll serve مرة أخرى لإجراء التغييرات.
توجه إلى دليل _posts لعرض جميع المنشورات الموجودة حاليًا على الموقع الإلكتروني ، ولشاهدة أمثلة على شكل ملفات النشر عمومًا. يمكنك ببساطة تكرار نشر القالب والبدء في إضافة المحتوى الخاص بك.
مفترق هذا المستودع في حسابك الخاص.
يمكنك استضافة موقع jekyll الخاص بك مجانًا مع صفحات github. انقر هنا لمزيد من المعلومات.
عند التقاط ، إذا كنت تستخدم كوجهة ، فسيحمل مستودع اسم USERNAME.github.io فسيكون عنوان URL الخاص بك https://USERNAME.github.io/ ، وإلا سيتم https://USERNAME.github.io/REPONAME/ ) وسيتم نشر موقعك على فرع GH-Pages. ملاحظة: إذا كنت تستضيف عدة مواقع تحت اسم مستخدم Github نفسه ، فسيتعين عليك استخدام صفحات المشروع بدلاً من صفحات المستخدم - فقط قم بتغيير اسم المستودع إلى شيء آخر غير "http://username.github.io".
بالإضافة إلى github- username.github.io التي تُعرف عن عنوان URL للجذر ، يمكنك تقديم المواقع باستخدام فرع PAGES لـ GH لإنشاءات أخرى بحيث تكون متوفرة في github-sername.github.io/repo-name.
سيتطلب منك ذلك تعديل _config.yml مثل ذلك:
# Site settings
title : Repo Name
email : [email protected]
author : Your Name
description : " Repo description "
baseurl : " /repo-name "
url : " https://github-username.github.io "سيضمن هذا أن يتم إنشاء المسار النسبي الصحيح لأصولك ومشاركاتك.
تعديل ملف _config.yml ، الموجود في دليل الجذر ، مع بياناتك.
# Site settings
title : The Title for Your Website
description : ' A description of your blog '
permalink : ' :title:output_ext ' # how the permalinks will behave
baseurl : " / " # the subpath of your site, e.g. /blog
url : " " # the base hostname & protocol for your site, e.g. http://example.com
logo : " " # the logo for your site
logo-icon : " " # a smaller logo, typically squared
logo-icon-SEO : " " # must be a non SVG file, could be the same as the logo-icon
# Night/Dark mode default mode is "auto", "auto" is for auto nightshift (19:00 - 07:00), "manual" is for manual toggle, and "on/off" is for default on/off. Whatever the user's choice is, it will supersede the default setting of the site and be kept during the visit (session). Only the dark mode setting is "manual", it will be always kept on every visit (i.e. no matter the browser is closed or not)
night_mode : " auto "
logo-dark : " /assets/img/branding/MVM-logo-full-dark.svg " # if you want to display a different logo when in dark mode
highlight_theme : syntax-base16.monokai.dark # select a dark theme for the code highlighter if needed
# Author settings
author : Your Name # add your name
author-pic : ' ' # a picture of you
about-author : ' ' # a brief description of you
# Contact links
email : [email protected] # Add your Email address
phone : # Add your Phone number
website : # Add your website
linkedin : # Add your Linkedin handle
github : # Add your Github handle
twitter : # Add your Twitter handle
bandcamp : # Add your Bandcamp username
# Tracker
analytics : # Google Analytics tag ID
fbadmin : # Facebook ID admin
# Paginate
paginate : 6 # number of items to show in the main page
paginate_path : ' page:num '
words_per_minute : 200 # default words per minute to be considered when calculating the read time of the blog posts لتكوين النشرة الإخبارية ، يرجى إنشاء حساب في https://mailchimp.com ، قم بإعداد نموذج تسجيل ويب ولصق الرابط من نموذج الاشتراك في config.yml :
# Newsletter
mailchimp : " https://github.us1.list-manage.com/subscribe/post?u=8ece198b3eb260e6838461a60&id=397d90b5f4 " لتكوين Disqus ، قم بإعداد موقع Disqus بنفس اسم موقعك. ثم ، في _config.yml ، قم بتحرير قيمة disqus_identifier لتمكينها.
# Disqus
discus_identifier : # Add your discus identifier
comments_curtain : yes # leave empty to show the disqus embed directlyمزيد من المعلومات حول كيفية إعداد Disqus.
تخصيص ألوان الموقع. modify /assets/css/main.css main.css على النحو التالي:
html {
--shadow : rgba ( 32 , 30 , 30 , .3 );
--accent : # DB504A ; /* accent */
--accent-dark : # 4e3e51 ; /* accent 2 (dark) */
--main : # 326273 ; /* main color */
--main-dim : # 879dab ; /* dimmed version of main color */
--text : # 201E1E ;
--grey1 : # 5F5E58 ;
--grey2 : # 8D897C ;
--grey3 : # B4B3A7 ;
--grey4 : # DAD7D2 ;
--grey5 : # F0EFED ;
--background : # ffffff ;
}
html [ data-theme = "dark" ] {
--accent : # d14c47 ; /* accent */
--accent-dark : # CD8A7A ; /* accent 2 (dark) */
--main : # 4C6567 ; /* main color */
--main-dim : # 273335 ; /* dimmed version of main color */
--text : # B4B3A7 ;
--grey1 : # 8D897C ;
--grey2 : # 827F73 ;
--grey3 : # 76746A ;
--grey4 : # 66645D ;
--grey5 : # 4A4945 ;
--background : # 201E1E ;
--shadow : rgba ( 180 , 179 , 167 , .3 );
} تخصيص خطوط الموقع. modify /assets/css/main.css main.css على النحو التالي:
...
--font1 : 'Lora' , charter , Georgia , Cambria , 'Times New Roman' , Times , serif ; /* body text */
- - font2 : 'Source Sans Pro' , 'Helvetica Neue' , Helvetica , Arial , sans-serif ; /* headers and titles */
- - font1 - light : 400;
- - font1 - regular : 400;
- - font1 - bold : 600;
- - font2 - light : 200;
- - font2 - regular : 400;
- - font2 - bold : 700;
... إذا قمت بتغيير الخطوط ، فأنت بحاجة أيضًا إلى تعديل /_includes/head.html على النحو التالي: Uncomment وتغيير السطر التالي بخطوطك الجديدة وأوزان الخط:
< link href =" https://fonts.googleapis.com/css?family=Lora:400,600|Source+Sans+Pro:200,400,700 " rel =" stylesheet " > احذف كل شيء داخل <style></style> قبل السطر أعلاه:
< style >
/* latin */
@font-face {
font-family: 'Lora';
...
</ style > ستجد مثالًا على منشورات في /_posts/ الدليل. المضي قدمًا وقم بتحرير أي منشور وإعادة بناء الموقع لرؤية التغييرات الخاصة بك ، للحصول على صفحات GitHub ، يحدث هذا تلقائيًا مع كل الالتزام. يمكنك إعادة بناء الموقع بعدة طرق مختلفة ، ولكن الطريقة الأكثر شيوعًا هي تشغيل jekyll serve ، والتي تطلق خادم الويب وتجهيز موقعك تلقائيًا عند تحديث ملف.
لإضافة منشورات جديدة ، ما عليك سوى إضافة ملف في دليل _posts يتبع اتفاقية YYYY-MM-DD-name-of-post.md وتتضمن المادة الأمامية اللازمة. ألقِ نظرة على أي منشور عينة للحصول على فكرة عن كيفية عمله. إذا كان لديك موقع ويب تم تصميمه بالفعل مع Jekyll ، فما عليك سوى النسخ على مشاركاتك للترحيل إلى Adam Blog 2.0.
خيارات المادة الأمامية لكل منشور هي:
---
layout : post # ensure this one stays like this
read_time : true # calculate and show read time based on number of words
show_date : true # show the date of the post
title : Your Blog Post Title
date : XXXX-XX-XX XX:XX:XX XXXX
description : " The description of your blog post "
img : # the path for the hero image, from the image folder (if the image is directly on the image folder, just the filename is needed)
tags : [tags, of, your, post]
author : Your Name
github : username/reponame/ # set this to show a github button on the post
toc : yes # leave empty or erase for no table of contents
---قم بتحرير مدونتك باستخدام Markdown. إليك دليل جيد حول كيفية استخدامه.
حذف الصور داخل /assets/img/posts/ وتحميل الصور الخاصة بك لمشاركاتك.
تأكد من تشغيل صفحات github في إعدادات المستودع ، والإشارة إلى الفرع الرئيسي أو الرئيسي (حيث قمت باستنساخ هذا الريبو).
إذا كنت على دراية بـ Jekyll ، فلا ينبغي أن يكون من الصعب للغاية التنقل في هيكل دليل Adam Blog 2.0. فيما يلي بعض النقاط البارزة في الاختلافات التي قد تلاحظها بين بنية الدليل الافتراضي. يمكن العثور على مزيد من المعلومات حول ما تفعله هذه المجلدات والملفات في موقع وثائق Jekyll.
Adam Blog 2.0/
├── _includes # Theme includes
├── _layouts # Theme layouts (see below for details)
├── _posts # Where all your posts will go
├── assets # Style sheets and images are found here
| ├── css # Style sheets go here
| | └── _sass # Folder containing SCSS files
| | └── main.css # Main SCSS file
| | └── highlighter # Style sheet for code syntax highlighting
| └── img #
| └── posts # Images go here
├── _pages # Website pages (that are not posts)
├── _config.yml # Site settings
├── Gemfile # Ruby Gemfile for managing Jekyll plugins
├── index.html # Home page
├── LICENSE.md # License for this theme
├── README.md # Includes all of the documentation for this theme
├── feed.xml # Generates atom file which Jekyll points to
├── 404.html # custom and responsive 404 page
├── all-posts.json # database of all posts used for infinite scroll
├── ipfs-404.html # 404 page for IPFS
├── posts-by-tag.json # database of posts by tag
├── robots.txt # SEO crawlers exclusion file
├── search.json # database of posts used for search
└── sitemap.xml # automatically generated sitemap for search engines للبدء تمامًا من نقطة الصفر ، ما عليك سوى حذف جميع الملفات في مجلدات _posts ، assets/img/posts ، وإضافة المحتوى الخاص بك. يمكن تحرير كل شيء في ملف _config.yml ليناسب احتياجاتك. قم أيضًا بتغيير ملف favicon.ico إلى Favicon الخاص بك.
إذا كان لديك اقتباس قابل للتغريد في منشور المدونة الخاص بك وترغب في عرضه كنقرة لتغريد ، فيجب عليك فقط استخدام علامات <tweet></tweet> ، فسيتم تحويل كل شيء بينهما بنقر على مربع تغرد.
من الممكن تتبع إحصائيات موقعك من خلال Google Analytics. على غرار Disqus ، سيتعين عليك إنشاء حساب لـ Google Analytics ، وإدخال معرف Google الصحيح لموقعك ضمن google-ID في ملف _config.yml . مزيد من المعلومات حول كيفية إعداد Google Analytics.
يتم دعم ATOM افتراضيًا من خلال Jekyll-Feed. باستخدام Jekyll-Feed ، يمكنك تعيين متغيرات التكوين مثل "العنوان" و "الوصف" و "المؤلف" ، في ملف _config.yml .
سيتم بث ملف تغذية الذرة على https://your.site/feed.xml مثال.
جميع أيقونات وسائل التواصل الاجتماعي من باب المجاملة Font Awesome. يمكنك تغيير أي الرموز التي تظهر ، وكذلك الحساب الذي يرتبطون به ، في ملف _config.yml .
يخرج Adam Blog 2.0 من المربع مع Mathjax ، والذي يتيح لك عرض المعادلات الرياضية في مشاركاتك من خلال استخدام LaTex. فقط أضف Mathjax: yes في مقدمة رسالتك.
< p style = " text-align : center " >
( theta _ {t+1} = theta _ {t} - dfrac{eta}{sqrt{hat{v} _ t} + epsilon} hat{m} _ t ) .
</ p >
يوفر مدونة ADAM 2.0 تسليط الضوء على بناء الجملة من خلال كتل التعليمات البرمجية. يتيح لك تسليط الضوء على بناء الجملة عرض التعليمات البرمجية المصدر بألوان وخطوط مختلفة اعتمادًا على لغة البرمجة التي يتم عرضها. يمكنك العثور على القائمة الكاملة لغات البرمجة المدعومة هنا. خيار آخر هو تضمين الكود الخاص بك من خلال gist.
يمكنك اختيار سمة اللون لإبراز بناء الجملة في ملف _config.yml :
highlight_theme : syntax-base16.monokai.dark # select a theme for the code highlighterانظر دليل Highlighter للرجوع إليه على الخيارات.
يقدم Jekyll دعمًا لـ GitHub Flavored Markdown ، والذي يتيح لك تنسيق مشاركاتك باستخدام بناء جملة Markdown.
تحقق من مستندات Jekyll لمزيد من المعلومات حول كيفية الحصول على أقصى استفادة من Jekyll. قم بتقديم جميع طلبات Bugs/Meature في Github Repo من Jekyll. إذا كانت لديك أسئلة ، فيمكنك طرحها على حديث Jekyll.
إذا كنت ترغب في تقديم طلب ميزة ، أو الإبلاغ عن خطأ أو خطأ مطبعي في الوثائق ، فيرجى إرسال مشكلة github. إذا كنت ترغب في تقديم مساهمة ، فلا تتردد في تقديم طلب سحب - كمكافأة ، سأشد جميع المساهمين أدناه! إذا كان هذا هو طلب السحب الأول ، فقد يكون من المفيد قراءة تدفق جيثب أولاً.
تم تصميم Adam Blog 2.0 كقاعدة للمستخدمين لتخصيص احتياجاتهم الفريدة وتناسبها. يرجى وضع ذلك في الاعتبار عند طلب الميزات و/أو تقديم طلبات السحب. بعض الأمثلة على التغييرات التي أحب أن أراه هي أشياء تجعل الموقع أسهل في استخدامه ، أو طرق أفضل للقيام بالأشياء. يرجى تجنب التغييرات التي لا تفيد غالبية المستخدمين.
هذا الموضوع مجاني ومفتوح المصدر. يمكنك استخدامه كما تريد ، حيث يتم توزيعه بموجب ترخيص معهد ماساتشوستس للتكنولوجيا. إذا كنت تواجه أي مشاكل ، أو أي أسئلة أو اقتراحات ، فلا تتردد في تقديم مشكلة github.
