Документация как на официальном сайте IPS - Страницы - Invision Community Jump to content

Russian support for Invision Community

Документация как на официальном сайте IPS


Description

Создание раздела Документации, очень похожего на официальный раздел с сайта IPS

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

База данных документации использует категории, чтобы разделить ее на более крупные разделы. В каждой главе (категории) есть несколько страниц, которые подчинены категории. В исходной документации IPS категории имеют трехуровневую иерархию. Я считаю его перегруженным, запутанным и трудным для навигации. Поэтому в этом руководстве мы ограничим руководство двухуровневыми категориями.

 

Создание БД

 

Мы собираемся создать базу данных, которая содержит категории и назначить ключевой документ для базы данных. В вашем AdminCP перейдите в Pages -> Contents -> Databases и нажмите Create new.

На вкладке «Детали» убедитесь, что в базе данных используются категории, иначе вы не сможете создать блок меню. Ключ базы данных должен быть установлен на docs. Используйте шаблоны по умолчанию, как показано на скриншоте ниже, мы изменим их позже при необходимости.

 

create-database.png.ed3b22b39b68e75a3dbe239c298a0214.thumb.png.6bd12f05d30b5d380ea5c25d67c02f78.png

 

На следующей вкладке вы устанавливаете язык. Эта документация состоит из руководств / страниц, поэтому мы будем использовать здесь слово «guide» вместо ввода или записи.

guide-language.png.e68a1fee1f1183adc8be225659a271c0.thumb.png.f5cd32ad3c6c7b6d55b4ecb6a9f4efb6.png

 

На следующей вкладке «Options» мы меняем некоторые настройки, так как нам не нужны некоторые функции в этой базе данных. Мы не допускаем комментариев или обзоров. Образ записи также не важен в этой базе данных.

database-options.png.f0b4b430a772608511c92ed12bb60fd3.thumb.png.2d44aba50e3ace547d2d315d3173f4b0.png

 

Вкладки Forums и SEO мы пропускаем, менять здесь нечего. На последней вкладке Page мы создадим новую страницу, чтобы мы могли получить доступ к базе данных, чтобы протестировать ее во время этого руководства. Вы не можете использовать базу данных в IPS, если вы не назначите ее страницу!

database-page.png.ef35744aa56c34b85ece5e4000fa5977.thumb.png.b8e98ceae3226f2c7cbfc54382c5dd82.png

 

Мы создаем страницу не с помощью Page Builder, а с помощью ручного HTML. Причина в том, что мы хотим «перевернуть» структуру страницы, чтобы боковая панель с навигацией отображалась с левой стороны. Вы не сможете сделать это с помощью Page Builder, если сначала не создадите новый шаблон страницы. Это будет полезно, если вы хотите создать несколько таких страниц. Например, если у вас есть несколько баз данных, использующих эту структуру.

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

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

 

Добавление страницы в меню

После создания базы данных и страницы вы добавляете эту страницу в главное меню вашего сообщества, чтобы иметь к ней быстрый доступ. Или вам нужно вызвать базу данных через https://example.com/docs, и это немного неудобно. В AdminCP перейдите в System-> Site features -> Menu manager и нажмите Add item. Справа в области Menu item type выберите Page. Затем в разделе «Configuration» ниже выберите страницу с документацией из выпадающего списка.

 

add-menu-item.png.b63024f885d942dfe6563868f8035c1f.thumb.png.ae034744ec3c4a6c69c1da3d489af30d.png

 

Сохраните пункт меню и не забудьте опубликовать это меню. Переключитесь в свое сообщество и просмотрите страницу.

Если вы не видите пункта меню, то скорее всего права для страницы не установлены. В AdminCP перейдите на Pages-> Page management -> Pages, щелкните стрелку вниз в строке, содержащей документы страницы, и выберите Permissions. Теперь вы должны увидеть страницу в главном меню вашего сообщества.

 

Создание категорий

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

В AdminCP перейдите на Pages-> Documentation-> Categories и создайте несколько основных категорий или подкатегорий. Пример, над которым я буду работать, показан ниже:

