Eeclub.ru РасширенияHowTo Windows Live Writer +  ExpressionEngine. Руководство по настройке

Windows Live Writer +  ExpressionEngine. Руководство по настройке

Разместил bestann в раздел Расширения HowTo 08.01.2009, 21:44 Обсудить на форуме (21)

Бесплатная программа от Мicrosoft WLW как нельзя кстати подходит клиентам веб-дизайнеров и тем кто ведет свои дневники и хочет редактировать сайт/блог в программе подобной Word, не заходя в панель управления сайтом и не вникая в премудрости html-кодинга. Можно без труда скопировать текст из Word или другого источника в WLW и при этом получить чистый код на выходе. Руководство пишу так, как хотела бы, чтобы все остальные писали.

Блоги и системы управления сайтом (CMS), поддерживаемые Windows Live Writer: 

     
  • Wordpress.com
  •  
  • Blogger
  •  
  • Atom Publishing Protocol
  •  
  • TypePad
  •  
  • LiveJournal
  •  
  • Movable Type
  •  
  • Wordpress
  •  
  • Wordpress 2.2+
  •  
  • Community Server
  •  
  • dasBlog
  •  
  • Radio Userland
  •  
  • Metaweblog API
  •  
  • Movable Type API  (это указывается для EE)

Почему именно Windows Live Writer

  У каждой программы есть минусы, но эта показалась мне наиболее приятной по интерфейсу, тем более что она будет и дальше развиваться, не без помощи плагинов, для создания которых в Microsoft предусмотрели WLW SDK. В WLW удобно создавать таблицы, здесь есть проверка русского правописания, средство для вставки одной или нескольких картинок, причем даже из буфера обмена, возможность подключения плагинов, возможность прямо в окне редактирования видеть как будет выглядеть запись на сайте. И что еще удобно: здесь можно хранить черновик как до публикации на сайте окончательной версии записи, так и просто в качестве локальной копии. Нигде в Интернете (а я прогуглила много ресурсов)  не рассматривался вопрос настройки Windows Live Writer для работы совместно с ExpressionEngine (пока встроенной поддержки ЕЕ нет). После моих первых дней работы с программой я создала небольшое руководство, которое, надеюсь, будет полезно участникам EEclub и тем, кто ищет, но не может найти. На полноту руководства я как всегда не претендую, т.к. сама совсем недавно начала пользоваться программой и далеко не всё поняла и настроила. Итак, далее речь пойдет об установке программы, связи её с ExpressionEngine, настройке полей, передаваемых по API, хитрости, которая позволяет передать корректный SEO URL при русском заголовке сообщения, о паре очень полезных плагинов и о создании Portable версии WLW,  которую можно носить на флешке – словом, о простых мелочах (а они очевидны не с первого взгляда), которые помогут быстро начать работу с программой.

Скачиваем Windows Live Writer и делаем первичные настройки WLW и EE

  Я программу ставила в Windows XP Service Pack 2 (32-битная версия), поэтому ничего не могу сказать о глюках в Vista, но программа совместима с Вистой. Программа требует как минимум .NET Framework 2.0, но некоторые плагины потребуют версию 3.5, а весит эта версия около 200Мб (3 версия Framework весила в 3 раза меньше, можно обойтись ею, если не планируете кучи плагинов). Это конечно минус, но Framework нам может пригодиться и для других целей, поэтому придется смириться.  Второй существенный, но решаемый, недостаток: невозможно скачать полный дистрибутив WLW, т.е. мы можем скачать только загрузчик WLW, и далее для установки на каждый новый компьютер потребуется снова через загрузчик выкачивать программу из Internet. Выход из положения – создание портативной версии Portable WLW, о чём я тоже напишу, но чуть ниже.  Из удобного стоит отметить то, что, во-первых, файлы можно закачивать по FTP на сайт, а во-вторых, можно настроить Proxy, без чего в некоторых локальных сетях (например, у меня на работе) никак не обойтись.  Отмечу также, что каждая запись, с которой вы работали в WLW, будет доступна из меню Пуск->Документы, т.е. открывать можно сразу конкретную запись, и если это был не черновик, то она автоматически загрузится с сайта.  Мы увидели ранее, что в списке поддерживаемых систем ЕxpressionЕngine нет, но в ЕЕ есть встроенный модуль Metaweblog API и дополнительный модуль Blogger API (но его вообще не удалось заставить работать). Мы будем связывать EE и WLW c помощью Metaweblog API, но при этом при выборе поставщика в программе WLW укажем Movable Type API. Это очень важно, потому что при выборе Metaweblog API в WLW работа будет неправильной, а подсказку я нашла в одной из тем форума ЕЕ, где кто-то тоже мучился с подобной проблемой.

