Веб-студия или digital-агентство Funcky Studio. Разработка сайтов и фирменного стиля, продвижение и сопровождение, 3d-дизайн.

  • Увеличить размер шрифта
  • Размер шрифта по умолчанию
  • Уменьшить размер шрифта

Step #5: Вывод содержимого активной страницы

E-mail Печать PDF

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

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

Каждая страница любого сайта содержит разнообразную информацию – будь то текст, фотографии, разнообразные таблицы, ссылки и многое другое. И практически на любой странице можно выделить ее основное содержимое. Так, например, на нашем сайте данная статья будет являться основным содержимым для текущей (активной) страницы.

В системе управления сайтами MODx эту основную информацию мы храним и редактируем в специальном поле "Содержимое документа". Кстати, в базе данных MODx мы найдем его в таблице "prefix_site_content" в поле "content", советую все-таки заглянуть туда разок.

Основное содержимое страницы в MODx может редактироваться как с помощью специализированных визуальных редакторов (TinyMCE, FCKEditor и других), так и в HTML коде как обычный текст. Так или иначе, в любом случае в базе данных сохраняется HTML код, который затем должен выводиться на странице.

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

  1.  
  2. {{HEAD}}
  3. <body id="www-url-cz">
  4. <!-- Main -->
  5. <div id="main" class="box">
  6. {{HEADER}}
  7. {{TOPMENU}}
  8. <!-- Page (2 columns) -->
  9. <div id="page" class="box">
  10. <div id="page-in" class="box">
  11. {{STRIP}}
  12. {{CONTENT}}
  13. {{RIGHT-COLUMN}}
  14. </div> <!-- /page-in -->
  15. </div> <!-- /page -->
  16. {{FOOTER}}
  17. </div> <!-- /main -->
  18. </body>
  19. </html>
  20.  

Обратите внимание на чанк {{CONTENT}}, именно в нем сейчас хранится неизменяемая (пока) основная часть страницы.

Откроем этот чанк и внимательно рассмотрим его содержимое. Чанк {{CONTENT}} содержит довольно большой объем HTML кода, поэтому я приведу здесь лишь его часть:

  1.  
  2. <!-- Content -->
  3. <div id="content">
  4. ... ... ...
  5. ... ... ...
  6. ... ... ...
  7. </div> <!-- /content -->
  8.  

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

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

  1.  
  2. <!-- Content -->
  3. <div id="content">
  4. </div> <!-- /content -->
  5.  

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

Изменим наш чанк и сохраним его:

  1.  
  2. <!-- Content -->
  3. <div id="content">
  4. [*content*]
  5. </div> <!-- /content -->
  6.  

И... ничего не изменилось :) Впрочем, такое уже не раз бывало в предыдущих статьях. Так что же мы сделали и, главное, для чего? Мы добавили в коде специальную конструкцию [*content*], которая будет на лету заменяться системой на содержимое активной страницы.

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

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

Помните, мы вырезали кусок HTML кода, который был предназначен для главной страницы? Я еще сказал тогда, что он нам понадобится. Вот сейчас пришло время его использовать. Я надеюсь, вы его заботливо сохранили, да? ;) Ну а если нет, то не беда тоже, просто вернитесь повыше и скопируйте код из чанка.

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

Вот собственно и все на сегодня. Крайне просто и легко.

Наверняка можно было бы уложиться и в пару строк, но мне показалось, что так будет интереснее и полезнее :). А уж получилось у меня или нет, решать будете вы в своих комментариях и отзывах.

Заключение

В итоге мы научились:

  1. выделять места в шаблоне под главное содержимое страницы;
  2. использовать специальную конструкцию [*content*] для вывода информации текущей страницы.

Дальше будет еще интереснее, оставайтесь с нами.

Статья позаимствована с официального сайта Modx

 

Обновлено 08.07.2009 10:58  

Интересное

Ни для кого ни секрет, что современные сайты все больше стараются адаптироваться под всевозможные мобильные девайсы и гаджеты. И это замечательно! В 2016 году уходят в прошлое отдельные мобильные версии сайтов, так как это не очень удобно ведь есть media queries, которые позволяют перестраивать текущую версию сайта под любое разрешение мобильного устройства удобно и без лишних телодвижения пользователя. К тому же и поисковики стали обращать внимание на использование этого метода на сайте, что конечно же влияет на позицию выдачи сайта в поиске. Но и тут нужно подходить с умом! недостаточно просто перестроить текущий дизайн-макет сайта под мобильный девайс, важно разработать такой дизайн, который будет легко и безболезненно перестраиваться, но к сожалению не все дизайнеры еще приспособились к этой тенденции. Если вы хотите заказать разработку удобого, красивого, уникального и адапивного сайта, то вам определенно следует обратиться в нашу веб-студию!