Jump to content
IPS Invision Community
Sign in to follow this  

Блок с вкладками последних сообщений,тем и т.д.


Description

Блок с вкладками последних тем, сообщений и чего угодно.

1.png.137ab94c7ebbd9f0540bd0ceeb820c34.png

2.png.c3426d6e72eb9a1425d14e608863ebd6.png

Строго не судите делал уже давно, тогда нужно было что то по быстрому придумать. Хорошо бы это всё допилить до ума, но времени на это мало.

И так нам понадобится приложение Pages, изменения в шаблоне последних тем row

  • заходим в приложение Pages и создаём категорию для будущих блоков
  • создаём основной блок я к примеру что бы не путаться назвал его(Вкладки с табами) кому как это лично ваше решение.

3.png.e7279f33c3bec7725360f267bdb50c33.png

  • ключ указываете какой угодно
  • в поле контента
<!-- The tab bar -->
                        <div class="ipsTabs ipsTabs_small ipsTabs_stretch ipsClearfix" id="blocksTab_01" data-ipstabbar="" data-ipstabbar-contentarea="#blocksTab_01_content">
                           <a href='#blocksTab_01' data-action='expandTabs'><i class='icon-caret-down'></i></a>
                           <ul role='tablist'>
                              <li role='presentation'>
                                 <a href="#ipsTabs_1" role='tab' id='blocksTab_01_forums' class='ipsTabs_item ipsType_center' aria-selected="true"><i class="fa fa-comments" aria-hidden="true"></i> Последние сообщения</a>
                              </li>
                              <li role='presentation'>
                                 <a href="#ipsTabs_2" id='blocksTab_01_orion' role='tab' class='ipsTabs_item ipsType_center'><i class="fa fa-commenting-o" aria-hidden="true"></i> Последние темы</a>
                              </li>
                              <li role='presentation'>
                                 <a href="#ipsTabs_3" id="blocksTab_01_popular" role='tab' class='ipsTabs_item ipsType_center'><i class="fa fa-comments-o" aria-hidden="true"></i> Последние вопросы</a>
                              </li>
                              <li role='presentation'>
                                 <a href="#ipsTabs_4" id="blocksTab_01_viewtop" role='tab' class='ipsTabs_item ipsType_center'><i class="fa fa-eye" aria-hidden="true"></i> Популярные темы</a>
                              </li>
                              <li role='presentation'>
                                 <a href="#ipsTabs_6" id="blocksTab_01_newfiles" role='tab' class='ipsTabs_item ipsType_center'><i class="fa fa-cloud-download" aria-hidden="true"></i> Последние файлы</a>
                              </li>                             
                           </ul>
                        </div>

                        <!-- The tab panel wrapper -->
                        <div id="blocksTab_01_content" class="ipsTabs_panels scrollblockF">
                           <!-- The tab 1 -->
                           <div id="ipsTabs_blocksTab_01_blocksTab_01_forums_panel" class="ipsTabs_panel" style="" aria-hidden="" animating="false">
                              {block="Block_A"}
                           </div>
                           <!-- The tab 2 -->
                           <div id="ipsTabs_blocksTab_01_blocksTab_01_orion_panel" class="ipsTabs_panel" style="" aria-hidden="" animating="false">
                              {block="Block_B"}
                           </div>
                           <!-- The tab 3 -->  
                           <div id="ipsTabs_blocksTab_01_blocksTab_01_popular_panel" class="ipsTabs_panel" style="" aria-hidden="" animating="false">
                              {block="Block_C"}
                           </div>
                           <!-- The tab 4 -->
                           <div id="ipsTabs_blocksTab_01_blocksTab_01_viewtop_panel" class="ipsTabs_panel" style="" aria-hidden="" animating="false">
                              {block="Block_D"}
                           </div>  
                           <!-- The tab 6 -->  
                           <div id="ipsTabs_blocksTab_01_blocksTab_01_newfiles_panel" class="ipsTabs_panel" style="" aria-hidden="" animating="false">
                              {block="Block_E"}
                           </div> 
                        </div>
  • далее делаем первый блок с последними сообщениями в этой же категории
  • Тип: Плагин
  • Открываем список: Форумы > Лента сообщений

