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

Создание и оформление блога, работающего на Evernote с Postach.io

by
Difficulty:IntermediateLength:LongLanguages:

Russian (Pусский) translation by Katharina Nevolina (you can also view the original English article)

Final product image
What You'll Be Creating

Postach.io система блогов с отличием. Она имеет одну особенность, которая делает ее особенно интересной: вместо админ-панели вы просто создаете ваши темы в Evernote.

Вы можете использовать любое приложение Evernote, это значит, что блоги  Postach.io являются мульти-платформой, где есть автоматическое резервное копирование (если вы уже являетесь пользователем Evernote), это очень привычно.

В этом уроке мы будем изучать как настроить свой собственный Postach.io/Evernote ведущий блог и способы создания темы для него.

1. Настройка блога

С самого начала, если у вас еще нет аккаунта Evernote, вам нужно создать его. Как только вы создали аккаунт в Evernote, перейдите к Postachi.io и нажмите кнопку "LOG IN", используя кнопку Evernote.

Вы перейдете на страницу, где сможете авторизовать Postach.io и получить доступ к вашему аккаунту Evernote. Нажмите зеленую кнопку «Авторизоваться» для продолжения.

На следующем экране введите ваше имя, адрес электронной почты, название и субдомен, который вы выбрали для вашего сайта, а затем нажмите на желтую кнопку "Создать сайт".

Через несколько секунд установка вашего блога будет завершена, и вы увидите экран со ссылкой, по которой вы можете перейти, чтобы перейти на ваш новый сайт:

По умолчанию ваш новый блог будет выглядеть следующим образом:

Если вы посмотрите в области блокнота Evernote, вы увидите новую запись с именем, соответствующим названию вашего сайта. Вы запишите все содержимое вашего блога в этот блокнот.

Tadaaa!

Создание тем

Вы можете создавать темы для вашего блога с помощью какого-либо приложения Evernote, которые для вас наиболее удобны,это значит, что вы сможете редактировать на вашем рабочем столе, в мобильном устройстве или с помощью приложения на основе браузера. Postach.io рекомендует использовать приложение браузера для доступа к другим инструментам. Однако, основываясь на своем опыте, могу сказать, что между браузером и настольной версией Mac, нет каких-либо крупных различий, так что выбор зависит от личных предпочтений.

Добавить блог через Postach.io до смешного просто.  Просто создайте новую заметку в записной книжке, отведенной для вашего блога, напишите вашу тему, а затем добавьте ее в «публикации».

Нажмите кнопку "Синхронизировать" в Evernote и тема будет отправлена в ваш блог.

И наоборот, если вы хотите удалить тему просто удалите ее из "опубликованных"  и синхронизируйте снова.

Добавление изображений

Добавлять изображения тоже очень просто. Перетащите изображение с вашего компьютера в записку, и оно автоматически  будет загружено в облако и добавлено к вашей теме. Кроме того,вы можете нажать на значок маленькой скрепки, чтобы перейти непосредственно к файлу для вставки.

Форматирование тем

Существует два способа форматирования содержания ваших статей на Postach.io. Вы можете использовать  инструменты для форматирования в Evernote по умолчанию:

.. или, вы можете активировать Markdown через вкладку «Детали» в панели управления вашего Postach.io:

Примечание: Если вы новичок в Markdown взгляните на Markdown: The Ins and Outs

С помощью любой из них вы можете разместить встроенный HTML, чтобы получить больше контроля над вашими темами, однако существуют некоторые явные различия между этими двумя подходами, которые помогут определить, какой вы предпочитаете.

Преимущества разметки:

Разметка гораздо лучше

С включенной разметкой ваши статьи будет иметь правильное расположение тегов H и p и др. Используя форматирование по умолчанию вы можете обнаружить, что каждая линия заключена  в тег  div, все переносы, нарушается переносы строк, созданные тегом <br/> (это может привести к хаосу в пробелах),  а также можем обнаружить устаревшие теги, такие как <b> вместо нужного <strong>.

Простая вставка тегов H

С включенной разметкой вы можете легко вставить заголовки H различного уровня путем размещения знаков #. Однако только в форматировании по умолчанию есть возможность вставить увеличение размера шрифта, а не заголовки. В форматировании по умолчанию вы можете добавить теги заголовка H в виде HTML, но скорее всего они будут заключены в теги div.