database-categories.png.dcf275951f9d3cca615a8098fc7d65aa.thumb.png.3f7c69eb752070fec6e786eabbc2d564.png

 

  • Вы можете удалить или переименовать категорию «Записи» по умолчанию, которая была автоматически создана вместе с базой данных. Просто отредактируйте это.
  • Создайте хотя бы одну дополнительную основную категорию (в моем примере «Development»)
  • В списке категорий щелкните значок плюса, чтобы создать подкатегории. Не создавайте категории на третьем уровне, они не рассматриваются в этом руководстве.

 

Создайте записи

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

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

 

Добавление настраиваемых полей

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

Создать поле для краткой версии

В AdminCP перейдите в Pages -> Documentation -> Fields и нажмите Create new. Заполните форму на вкладке General options, как показано ниже:

custom-field.png.970755dd8e4c79cdf66778f7a12d4749.thumb.png.fee7ffec8722933b941a0f8d5bb3daca.png

 

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

field-display-title.png.d8518cd558aaf851ed3df77dfcd39131.thumb.png.24432f11e80ddb938f7cd98bc2580eef.png

 

Template Key должен быть shortened_title. Если вы измените его здесь, вам придется изменить ключ позже в шаблонах. Это означает, что он не будет работать только с копированием / вставкой! Это поле является вспомогательным, которое используется для замены слишком длинных заголовков руководств в навигации. Это поле не должно отображаться в списке или в шаблоне руководства. Отключите оба параметра отображения.

 

Создание шаблонов

 

Пришло время создать шаблоны для базы данных. В вашем AdminCP перейдите на Pages->Page management -> Templates. Нажмите «New» и выберите «Add database template». Введите Docs в поле Имя и выберите Record listing в Template type. Назначьте шаблон нашей базе данных Documentation.

create-new-database-template.png.725e30939fdcd34d99728d77f5adfa06.thumb.png.b724de9d2dbca4220b064e84a535f7a3.png

 

Будет создан новый набор шаблонов Docs. Он содержит несколько шаблонных битов для перечисления записей.

Давайте добавим к нему еще один набор шаблонных битов. Он будет обрабатывать отображение записей в базе данных. Выполните те же шаги, что и на предыдущем шаге (см. Снимок экрана выше), за исключением того, что вы выбираете Record в Template Type. Когда вы сохраните его, у вас будет набор шаблонов под названием Docs с левой стороны, который содержит все необходимые элементы шаблона.

templates-for-docs.png.0031934b7cd4ce17e561241d6545688b.thumb.png.a353e233386ca3bf1d77916773d28fa0.png

 

Ниже вы найдете код для каждого template bit.

 

Display record - Template bit record

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

Скрытый текст



{{if $record::database()->can('add') or \IPS\Member::loggedIn()->member_id}}
<ul class="ipsToolList ipsToolList_horizontal ipsClearfix ipsSpacer_both ipsResponsive_hidePhone">
    {{if $record::database()->can('add')}}
    {{$page = \IPS\cms\Pages\Page::$currentPage;}}
    <li class='ipsToolList_primaryAction'>
        <a class="ipsButton ipsButton_medium ipsButton_important ipsButton_fullWidth" data-ipsDialog="1" data-ipsDialog-size="narrow" data-ipsDialog-title="{lang="cms_select_category"}" href="{$page->url()->setQueryString( array( 'do' => 'form', 'd' =>
        \IPS\cms\Databases\Dispatcher::i()->databaseId ) )}">{lang="cms_add_new_record_button" sprintf="$record::database()->recordWord( 1 )"}</a>
    </li>
    {{endif}}
</ul>
{{endif}}