4.png.3c865f62cc2186916f7d769466076b07.png

  • указываете ключ: Block_A

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

  • настраиваете конфигурацию 
  • во вкладке контент выбираете "Использовать в качестве основы для своего настраиваемого шаблона"
  • сам код
{{if !empty( $comments ) }}
	{{if $orientation == 'vertical'}}
		<div class=' ipsPad_half'>
			<ul class=' ipsDataList_reducedSpacing'>
				{{foreach $comments as $comment}}
					<li class='ipsDataItem'>
						<div class='ipsDataItem_main'>
							<div class='ipsType_break ipsContained'><a href="{$comment->url()}" title='{lang="view_this_topic" sprintf="$comment->item()->title"}' class='ipsType_medium ipsTruncate ipsTruncate_line'>{$comment->item()->title}</a></div>
							<p class='ipsType_reset ipsType_light ipsType_medium ipsType_blendLinks'>{lang="byline_nodate" htmlsprintf="$comment->author()->link()"} &middot; <a href='{$comment->item()->url()->setQueryString( array( 'do' => 'findComment', 'comment' => $comment->pid ) )}' class='ipsType_blendLinks'>{$comment->dateLine()|raw}</a></p>
							<div class='ipsType_medium ipsType_textBlock ipsType_richText ipsType_break ipsContained ipsSpacer_top ipsSpacer_half' data-ipsTruncate data-ipsTruncate-type='remove' data-ipsTruncate-size='{{if $orientation == 'vertical'}}6 lines{{else}}2 lines{{endif}}' data-ipsTruncate-watch='false'>
								{$comment->truncated( TRUE, NULL )|raw}
							</div>
						</div>
					</li>
				{{endforeach}}
			</ul>
		</div>
	{{else}}

				{{foreach $comments as $comment}}

<ul id="blocksTab_01_content" class="ipsTabs_panels tabPanes fsp">
<div class="tabGroup-content"> 
<ul class="content tabGroup tabGroup--threads has-custom-limit ipsTabs_panel">              
<li class="item item--thread is-prefix40 thread--538408">
<i class="fa fa-bell-o" aria-hidden="true"></i>
<span class="title">
<span class="label label--leanLightPink2" dir="auto"><a href="{$comment->url()}" title='{lang="view_this_topic" sprintf="$comment->item()->title"}' class='ipsDataItem_title ipsTruncate ipsTruncate_line'>{wordbreak="$comment->item()->title"}</a></span>
</span>
<span class="postDate contentRow-minor">
<a href='{$comment->item()->url()->setQueryString( array( 'do' => 'findComment', 'comment' => $comment->pid ) )}' class='ipsType_blendLinks'>{$comment->dateLine()|raw}</a>
</span>
<span class="username">
<span class="usernameoverflowed">{lang="byline" htmlsprintf="$comment->author()->link()"}
 </span>
</span>
</li>
</ul>
</div>
 </ul> 
  
            
								{{if member.modPermission('mod_see_warn') and $comment->warning}}
									{template="commentWarned" group="global" app="core" params="$comment"}
								{{endif}}

				{{endforeach}}

	{{endif}}
{{endif}}

Сохраняем.

Далее нужно сделать блок последних тем. Всё делается так же как и блок Последних сообщений

  • создаём блок Последних тем в этой же категории
  • Тип: Плагин
  • Открываем список: Форумы > Лента тем