Преимущества форматирования по умолчанию :

Правка статьи с WYSIWYG

В форматировании по умолчанию, редактируя статью, вы увидите набор с начертанием, выравниванием и так далее. Однако используя разметку, в Evernote  пока еще нет возможности нативного или кроссплатформенного  предпросмотра, и вы не сможете увидеть, как ваши статьи будут выглядеть до тех пор, пока они не будут опубликованы.

Простой текст и выравнивание изображения

В форматировании по умолчанию вы можете выбрать изображение или текст и выровнять их по левому, и правому краю или  по центру. В разметке нет нативной способности выравнивания, поэтому она требует добавления встроенного HTML.

Одно из двух

Следует иметь в виду, что с активированной разметкой в Evernote форматирование по умолчанию работать не будет, и наоборот, так что на данный момент вы должны выбрать, какие преимущества вам больше нужны.

Лично я рекомендую использовать разметку, потому что в противном случае вы можете обнаружить, что созданные теги div и br  не позволят вам правильно разделить параграфы статьи.

Совет: Если вы обнаружили, что у вас есть разрыв строк там, где должен завершаться параграф, выделите весь текст, затем дважды нажмите кнопку упорядочить в виде списка. При добавлении и удалении списка к содержанию будет применено форматирование.

Встраивание средства массовой информации

Postach.IO предоставляет несколько встроенных кодов позволяют вам вставить такие компоненты, как видео YouTube, фрагменты кода Gist, Твиты, треки на Soundcloud  и так далее. На первый взгляд это может выглядеть как много различных встроенных кодов, которые можно использовать, но формат точно такой же для каждого из них, что помогает их легче запомнить:

[<service name> url="<item url>"]

Видео YouTube добавляется таким образом:

[youtube url="http://www.youtube.com/watch?v=07ds8iv1XPM"] 

...добавление фрагмента кода Gist:

[gist url="https://gist.github.com/postachio/9059890"] 

.. и так далее. Смотрите полный список встроенных кодов в Postach.io docs.

2. Создание пользовательского оформления.

Есть несколько готовых тем, которые вы можете использовать в вашем оформлении, на вкладке Theme Browser в вашей панели управления на Postach.io. Так как, вопрос оформления является довольно простым, мы пропустим процесс создания простой темы оформления для блога на Postach.io.

Мы будем кодить этот прекрасный дизайн от Tomas Laurinavicius:

Как работает оформление в Postach.io 

Вещь, которую я люблю больше всего в оформлении на Postach.io это то, что в нем полностью содержится внутри одного шаблона файла . Условные проверки выполняются для определения, какой тип контента должен отображаться для посетителей, и согласно этим проверкам записывается соответствующий код. Вскоре вы сможете увидеть это в действии.

Это делается для того, чтобы система была очень четкой и аккуратной. Весь файл шаблона, который вы будете создавать, это всего лишь 170 линий.

Язык шаблонов, используемый в оформлении на Postach.io,  — это Jinja2, который позволяет размещать в шаблон теги, а также добавлять некоторую программную логику.

Пользовательское оформление добавляется на Postach.io, путем прямого копирования и вставления пользовательского кода. Здесь нет актуальной загрузки оформления в zip, как вы могли найти на других платформах. Вместо этого вам нужно перейти на вкладку «Редактор исходного текста» в вашей панели управления и вставить свой код прямо здесь:

Так как мы предполагаем, что вам будет необходимо вставить HTML-код в тему оформления, я рекомендую создать файл с именем "theme.html", работайте в этом файле, затем копируйте и вставляйте из него, после окончания каждого этапа.

Прежде чем вы начать

Для целей этого урока, перейдите в панель управления на Postach.io и на вкладке Подробности установите Название вашего сайта в "Журнал о творческом мышлении и дизайне" и Описание вашего сайта  в «Вещи, которые вы обычно не читаете ».

Мы делаем это, поскольку эти поля будут использоваться для заполнения области заголовка сайта с текстовым дисплеем, как  в нашем блоге дизайна PSD.

Тема CSS, изображения и хостинг Dropbox 