Включаем Metaweblog API из панели EE

  Включим Metaweblog API из вкладки Модули панели администрирования.  Активизируем модуль (выделен синим если активен)  Откроем свойства модуля и скопируем в буфер обмена ссылку, которая нам понадобится для вставки в WLW.  Копируем эту ссылку в буфер обмена

Настройка полей Metaweblog API:

  настраиваем свойства metaweblog API  Поле предисловия – Extended text  
Поле контента – Summary    
Поле продолжения - Body
  Объясню причину. Если вы на главной странице выводите записи при помощи поля Summary, а в основной части после “Читать далее” используете поле body, то мы конечно по идее должны назначить Поле предисловия – Summary, а поле контента – Body. По факту при такой настройке мы получаем два нежелательных последствия:  Поле предисловия – это то что автоматически попадает в окно Отрывок программы WLW. Это окно открывается вместе с другими дополнительными параметрами внизу экрана при нажатии клавиши F2 или если нажать стрелку справа от Даты публикации. Это окно, во-первых, очень маленькое, а во-вторых, там нельзя форматировать текст и вставлять картинки как это можно делать в основном экране. Т.е. такое поле подходит только для тех, кто в поле Summary обычно помещает не более двух-трех строк неотформатированного текста.  Вторая особенность: в WLW есть специальная кнопка Разделить запись (More) “Разделить запись”, которая при неправильной настройке полей неактивна, потому что служит для разделения Поля контента и Поля продолжения, а не Поля предисловия и Поля контента.  В связи с этими особенностями надо настроить поля, как показано на скриншоте. Тогда в окошко Отрывок можно вставлять текст Extended text, а summary и body редактировать в основном окне, в визуальном редакторе, а для разделения этих полей использовать кнопку “Разделить запись”, которая станет активной после правильной настройки по скриншоту.  Кроме того, если вы вообще никогда не используете поле Extended, то можно настроить Metaweblog API так, чтобы Поле предисловия (Отрывок) и Поле ключевых слов использовались для других целей: например настроить какие-то custom-fields или установить плагин EE для мета-тегов и потом в WLW в окошки Ключевые слова и Отрывок вставлять нужную дополнительную информацию. В итоге получается, что у нас доступны для передачи по API четыре поля, не считая заголовка и его URL, который, к сожалению, формируется неявно, о чём будет упомянуто ниже.  Кстати, что я еще сделала: при настройке в Default Field Group полей Summary/Body/Extended указала, чтоб по умолчанию текст никак не форматировался (раньше у меня был тип <br/> ). Это чтоб ЕЕ не добавлял лишние обрывы строк при публикации записей из WLW – ведь в WLW мы уже получаем корректный исходный код.

Настройка WLW для связи с EE

  Блоги->Добавить учетную запись блога, выбрать Другая служба блога. Ввести адрес сайта, свой логин и пароль на сайт, поставить галочку Сохранить.  Добавление учетной записи   Процесс  Тип блока и ссылка на Metaweblog API  Дальше ждать, когда вопросы задаст, ответить Да.  Не забываем после установки программы включить проверку русской орфографии  Сервис->Параметры->Орфография, Язык словаря – русский.  Одно плохо – нельзя одновременно два словаря использовать. Может сделают.

