Адаптация сторонних шаблонов для datalife engine. Часть II Краткая и полная новость
28 ноября 2011. Разместил: LUCEfeel
И так приступим, думаю после прочтения первой статьи у вас уже появились базовые навыки по адаптации, и вам не составит особого труда повторить данную манипуляцию с шаблоном.
1. Для начала возьмем шаблон, на котором вы отрабатывали навык адаптации главной страницы. (в моем случае это http://livedemo00.template-help.com/joomla_36479/)
2. Нам понадобятся те же программы, которые мы использовали ранее, кто не помнит, повторюсь, Dreamweaver и Notepad +
I ступень, краткая новость [shortstory.tpl]
Вот вид краткой новости. См. ниже
Разберём теперь сам код краткой новости. Сделать это можно таким методом
- открываем исходный код
- жмем Ctrl + F
- ищем текст, который нам нужен (надпись под буквой А)
Нашли. Видим вод такой код
Это и есть наша краткая новость. Создаем пустой файл в дримвивере, и вставляем туда наш код от краткой новости. Видим примерно такое (в зависимости от вашего шаблона) См. ниже
Наша задача подогнать краткую новость под наш шаблон (не забываем, что вы работаете с тем шаблоном, который вы пытались адаптировать в предыдущей новости), потому что, вы уже слили все нужные стили и изображения, тем самым облегчив дальнейший подгон шаблона.
. Самый главный тэг, отвечающий за вывод краткой новости, советую вставить туда, где стоит контент. См. ниже
. Далее, вместо буквы «А», нам можно вставить тэг {title}, (если получиться слишком большой текст, его можно без проблем отредактировать в .css
. Вместо «read more» нам нужно вставить тэг, отвечающий за ссылку на полную новость [full-link]Подробнееfull-link] Cм. Ниже
Вот наш итог, если у вас хорошо работает фантазия, можно порыться в коде, дополнительно вставить рейтинг новости, просмотры, количество комментариев и т.д.
Краткая новость у нас уже готова, главные тэги вставлены, остальные можете вставлять по мере возможности или желанию).
«Не забывайте проверять сам код на открытые и закрытые теги, так как если вы забудете где-то поставить закрывающий тэг, то ваш дизайн будет перекривлен».
. Далее сохраняем наш файл как shortstory.tpl и бросаем его в папку с нашим шаблоном
II ступень, полная новость [fullstory.tpl]
Если у вас получилось без проблем подогнать краткую новость, то с полной новостью, у вас явно проблем не будет, метод абсолютно такой же!
Начнем. В моем случае полная новость будет такова. См.ниже
. Снова берём исходный код полной новости, и вставляем его в дримвивер или нотепад +
. В моем случае будет такой код
. Как видите, это и есть наш код полной новости, нам его нужно просто подогнать.
. Делаем все по принципу как в краткой новости. См. ниже
. Не забываем, что в полную новость, нам просто не обходимо вставить рейтинг и кол-во просмотров новости, что бы такое сделать, не обязательно переписывать какие-то коды, искать их или заново писать стиль или скрипт для вывода этой инфы, достаточно взять код из стандартного шаблона, убрать лишние картинки и вставить его. Примерно так
Вот нужным нам код (почищен от картинок)
. Далее, все зависит от вашей фантазии, как и куда этот код впихнуть, Cм. ниже
. Вот таким макаром, мы без особых усилий сделали адаптацию краткой и полной новости.
. Что касается остальных тэгов, все зависит снова же от структуры шаблона и от вашей фантазии. Но не злоупотребляйте тэгами, большое кол-во тэгов, может существенно перекосить дизайн вашего сайта.
1. Для начала возьмем шаблон, на котором вы отрабатывали навык адаптации главной страницы. (в моем случае это http://livedemo00.template-help.com/joomla_36479/)
2. Нам понадобятся те же программы, которые мы использовали ранее, кто не помнит, повторюсь, Dreamweaver и Notepad +
I ступень, краткая новость [shortstory.tpl]
Вот вид краткой новости. См. ниже
Разберём теперь сам код краткой новости. Сделать это можно таким методом
- открываем исходный код
- жмем Ctrl + F
- ищем текст, который нам нужен (надпись под буквой А)
Нашли. Видим вод такой код
<div id="content" >
<div class="moduletable">
<div class="custom" >
<div class="wrapper_overflow">
<div class="page1_block1">
<div class="letter">a</div>
Praesent vestibulm molesi<br/>
acume eurissellus portu<br/>
susipit vari sociis nat<br/>
oque peibus et mis pa<br/>
rturientes nasctu.<br/>
<a href="/joomla_36479/index.php/about/company" class="readmore">read more</a>
</div>
<div class="moduletable">
<div class="custom" >
<div class="wrapper_overflow">
<div class="page1_block1">
<div class="letter">a</div>
Praesent vestibulm molesi<br/>
acume eurissellus portu<br/>
susipit vari sociis nat<br/>
oque peibus et mis pa<br/>
rturientes nasctu.<br/>
<a href="/joomla_36479/index.php/about/company" class="readmore">read more</a>
</div>
Это и есть наша краткая новость. Создаем пустой файл в дримвивере, и вставляем туда наш код от краткой новости. Видим примерно такое (в зависимости от вашего шаблона) См. ниже
Наша задача подогнать краткую новость под наш шаблон (не забываем, что вы работаете с тем шаблоном, который вы пытались адаптировать в предыдущей новости), потому что, вы уже слили все нужные стили и изображения, тем самым облегчив дальнейший подгон шаблона.
. Самый главный тэг, отвечающий за вывод краткой новости, советую вставить туда, где стоит контент. См. ниже
. Далее, вместо буквы «А», нам можно вставить тэг {title}, (если получиться слишком большой текст, его можно без проблем отредактировать в .css
. Вместо «read more» нам нужно вставить тэг, отвечающий за ссылку на полную новость [full-link]Подробнееfull-link] Cм. Ниже
Вот наш итог, если у вас хорошо работает фантазия, можно порыться в коде, дополнительно вставить рейтинг новости, просмотры, количество комментариев и т.д.
Краткая новость у нас уже готова, главные тэги вставлены, остальные можете вставлять по мере возможности или желанию).
«Не забывайте проверять сам код на открытые и закрытые теги, так как если вы забудете где-то поставить закрывающий тэг, то ваш дизайн будет перекривлен».
. Далее сохраняем наш файл как shortstory.tpl и бросаем его в папку с нашим шаблоном
II ступень, полная новость [fullstory.tpl]
Если у вас получилось без проблем подогнать краткую новость, то с полной новостью, у вас явно проблем не будет, метод абсолютно такой же!
Начнем. В моем случае полная новость будет такова. См.ниже
. Снова берём исходный код полной новости, и вставляем его в дримвивер или нотепад +
. В моем случае будет такой код
<div class="item-page">
<h2>company</h2>
<div class="wrapper_overflow">
<img src="http://images.livedemo00.template-help.com/joomla_36479/images/stories/product_pic1.jpg" alt="" class="fleft" />
<p><strong>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam </strong> <br/> nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat magna aliquam erat volutpat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. dignissim qui blandit praesent luptatum zzril delenit</p><br/>
<p><strong>Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium</strong> doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque <a href="#">porro quisquam est, qui dolorem ipsum</a>, quia dolor sit, amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem. ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur?</p>
<p><em>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</em></p>
<h3>Sed ut perspiciatis</h3>
<p><strong>Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque</strong> laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit, amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem. ut enim ad minima veniam, <a href="#">quis nostrum exercitationem ullam corporis</a> suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur?</p>
</div>
</div>
</div>
<h2>company</h2>
<div class="wrapper_overflow">
<img src="http://images.livedemo00.template-help.com/joomla_36479/images/stories/product_pic1.jpg" alt="" class="fleft" />
<p><strong>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam </strong> <br/> nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat magna aliquam erat volutpat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. dignissim qui blandit praesent luptatum zzril delenit</p><br/>
<p><strong>Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium</strong> doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque <a href="#">porro quisquam est, qui dolorem ipsum</a>, quia dolor sit, amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem. ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur?</p>
<p><em>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</em></p>
<h3>Sed ut perspiciatis</h3>
<p><strong>Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque</strong> laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit, amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem. ut enim ad minima veniam, <a href="#">quis nostrum exercitationem ullam corporis</a> suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur?</p>
</div>
</div>
</div>
. Как видите, это и есть наш код полной новости, нам его нужно просто подогнать.
. Делаем все по принципу как в краткой новости. См. ниже
. Не забываем, что в полную новость, нам просто не обходимо вставить рейтинг и кол-во просмотров новости, что бы такое сделать, не обязательно переписывать какие-то коды, искать их или заново писать стиль или скрипт для вывода этой инфы, достаточно взять код из стандартного шаблона, убрать лишние картинки и вставить его. Примерно так
Вот нужным нам код (почищен от картинок)
<table width="100%">
<tr>
<td width="5"> </td>
<td background="{THEME}/images/mtdbgbot.gif" class="slink">Просмотрено: {views} раз</td>
<td background="{THEME}/images/mtdbgbot.gif" class="slink" align="right">[edit]Edit[/edit] {favorites} Просмотров: {views} автор: <b>{author}</b> {date} [print-link]Напечатать[/print-link] [com-link]<font color="#3B84D0">Комментарии ({comments-num})</font>[/com-link]</td>
<td width="5"> </td>
</tr></table>
<tr>
<td width="5"> </td>
<td background="{THEME}/images/mtdbgbot.gif" class="slink">Просмотрено: {views} раз</td>
<td background="{THEME}/images/mtdbgbot.gif" class="slink" align="right">[edit]Edit[/edit] {favorites} Просмотров: {views} автор: <b>{author}</b> {date} [print-link]Напечатать[/print-link] [com-link]<font color="#3B84D0">Комментарии ({comments-num})</font>[/com-link]</td>
<td width="5"> </td>
</tr></table>
. Далее, все зависит от вашей фантазии, как и куда этот код впихнуть, Cм. ниже
. Вот таким макаром, мы без особых усилий сделали адаптацию краткой и полной новости.
. Что касается остальных тэгов, все зависит снова же от структуры шаблона и от вашей фантазии. Но не злоупотребляйте тэгами, большое кол-во тэгов, может существенно перекосить дизайн вашего сайта.