<div class='ipsClearfix'>
    <h1 class='ipsType_pageTitle ipsType_break'>
        {{if $record->locked()}}<span><i class='fa fa-lock'></i></span> {{endif}}

        {{if $record->isFutureDate() || $record->mapped('pinned') || $record->mapped('featured') || $record->hidden() === -1 || $record->hidden() === 1}}
        {{if $record->isFutureDate()}}
        <span><span class="ipsBadge ipsBadge_icon ipsBadge_warning" data-ipsTooltip title='{$record->futureDateBlurb()}'><i class='fa fa-clock-o'></i></span></span>
        {{elseif $record->hidden() === -1}}
        <span><span class="ipsBadge ipsBadge_icon ipsBadge_warning" data-ipsTooltip title='{$record->hiddenBlurb()}'><i class='fa fa-eye-slash'></i></span></span>
        {{elseif $record->hidden() === 1}}
        <span><span class="ipsBadge ipsBadge_icon ipsBadge_warning" data-ipsTooltip title='{lang="pending_approval"}'><i class='fa fa-warning'></i></span></span>
        {{endif}}
        {{if $record->mapped('pinned')}}
        <span><span class="ipsBadge ipsBadge_icon ipsBadge_positive" data-ipsTooltip title='{lang="pinned"}'><i class='fa fa-thumb-tack'></i></span></span>
        {{endif}}
        {{if $record->mapped('featured')}}
        <span><span class="ipsBadge ipsBadge_icon ipsBadge_positive" data-ipsTooltip title='{lang="featured"}'><i class='fa fa-star'></i></span></span>
        {{endif}}
        {{endif}}

        {{if $record->prefix() OR ( $record->canEdit() AND $record::canTag( NULL, $record->container() ) AND $record::canPrefix( NULL, $record->container() ) )}}
        <span {{if !$record->prefix()}}class='ipsHide'{{endif}} {{if ( $record->canEdit() AND $record::canTag( NULL, $record->container() ) AND $record::canPrefix( NULL, $record->container() ) )}}data-editablePrefix{{endif}}>
				{template="prefix" group="global" app="core" params="$record->prefix( TRUE ), $record->prefix()"}
			</span>
        {{endif}}
        {{if $record->canEdit()}}
        <div class='ipsType_break ipsContained' data-controller="core.front.core.moderation">
            <span data-role="editableTitle" title='{lang="click_hold_edit"}'>{$record->_title}</span>
        </div>
        {{else}}
        <div class='ipsType_break ipsContained'>{$record->_title}</div>
        {{endif}}
    </h1>

</div>

{{if count( $record->tags() ) OR ( $record->canEdit() AND $record::canTag( NULL, $record->container() ) )}}
{template="tags" group="global" app="core" params="$record->tags(), FALSE, FALSE, ( $record->canEdit() AND $record::canTag( NULL, $record->container() ) ) ? $record->url() : NULL"}
{{endif}}

