Ghost — это блог-платформа с открытым исходным кодом, созданная писателями для писателей. Разработанный, чтобы позволить вам сосредоточиться на вашем контенте, а не на том, какой плагин использовать, Ghost очень без излишеств. Вы не найдете навигационные панели или ползунки jQuery . То, что вы найдете, это простая в использовании система блогов, которая ставит ваш контент на первое место.
Ghost также использует Markdown для форматирования ваших сообщений, что еще больше упрощает обновление их блога для не-разработчиков. Многие люди хотят вести блог, но их пугает объем такого продукта, как WordPress . Если вы хотите сравнительно быстро начать работу с блогом, Ghost может быть для вас.
Простой дизайн также позволяет легко включать ваши любимые фреймворки и библиотеки. Хотите использовать компоненты Foundation или Bootstrap ? Как насчет jQuery или масонства ? Уменьшенный дизайн Ghost упрощает использование сторонних инструментов в ваших пользовательских темах.
Установка
Установка Ghost проста, если в вашей системе установлен Node.js. Даже если вы не знаете Node.js, у вас не должно возникнуть проблем при установке на выбранную платформу. Если у вас не установлен Node.js, вы можете получить его здесь . После установки Node перейдите к Ghost для загрузки.
Я хочу воспользоваться моментом, чтобы осветить проблемы, возникающие при использовании Node.js. Поскольку Node по сути является серверным JavaScript, вы ограничены в количестве хостов, на которых вы можете использовать Ghost. Вам понадобится виртуальный сервер для запуска Ghost со стандартным хостингом, дорогостоящее предложение, если вы просто хотите начать простой блог. Наиболее экономичными являются бесплатные веб-сервисы Amazon , Digital Ocean или Ghost Pro . Amazon бесплатен, но потребует настройки сервера. Digital Ocean стоит пять долларов в месяц и предлагает полный контроль, опять же, требующий настройки сервера. Опция Ghost Pro, десять долларов в месяц, полностью управляется командой Ghost, и ее проще всего запустить и запустить.
Первые шаги
Создайте папку с именем Ghost и распакуйте в нее zip-файл. Откройте командную строку Node и перейдите в каталог, куда вы распаковали файл. Запустите эту команду, чтобы установить Ghost:
npm install --production После установки перейдите в папку Ghost и откройте файл config.js и измените следующую строку на URL вашего сайта:
url: 'http://my-ghost-blog.com',
Если у вас нет доменного имени, вы можете использовать свой IP-адрес. Вы также можете изменить хост и порт, хотя это не обязательно для работы Ghost. После изменения этих настроек введите следующую команду:
npm start
Это будет работать, только если вы находитесь в папке Ghost. Ghost запустится и сообщит вам, какой домен / IP-адрес и порт он прослушивает (должно совпадать с тем, что вы config.js в config.js ).
Создание темы
Из коробки Ghost поставляется с основной темой Каспера. Каспер призван стать отправной точкой для ваших собственных тем. В конечном итоге вы захотите создать свои собственные темы. Единственное ограничение на то, что вы можете создать, — это способ, которым Ghost обрабатывает данные, составляющие ваши сообщения в блоге.
Перейдите в папку \content\themes папке Ghost. Там вы увидите папку для темы Каспер. Создать собственную тему так же просто, как создать папку с названием вашей темы. Внутри вашей папки темы создайте файл post.hbs и index.hbs, и у вас есть тема, хотя на данный момент она не очень полезна. Давайте глубже рассмотрим файлы, составляющие тему.
package.json
{ "name": "Theme", "version" : "1.0" }
Файл package.json в конечном итоге потребуется Ghost. Это в основном говорит Ghost имя и версию для вашей темы.
default.hbs
<!DOCTYPE html> <html> <head> {{! Document Settings }} <meta http-equiv="Content-type" content="text/html" charset="UTF-8" /> {{! Page Meta }} <title>{{meta_title}}</title> <meta name="description" content="{{meta_description}}" /> <meta name="HandheldFriendly" content="True" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> {{! Stylesheets }} <link rel="stylesheet" type="text/css" href="/assets/css/pig.css" /> <link href='http://fonts.googleapis.com/css?family=Changa+One' rel='stylesheet' type='text/css'> {{! Ghost outputs important style and meta data with this tag }} {{ghost_head}} </head> <body class="{{body_class}}"> <div class="pagewrapper"> {{>header}} <div> {{{body}}} </div> {{> footer}} {{! Ghost outputs important scripts and data with this tag }} {{ghost_foot}} </div> {{! Javascript files here }} </body> </html>
Несмотря на то, что вам нужен только файл post.hbs и index.hbs в папке, чтобы иметь тему, связующим звеном для этой темы является default.hbs. Этот файл является основным шаблоном для всех страниц, и все страницы будут загружены как часть default.hbs. .Hbs — это расширение файла, используемое с механизмом шаблонов Handlebars .
{{! Document Settings }}
Обычно теги в двойных фигурных скобках являются тегами Handlebars. В этом случае восклицательный знак делает это комментарием.
<title>{{meta_title}}</title>
Тег Handlebars в действии, на этот раз предоставляющий заголовок страницы.
{{ghost_head}},{{ghost_foot}}
Это специальный тег Ghost для вывода стилей, метаданных и сценариев.
<body class="{{body_class}}">
Это используется для вывода классов в зависимости от того, какой контент загружается.
{{>header}}, {{> footer}}
Используемый для вывода частичных файлов, Handlebars будет искать их в каталоге partials.
{{{body}}}
Самый важный тег на странице, это где контент будет загружен. Также обратите внимание на тройные фигурные скобки. Это говорит Handlebars не выходить из HTML и отображать как задумано.
index.hbs
{{!< default}} {{#foreach posts}} <article class="mbox"> <div class="i-title"> <h2><a href="{{{url}}}">{{title}}</a></h2> <time> {{date format='DD MMM YYYYY'}} </time> </div> <div class="list-post"> <div class="i-pic"> <p>{{content words="0"}}</p> </div> <div class="i-blurb"> <p>{{excerpt}} ... <a href="{{{url}}}">Read More</a></p> </div> </div> </article> {{/foreach}}
index.hbs — это первая страница, которая отображается при загрузке страницы Ghost, и это единственная страница, которая получает данные для всех сообщений. Это означает, что index.hbs — единственная страница, на которой вы можете иметь список сообщений, не взламывая вместе решение в JavaScript.
{{!< default}}
Вышеприведенное указывает на Handlebars, что эта страница будет загружена в default.hbs, в тег {{{body}}} из default.hbs.
{{#foreach posts}}, {{/foreach}}
Это вспомогательный блок Handlebars, который отображает список сообщений. Контент между тегами будет повторяться для каждого сообщения.
{{{url}}}, {{title}},{{date format='DD MMM YYYYY'}}
Handlebars теги для URL, заголовок и дату публикации.
{{content words = ”0 ″}}, {{отрывок}}
Это специальные теги для вывода небольшого фрагмента сообщения для его публикации. Обычно вы использовали бы только один из них, но я использовал оба в качестве хака, чтобы включить изображение в список сообщений. Тег «слова слова» будет выводить изображения, а выдержка — нет. Содержательные слова будут выводить любое количество слов, которое вы укажете. При выборе 0 выводится только картинка, прикрепленная к сообщению. Тег «выдержка» используется для добавления отдельной текстовой области к сообщению, что позволяет независимо стилизовать изображение и текст.
post.hbs
{{!< default}} {{#post}} <article class="art-box"> <div class="p-title"> <h1><a href="/">← Go back</a></h1> <h1>{{title}}</h1> </div> <div class="p-content"> {{{content}}} </div> {{#if author}} <div class="p-writer"> <p>Written by {{author}}</p> </div> {{/if}} </article> {{/post}}
Страница, которая отображается при нажатии на сообщение, эта страница имеет доступ только к содержимому одного сообщения.
{{#post}}, {{/post}}
Это говорит Handlebars, что страница имеет доступ к одному сообщению.
{{#if author}},{{/if}}
Это проверяет, есть ли у сообщения профиль автора; если так, то отображается с постом.
header.hbs
<div class="head-wrap" {{#if @blog.cover}}style="background: url({{@blog.cover}});"{{/if}}> {{#if @blog.logo}} <div class="h-logo"> <a class="h-logo-style" href="{{@blog.url}}"> <img src="{{@blog.logo}}" alt="{{@blog.title}}"> </a> </div> {{/if}} <div class="h-title"> <h1 class="h-title-style"> <a title="{{@blog.title}}" href='{{@blog.url}}'>{{{@blog.title}}} </a> </h1> </div> <div class="h-description"> <h2 class="h-description-style">{{@blog.description}}</h2> </div> </div>
Этот файл, найденный в каталоге partials, загружен из тега {{> header}} в default.hbs.
<div class="head-wrap" {{#if @blog.cover}}style="background: url({{@blog.cover}});"{{/if}}>
Этот тег проверяет, была ли загружена обложка блога, и устанавливает ли он ее в качестве фона.
{{#if @blog.logo}}, {{/if}}
Это используется для вывода логотипа блога, если он был загружен.
<img src="{{@blog.logo}}" alt="{{@blog.title}}"
Это отображает логотип блога.
<a title="{{@blog.title}}" href='{{@blog.url}}'>{{{@blog.title}}}
Отображает заголовок блога в виде ссылки.
<h2 class="h-description-style">{{@blog.description}}</h2>
Отображает описание блога.
footer.hbs
<div class="foot-box"> <div class="f-social"> <a href="http://www.facebook.com/sharer.php?u={{url absolute="true"}}" target="_blank"> <img src="/assets/images/facebook.png"> </a> <a href="https://plus.google.com/share?url={{url absolute="true"}}" target="_blank"> <img src="/assets/images/google_plus.png"> </a> <a href="http://twitter.com/share?text={{@blog.title}}&url={{url absolute="true"}}" target="_blank"> <img src="/assets/images/twitter.png"> </a> </div> <div class="f-cp"> <p>© {{date format='YYYY'}} <a href="{{@blog.url}}">{{@blog.title}}</a></p> </div> <div class="f-ghst"> <p>Runs on <a href="http://ghost.org" target="_blank">Ghost</a></p> </div> </div>
Этот файл, также находящийся в каталоге partials, загружается из тега {{> footer}} в default.hbs. Нет тегов Handlebars, которые вы еще не видели, этот колонтитул содержит значки социальных сетей для обмена.
Стилизация темы
Как я уже говорил, призрак очень скелетов. Первоначально я собирался использовать Bootstrap для стилизации страниц, но я решил использовать небольшую сеточную систему, созданную с помощью Sass.
@media screen and (max-width: 600px) { .mbox .list-post .i-pic { position: relative; min-height: 1px; padding-left: 0px; padding-right: 0px; float: left; width: 100%; background-color: #f2e7e7; border-bottom: 3px solid #090a0a; } .mbox .list-post .i-pic img { width: 100%; height: 100%; } } @media screen and (min-width: 601px) { .mbox .list-post .i-pic { position: relative; min-height: 1px; padding-left: 0px; padding-right: 0px; float: left; width: 33.33333%; left: 33.33333%; background-color: #f2e7e7; border-bottom: 3px solid #090a0a; } }
В этом небольшом фрагменте из моего файла .css я включил только две точки останова для этой статьи, но в реальном приложении мы добавили бы еще много. Как видите, все столбцы масштабируются до 100%, как только экран уменьшается до 600 пикселей.
Вывод
Я только поцарапал поверхность того, что можно сделать с Ghost. Если вы хотите завести блог и получить ресурсы, я бы посоветовал вам попробовать Ghost . Помните, что он построен для писателей писателями!