Работа с картинками (пока коротко)

  При использовании двух разных способов закачки картинок на сайт WLW ведет себя по-разному: при обычной закачке, если просто указали категорию картинок, картинки любой записи закачиваются в эту категорию. Если же настроена закачка картинок по FTP, то внутри общей папки картинок создается отдельная папка, в которой хранятся картинки, принадлежащие отдельной записи – некоторым это понравится, но если вы планируете одну и ту же картинку использовать в разных записях, её потом вероятно сложно будет найти. Пока поведение при FTP-закачке не регулируется.  Также в WLW есть встроенная поддержка LightBox, но он не настраивается, а распознается автоматически, если на вашем сайте есть ссылка на скрипт lightbox.js. Я пока себе не настроила, потому что у меня скрипт видоизмененный и с другим названием, т.е. пока не тестировалось (вставляю ручками в исходном коде).  Сами картинки вставляются из меню, или сочетанием клавиш Ctrl+L. По умолчанию к ним добавляется форматирование, которое редактируется в правом меню, если нажать на картинку:
     
  • Set “Text wrapping” to “Left” (обтекание текстом- по левому краю)
  •  
  • Set “Margins” to “No Margins” (нет границ, border=0)
  •  
  • Set “Borders” to “Drop Shadow” (добавлеена тень)
  •  
  • Set “Link to” to “Source” (автоматически вставляется не сама картинка, а её thumbnail со ссылкой на оригинал)
  •  
  • Set “Image size” to “Small” (размер картинки- маленький)
  •  
  • Remove any watermark effects (водяные знаки не добавляются)

  Эти настройки можно изменить, а потом нажать внизу правого меню “Сохранить параметры как параметры по умолчанию”. Но всё-таки WLW пока не позволяет гибко работать с картинками, потому что я не могу регулировать все свойства, которые автоматом прописываются для картинки. даже после изменений на свои настройки и сохранения их по умолчанию я получаю код: 

<p><img title="настраиваем свойства metaweblog API" 
style="border-right: 0px; border-top: 0px; display: block; float: none; 
margin-left: auto; border-left: 0px; margin-right: auto; border-bottom: 0px" 
height="602" alt="настраиваем свойства metaweblog API" src="$metaweblog3[8].png" 
width="635" border="0" /> </p

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

<p><img alt="настраиваем свойства metaweblog API" src="$metaweblog3[8].png"/> </p

Надеюсь ситуация с более гибкими настройками картинок улучшится в будущем.

Хитрость с заголовками записей

Основная проблема при создании записи – это создание правильного адреса URL Title. Если работать непосредственно из EE, то это делается просто: существует поле записи, где я пишу полное название записи, и поле URL Title,  где я на английском создаю краткую ссылку к записи. В WLW данный вопрос решен, если используется Wordpress. Но что делать нам, когда наша система ExpressionEngine? На деле url записи формируется только один раз, а при дальнейшем редактировании записи передаются заголовок, категории, содержимое полей. URL формируется из заголовка записи, но только из английских букв и цифр. Поэтому мы создаем запись и сначала задаем для неё заголовок на английском языке, вместо пробелов в URL будет поставлено тире.

Первичный заголовок записи

Далее мы сохраняем запись, отправляя черновик в блог. Это значит, что наша запись перешлется на сайт со статусом Closed. Вообще пока вы не доделали статью, можно постоянно отправлять запись как черновик – так удобно будет продолжить её редактирование с другого компьютера. Я её также сохраняю как черновик, т.е. использую и Сохранить черновик локально, и Отправить черновик в блок. так у меня содержится 2 копии записи. Если я потом внесу изменения на другом компьютере, я открою запись из блога и еще раз сохраню её как черновик локально.

Отправка записи как Closed

В дальнейшем при редактировании записи можно смело изменять заголовок на русский – URL уже не изменится. Мой получившийся URL wlw-ee.

Открытие документов и работа с ними как на сайте

Чтобы сразу создавать документ видя то оформление. которое у нас на сайте, заходим в меню Вид->Обновить тему и ждем, когда тема обновится. Переключение между своей темой и темой, которая в WLW по умолчанию клавишами Ctrl+F11.  В окне Редактирование видим только работу со своей записью (без картинок оформления), а в окне Просмотр пример всего сайта с картинками и нашей записью. Но поглюкивает. У меня, например для списков маркеры в виде картинок. У первого элемента списка маркер не показывает, почему то не показывает картинку для цитаты. Но в целом очень приятно редактировать свои записи, когда виден конечный результат, например у меня это выглядит так:

Вот так я редактирую эту запись

Открываем запись или из меню, или сочетанием клавиш (см. сочетания клавиш в разделе ниже). Доступен показ до 500 заголовков записи, причем можно фильтровать по названию.

Открываем записи с сайта  Делаем выборку из записей

Черновики и Недавно опубликованные удобно открывать не из окна Открыть, а из правого меню.

Плагины Windows Live Writer

Плагины к Widows Live Writer и описание некоторых действий в программе. Text Template Plugin for Windows Live Writer - плагин позволяет создавать свои теги, длинный текст и его сокращенный ввод. Но лучше использовать Dynamic Template Plugin, потому что он заменит многие плагины и делает клёвые вещи! Обязательно посмотрите его страничку с примерами Flash! Темплейты хранятся отдельно как файлы .wlwtemplate, в папке Application DataWLWTemplates. Вот окно плагина:

Dynamic Template

Вот например так можно вставить текст html/xml для того, чтобы показать пример кода, обычно это относится к многострочному коду, который должен интерпретироваться не как код, а как пример кода, потому что WLW преобразовывает скобки кода и пробелы некорректно, что утяжеляет вес конструкции. Выше для вставки длинного куска кода я как раз использовала темплейт, чтоб преобразовывались только скобки и не добавлялись лишние служебные символы. Создаем например новый темплейт с именем Pre xml из буфера и добавляем туда такой код:

<pre><%= HtmlEncode(xmlCode) %></pre

Указываем переменную Variable name это xmlCode, а тип данных Data Type многострочное окно ввода из буфера обмена Text (Multi-Line). Есть еще один вариант сделать то же самое:

<pre><%= xmlCode.Replace("<""<").Replace(">"">") %></pre

Также плагин можно использовать для аббревиатур и акронимов, выделения текста цветом, использования любых тегов. Тегом <abbr> пользоваться не будем, потому что его IE6 не поддерживает, и он нормально вставляется только при редактировании из WLW исходного кода страницы, поэтому и для акронимов, и для аббревиатур будем пользоваться одним и тем же тегом акронимов <acronym>

<acronym title="<%= full %>"><%= term %></acronym

Здесь уже две переменные term и full – акроним и его расшифровка – и обе типа Text (однострочные). Например, вот эта аббревиатура выделена тегом акронима и при наведении курсора покажет расшифровку ACM.

Dynamic-Template Acronym

По умолчанию у акронима нет какого-то особого форматирования. Чтобы акроним как-то выделялся из текста, опишу для него такие свойства (русские пояснения копировать нельзя, т.к. русский в CSS несовместим с IE6):

