كيفية إنشاء موضوع للشبح

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

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

التصميم

السمة الافتراضية لـ Ghost ، "Casper" ، تبدو نظيفة جدًا. وضعوا المحتوى أولاً ، مع عرض الطباعة باستخدام لوحة ألوان حديثة ، بحيث يكون التركيز على الكتابة.

سنتبع هذا العميل ، لذا يجب أن تبدأ عملية التصميم الخاصة بنا من خلال فهم كيفية عمل Ghost وما هو متاح للمستخدم في النهاية الخلفية. هناك 4 عناصر رئيسية سنكون قادرين على الاستفادة منها من النهاية الخلفية أثناء تصميم الموضوع (بصرف النظر عن المقالات / المشاركات نفسها بوضوح) وهي:

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

الصفحة الرئيسية

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

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

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

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

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

صفحة المشاركة الفردية

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

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

التطور

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

هيكل الملف

للبدء ، ستحتاج إلى تثبيت Ghost محليًا على جهازك. هذا هو مستقيم نسبيا إلى الأمام ، وهناك الآن حتى المثبتات التلقائية (مثل هذا ). بمجرد أن يتم تثبيته وتشغيله ، ستحتاج إلى العثور على مجلد الشبح الذي يسمى "ghost-version.number" (في وقت كتابة هذا المقال "ghost-0.3.2"). بمجرد تحديد الموقع ، انتقل إلى "المحتوى / الموضوعات" ، وستحتاج إلى إنشاء مجلد جديد يحتوي على اسم السمة الخاصة بك. لذا في هذه الحالة سنطلق عليها "ورقة". داخل هذا المجلد ، سنقوم بإنشاء ملفين ضروريين لموضوع Ghost. هذا هو 'index.hbs' و 'post.hbs' ، إذا كنت قد قرأت وثائق Ghost (أو استخدمت Handlebars في مكان آخر) ، فسوف تتعرف على تنسيق الملف '.hbs' مما يعني أنه يمكننا استخدام ما يسمى بـ 'المقاود' : {{}} في نموذجنا.

بعد ذلك ، سنقوم بإضافة ملف آخر يسمى "default.hbs" وبنية مجلد لأصولنا وملفاتنا الجزئية. اتبع بنية الملف هذه:

في "assets / css / fonts" سنضع ملفات خطوط الرموز الخاصة بنا لتطبيق @ font-face. لهذا التصميم ، اخترت 6 رموز فقط: Facebook ، و Twitter ، و Google ، و RSS ، وعلامات ، والتقويم.

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

"index.hbs" و "post.hbs"

أما بالنسبة للتصاميم ، سأعطي محتويات الملف بالكامل أولاً ، ثم سنقوم بتفكيك الأجزاء المهمة. أولاً وقبل كل شيء ملف "index.hbs":