<article class='ipsContained ipsSpacer_top'>
    <div class='ipsClearfix'>
        <section class="ipsType_richText ipsType_normal" data-controller='core.front.core.lightboxedImages,guides.menu'>{$record->_content|raw}</section>

        {{if $record->editLine()}}
        {$record->editLine()|raw}
        {{endif}}

        {{if $records = $record->getReciprocalItems()}}
        {{$infoLineShown = FALSE;}}
        <br>
        {{foreach $records as $fieldId => $items}}
        <ul class="ipsList_inline ipsList_csv ipsList_noSpacing">
            {{foreach $items as $item}}
            <li>{{if ! $infoLineShown}}{{$infoLineShown=TRUE;}}{lang="records_linking_to_me" sprintf="$item::database()->recordWord(0,TRUE), $record::database()->recordWord(1)"}: {{endif}}<a href="{$item->url()}">{$item->_title}</a></li>
            {{endforeach}}
        </ul>
        {{endforeach}}
        {{endif}}
    </div>
    {{if $bottomFields = $record->customFieldsForDisplay('display_bottom')}}
    <hr class='ipsHr ipsClear ipsClearfix'>
    {{foreach $bottomFields as $fieldId => $fieldValue}}
    {{if $fieldValue}}
    {$fieldValue|raw}
    {{endif}}
    {{endforeach}}
    {{endif}}
    {{if $record instanceof \IPS\Content\Reputation and settings.reputation_enabled}}
    <div class='ipsPos_right'>
        {template="reputation" app="core" group="global" params="$record"}
        <br>
    </div>
    {{endif}}
    <hr class='ipsHr ipsClear ipsClearfix'>
    {{if $record->isFutureDate() or $record->canPin() or $record->canUnpin() or $record->canFeature() or $record->canUnfeature() or $record->canHide() or $record->canUnhide() or $record->canMove() or $record->canLock() or $record->canUnlock() or $record->canDelete()}}
    <a href='#elentryActions_menu' id='elentryActions' class='ipsButton ipsButton_light ipsButton_verySmall' data-ipsMenu>{lang="content_record_actions" sprintf="$record::database()->recordWord( 1, TRUE )"} <i class='fa fa-caret-down'></i></a>
    <ul id='elentryActions_menu' class='ipsMenu ipsMenu_auto ipsHide'>
        {{if $record->isFutureDate() and $record::canFuturePublish( NULL, $record->container() )}}
        <li class='ipsMenu_item'><a href='{$record->url('moderate')->csrf()->setQueryString( array( 'action' => 'publish' ) )}' data-confirm title='{lang="publish_now"}'>{lang="publish"}</a></li>
        {{endif}}
        {{if $record->canFeature()}}
        <li class='ipsMenu_item'><a href='{$record->url('moderate')->csrf()->setQueryString( array( 'action' => 'feature' ) )}' title='{lang="feature_title_record" sprintf="$record::database()->recordWord(1)"}'>{lang="feature"}</a></li>
        {{endif}}
        {{if $record->canUnfeature()}}
        <li class='ipsMenu_item'><a href='{$record->url('moderate')->csrf()->setQueryString( array( 'action' => 'unfeature' ) )}' title='{lang="unfeature_title_record" sprintf="$record::database()->recordWord(1)"}'>{lang="unfeature"}</a></li>
        {{endif}}
        {{if $record->canPin()}}
        <li class='ipsMenu_item'><a href='{$record->url('moderate')->csrf()->setQueryString( array( 'action' => 'pin' ) )}' title='{lang="pin_title_record" sprintf="$record::database()->recordWord(1)"}'>{lang="pin"}</a></li>
        {{endif}}
        {{if $record->canUnpin()}}
        <li class='ipsMenu_item'><a href='{$record->url('moderate')->csrf()->setQueryString( array( 'action' => 'unpin' ) )}' title='{lang="unpin_title_record" sprintf="$record::database()->recordWord(1)"}'>{lang="unpin"}</a></li>
        {{endif}}
        {{if $record->canHide()}}
        <li class='ipsMenu_item'><a href='{$record->url('moderate')->csrf()->setQueryString( array( 'action' => 'hide' ) )}' title='{lang="hide_title_record" sprintf="$record::database()->recordWord(1)"}' data-ipsDialog data-ipsDialog-title="{lang="hide"}">{lang="hide"}</a></li>
        {{endif}}
        {{if $record->canUnhide()}}
        <li class='ipsMenu_item'><a href='{$record->url('moderate')->csrf()->setQueryString( array( 'action' => 'unhide' ) )}' title='{{if $record->hidden() === 1}}{lang="approve_title_record" sprintf="$record::database()->recordWord(1)"}{{else}}{lang="unhide_title_record" sprintf="$record::database()->recordWord(1)"}{{endif}}'>{{if $record->hidden() === 1}}{lang="approve"}{{else}}{lang="unhide"}{{endif}}</a></li>
        {{endif}}
        {{if $record->canLock()}}
        <li class='ipsMenu_item'><a href='{$record->url('moderate')->csrf()->setQueryString( array( 'action' => 'lock' ) )}' title='{lang="lock_title_record" sprintf="$record::database()->recordWord(1)"}'>{lang="lock"}</a></li>
        {{endif}}
        {{if $record->canUnlock()}}
        <li class='ipsMenu_item'><a href='{$record->url('moderate')->csrf()->setQueryString( array( 'action' => 'unlock' ) )}' title='{lang="unlock_title_record" sprintf="$record::database()->recordWord(1)"}'>{lang="unlock"}</a></li>
        {{endif}}
        {{if $record->canMove()}}
        <li class='ipsMenu_item'><a href='{$record->url('move')->csrf()}' data-ipsDialog data-ipsDialog-title="{lang="move"}"  title='{lang="move_title_record" sprintf="$record::database()->recordWord(1)"}'>{lang="move"}</a></li>
        {{endif}}
        {{if $record->canDelete()}}
        <li class='ipsMenu_item'><a href='{$record->url('moderate')->csrf()->setQueryString( array( 'action' => 'delete' ) )}' data-confirm  title='{lang="delete_title_record" sprintf="$record::database()->recordWord(1)"}'>{lang="delete"}</a></li>
        {{endif}}
        {{if \IPS\Member::loggedIn()->modPermission('can_view_moderation_log')}}
        <li class='ipsMenu_sep'><hr></li>
        <li class="ipsMenu_item"><a href='{$record->url()->csrf()->setQueryString( array( 'do' => 'modLog' ) )}' data-ipsDialog data-ipsDialog-title='{lang="moderation_history"}'>{lang="moderation_history"}</a></li>
        {{endif}}
    </ul>
    {{endif}}
    {{if $record->canEdit()}}
    &nbsp;&nbsp;<a href='{$record->url('edit')->csrf()}' title='{lang="edit"}'>{lang="edit"}</a>
    {{endif}}
    {{if !\IPS\Member::loggedIn()->group['gbw_no_report'] }}
    &nbsp;&nbsp;<a href='{$record->url('report')}' data-ipsDialog data-ipsDialog-size='medium' data-ipsDialog-title="{lang="content_record_report" sprintf="$record::database()->recordWord( 1, TRUE )"}" data-ipsDialog-remoteSubmit data-ipsDialog-flashMessage="{lang="report_submit_success"}" title="{lang="content_record_report" sprintf="$record::database()->recordWord( 1, TRUE )"}">{lang="content_record_report" sprintf="$record::database()->recordWord( 1, TRUE )"}</a>
    {{endif}}
    {{if $record->canManageRevisions()}}
    &nbsp;&nbsp;<a href='{$record->url('revisions')}' title="{lang="content_view_revisions"}">{lang="content_view_revisions"}</a>
    {{endif}}
