blogging platform Ghost blog platformu hayalet son zamanlarda betadan kamuya açıklanmaya geçmesiyle ilgili olarak çok fazla ilgi görüyor (eğer bir şekilde bunu daha önce duymamışsanız, buraya git ve okuyun).

Diğer platformlarda olduğu gibi, Ghost üçüncü parti 'temalarını' destekler. Bu yazıda basit, duyarlı ve içerik odaklı bir blog tasarlayacağız. Sonra Ghost için tamamen işlevsel bir temaya kodlayın.

Dizayn

Ghost, 'Casper' için varsayılan tema çok temiz bir görünüme sahip. Öncelikle içeriği koyup, tipografiyi modern bir renk paleti ile göstererek odaklanmayı yazıya döküyorlar.

Bu kurşuyu takip edeceğiz, bu yüzden tasarım sürecimizin Ghost'un nasıl çalıştığını ve arka uçtaki kullanıcı için neyin mevcut olduğunu anlayarak başlaması gerekiyor. Temayı tasarlarken arka uçtan başlayabileceğimiz 4 ana unsur vardır: (kendilerinden açıkça alıntılar).

• Blog başlığı
• Blog açıklaması
• Blog logosu
• Blog kapağı

Bunların hepsi Ghost'daki Ayarlar sekmesinde ayarlanabilir. Bu, tasarımı, sayfanın üst kısmında, başlık, logo ve açıklama ve arka plan olarak kapak resmini içeren bir çeşit afişin belirgin bir yönüne işaret ediyor.

Ana sayfa

Bu yüzden, sadece son 2 sayfayı, yani en son yayınların tümünü ve bireysel gönderi sayfasını gösteren ana sayfa olan tasarımları yapmak zorundayız. Tasarım nispeten basit olduğundan, önce bitmiş sayfayı göstereceğim, sonra ayrıntıları tekrar gözden geçireceğim. İşte en son mesajları gösteren “ev” sayfası:

Gördüğünüz gibi, renkli ve sade tasarımı ile birlikte. Detayları tekrar gözden geçirelim. Bu yüzden başlığa sahibiz, bu logoyu (burada bir hayalet için küçük bir kostümü hazırladım), blogun adını ve açıklamasını içerir.

Eğer kullanıcı bir kapak fotoğrafı seçerse, onu tam genişlikte bir arka plan görüntüsü olarak koyacağız. Değilse, yukarıdaki gibi vurgulanan renklerimiz olacak, kesintisiz mavi bir renk için gideceğiz.

Daha sonra, her gönderiyle ilgili tüm bilgileri (başlık, yayın tarihi, yazar, etiketler) ve alıntıyı göstereceğimiz bazı içerik kutularımız var.

Sonunda basit bir sayfalama bağlantısı ve altbilgi oluşturuyoruz. Makalenin paylaşım kutusunda, altbilgi ve site genelinde yapılan özel bir simge yazı tipi kullanıyoruz. Fontello ve yazı tipi Açık Sans Google Web Yazı Tiplerinden. Daha sonra nasıl uygulanacağımızı göreceğiz.

Bireysel posta sayfası

Bu tasarım ana sayfaya çok benzer. Daha önce alıntıyı eklediğimiz blok dışında, artık tam yükseklikte uzanacak ve tüm içeriği gösterecektir. Artı en altta bir yazar kutusu ekleyeceğiz.

Yani her şey aynı, hatta inline aşamasında gideceğimiz bazı satır içi metin stilleri dışında. Ve işte yeni yazar kutusu:

Gelişme

Tamam, şimdi tasarım gözden geçirildi (ve açıkça kendi tercihlerinize göre). Gelişmeye başlama zamanı. Her şeyden önce, daha önce yapmadıysanız, bir saniye çekin ve resmi Hayalet'i okuyun. tema oluşturma ile ilgili belgeler. İhtiyaçları, dosya yapıları vb. Konularda çok net ve özlüdürler. Temel olarak bu ders için, gelişimi iki aşamaya ayırabiliriz. İçerik ve stil. HTML ve CSS arasındaki temel bir ilişki gibi, temanın çalışmasını sağlarız, sonra tasarımımıza benzer hale getiririz.

Dosya yapısı

Başlamak için makinenizde yerel olarak yüklü olan Ghost'a sahip olmanız gerekir. Bu yapmak için nispeten düz ve şimdi bile otomatik yükleyiciler (gibi Bu ). Kurulduktan ve koştuktan sonra, 'ghost-version.number' olarak adlandırılan hayalet klasörünü bulmanız gerekir (yazma sırasında 'hayalet-0.3.2' olur). Bir kez bulunduğunuzda, 'içerik / temalar'a gidin, orada temanızın adını taşıyan yeni bir klasör oluşturmak isteyeceksiniz. Yani bu durumda biz 'çarşaf' diyeceğiz. Bu klasörün içinde, bir Ghost teması için gerekli olan 2 dosya yapacağız. Bu 'index.hbs' ve 'post.hbs', eğer Ghost belgelerini okursanız (veya başka bir yerde Handlebar'ları kullandıysanız) '.hbs' dosya biçimini tanıyacaksınız. Bu, 'handlebars' adını verdiğimiz anlamına gelir. : {{}} şablonumuzda.

Bundan sonra, varlıklar ve kısmi dosyalar için 'default.hbs' adında bir dosya ve bir klasör yapısı ekleyeceğiz. Bu dosya yapısını takip et:

'Asset / css / font'larda, font font dosyalarını @ font-face uygulamasına yerleştiririz. Bu tasarım için sadece 6 ikon seçtim: Facebook, Twitter, Google, RSS, Etiketler, Takvim.

Bunun dışında kalan dosyalar oldukça açıklayıcıdır. Şimdi kodun içine girelim. İlk olarak temadaki iki önemli dosyaya bakacağız.

“İndex.hbs” ve “post.hbs”

Tasarımlara gelince, önce dosyanın tüm içeriğini vereceğim, sonra önemli parçaları parçalayacağız. Öncelikle 'index.hbs' dosyası:

{{!< default}}{{> header}}
{{#foreach posts}}
{{yazar}}
  {{date format = 'DD MMM YYYY'}} 
  {{alıntı kelimeler = "100"}}… Daha fazla oku
  {{/ foreach}} {{# eğer sayfalama varsa}} 
  {{{Sayfalama}}} 
  {{/Eğer}} 
 {{> altbilgi}} 

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}}

{{!< default}}

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}}

{{> header}}

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}}

{{#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}}

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}}