5.png.5c951e5ffc8e82537b0508d1a78f92ae.png

 

  • указываете ключ: Block_B
  • настраиваете конфигурацию 
  • во вкладке контент выбираете "Использовать в качестве основы для своего настраиваемого шаблона" тут мало что изменял
  • сам код
{{if !empty( $topics ) }}
{{if $orientation == 'vertical'}}
		<div class='ipsPad_half ipsWidget_inner'>
			<ul class='ipsDataList ipsDataList_reducedSpacing'>
				{{foreach $topics as $topic}}
					<li class='ipsDataItem{{if $topic->unread()}} ipsDataItem_unread{{endif}}{{if $topic->hidden()}} ipsModerated{{endif}}'>
						<div class='ipsDataItem_icon ipsPos_top'>
							{template="userPhoto" group="global" app="core" params="$topic->author(), 'tiny'"}
						</div>
						<div class='ipsDataItem_main cWidgetComments'>
							<div class="ipsCommentCount ipsPos_right {{if ( $topic->posts - 1 ) === 0}}ipsFaded{{endif}}" data-ipsTooltip title='{lang="replies_number" pluralize="$topic->posts - 1"}'>{expression="\IPS\Member::loggedIn()->language()->formatNumber( $topic->posts - 1 )"}</div>
							
							<div class='ipsType_break ipsContained'>
								{{if $topic->mapped('featured') || $topic->hidden() === -1 || $topic->hidden() === 1}}
									{{if $topic->hidden() === -1}}
										<span><span class="ipsBadge ipsBadge_icon ipsBadge_small ipsBadge_warning" data-ipsTooltip title='{$topic->hiddenBlurb()}'><i class='fa fa-eye-slash'></i></span></span>
									{{elseif $topic->hidden() === 1}}
										<span><span class="ipsBadge ipsBadge_icon ipsBadge_small ipsBadge_warning" data-ipsTooltip title='{lang="pending_approval"}'><i class='fa fa-warning'></i></span></span>
									{{endif}}
									{{if $topic->mapped('featured')}}
										<span><span class="ipsBadge ipsBadge_icon ipsBadge_small ipsBadge_positive" data-ipsTooltip title='{lang="featured"}'><i class='fa fa-star'></i></span></span>
									{{endif}}
								{{endif}}							
								<a href="{$topic->url()->setQueryString( 'do', 'getNewComment' )}" title='{lang="view_this_topic" sprintf="$topic->title"}' class='ipsDataItem_title'>{$topic->title}</a>
							</div>
							<p class='ipsType_reset ipsType_medium ipsType_blendLinks ipsContained'>
								<span>{lang="byline_nodate" htmlsprintf="$topic->author()->link()"}</span><br>
								<span class='ipsType_light'>{lang="topic_started_date" htmlsprintf="\IPS\DateTime::ts( $topic->mapped('date') )->html()"}</span>
							</p>
						</div>
					</li>
				{{endforeach}}
			</ul>
		</div>
	{{else}}
		<div class='ipsWidget_inner'>
			<ul class='ipsDataList'>
				{{foreach $topics as $topic}}
					{template="row" group="global" app="forums" location="front" params="NULL, NULL, $topic, FALSE"}
				{{endforeach}}
			</ul>
		</div>
	{{endif}}
{{endif}}

Сохраняем.

  • открываете список стилей
  • редактирование HTML и CSS
  • в шаблонах находите:  forums > front > forums > global > row
  • заменяем всё на;
{{$idField = $topic::$databaseColumnId;}}
{{$iPosted = isset( $table->contentPostedIn ) ? $table->contentPostedIn : ( $table AND method_exists( $table, 'container' ) AND $topic->container() !== NULL ) ? $topic->container()->contentPostedIn() : array();}}
 <ul id="blocksTab_01_content" class="ipsTabs_panels tabPanes fsp">
<div class="tabGroup-content"> 
<ul class="content tabGroup tabGroup--threads has-custom-limit ipsTabs_panel">              
<li class="item item--thread is-prefix40 thread--538408">
<i class="fa fa-bell-o" aria-hidden="true"></i>
<span class="title">
<span class="label label--leanLightPink2" dir="auto">
  
  
<!--{{if $topic->mapped('pinned') || $topic->mapped('featured') || $topic->hidden() === -1 || $topic->hidden() === 1}}
				{{if $topic->hidden() === -1}}
					<span><span class="ipsBadge ipsBadge_icon ipsBadge_small ipsBadge_warning" data-ipsTooltip title='{$topic->hiddenBlurb()}'><i class='fa fa-eye-slash'></i></span></span>
				{{elseif $topic->hidden() === 1}}
					<span><span class="ipsBadge ipsBadge_icon ipsBadge_small ipsBadge_warning" data-ipsTooltip title='{lang="pending_approval"}'><i class='fa fa-warning'></i></span></span>
				{{endif}}							
				{{if $topic->mapped('pinned')}}
					<span><span class="ipsBadge ipsBadge_icon ipsBadge_small ipsBadge_positive" data-ipsTooltip title='{lang="pinned"}'><i class='fa fa-thumb-tack'></i></span></span>
				{{endif}}
				{{if $topic->mapped('featured')}}
					<span><span class="ipsBadge ipsBadge_icon ipsBadge_small ipsBadge_positive" data-ipsTooltip title='{lang="featured"}'><i class='fa fa-star'></i></span></span>
				{{endif}}
			{{endif}}
			{{if $topic->prefix()}}
				<span>{template="prefix" group="global" app="core" params="$topic->prefix( TRUE ), $topic->prefix()"}</span>
			{{endif}}-->
			
			<span class='ipsType_break ipsContained'>
				<a href='{$topic->url()}' {{if $topic->canView()}}data-ipsHover data-ipsHover-target='{$topic->url()->setQueryString('preview', 1)}' data-ipsHover-timeout='1.5' {{endif}}>
					{{if $topic->isQuestion()}}
						<strong class='ipsType_light'>{lang="question_title"}:</strong>
					{{endif}}
					{$topic->mapped('title')}
				</a>

				{{if $topic->commentPageCount() > 1}}
					{$topic->commentPagination( array(), 'miniPagination' )|raw}
				{{endif}}
			</span>  
  
  
  </span>