Недостаток прямого подхода к редактированию кода темы на Postach.io в том, что нет способа загрузить отдельный CSS-файл вместе с вашей темой. Это означает, что у вас есть два варианта:

  1. Напишите все ваши CSS непосредственно в главной части
  2. Разместите ваши таблицы стилей в другом месте и свяжите их.

Поэтому я всегда предпочитаю использовать препроцессор-CSS и следовательно, необходимо иметь отдельный файл для компиляции, я рекомендую выбрать второй вариант. Таким образом нам понадобится где-то разместить нашу таблицу стилей. В этом случае мы будем использовать Dropbox. Мы также будем использовать Dropbox для размещения изображения логотипа темы.

С помощью Dropbox очень легко разместить статические активы. Просто создайте папку для проекта внутри вашей локальной папки Dropbox, тогда, когда вы будете сохранять ваши изменения, они будут автоматически загружены в ваш аккаунт.

Чтобы получить URL-адрес для любой css или изображения активов, нажмите правую кнопку мыши в вашей папке Dropbox и выберите "Поделиться ссылкой Dropbox ":

Это добавит публично видимые ссылки вашего файла в кэш.

Важно: Для преобразования URL-адреса в формат, который может использоваться в коде вашего сайта, вставьте ссылку и затем измените www на dl.

Настройка папки проекта

Чтобы запустить процесс, создайте папку проекта в папке Dropbox, а затем внутри нее создайте файл с именем theme.html (в соответствии с указанной выше информацией).

Далее мы собираемся написать наши стили в LESS, создайте две вложенные папки внутри папки проекта, одну назовите css, другую - LESS. В папке LESS создайте файл с именем style.less. Все стили для вашего сайта будут записаны в этот файл и затем скомпилированы в css > style.css.

Мы будем использовать бесплатное приложение Prepros  для компиляции. Я рассмотрел последующие шаги, которые нужно будет предпринять в последнем уроке, так что пожалуйста, зайдите и следуйте инструкциям в разделе под названием Setup Autocompiling with Prepros  и Incorporate LESSHat and Normalize.less.

После выполнения этих двух секций у вас должна появиться структура файла & папок для вашего проекта, который выглядит следующим образом:

Основная оболочка HTML и заголовок

Мы начнем, вставив установку базового  HTML5, также как head. Добавьте следующее в файл theme.html и не забудьте скопировать и вставить его в панели управления "Source Editor" на Postach.io, когда вы закончите:

Вот краткое описание того, что вы видите выше:

  • Вывод title в зависимости от того, где находится пользователь на сайте.
  • {{Header_meta}} тег шаблона для вывода на Postach.io мета-теги по умолчанию.
  • Мета-теги для обеспечения правильного режима на мобильных устройствах.
  • Загрузка шрифтов Google, используемых в проекте; Bentham и PT Serif.
  • Загрузка стилей FontAwesome (для шрифта иконок) от Postach.io в статические ресурсы.
  • Загрузка наших пользовательских стилей от Dropbox.
    Важно: Вам нужно будет создать свой собственный шаблон URL с помощью метода, описанного выше.
  • Интеграция Google Analytics, с данными из панели управления на Postach.io.

Теперь мы добавим базовый код в раздел тела. Добавьте следующее между тегами открытия и закрытия тела:

Давайте разорвем это. Во-первых, мы используем синтаксис Jinja2 для выполнения условий проверки того, находится ли посетитель на экране входа в Postach.io или нет. Если они есть, им будет показана форма входа в систему, и, если нет, мы приступаем к блогу на экране.

Область, которая будет содержать наш код отображения блога, инкапсулируется комментариями <!--Start blog display --> и <!--End blog display -->. Мы начинаем с div с учетом класса wrapper, который мы будем использовать для управления шириной нашего макета и затем мы размещаем код заголовка header нашего сайта.

В элементе в открывающего тега header , мы проверяем, добавил ли пользователь обложку сайта с кодом {% if site.cover_photo %}... {% endif %}. Если есть изображение обложки, мы используем встроенные стили, чтобы поместить его в качестве фонового изображения, используя шаблон тега {{site.cover_photo}} для вывода его URL-адреса.

