Несколько месяцев назад я переключил этот блог с WordPress на Jekyll. Мне нравится, как Джекилл позволяет мне готовить все на месте и просто публиковать, когда он будет готов. В этом нет никакой серверной логики, что означает, что я могу разместить весь блог в корзине S3. Кроме того, больше нет проблем с такими мирскими проблемами, как безопасность, производительность или повреждения базы данных.
Я хотел иметь эту свободу и контроль на любом сайте, который я буду создавать и управлять. На самом деле, большинство сайтов можно рассматривать как статические сайты. Они могут содержать несколько фрагментов, которые должны быть визуализированы динамически. Рост современных браузеров означает, что мы можем передать эту проблему на стороне клиента.
Тем не менее, веб-сайты имеют другие требования, чем блог. Он содержит разные страницы с уникальной презентацией и несколькими многократно используемыми блоками (например, посмотрите на разные страницы на сайте 37Signals ). Страница не будет содержать только заголовок и блок текста, но будет состоять из различных типов контента, таких как списки, изображения, видео, слайды, карты и т. Д. Кроме того, современный веб-сайт часто нуждается в A / B-тестировании и переводе в на другие языки. Несмотря на то, что мы используем, мы можем использовать блог-движки, такие как Jekyll (или WordPress). Я чувствовал, что для инструмента, созданного специально для создания и управления веб-сайтами, все еще нет места.
Вот почему я создал Punch .
Что такое Панч?
Цель Punch — помочь любому создавать (и поддерживать) современные веб-сайты, используя только HTML, CSS и JavaScript. Punch в значительной степени вдохновлен Jekyll, но это не блог-движок. Он интуитивно понятен в использовании и легко расширяется.
Punch написан на Node.js и будет работать с вашей локальной файловой системой. В настоящее время Punch отображает файлы шаблонов, написанные на усах . Ожидается, что контент будет доступен в формате JSON. Punch также может анализировать контент в формате Markdown .
Для создания сайта шаблоны и содержимое должны быть доступны в двух каталогах. Для каждого шаблона Усы, найденного в каталоге шаблонов, Punch будет искать соответствующий контент в каталоге содержимого. Содержимое должно быть представлено в файле JSON с тем же именем, что и шаблон. Кроме того, вы можете создать каталог с тем же именем, что и шаблон, для хранения нескольких файлов JSON и Markdown. Punch сохранит визуализированный файл в выходном каталоге. Любые другие файлы (HTML, изображения, JS, CSS и т. Д.) И каталоги в шаблонах будут скопированы в выходной каталог без каких-либо изменений.
Как использовать
Вот краткий видеоролик о том, как использовать Punch.
Для получения более подробной информации об установке и использовании, пожалуйста, обратитесь к README и Руководству пользователя .
Простой рендеринг на стороне клиента
Как я упоминал ранее, мы можем визуализировать любые динамические блоки на сайте на стороне клиента. Поскольку Punch написан на JavaScript, мы можем легко использовать его рендерер на стороне клиента. Вы можете видеть, что эта функция используется на домашней странице Punch для рендеринга блока «GitHub Watchers».
Чтобы использовать средство визуализации, вы должны включить Mustache.js и Punch’s Mustache Renderer на HTML-странице.
<script type="text/javascript" src="assets/mustache.js"></script> <script type="text/javascript" src="node_modules/punch/lib/renderers/mustache.js"></script>
Затем вы должны инициировать новый экземпляр MustacheRenderer и предоставить шаблон, контент и все необходимые вам компоненты. Так как рендерер Punch работает асинхронно, он может надежно использоваться в контекстах, которые включают выборку содержимого AJAX. Ниже вы можете увидеть, как я передаю ответ JSON от GitHub API и фрагмент шаблона в средство визуализации для рендеринга блока GitHub Watchers. Мы также должны предоставить функцию обратного вызова для выполнения после завершения рендеринга.
// Load and Render GitHub followers
(function(){
if($("#github_followers").length > 0){
var renderer = new MustacheRenderer();
renderer.afterRender = function(output){
$("#github_followers").html(output);
};
renderer.setTemplate('\{\{#followers}} \
<a href="http://github.com/" rel="nofollow"><img size="16" src="" title="" alt=""/></a> \
\{\{/followers}} \
');
renderer.setPartials({});
$.getJSON("https://api.github.com/repos/laktek/punch/watchers", function(data){
renderer.setContent({"followers": data});
});
}
})();
Начните играть!
Я уже использовал Punch для создания нескольких личных сайтов и только что завершил перенос публичного сайта CurdBee на Punch (он скоро заменит существующий сайт). Каждый раз, когда я использовал Punch, это был приятный опыт, и я чувствую, что у меня есть свобода и контроль над созданием сайтов так, как я хочу. Я надеюсь, что большинство из вас начнут чувствовать то же самое с Punch. Кроме того, у меня есть планы по поддержке таких функций, как редактирование контента на основе браузера и удобные возможности публикации, которые могут сделать Punch более привлекательным.
Идите, установите его , создайте хорошие сайты, распространяйте информацию и отправляйте мне запросы! !