Сетка сателитов и парсер контента на MODX Revo (часть 5)

03 марта 2016, 21:30




В этой статье мы рассмотрим как можно сделать симпатичную сетку сателитов с разными дизайнами. Советую конечно купить вёрстку понравившихся сайтов на http://themeforest.net/ в HTML и CSS версии свёрстанных на Bootstrap 3, тогда сайт у нас будет сразу адаптивным и поисковики будут намного эфективней индексировать странички. Можно конечно рипнуть понравившийся шаблон с помощью програмки Cyotek WebCopy, но это на свой страх и риск.

Итак приступим.

Для удобства я для себя накатал простенький компонент под названием Satellite в который включил такие разделы как видео с Youtube и панель сайтов, аналог PR-CY панели. Табличка для Youtube под названием modx_satellite_youtube простая и имеет следующие поля в базе:

id, video, title, description, context

В video мы будем парсить ссылки, в title — заголовок, в description — описание и наконец в context контекст нашего сайта для которого будем ваять контент. Нам нужна структура, чтобы всё у нас было по папочкам. Для этого создайте в Категориях папку Satellite, а в неё создайте категорию с url'ом вашего сайта, чтобы в конечном счёте у нас получилась примерно такая структура. За пример возьмём один из сателитов babysecret34.ru, который находится на этой же установке MODX, что и наше сообщество:




Как видим из скриншота, в категории Satellite -> babysecret34.ru у нас расположены шаблоны в начале которых большими буквами написано BABYSECRET34.RU: и после двоеточия название шаблона по предназначению. По такой же схеме делаем чанки:




А вот как выглядит чанк tpl.BABYSECRET34.RU.head:

<title>[[!pdoTitle]] – [[++site_name]]</title>
<meta name="description" content="[[*description]]">
<meta charset="[[++modx_charset]]">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="author" content="SEQUEL.ONE">
<meta name='yandex-verification' content='[[++yandex_webmaster_code]]' />
<meta name="google-site-verification" content="[[++google_website_code]]" />
<base href="[[++site_url]]" />
<link href='http://fonts.googleapis.com/css?family=Signika+Negative:400,600|Nunito:400,700,300' rel='stylesheet' type='text/css'>
<link rel="shortcut icon" href="[[++msat_images]]favicon.ico">
<link rel="alternate" type="application/rss+xml" title="RSS-лента [[++site_name]]" href="[[~[[*id]]]]">
[[MinifyX?
	&minifyCss=`1`
	&registerCss=`1`
	&cssSources=`
		assets/sites/babysecret34.ru/style.css,
		assets/sites/babysecret34.ru/screen.css,
		assets/sites/babysecret34.ru/custom.css,
		assets/sites/babysecret34.ru/rs-plugin/css/settings.css
    `
	&minifyJs=`1`
	&registerJs=`1`
	&jsSources=`
	    assets/sites/babysecret34.ru/js/main.js,
		assets/sites/babysecret34.ru/js/libs/modernizr.min.js,
        assets/sites/babysecret34.ru/js/libs/respond.min.js,					 
        assets/sites/babysecret34.ru/js/jquery.spritely.min.js,
        assets/sites/babysecret34.ru/js/jquery.easing.min.js,
        assets/sites/babysecret34.ru/js/general.js,
        assets/sites/babysecret34.ru/js/hoverIntent.js,
        assets/sites/babysecret34.ru/rs-plugin/js/jquery.themepunch.plugins.min.js,
        assets/sites/babysecret34.ru/rs-plugin/js/jquery.themepunch.revolution.min.js
	`
]]

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
Как можно заметить в корне у нас есть папки с вложеностью:
assets
--sites
----babysecret34.ru

и в этой папке assets/sites/babysecret34.ru/ у нас храняться файлы нашего сайта. Так же вы можете заметить такой плейсхолдер [[++msat_images]], мы создали его через системные настройки:




Как видим на скриншоте, у нас появились уникальные системные настройки, которые путь до нужной папки подставляют из плейсхолдера [[++http_host]] мы видели такую системную настройку в настройках контекста. Главное в папке /assets/sites/ создавать папку с вашим контекстом, который по умолчанию должен являться адресом.

А вот таким образом мы выводим видео с YouTube, которые находятся у нас в базе:

<div class="clearfix gallery">
[[!pdoPage?
    &class=`Youtube`
    &tpl=`tpl.BABYSECRET34.RU.youtubelist`
    &element=`YouTubeList`
    &limit=`15`
    &context=`[[++site_url]]`
    &where=`{"context:>":[[++site_url]]}`
    &tplPage=`@INLINE <a class="page-numbers" href="[[+href]]">[[+pageNo]]</a>`
    &tplPageWrapper=`@INLINE [[+first]][[+prev]][[+pages]][[+next]][[+last]]`
    &tplPageActive=`@INLINE <span class="page-numbers page_current">[[+pageNo]]</span>`
    &tplPageFirst=`@INLINE <a class="page-numbers" href="[[+href]]"><span>«</span></a>`
    &tplPageLast=`@INLINE <a class="page-numbers" href="[[+href]]"><span>»</span></a>`
    &tplPagePrev=`@INLINE <a class="page_prev" href="[[+href]]"><span>«</span></a>`
    &tplPageNext=`@INLINE <a class="page_next" href="[[+href]]"><span>»</span></a>`
    &tplPageSkip=`@INLINE <span>...</span>`
    &tplPageFirstEmpty=`@INLINE <span class="page-numbers page_current">«</span>`
    &tplPageLastEmpty=`@INLINE <span class="page-numbers page_current">»</span>`
    &tplPagePrevEmpty=`@INLINE <span class="page-numbers page_current"><</span>`
    &tplPageNextEmpty=`@INLINE <span class="page-numbers page_current">></span>`
]]
</div>
<div class="tf_pagination pagination">
    <div class="inner pagination">
        [[!+page.nav]]		                
    </div>
</div>
Для этого нужно установить pdoTools и создать сниппет YouTubeList с таким содержимым:

<?php
$path = MODX_CORE_PATH . 'components/pdotools/model/pdotools/';
$pdoFetch = $modx->getService('pdofetch','pdoFetch', $path, $scriptProperties);
$pdoFetch->setConfig($scriptProperties);
return $pdoFetch->run();
а чанк tpl.BABYSECRET34.RU.youtubelist

<div class="gallery_item">
<a href="[[~507]][[+id]]/"><img width="260" src="https://i1.ytimg.com/vi/[[+video]]/mqdefault.jpg" alt=""/><span></span></a>
</div>
Для работы ссылок в виде /video/234/ нам нужно установить Virtual Page, или же UserProfile2, который автоматом ставит этот компонент.

Для отображения видео нужно создать снипет YouTube:

<?php
// YoutubeVideo by ncrossland
// Version 2.1
// Based on version 1.0 by Banzai - http://www.tattoocms.it
// Based on FlashVideo by Mark & Bugaev
//
// Changes from 2.0
// * check if function defined so it may be used more than once on same page

// Changes from 1.0:
// * Rewritten from scratch
// * Optionally uses SWFObject javascript for version detection
// * Uses best practice embedding code (from SWFObject)
// * Can be supplied a YouTube URL, and extracts the necessary ID from it
// * More control over appearance - e.g. size (although it only affects the container, not the video size), "no flash" message.
// * Full control over player parameters -- see http://code.google.com/apis/youtube/player_parameters.html

// Usage:

// As a minimum, the snippet requires a YouTube ID
// [[YouTube? &id=`towd9vZWDJg`]]

// It can also be supplied with a YouTube page URL, which will be parsed to extract the ID
// Note that URLs sent as snippet parameters must be URL encoded first
// If you're doing it to a template variable, this can be done using the latest version of PHX
// [[YouTube? &url=`[*video:urlencode*]`]]


/* Parameters

Required - either one or the other must be supplied
--------
&id - YouTube ID of the video you want to play
&url - YouTube URL of the video you want to play

Optional
--------
&width - width in pixels (default 425)
&height - height in pixels (default 350)
&js - Should we use Javascript, e.g. to detect the correct Flash version is installed? (boolean, default 1)
&swfobject_url - The location of the SWFobject script - defaults to /assets/js/swfobject/swfobject.js
&swfobject_express_url - The location of the SWFObject express installer - defaults to /assets/js/swfobject/expressInstall.swf
&missing - The message to display when the user does not have Flash (accepts HTML, defaults to "<p>This video requires the free Flash plugin.</p>")

&related - Show related videos? (boolean, default 1)
&autoplay - Sets whether or not the initial video will autoplay when the player loads (boolean, default 0)
&loop - Sets whether video will loop (boolean, default 0)
&disablekb - Disable keyboard controls (boolean, default 0)
&egm - Enhanced Genie Menu - Causes menu ti appear when user's mouse enters video instead of clicking menu button (boolean, default 0)
&border - Display a border around the video player, the colors can be set with color paramaters (boolean, default 0)
&color1, &color2 - Hexadecimal color for the border colour and video control bar/secondary border color respectively (hex)

*/

//SETTINGS
$width = isset($width)?$width:100;
$height = isset($height)?$height:350;