В элементе header мы размещаем логотип. Это делается путем первого экспорта изображения логотипа из дизайна блога PSD как прозрачный PNG. Затем мы должны поместить изображение в папке проекта внутри нашей локальной папки Dropbox и использовать общедоступный URL-адрес в коде.

Опять же вам следует добавить URL-адрес, вы получите его из папки Dropbox, используя метод, описанный ранее.

Обратите внимание на поле "Logo" в панели управления на Postach.io : есть пространство в панели управления, чтобы загрузить изображение логотипа, однако он имеет ограничение, он должен быть по меньшей мере 256px на 256px. Это связано с тем, что он также удваивается как изображение аватара вашего блога, учитывая, что для размещения этого изображения вы используете тег шаблона {{site.avatar}}. Кроме того, это поле не может обработать прозрачные изображения как белый фон и добавляется во время процесса загрузки. По этим причинам мы выставляем изображение логотипа на Dropbox и загружаем его оттуда.

После этого мы размещаем имя с помощью тега шаблона {{site.name}} и если имеется био/описание сайта через тег {{site.bio}}.

Наконец после  условной проверки закрытия {% endif %} мы позволим Postach.io  загрузить необходимые сценарии  нижнего колонтитула с помощью тега шаблона {{ footer_meta }}.

Добавить базу и стиль заголовка

Поскольку вы настроили Prepros для автокомпиляции вашего LESS-файла, и у вас есть Dropbox, автоматически загружающий для вас, вы сможете увидеть, что изменение стиля применено к вашему сайту через секунду или две, после того, как вы сохранили их.

Мы собираемся начать с создания базового стиля для некоторых элементов по умолчанию, а также программу-оболочку. Добавьте этот код в свой файл style.less в соответствии с двумя строками, которые вы добавили ранее, в конечном итоге вы получите:

Давайте взглянем на то, что у нас получилось.

В нашем PSD  размер базового шрифта 18px, однако для нашего кода мы не будем задавать тот же размер 18px, и мы не будем отменять  способность пользователей или браузера определить лучший размер шрифта. Вы можете прочитать больше о моих размышлениях в статье на "Readability First".

Вместо этого мы устанавливаем значение 18 против переменной @base_font_size и затем запускаем его с помощью этого расчета:

Наиболее распространенный размер шрифта браузера по умолчанию 16px это вычисление присваивает переменной @base_font_size значение, которое будет равносильно 18px на большинстве устройств, в данном случае 1.125em. Однако это значение будет оставаться гибким, а устройствам или пользователям необходимо работать с базовым размером шрифта, отличным от 16px.

Мы применяем этот базовый размер шрифта к html элемент с линией: font-size: @base_font_size_ems;

Следующая переменная, которую вы увидите, создается с помощью этого кода:

Этот расчет вычисляет значение rem, соответствующее размеру одного пикселя, в зависимости от значения базового размера шрифта.

Мы можем использовать эту переменную везде, где мы обычно используем px, просто умножив ее на количество пикселей, на которые  мы нацелены, например 50 * @px вместо 50px. Затем мы можем думать в пикселях, что значительно облегчает работу с PSD, но мы получим rem на основе данных в нашем CSS, чтобы все элементы дизайна оставались полностью масштабируемыми и гибкими.

Остальные переменные используются для хранения имен и заголовков шрифтов и цветов из PSD, которые мы будем использовать в нашем сайте, программе-оболочке, в заголовке и тексте заголовка.

Оставшийся код применяет вновь созданные переменные в декларациях стиля для определения ширины, цвета фона, цвета текста и так далее. Обратите внимание, что мы используем методику установки атрибута width в оболочке сайта до 100%, поэтому сайт будет сокращаться в соответствии с меньшим экраном, а атрибут max-width чтобы задать ширину сайта, будет появляться в на больших экранах.

Мы также устанавливаем изображения с помощью img, удаляем  подчеркивание из ссылок, применяем стиль текста, используемые в дизайне  PSD для текста заголовка и используем display: table; и display: table-cell; vertical-align: middle; на .header_wrap и .site_header стили, соответственно, чтобы выровнять по вертикали содержимое заголовка.

Мы еще не загрузили изображение обложки нашего сайта, так что после применения всего вышеперечисленного к вашему блогу, это должно выглядеть следующим образом:

Добавьте обложку вашего сайта

Теперь вы должны экспортировать изображение обложки сайта из вашего блога дизайна PSD. Вы должны получить изображения 1200px шириной, 600px высотой. Мой собственный экспорт  получился около 55 КБ.

Чтобы загрузить его в свой блог, перейдите на панель управления на Postach.io, а затем на вкладку «Параметры». Там вы увидите ярлык с надписью «Обложка фото» и кнопку, чтобы выбрать файл на вашем компьютере. Идите дальше и просмотрите файл обложки фото, а затем загрузить его:

Нажмите кнопку Save Site Settings, вернитесь в свой блог, там вы должны увидеть:

Нижний колонтитул и социальных ссылки

Далее мы собираемся добавить другой аспект сайта, который будет виден на всех страницах, социальных ссылках и нижнем колонтитуле.

Добавьте следующий код к вашей theme.html ниже .header_wrap div и выше .wrapper закрытие div, а затем обновите ваш редактор на Postach.io:

Добавьте эти три переменные в ваш файл style.less:

А также добавьте эти новые стили:

Есть некоторые базовые и некоторые довольно классные вещи, связанные с этим кодом.

На базовой стороне мы добавили поля и ширину панели социальных сетей, мы установили ссылки внутри его слева, и добавили clearfix-код. Мы также установили границы цвета и ширины для элементов социальных сетей, а также цвета фона и текста по умолчанию, наведение государства.

Мы также добавили .site_footer, сделали серый фон с текстом и размеры в соответствии с нашим PSD дизайном.

Классная часть - это то,что мы используем чисто CSS-решение для изменения ширины социальных ссылок в зависимости от того, сколько их там.

Поэтому, если вы только указали ваши данные в Twitter в своей учетной записи на Postach.io и это единственный элемент, вы увидите следующее:

Но если вы также ввели ваш информацию о Facebook и Google+, вы увидите это:

Поблагодарите Lea Verou за эту технику.

Добавить область статей

Теперь мы готовы ввести наиболее важную часть блога, область статей.

Добавьте этот код в свой файл theme.html, а затем ваш исходный редактор на Postach.io, между вашим заголовком и кодом социальных ссылок :

Первое, что происходит внутри нашего элемента  main , - это условная проверка обновлений, чтобы увидеть, находимся ли мы в списке статей, т.е. на домашней странице или странице тега, или если мы находимся в одной статье. Это делается кодом:

Затем мы можно добавить код для каждого из этих типов отображения между тегами условной проверки.

Код списка статей

В коде для " списка статей" есть еще одна условная проверка, она запускается, чтобы увидеть, находимся ли мы на странице тегов, и если это так, отображается заголовок для страницы тегов.

После этого мы проверяем наличие статей {% if posts%}... {% endif %} и начать цикл через них с {% for post in posts %}... {% endfor %}. Для каждой статьи мы создаем элемент  article и отображаем название статей, дату создания, содержание статьи и ссылку "Подробнее".

Мы также проверяем,есть ли статья типа Evernote, добавляющее исходную ссылку источника, т.е. любую заметку, созданную web clipper, с проверкой типа {% if post.type == 'link' %}...{% endif %}и отобразить прикрепленную ссылку, если она есть.

Последняя часть "Списка статей" на дисплее - это размещение страниц, ссылки "Предыдущая" и "Далее" . Имейте в виду, что разбиение на страницы, работает только на домашней странице, а не на страницах тегов. Если вы пытаетесь использовать разбиение на страницы на странице тегов, вы получите сообщение об ошибке.

Единый код статей

Код "Single Post" почти такой же, как для "Post List", с некоторыми различиями.

Во-первых, потому что отображается только одна статья, нам не нужно проверять наличие статьи или начинать цикл, мы просто переходим прямо в наш код  article.

Во-вторых, мы включаем код отображения тегов статьи рядом с датой публикации. Теги могут отображаться только в одной статье, а не в списке статей.

В-третьих, мы не включаем ссылку "Читать дальше" по очевидным причинам, и вместо этого мы размещаем тег шаблон {{theme.social.bar}}, в котором будет отображаться инструмент социального обмена, а также ссылки "Like" и "Follow" на Postach.io .

Поиск по сайту

