Онлайн-руководство разработчика NetCat
Модуль «Поиск по сайту» 12.2.1Начало работы с модулем 12.2.2Язык запросов 12.2.3Способы хранения индекса 12.2.4Интерфейс модуля в панели управления сайтом 12.2.5Области индексирования 12.2.6Области HTML-страниц 12.2.7Области поиска на сайте 12.2.8Индексирование по расписанию, запуск индексирования в фоновом режиме 12.2.9Правила индексирования 12.2.10Постановка задачи переиндексирования в очередь 12.2.11Интеграция модуля в макеты дизайна сайта 12.2.12Простая форма поиска 12.2.13Расширенная форма поиска 12.2.14Вывод результатов поиска 12.2.15Стилизация списка подсказок 12.2.16Расширенные настройки 12.2.17Разработка расширений модуля 12.2.18Обзор архитектуры модуля 12.2.19Обработчики документов различных типов 12.2.20Текстовые фильтры 12.2.21Анализаторы текста 12.2.22Корректировщики запросов 12.2.23Подключение других поисковых систем 12.2.24Решение проблем с поиском 12.2.25Решение проблем с индексированием 12.2.26Справочник API

Подготовка и внедрение HTML-шаблона

Видеоурок

Первое что нужно сделать — создать новый макет дизайна в административном разделе. Зайдите в раздел «Разработка → Макеты дизайна» и добавьте новый макет. Система автоматически создаст необходимые файлы и подпапки нового макета в папке /netcat_template/template/.

Макет дизайна можно создать с нуля либо на основе уже существующего.

Если вы создаете дочерний макет, он будет располагаться в папке /netcat_template/НомерРодительскогоМакета/НомерМакета. Путь к этой папке в html-коде макета  можно формировать либо вручную, либо можно использовать переменную  $nc_parent_template_folder_path .

Содержимое макета (HTML) можно редактировать как через веб-интерфейс, так и напрямую в файле (например, через FTP-соединение). Если вы редактируете макет напрямую, вам понадобятся два файла: Settings.php и Template.html. Подробнее они описаны ниже.

Все вспомогательные файлы (картинки, файлы стилей, скриптов и пр.), используемые в макетах, рекомендуется разместить в отдельной папке, например resources/. Также можно в этой папке создать подпапки images или files и разместить файлы там.

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

  • Settings.php должен начинаться конструкцией <? и заканчиваться ?>
  • Template.html имеет следующую структуру:
    <!-- Header --> содержимое верхней части страницы <!-- /Header -->
    <!-- Footer --> содержимое нижней части страницы <!-- /Footer -->

Рабочая область макета делится на три основные части:

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

Теперь файл макета нужно разбить на логические составляющие:

  • Верхняя часть. Здесь могут быть: логотип, слоган, главное меню, форма поиска и т.д.
  • Контентная часть. Вывод текстов, таблиц, изображений и т.д. Контентная часть формируется содержимым компонентов.
  • Нижняя часть. В зависимости от вёрстки, в нижнюю часть может попасть боковая колонка сайта, а так же: счётчики посещаемости, копирайты, нижнее меню и т. д.

Обратите внимание, что термины «верхняя» и «нижняя» не обязательно означают геометрическое понятие верха и низа. Также NetCat позволяет поддерживать сайты с несколькими контентными частями.

На рисунке:

  • Выделенное жёлтым цветом нужно разместить в поле Header.
  • Нижняя часть, выделенная красным, будет помещена в Footer.
  • Часть, которая не выделена — контентная область.

Сейчас код макета представляет собой обычный html-код

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Index</title>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <link rel="stylesheet" href="/general.css" />
</head>
<body>
<div id="main"><div class="content">
    <div id="header">
        <div id="logo">
            <a href="/"><img src="/images/logo.gif"/></a>
            <span class="name">Моя<span>Компания</span></span>
            <span>Слоган компании</span>
        </div>
        <div class="sep"></div>
        <div id="menu"><div class="left"><div class="right">
            <ul>
                <li class="menu-active">О нас</li>
                <li><a href="#">Новости</a></li>
                <li><a href="#">Контакты</a></li>
            </ul>
        </div></div></div>
    </div>
    <div id="left_content">
        <div class="submenu">
            <ul>
                <li><a href="#" class="menu-active">Категории</a>
                    <ul>
                        <li><a href="#">Первая</a></li>
                        <li><a href="#">Вторая</a></li>
                    </ul>
                </li>
                <li><a href="#">Аксессуары</a></li>
            </ul>
        </div>
    </div>
    <div id="content" class="is_left">
        <div class='breadcrumbs'><a href='#'>Главная</a> / Новости</div>
        <h1>Далеко-далеко за словесными горами.</h1>
        <p>Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Вдали от всех живут они в буквенных домах на берегу Семантика большого языкового океана. Маленький ручеек Даль журчит по всей стране и обеспечивает ее всеми необходимыми правилами.</p>
        <p>Эта парадигматическая страна, в которой жаренные члены предложения залетают прямо в рот. Даже всемогущая пунктуация не имеет власти над рыбными текстами, ведущими безорфографичный образ жизни. Однажды одна маленькая строчка рыбного текста по имени Lorem ipsum решила выйти в большой мир грамматики. Великий Оксмокс предупреждал ее о злых запятых, диких знаках вопроса и коварных точках с запятой, но текст не дал сбить</p>
    </div>
    <div class="sep"></div>
</div></div>
    <div id="footer">
        <div class="left">&copy; 2012 ООО &laquo;РиК&raquo;.<br />Все права защищены.</div>
        <div class="right">&copy; 2012 Разработано <br />в компании &mdash; <a href="#">WebSite.pu</a></div>
        <div class="sep"></div>
    </div>
</body>
</html>
Описание проекта