</article>

<br>
{{if $updateForm}}
<div class='ipsAreaBackground_light ipsPad'>
    <h2 class='ipsType_sectionHead'>{lang="cms_front_update_fields" sprintf="$record::database()->recordWord( 1 )"}</h2>
    <ul class='ipsForm ipsForm_vertical'>
        {$updateForm|raw}
    </ul>
</div>
{{endif}}

 

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

Categories - Templates categoryHeader, categoryFooter and categoryTable

 

Эти три шаблона управляют списком записей в категории. В моем примере это будет категория «Приложения», в которой я создал три страницы. Сначала посмотрите, как это выглядит сейчас, а затем удалите / замените код, как показано ниже.

Откройте шаблон categoryHeader и удалите все содержимое. Сохранить.

Откройте шаблон categoryFooter и удалите все содержимое. Сохранить.

Откройте шаблон categoryTable и добавьте следующий код:

Скрытый текст

<div class='ipsPad'  data-baseurl='{$table->baseUrl}' data-resort='{$table->resortKey}' data-controller='core.global.core.table{{if $table->canModerate()}},core.front.core.moderation{{endif}}'>
	{{if !count($rows)}}
		<div class="ipsPad">
			{lang="cms_no_records_to_show" sprintf="\IPS\cms\Databases::load( \IPS\cms\Databases\Dispatcher::i()->databaseId )->recordWord()"}
		</div>
	{{else}}
		<ol class='ipsDataList ipsDataList_zebra ipsClear cCmsListing {{foreach $table->classes as $class}}{$class} {{endforeach}}' id='elTable_{$table->uniqueId}' data-role="tableRows">
			{{foreach $rows as $row}}
				{{$idField = $row::$databaseColumnId;}}
				<li class="cDocs_row " data-rowid="{$row->$idField}">
					<h4 class="ipsType_sectionHead">
						<a href="{$row->url()}" class="ipsType_blendLinks">
							{$row->_title}
						</a>
					</h4>
					<div class="ipsType_normal ipsType_richText" data-ipstruncate="" data-ipstruncate-type="remove" data-ipstruncate-size="3 lines">
						{$row->truncated()|raw}
					</div>
				</li>
			{{endforeach}}
		</ol>
	{{endif}}