acronym{
color
:#7E0202; //цвет как у заголовков сообщений при наведении курсора
border-bottom:1px dotted #7E0202; //подчеркивание прерывистой линией
cursorhelp//при наведении курсора видны стрелка и знак вопроса} 

После создания темплейтов достаточно будет щелкнуть на их имени, чтобы использовать – это то, о чём я мечтала. Эх… ещё бы сюда клавиатурные сокращения.

Создаем Portable Windows Live Writer

Здесь прочитать о Portable и скачать загрузчик для WLW. Распаковать содержимое архива WLWPortable3.zip на жесткий диск. После настройки программы WLW скопировать все файлы из

 
C:Program FilesWindows LiveWriter

в указанную директорию нашей разархивированной папки
 
WindowsLiveWriterPortableAppWindowsLiveWriter

Теперь можно вообще деинсталлировать WLW с компьютера. Запускается программа открытием файла WindowsLiveWriterPortable.exe и она будет заботиться о необходимых настройках реестра и путей к документам. носите на флешке, переносите на другой компьютер!

Клавиатурные сокращения WLW (не зря рекомендуется к прочтению)

     
  • новая запись в блоге Ctrl+N
  •  
  • новая страница Ctrl+G
  •  
  • выделение жирным Ctrl+B, курсивом Ctrl+I, подчеркивание Ctrl+U, зачеркнутый Ctrl+H
  •  
  • вставка изображения Ctrl+L
  •  
  • открыть Ctrl+O (откроется окно выбора открытия или записи из Черновиков, или Недавно опубликованных, или из записей блога (просматривает на 500 записей назад)
  •  
  • сохранить черновики локально Ctrl + S
  •  
  • опубликовать Ctrl+Shift+P
  •  
  • напечатать Ctrl+P
  •  
  • вставить ссылку Ctrl+K
  •  
  • вставить картинку Ctrl+L
  •  
  • очистить форматирование элемента: выделить его и нажать Ctrl+Пробел. Это также помогает, если вы отформатировали элемент и хотите писать текст дальше, а текст продолжает оставаться жирным, подчеркнутым или выделенным вашим тегом, как например у меня <code> или <kbd> : ставите стрелку после отформатированного элемента и жмете нужную комбинацию.
  •  
  • проверить правописание F7
  •  
  • редактирование F11
  •  
  • исходный код Shift+F11
  •  
  • предпросмотр с шаблоном блога F12
  •  
  • убрать/показать свойства записи F2 (нижнее меню)
  •  
  • убрать/показать правое меню F9
  •  
  • По умолчанию при нажатии Enter начинается новый абзац, а вот разрыв строки делаем нажимая Shift+Enter
  •  
  • отменить Ctrl+Z (также отменяет автоматическое преобразование введенного url-адреса в ссылку), вернуть Ctrl+Y
  •  
  • выделить всё Ctrl+A
  •  
  • вырезать Сtrl+X, копировать Ctrl+C, специальная вставка Ctrl+Shift+V.  Обязательно воспользуйтесь специальной вставкой (её также можно вызвать с помощью правой кнопки мыши) при копировании текста из Интернет, из Word, из pdf-документов, чтобы выбрать вариант вставки кода без форматирования, с удалением специфического форматирования (лишние мусорные стили), но сохранением основного форматирования (заголовки, жирный, наклонный), с полным сохранением форматирования (лучше не выбирать).
  •  
  • поиск Ctrl+F
  •  
  • т.к. прямой поддержки ЕЕ нет, мы будем видеть просто список категорий, а не иерархическую структуру категорий. Работа с категориями: Ctrl+Shift+C – открываем окно со списком категорий, стрелками Вверх и Вниз ходим по меню, клавишей Enter отмечаем пункты или наоборот снимаем галочки, сочетанием Ctrl+Enter отмечаем галочкой категорию и выходим из окна категорий, клавишей Esc – просто выход из окна категорий. В окне категорий есть верхняя строка для ввода первых букв названия категории, что удобно, если у вас очень много категорий.

Неразрешенные вопросы и пожелания

Как удалить опубликованную запись
Нет подсветки исходного кода, т.е. не очень удобно редактировать его, хотя многим это может и лишнее.
Не знаю как работает программа с разными авторами. Кроме меня никто мой сайт не редактирует, поэтому не тестировала.
Хотелось бы использовать клавиатурные сокращения или дополнительные кнопки клавиатуры для плагина Dynamic Template (пока нет), настраивать верхние кнопки редактирования.
Как сделать полный бэкап записей
Иметь возможность изменять URL Title (в WordPress это возможно - slug), а не только использовать хитрость
Изменить выделение жирным: вместо тега <strong> тег <b>, хотя я понимаю, что семантически более верно использовать первый вариант, который есть в WLW.
Функция Отменить работает только в пределах текущего окна, т.е. если из окна редактирования перейти в окно Исходного кода, кнопка становится неактивной. Очень жаль.
Невозможно включить проверку орфографии одновременно и для русского, и для английского.
Может сделают всё-таки поддержку именно EE, хотя и так вроде удалось настроить.

Автор: bestann
Оригинал статьи: Руководство по настройке Windows Live Writer для работы с ExpressionEngine

Обсудить на форуме (21)

Комментарии

 

Ещё никто не оставлял комментариев, Вы будете первым.

Для этой записи комментирование недоступно.

© 2010 Copyright Eeclub.ru. All Rights Reserved. ExpressionEngine® are registered trademarks of EllisLab, Inc.