{{/if}} {{author.name}} {{#if author.website}} {{author.website}} {{/if}} {{author.bio}} {{/if}}{{/post}} {{> footer}} Once again we have the and handlebars. And our element. But this time the wrapping handlebar is Then we call in the (Not excerpt, because this is the individual page we want to show all of the content in the post.) Another difference here is the 'if' statement which is verifying if there's an author for the post. If there is we'll show a box with the author's image, name, URL and bio. All of these elements are editable in the back-end by the user, and will either show up or not depending on whether they exist. 'default.hbs' and the partial files Now we're going to look at the default.hbs file. So if you haven't made it yet, create a new file. In that file we're going to put all the default things that are needed for our page to display correctly in a browser, mainly the doctype and the , and tags. {{ghost_head}} {{{body}}} {{ghost_foot}}

{{#foreach posts}}

So to explain what's happening, the very first line is essential to the theme and tell us that this file will be inserted into the content area into the default file. The second line then inserts our header. Instead of putting it into this file we'll create a partial file later in the 'partials' directory. HBS files are just like HTML files in which you can include normal HTML elements. So the next element in the file is a which will hold all of our main content. Then inside of the repeater we'll put our article element that will contain the post. Inside each there will be a with the title and the meta data of the article (author and publish date). After that the actual excerpt. Then a that has our post's tags (in between an 'if' statement) and the share links, with some span's calling in our icon font. Finally we have some pagination, and we eventually call in the which works like the header. So as you can see it's relatively simple code. Obviously any class or ID names are optional for CSS styling. Next up comes the 'post.hbs' file. Which is mostly similar, but with a few additions and modifications. /">← Go Back {{title}} by {{author}} {{date format='DD MMM YYYY'}} {{content}} {{#if tags}} Tags: {{tags separator=" . "}} {{/if}} Share: {{#if author}} About the Author {{#if author.image}} {{/if}} {{author.name}} {{#if author.website}} {{author.website}} {{/if}} {{author.bio}} {{/if}}{{/post}} {{> footer}} Once again we have the and handlebars. And our element. But this time the wrapping handlebar is Then we call in the (Not excerpt, because this is the individual page we want to show all of the content in the post.) Another difference here is the 'if' statement which is verifying if there's an author for the post. If there is we'll show a box with the author's image, name, URL and bio. All of these elements are editable in the back-end by the user, and will either show up or not depending on whether they exist. 'default.hbs' and the partial files Now we're going to look at the default.hbs file. So if you haven't made it yet, create a new file. In that file we're going to put all the default things that are needed for our page to display correctly in a browser, mainly the doctype and the , and tags. {{ghost_head}} {{{body}}} {{ghost_foot}} So to explain what's happening, the very first line is essential to the theme and tell us that this file will be inserted into the content area into the default file. The second line then inserts our header. Instead of putting it into this file we'll create a partial file later in the 'partials' directory. HBS files are just like HTML files in which you can include normal HTML elements. So the next element in the file is a which will hold all of our main content. Then inside of the repeater we'll put our article element that will contain the post. Inside each there will be a with the title and the meta data of the article (author and publish date). After that the actual excerpt. Then a that has our post's tags (in between an 'if' statement) and the share links, with some span's calling in our icon font. Finally we have some pagination, and we eventually call in the which works like the header. So as you can see it's relatively simple code. Obviously any class or ID names are optional for CSS styling. Next up comes the 'post.hbs' file. Which is mostly similar, but with a few additions and modifications. /">← Go Back {{title}} by {{author}} {{date format='DD MMM YYYY'}} {{content}} {{#if tags}} Tags: {{tags separator=" . "}} {{/if}} Share: {{#if author}} About the Author {{#if author.image}} {{/if}} {{author.name}} {{#if author.website}} {{author.website}} {{/if}} {{author.bio}} {{/if}}{{/post}} {{> footer}} Once again we have the and handlebars. And our element. But this time the wrapping handlebar is Then we call in the (Not excerpt, because this is the individual page we want to show all of the content in the post.) Another difference here is the 'if' statement which is verifying if there's an author for the post. If there is we'll show a box with the author's image, name, URL and bio. All of these elements are editable in the back-end by the user, and will either show up or not depending on whether they exist. 'default.hbs' and the partial files Now we're going to look at the default.hbs file. So if you haven't made it yet, create a new file. In that file we're going to put all the default things that are needed for our page to display correctly in a browser, mainly the doctype and the , and tags. {{ghost_head}} {{{body}}} {{ghost_foot}}

{{> footer}}

{{!< default}}{{> header}}{{#post}}{{{url}}}">{{title}} by {{author}}  {{date format='DD MMM YYYY'}} {{content}} {{#if tags}}  Tags: {{tags separator=" . "}} {{/if}} Share:       {{#if author}} About the Author {{#if author.image}}  {{/if}} {{author.name}} {{#if author.website}}  {{author.website}} {{/if}} {{author.bio}} {{/if}}{{/post}} {{> footer}} Once again we have the and handlebars. And our element. But this time the wrapping handlebar is Then we call in the (Not excerpt, because this is the individual page we want to show all of the content in the post.) Another difference here is the 'if' statement which is verifying if there's an author for the post. If there is we'll show a box with the author's image, name, URL and bio. All of these elements are editable in the back-end by the user, and will either show up or not depending on whether they exist. 'default.hbs' and the partial files Now we're going to look at the default.hbs file. So if you haven't made it yet, create a new file. In that file we're going to put all the default things that are needed for our page to display correctly in a browser, mainly the doctype and the , and tags. {{ghost_head}} {{{body}}} {{ghost_foot}}  So to explain what's happening, the very first line is essential to the theme and tell us that this file will be inserted into the content area into the default file. The second line then inserts our header. Instead of putting it into this file we'll create a partial file later in the 'partials' directory. HBS files are just like HTML files in which you can include normal HTML elements. So the next element in the file is a which will hold all of our main content. Then inside of the repeater we'll put our article element that will contain the post. Inside each there will be a with the title and the meta data of the article (author and publish date). After that the actual excerpt. Then a that has our post's tags (in between an 'if' statement) and the share links, with some span's calling in our icon font. Finally we have some pagination, and we eventually call in the which works like the header. So as you can see it's relatively simple code. Obviously any class or ID names are optional for CSS styling. Next up comes the 'post.hbs' file. Which is mostly similar, but with a few additions and modifications. /">← Go Back {{title}} by {{author}}  {{date format='DD MMM YYYY'}} {{content}} {{#if tags}}  Tags: {{tags separator=" . "}} {{/if}} Share:       {{#if author}} About the Author {{#if author.image}}  {{/if}} {{author.name}} {{#if author.website}}  {{author.website}} {{/if}} {{author.bio}} {{/if}}{{/post}} {{> footer}} Once again we have the and handlebars. And our element. But this time the wrapping handlebar is Then we call in the (Not excerpt, because this is the individual page we want to show all of the content in the post.) Another difference here is the 'if' statement which is verifying if there's an author for the post. If there is we'll show a box with the author's image, name, URL and bio. All of these elements are editable in the back-end by the user, and will either show up or not depending on whether they exist. 'default.hbs' and the partial files Now we're going to look at the default.hbs file. So if you haven't made it yet, create a new file. In that file we're going to put all the default things that are needed for our page to display correctly in a browser, mainly the doctype and the , and tags. {{ghost_head}} {{{body}}} {{ghost_foot}}  
 So to explain what's happening, the very first line is essential to the theme and tell us that this file will be inserted into the content area into the default file. The second line then inserts our header. Instead of putting it into this file we'll create a partial file later in the 'partials' directory. HBS files are just like HTML files in which you can include normal HTML elements. So the next element in the file is a which will hold all of our main content. Then inside of the repeater we'll put our article element that will contain the post. Inside each there will be a with the title and the meta data of the article (author and publish date). After that the actual excerpt. Then a that has our post's tags (in between an 'if' statement) and the share links, with some span's calling in our icon font. Finally we have some pagination, and we eventually call in the which works like the header. So as you can see it's relatively simple code. Obviously any class or ID names are optional for CSS styling. Next up comes the 'post.hbs' file. Which is mostly similar, but with a few additions and modifications. /">← Go Back {{title}} by {{author}}  {{date format='DD MMM YYYY'}} {{content}} {{#if tags}}  Tags: {{tags separator=" . "}} {{/if}} Share:       {{#if author}} About the Author {{#if author.image}}  {{/if}} {{author.name}} {{#if author.website}}  {{author.website}} {{/if}} {{author.bio}} {{/if}}{{/post}} {{> footer}} Once again we have the and handlebars. And our element. But this time the wrapping handlebar is Then we call in the (Not excerpt, because this is the individual page we want to show all of the content in the post.) Another difference here is the 'if' statement which is verifying if there's an author for the post. If there is we'll show a box with the author's image, name, URL and bio. All of these elements are editable in the back-end by the user, and will either show up or not depending on whether they exist. 'default.hbs' and the partial files Now we're going to look at the default.hbs file. So if you haven't made it yet, create a new file. In that file we're going to put all the default things that are needed for our page to display correctly in a browser, mainly the doctype and the , and tags. {{ghost_head}} {{{body}}} {{ghost_foot}} 
 So to explain what's happening, the very first line is essential to the theme and tell us that this file will be inserted into the content area into the default file. The second line then inserts our header. Instead of putting it into this file we'll create a partial file later in the 'partials' directory. HBS files are just like HTML files in which you can include normal HTML elements. So the next element in the file is a which will hold all of our main content. Then inside of the repeater we'll put our article element that will contain the post. Inside each there will be a with the title and the meta data of the article (author and publish date). After that the actual excerpt. Then a that has our post's tags (in between an 'if' statement) and the share links, with some span's calling in our icon font. Finally we have some pagination, and we eventually call in the which works like the header. So as you can see it's relatively simple code. Obviously any class or ID names are optional for CSS styling. Next up comes the 'post.hbs' file. Which is mostly similar, but with a few additions and modifications. /">← Go Back {{title}} by {{author}}  {{date format='DD MMM YYYY'}} {{content}} {{#if tags}}  Tags: {{tags separator=" . "}} {{/if}} Share:       {{#if author}} About the Author {{#if author.image}}  {{/if}} {{author.name}} {{#if author.website}}  {{author.website}} {{/if}} {{author.bio}} {{/if}}{{/post}} {{> footer}} Once again we have the and handlebars. And our element. But this time the wrapping handlebar is Then we call in the (Not excerpt, because this is the individual page we want to show all of the content in the post.) Another difference here is the 'if' statement which is verifying if there's an author for the post. If there is we'll show a box with the author's image, name, URL and bio. All of these elements are editable in the back-end by the user, and will either show up or not depending on whether they exist. 'default.hbs' and the partial files Now we're going to look at the default.hbs file. So if you haven't made it yet, create a new file. In that file we're going to put all the default things that are needed for our page to display correctly in a browser, mainly the doctype and the , and tags. {{ghost_head}} {{{body}}} {{ghost_foot}}  
 So to explain what's happening, the very first line is essential to the theme and tell us that this file will be inserted into the content area into the default file. The second line then inserts our header. Instead of putting it into this file we'll create a partial file later in the 'partials' directory. HBS files are just like HTML files in which you can include normal HTML elements. So the next element in the file is a which will hold all of our main content. Then inside of the repeater we'll put our article element that will contain the post. Inside each there will be a with the title and the meta data of the article (author and publish date). After that the actual excerpt. Then a that has our post's tags (in between an 'if' statement) and the share links, with some span's calling in our icon font. Finally we have some pagination, and we eventually call in the which works like the header. So as you can see it's relatively simple code. Obviously any class or ID names are optional for CSS styling. Next up comes the 'post.hbs' file. Which is mostly similar, but with a few additions and modifications. /">← Go Back {{title}} by {{author}}  {{date format='DD MMM YYYY'}} {{content}} {{#if tags}}  Tags: {{tags separator=" . "}} {{/if}} Share:       {{#if author}} About the Author {{#if author.image}}  {{/if}} {{author.name}} {{#if author.website}}  {{author.website}} {{/if}} {{author.bio}} {{/if}}{{/post}} {{> footer}} Once again we have the and handlebars. And our element. But this time the wrapping handlebar is Then we call in the (Not excerpt, because this is the individual page we want to show all of the content in the post.) Another difference here is the 'if' statement which is verifying if there's an author for the post. If there is we'll show a box with the author's image, name, URL and bio. All of these elements are editable in the back-end by the user, and will either show up or not depending on whether they exist. 'default.hbs' and the partial files Now we're going to look at the default.hbs file. So if you haven't made it yet, create a new file. In that file we're going to put all the default things that are needed for our page to display correctly in a browser, mainly the doctype and the , and tags. {{ghost_head}} {{{body}}} {{ghost_foot}} 
 So to explain what's happening, the very first line is essential to the theme and tell us that this file will be inserted into the content area into the default file. The second line then inserts our header. Instead of putting it into this file we'll create a partial file later in the 'partials' directory. HBS files are just like HTML files in which you can include normal HTML elements. So the next element in the file is a which will hold all of our main content. Then inside of the repeater we'll put our article element that will contain the post. Inside each there will be a with the title and the meta data of the article (author and publish date). After that the actual excerpt. Then a that has our post's tags (in between an 'if' statement) and the share links, with some span's calling in our icon font. Finally we have some pagination, and we eventually call in the which works like the header. So as you can see it's relatively simple code. Obviously any class or ID names are optional for CSS styling. Next up comes the 'post.hbs' file. Which is mostly similar, but with a few additions and modifications. /">← Go Back {{title}} by {{author}}  {{date format='DD MMM YYYY'}} {{content}} {{#if tags}}  Tags: {{tags separator=" . "}} {{/if}} Share:       {{#if author}} About the Author {{#if author.image}}  {{/if}} {{author.name}} {{#if author.website}}  {{author.website}} {{/if}} {{author.bio}} {{/if}}{{/post}} {{> footer}} Once again we have the and handlebars. And our element. But this time the wrapping handlebar is Then we call in the (Not excerpt, because this is the individual page we want to show all of the content in the post.) Another difference here is the 'if' statement which is verifying if there's an author for the post. If there is we'll show a box with the author's image, name, URL and bio. All of these elements are editable in the back-end by the user, and will either show up or not depending on whether they exist. 'default.hbs' and the partial files Now we're going to look at the default.hbs file. So if you haven't made it yet, create a new file. In that file we're going to put all the default things that are needed for our page to display correctly in a browser, mainly the doctype and the , and tags. {{ghost_head}} {{{body}}} {{ghost_foot}}  So to explain what's happening, the very first line is essential to the theme and tell us that this file will be inserted into the content area into the default file. The second line then inserts our header. Instead of putting it into this file we'll create a partial file later in the 'partials' directory. HBS files are just like HTML files in which you can include normal HTML elements. So the next element in the file is a which will hold all of our main content. Then inside of the repeater we'll put our article element that will contain the post. Inside each there will be a with the title and the meta data of the article (author and publish date). After that the actual excerpt. Then a that has our post's tags (in between an 'if' statement) and the share links, with some span's calling in our icon font. Finally we have some pagination, and we eventually call in the which works like the header. So as you can see it's relatively simple code. Obviously any class or ID names are optional for CSS styling. Next up comes the 'post.hbs' file. Which is mostly similar, but with a few additions and modifications. /">← Go Back {{title}} by {{author}}  {{date format='DD MMM YYYY'}} {{content}} {{#if tags}}  Tags: {{tags separator=" . "}} {{/if}} Share:       {{#if author}} About the Author {{#if author.image}}  {{/if}} {{author.name}} {{#if author.website}}  {{author.website}} {{/if}} {{author.bio}} {{/if}}{{/post}} {{> footer}} Once again we have the and handlebars. And our element. But this time the wrapping handlebar is Then we call in the (Not excerpt, because this is the individual page we want to show all of the content in the post.) Another difference here is the 'if' statement which is verifying if there's an author for the post. If there is we'll show a box with the author's image, name, URL and bio. All of these elements are editable in the back-end by the user, and will either show up or not depending on whether they exist. 'default.hbs' and the partial files Now we're going to look at the default.hbs file. So if you haven't made it yet, create a new file. In that file we're going to put all the default things that are needed for our page to display correctly in a browser, mainly the doctype and the , and tags. {{ghost_head}} {{{body}}} {{ghost_foot}} 
 So to explain what's happening, the very first line is essential to the theme and tell us that this file will be inserted into the content area into the default file. The second line then inserts our header. Instead of putting it into this file we'll create a partial file later in the 'partials' directory. HBS files are just like HTML files in which you can include normal HTML elements. So the next element in the file is a which will hold all of our main content. Then inside of the repeater we'll put our article element that will contain the post. Inside each there will be a with the title and the meta data of the article (author and publish date). After that the actual excerpt. Then a that has our post's tags (in between an 'if' statement) and the share links, with some span's calling in our icon font. Finally we have some pagination, and we eventually call in the which works like the header. So as you can see it's relatively simple code. Obviously any class or ID names are optional for CSS styling. Next up comes the 'post.hbs' file. Which is mostly similar, but with a few additions and modifications. /">← Go Back {{title}} by {{author}}  {{date format='DD MMM YYYY'}} {{content}} {{#if tags}}  Tags: {{tags separator=" . "}} {{/if}} Share:       {{#if author}} About the Author {{#if author.image}} 
                        فيديو على شبكة الإنترنت