</div>

 

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

 

Плагин для бокового меню

Теперь мы готовы создать блок (плагин), который мы будем использовать как боковое меню. Боковое меню отображает категории и страницы в иерархическом порядке. Этот блок создается в AdminCP, и мы собираемся использовать для него собственный шаблон.

 

Блок с меню страницы

В AdminCP идем Pages -> Page management -> Blocks и выбираем Create new block.

create-new-block.png.b7eb891dc323721aaa753ab7cd665375.thumb.png.d903ba0891c7fe6ec0abb7f6926622b2.png

 

Щелкните Далее. На вкладке Details введите название блока и ключ шаблона docs_side_menu.

 

create-block-details.png.666829c85cc381ceb175df8458f70cbb.thumb.png.76b19b2575026dce4ed66c68ea2f03f7.png

 

Во вкладке Feed Configuration установите следующее:

create-block-feed-configuration.png.189254f5900a6d82b63b7e0cb0411417.thumb.png.76936e2c8c1df446ddf544db9d0994de.png

 

Здесь вы определяете количество записей в блоке. В более ранних версиях IPS можно было ввести 0 без ограничений. Начиная с IPS версии 4.4.10 он больше не работает, поэтому вам нужно ввести большое положительное число, например 100. Это число должно быть больше, чем количество всех категорий и всех страниц в категориях вместе, иначе меню будет обрезано.

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

 

Шаблон для бокового меню

«Магия» происходит на вкладке «Content». Здесь вы выбираете опцию Использовать как основу для настраиваемого шаблона. Под этой опцией появится редактор шаблонов, где вы вводите следующий код:

Скрытый текст



{{$recordClass = null;}}
{{$catClass = null;}}

{{if count($records)}}
{{$recordClass = get_class($records[0]);}}
{{$catClass    = '\IPS\cms\Categories' . $recordClass::database()->_id;}}
{{endif}}

{{$firstRecord = null;}}
{{$currentUrlPath = \IPS\Request::i()->url()->data['path'];}}

{{if count($records) and $catClass and count($catClass::roots())}}
<ul class="ipsList_reset cDocs" data-controller="docs.front.devDocs.main">
    {{foreach $catClass::roots() as $root}}
    <li>
        <h2>{$root->_title}</h2>
        {{if count($root->children())}}
        <ul class="ipsList_reset">
            {{foreach $root->children() as $child}}
            <li class="cDocs_closed">
                <h3 data-action="expandSection">{$child->_title}</h3>
                {{foreach $records as $record}}
                {{if $record->container()->_id == $child->_id}}
                <ul class="ipsList_reset">
                    {{if $firstRecord == null}}
                    {{$firstRecord = $record;}}
                    {{endif}}
                    <li>
                        <a {{if $currentUrlPath === $record->url()->data['path']}}class="cDocs_active"{{endif}} href="{$record->url()}">
                            {{if $record->customFieldDisplayByKey('shortened_title', 'raw')}}{$record->customFieldDisplayByKey('shortened_title', 'raw')}{{else}}{$record->_title}{{endif}}
                        </a>
                    </li>
                </ul>
                {{endif}}
                {{endforeach}}
            </li>
            {{endforeach}}
        </ul>
        {{endif}}
        <ul class="ipsList_reset">
            {{foreach $records as $record}}
            {{if $record->container()->_id == $root->_id}}
            {{if $firstRecord == null}}
            {{$firstRecord = $record;}}
            {{endif}}
            <li>
                <a {{if $currentUrlPath === $record->url()->data['path']}}class="cDocs_active"{{endif}} href="{$record->url()}">
                    {{if $record->customFieldDisplayByKey('shortened_title', 'raw')}}{$record->customFieldDisplayByKey('shortened_title', 'raw')}{{else}}{$record->_title}{{endif}}
                </a>
            </li>
            {{endif}}
            {{endforeach}}
        </ul>
    </li>
    {{endforeach}}