</span>
<span class="postDate contentRow-minor"><a href='{$topic->url( 'getLastComment' )}' title='{lang="get_last_post"}' class='ipsType_blendLinks'>
				{{if $topic->mapped('last_comment')}}{datetime="$topic->mapped('last_comment')"}{{else}}{datetime="$topic->mapped('date')"}{{endif}}
			</a></span>
<span class="username">
<span class="usernameoverflowed">{lang="byline" htmlsprintf="$topic->author()->link()"}</span>
</span>
</li>
</ul>
</div>
 </ul>  

Префиксы я закоментил так как не настраивал с ними, можете сами настроить там не сложно.

Блок с последними файлами делается таким же способом как и с Последними сообщениями. Заменяется код и готова.

Сам код для блока

<div class='ipsWidget_inner'>
	{{if $orientation == 'vertical'}}
		<div class='ipsPad_half'>
			{{if count( $files )}}
				<ul class='ipsDataList ipsDataList_reducedSpacing'>
					{{foreach $files as $file}}
{template="gl_fileF" group="browse" app="downloads" params="$file, $orientation"}
					{{endforeach}}
				</ul>
			{{else}}
				<p class='ipsType_reset'>{lang="no_new_files"}</p>
			{{endif}}
		</div>
	{{else}}
		{{if count( $files )}}

					{{foreach $files as $idx => $file}}
<ul id="blocksTab_01_content" class="ipsTabs_panels tabPanes fsp">
<div class="tabGroup-content"> 
<ul class="content tabGroup tabGroup--threads has-custom-limit ipsTabs_panel">              
<li class="item item--thread is-prefix40 thread--538408">
<i class="fa fa-angle-right" aria-hidden="true"></i>
<span class="title">
<span class="label label--leanLightPink2" dir="auto">
				<a href='{$file->url()}' title='{lang="view_this_file" sprintf="$file->name"}' data-ipstooltip='{$file->truncated()|raw}'>{$file->name}</a></span>
</span>
<span class="postDate contentRow-minor">{{if $file->updated == $file->submitted}}{lang="submitted"} {datetime="$file->submitted" lowercase="true"}{{else}}{lang="updated"} {datetime="$file->updated" lowercase="true"}{{endif}}</span>
<span class="username">
<span class="usernameoverflowed">{lang="byline_nodate" htmlsprintf="$file->author()->link()"}</span>
</span>
</li>
</ul>
</div>
 </ul> 
					{{endforeach}}

		{{else}}
			<p class='ipsType_reset'>{lang="no_new_files"}</p>
		{{endif}}
	{{endif}}
</div>
Цитата

Таким образом вкладки с темами можно настраивать как угодно в плане конфигурации.

 

  • Нравится 1
  • Спасибо 2


Recommended Comments

Автору ОГРОМНЫЙ респект за такой мануал.

  • Спасибо 1

Share this comment


Link to comment
Share on other sites

А по поводу того что бы добавить туда "Последние Видео" нет инфы?

Share this comment


Link to comment
Share on other sites

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...
Вверх