// YouTube API settings
$related = isset($related)?$related:true;
$autoplay = isset($autoplay)?$autoplay:false;
$loop = isset($loop)?$loop:false;
$disablekb = isset($disablekb)?$disablekb:false;
$egm = isset($egm)?$egm:false;
$border = isset($border)?$border:false;
$color1 = isset($color1)?$color1:'';
$color2 = isset($color2)?$color2:'';

// Javascript
$js = isset($js)?$js:true;
$swfobject_url = isset($swfobject_url)?$swfobject_url:'/assets/js/swfobject/swfobject.js';
$swfobject_express_url = isset($swfobject_url)?$swfobject_url:'/assets/js/swfobject/expressInstall.swf';
$missing = isset($missing)?$missing:'<p>This video requires the free Flash plugin.</p>';

// If a URL is supplied, work out the ID part of it
if (isset($url) && $ytid = (getIdFromUrl(urldecode($url))) ) {
    // $ytid is already set
} else if (isset($id)) {
    $ytid =  $id;
} else {    // No URL or ID supplied
    return; 
}

// Ensure the "related" value is appropriate for the YouTube URL
$related_val = ($related)?'&rel=1':'&rel=0';
$autoplay_val = ($autoplay)?'&autoplay=1':'&autoplay=0';
$loop_val = ($loop)?'&loop=1':'&loop=0';
$disablekb_val = ($disablekb)?'&disablekb=1':'&disablekb=0';
$egm_val = ($egm)?'&egm=1':'&egm=0';
$border_val = ($border)?'&border=1':'&border=0';
$color1_val = (!empty($color1))?'&color1='.$color1:'';
$color2_val = (!empty($color2))?'&color2='.$color2:'';

// Construct the YouTube URL
$yturl =' http://www.youtube.com/v/'.$ytid.$related_val.$autoplay_val.$loop_val.$disablekb_val.$egm_val.$border_val.$color1_val.$color2_val.'&hl=en&theme=light&version=3';

// HTML template, based on cross-browser recommendation from SWFobject project
$html = '
    <object id="'.$ytid.'" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="'.$width.'" height="'.$height.'">
        <param name="movie" value="'.$yturl.'" />
        <!--[if !IE]>-->
        <object type="application/x-shockwave-flash" data="'.$yturl.'" width="'.$width.'" height="'.$height.'">
        <!--<![endif]-->
          '.$missing.'
        <!--[if !IE]>-->
        </object>
        <!--<![endif]-->
      </object>
';

$iframe = '
    <iframe width="100%" src="https://www.youtube.com/embed/'.$id.'" frameborder="0" allowfullscreen></iframe>
';

// If we want to use javascript to check Flash version, etc.
if ($js) {
    // Register the SWFObject script
    $modx->regClientStartupScript($swfobject_url);
    
    // Activate the content with JS
    $script = '
    <script type="text/javascript">
     swfobject.registerObject("'.$ytid.'", "8.0.0", "'.$swfobject_express_url.'");
    </script>
    ';
    $modx->regClientStartupScript($script);
}

return $iframe;



// A function to extract the youtube ID from a page URL. 
// It is in a funciton because parse_str sets variables based on input, so we want to do this within the local
// scope of the funtion, rather than globally
if (!function_exists('getIdFromUrl')) {
    function getIdFromUrl($url) {
        $url_parts = parse_url($url);
        parse_str($url_parts['query']);
        if (isset($v)) {
            return $v;    
        } else {
            return false;   
        }
    }
}
Статья носит ознакомительный характер. Статья сырая, для удобочитаемого руководства привиду в ближайшее время. Пишите комментарии, буду рад любой критике.

Предыдущие статьи:
Сетка сателитов и парсер контента на MODX Revo (часть 1)
Сетка сателитов и парсер контента на MODX Revo (часть 2)
Сетка сателитов и парсер контента на MODX Revo (часть 3)
Сетка сателитов и парсер контента на MODX Revo (часть 4)
SEQUEL.ONE
1    594    0
+1

Комментарии ()

    Вы должны авторизоваться, чтобы оставлять комментарии.

    Топики

    Андрей Копп 03 октября 2018, 11:55
    Компоненты MODX Обзор компонента SEO Pro 0
    Андрей Копп 02 октября 2018, 11:18
    MODX Настройка MySQL 5.7 для работы pdoTools 0
    Андрей Копп 27 сентября 2018, 20:49
    MODX MinifyX в Fenom 0
    Андрей Копп 01 июля 2018, 15:13
    Другое Fenom в MODX (шпаргалки) 0

    Комментарии

    Андрей Копп 02 октября 2018, 09:04
    ComboBox с данными из другой таблицы modExtra 1
    Андрей Копп 08 сентября 2017, 20:24
    Всевозможная очистка кэша в Laravel 5 1