</ul>
{{endif}}

{{if $recordClass and \IPS\cms\Pages\Page::$currentPage and (string) \IPS\cms\Pages\Page::$currentPage->url() == (string) \IPS\Request::i()->url()}}
{{if $firstRecord}}
{{\IPS\Output::i()->redirect($firstRecord->url(), '', 302);}}
{{else}}
{{\IPS\Output::i()->redirect(\IPS\Http\Url::internal(''), '', 302);}}
{{endif}}
{{endif}}

 

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

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

 

Вставьте меню на страницу

Чтобы добавить блок на страницу, перейдите в Pages-> Page management -> Pagesв AdminCP и щелкните значок карандаша, чтобы отредактировать документы страницы. Перейдите на вкладку Content. Здесь вы можете видеть, что база данных уже была добавлена на страницу через идентификатор базы данных. Это произошло автоматически, когда мы создали страницу во время создания базы данных.

Замените содержимое страницы следующим кодом:

Скрытый текст


<div class="ipsBox ipsPad">
<div class="ipsColumns ipsColumns_collapsePhone" id="elDocs_columns">
  {{if \IPS\Request::i()->do !='edit' and \IPS\Request::i()->do !='form'}}
	<div class="ipsColumn ipsColumn_wide">
		{block="docs_side_menu"}
	</div>
  {{endif}}
	<div class="ipsColumn ipsColumn_fluid">
		<div class="ipsPad ipsSpacer_top">
          <div class="ipsSpacer_top">
			{database="docs"}
          </div>
		</div>
	</div>
</div>
</div>

 

Найдите время и посмотрите на этот простой HTML-код страницы. Здесь мы используем ключи для базы данных и блок с меню. Они вставляются в два столбца с использованием структуры IPS CSS. IF-запрос гарантирует, что меню исчезнет при редактировании страницы, иначе у вас не будет достаточно места для редактирования содержимого. Единственное, чего нам здесь не хватает, - это CSS и JavaScript.

 

Добавление CSS файла

В вашем AdminCP перейдите на Pages-> Page management -> Template и нажмите New. Выберите Добавить файл CSS. Назовите его docs и добавьте в существующую группу CSS. Если бы у нас было несколько файлов CSS, на этом этапе было бы полезно создать новую группу.

Добавьте следующий CSS в docs.css:

Скрытый текст



#ipsLayout_mainArea {
  padding-right: 0;
}

.ipsType_sectionTitle,
.ipsWidget.ipsWidget_vertical .ipsWidget_title {
  background: #b63848;
}

/* Docs */
.cDocs {
  padding-top: 30px;
}

.cDocs h2 {
  font-size: 18px;
  font-weight: 600;
  border-bottom: 1px solid rgba(0,0,0,0.1);
  padding: 6px 10px 6px 0;
  margin-left: 10px;
  margin-bottom: 8px;
  line-height: 1.3;
}

.cDocs > li {
  padding-left: 10px;
}

.cDocs li {
  line-height: 1.6;
  padding-left: 10px;
  margin-bottom: 2px;
}

.cDocs ul ul {
  margin-left: -13px;
  padding-left: 15px;
  border-left: 1px solid rgba(0,0,0,0.075);
}
  
  .ipsJS_has .cDocs .cDocs_closed ul {
    display: none;
  }
  .ipsJS_has .cDocs .cDocs_open ul,
  .ipsJS_none .cDocs .cDocs_closed ul {
    display: block;
  }

.cDocs h3 {
  font-weight: 400;
  margin: 0;
  padding-left: 0;
  position: relative;
  cursor: pointer;
}

  .cDocs .cDocs_closed h3:before,
  .cDocs .cDocs_open h3:before {
    font-family: 'FontAwesome';
    font-size: 15px;
    position: absolute;
    left: -15px;
    top: 0;
  }
  .ipsJS_has .cDocs .cDocs_closed h3:before {
    content: '\f105';
  }
  .ipsJS_has .cDocs .cDocs_open h3:before,
  .ipsJS_none .cDocs .cDocs_closed h3:before {
    content: '\f107';
    left: -17px;
  }