Добавьте следующие три переменные в файл style.less:

Затем добавьте эти новые стили:

С приведенными выше шаблоном и кодом стиля вы уже готовы!

Теперь ваш блог должен так выглядеть на домашней странице:

Тег страниц будут выглядеть также, но с дополнительным тегом заголовка выше списка статей.

Одна статья должна выглядеть следующим образом:

3. Ответные Tweaks

Одна из последних вещей, которые мы хотим сделать, - это обеспечить, чтобы встроенный контент  iFrame, такой, как видеоролики YouTube, работали ответно, т.е. они масштабируются в соответствии с доступной шириной и сохраняют свои пропорции.

Это достигается путем добавления следующего скрипта в шаблон, прямо перед комментарием  <!-- End blog display -->:

Затем нам необходимо добавить некоторые медиа-запросы, чтобы обеспечить оптимальное отображение макета вместе с уменьшением размера видового экрана. Добавьте следующее в самом конце файла style.less:

С вашим скриптом iframe и медиа-запросами вы должны теперь получить что-то вроде этого на тонком видовом экране:

4. Дополнительные услуги

Есть некоторые дополнительные аспекты для работы с оформлением в Postach.io, которые мы не реализовали выше, но вы можете быть заинтересованы в этом для вашего приложения.

Типы статей

Статьи в Evernote могут быть четырех типов: статья, страница, ссылка или еда. Для простоты мы только что создали один тип отображения для всех, однако вы можете вспомнить, мы это делали{% if post.type == 'link' %}, проверьте, будет ли ссылка добавлена к статье.

С помощью тех же методов проверки можно также создать совершенно разные представления для каждого типа статьи. Вот некоторая информация по каждому из этих типов, и как они могут стать частью вашего блога.

Статья

{% if post.type == 'post' %}

Обычный стандартный тип статьи.

Страница

{% if post.type == "page" %}

Любое примечание с меткой "страница", полезна для создания статических страниц, таких как "Обо мне", например. Элемент будет выведен из списка статей, и если вы выберете, вы можете добавить его название в меню. Ниже будет описан способ достижения этого.

Ссылка

{% if post.type == "link" %}

Любой элемент, который приходит через отсечение от чужого сайта с web clipper, затем переписывается в ваш блог.

Еда

{% if post.type == "food" %}

Я совершенно не мог понять, как создать статью, типа "Еда". Я использовал различные методы с помощью Evernote для Mac и Evernote Food для Android.

Кажется, я ничего не мог добавить в раздел "Meal"  от Evernote Food, чтобы переносить его как статью, поскольку я не мог связать его с записной книжкой моего блога. Я попытался добавить в раздел  "My Cookbook" как через Web Clipper, так и через Evernote Food, и обе попытки были классифицированы как типы статей "Link". Я также попытался помечать статьи как "food"  или "recipe" и им тоже не повезло.

Я уверен, что что-то удивительное выпекается для типа статьи "Food"  (смотрите, что я сделал там), но пока нам просто придется подождать для получения дополнительной информации, прежде чем мы увидим, что это такое.

Меню

Если вы используете страницы своего блога, вы также можете создать меню. Следующий код займет название каждой из ваших опубликованных страниц и добавит его в элемент nav с неупорядоченным списком ссылок меню:

Комментарии Disqus

Вы можете также оборудовать ваш сайт для разговора, добавив следующий код ниже существующего кода статьи:

Вышеуказанное будет работать с информацией, добавленной на ваш сайт Postach.io, на вкладке Details на панели управления.

Подводя итоги

Теперь у вас есть свой собственный Postach.io/Evernote блог и возможность создавать темы оформления для него. Вы также можете скачать файлы созданных тем оформления нажав на кнопку Download Attachment  в верхней части боковой панели этого сайта.

Postach.io - это очень интересная платформа, которая становится еще более интересной, когда вы открываете её для себя. Мне очень любопытно посмотреть, что еще может работать в системе. Возможно в будущем мы увидим плагины Evernote для более удобного создания блогов, такие как предпросмотр Markdown и т.п.

Если вы являетесь пользователем Evernote, и даже если нет, я настоятельно рекомендую дать Postach.io шанс испытать все новые виды блогов.

Advertisement
Advertisement
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.