a.cDocs_active {
  color: #3d6594;
  font-weight: bold;
}

/* ROWS */
.cDocs_row {
  border-bottom: 1px solid rgba(0,0,0,0.1);
  padding: 20px 0;
}

.cDocs_row .ipsType_sectionHead {
  margin-bottom: 5px;
}

#elDocs_columns .ipsPageHeader {
  margin-top: 0;
}

 

Чтобы включить этот CSS на страницу для базы данных, перейдите в Pages -> Page Management -> Page в вашем AdminCP и откройте страницу с документацией для редактирования. Перейдите на вкладку Page Includes и выберите CSS / Docs.css.

include-css-page.png.01dfb6b26d3431597834656869ee5024.thumb.png.cea0e699676c6595d392b23995b027a3.png

 

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

 

Добавление Javascript

 

В AdminCP перейдите в Pages-> Page management -> Templates еще раз и нажмите New. Выберите Add JavaScript file и введите имя docs. Используйте группу JS. Если вам нужно больше файлов, вы можете создать для них дополнительную группу, чтобы хранить их отдельно от других файлов.

Откройте файл и добавьте следующий контент:

Скрытый текст
/** * IPS Social Suite 4 * (c) 2013 Invision Power Services - http://www.invisionpower.com * * ips.devDocs.js - Dev docs JS controller * * Author: Rikki Tissier */ ; (function($, _, undefined) { "use strict"; ips.controller.register('docs.front.devDocs.main', { initialize: function() { this.on('click', '[data-action="expandSection"]', this.toggleSection); this.setup(); }, setup: function() { // Do we have an active item? var active = this.scope.find('.cDocs_active'); if (active.length) { var section = active.closest('.cDocs_closed'); section.toggleClass('cDocs_closed', false).toggleClass('cDocs_open', true); } }, toggleSection: function(e) { var h3 = $(e.currentTarget); var li = h3.closest('li'); var expanded = li.is('.cDocs_open'); li.toggleClass('cDocs_open', !expanded).toggleClass('cDocs_closed', expanded); } }); }(jQuery, _));


/**
 * IPS Social Suite 4
 * (c) 2013 Invision Power Services - http://www.invisionpower.com
 *
 * ips.devDocs.js - Dev docs JS controller
 *
 * Author: Rikki Tissier
 */
;
(function($, _, undefined) {
    "use strict";

    ips.controller.register('docs.front.devDocs.main', {

        initialize: function() {
            this.on('click', '[data-action="expandSection"]', this.toggleSection);
            this.setup();
        },

        setup: function() {
            // Do we have an active item?
            var active = this.scope.find('.cDocs_active');

            if (active.length) {
                var section = active.closest('.cDocs_closed');
                section.toggleClass('cDocs_closed', false).toggleClass('cDocs_open', true);
            }
        },

        toggleSection: function(e) {
            var h3 = $(e.currentTarget);
            var li = h3.closest('li');
            var expanded = li.is('.cDocs_open');

            li.toggleClass('cDocs_open', !expanded).toggleClass('cDocs_closed', expanded);
        }
    });
}(jQuery, _));

 

Как видите, здесь мы используем код, уже использованный в собственной документации IPS. Это, кстати, еще одно преимущество Pages. Если что-то не работает, вы можете получить поддержку непосредственно от IPS и не полагаться на сторонних поставщиков.

Последний шаг - встроить JavaScript на страницу документации. Это делается так же, как и в CSS выше. В AdminCP перейдите в Страницы -> Управление страницами -> Страница и откройте страницу с документацией для редактирования. Перейдите на вкладку Включаемые страницы и нажмите JS / Docs.js.

Выполнено. Теперь только активная категория в блоке меню раскрывается, а остальные расширяются, щелкая по ним.

Вы можете видеть, что здесь было собрано много HTML, CSS, JavaScript и немного PHP. Это простая версия, которую вы можете настраивать, расширять и развивать дальше.

  • Спасибо 1
 Share

User Feedback

Recommended Comments

There are no comments to display.

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

Privacy Policy We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.