Дополнительный шаблон статьи [InstantCMS 1.10.*]

+32
3.58K
Здравствуйте, сообщество.

Вдохновился этой темой на форуме и зацепила идея её реализации. Конечно, можно было бы написать плагин/фильтр, но идея с js мне понравилась больше в данном контексте (ну и php я страшусь crazy).
Задача. Мы имеем статью, большую, внутри множество h2-заголовков. Нужно, чтобы на заголовки цеплялись якоря и мы могли к ним перейти по ссылкам.
Решение: скачать файл.


Можно скачать готовый файл отсюда.
Переходим в папку компонентов шаблона (/templates/название/components), копируем файл com_content_read.tpl, называем копию com_content_read2.tpl. Открываем в режиме редактирования.
Над дивом с классом con_text вставляем:
  1.  
  2. <div class="article-read-h2-outer">
  3. <div class="article-read-h2">
  4. <h3>Оглавление:</h3>
  5. <ul class="show-all-h2"></ul>
  6. </div>
  7. </div>
  8.  
В конце файла вставляем:
  1.  
  2. {literal}
  3. <style>
  4. ul.show-all-h2 {
  5. list-style-type: decimal;
  6. margin: 0;
  7. padding: 0;
  8. }
  9. ul.show-all-h2 li {
  10. margin: 0 20px 5px 20px;
  11. padding: 0;
  12. }
  13. .article-read-h2-outer {
  14. width: 130px;
  15. position: absolute;
  16. }
  17. .article-read-h2-outer.fixed {
  18. position: fixed;
  19. top:0;
  20. }
  21. .con_text {
  22. padding-left:150px;
  23. }
  24. @media screen and (max-width: 540px){
  25. .article-read-h2-outer {
  26. display: none;
  27. }
  28. .con_text {
  29. padding-left:0px;
  30. }
  31. }
  32. </style>
  33. <script type="text/javascript" src="http://areaaperta.com/nicescroll/js/jquery.nicescroll.min.js"></script>
  34. <!-- Подключаем плагин скроллинга во избежание "скачков" в Google Chrome -->
  35. <script type="text/javascript">
  36. $(function() {
  37. $(".con_text").niceScroll();
  38. var h2link = (function(i){return "#anchoron" + (i + 1);});
  39. var h2title = (function(i){return "anchoron" + (i + 1);});
  40. $('h2').clone().addClass('h2-list').prependTo('ul.show-all-h2').wrap("<li class='show-li-h2'><a href=''></a></li>");
  41. $('h2.h2-list').contents().unwrap();
  42. $("h2").attr('id', h2title);
  43. $('li.show-li-h2 a').attr('href', h2link);
  44. $('li.show-li-h2 a').click(function(){
  45. $('html, body').animate({
  46. scrollTop: $( $.attr(this, 'href') ).offset().top
  47. }, 300);
  48. return false;
  49. });
  50. $(window).scroll(function(){
  51. var w = $(".con_text").height();
  52. var w1 = $('.con_text').offset().top;
  53. var w2 = $('.article-read-h2').height();
  54. var w4 = w2 - w1;
  55. if ($(this).scrollTop() > w1-15 && $(this).scrollTop() < w-w4-15) {
  56. $('.article-read-h2-outer').addClass('fixed').css("padding-top", 0);
  57. } else {
  58. if ($(this).scrollTop() > w-w4-15) {
  59. $('.article-read-h2-outer').css("padding-top", w-w2);
  60. };
  61. $('.article-read-h2-outer').removeClass('fixed');
  62. };
  63. });
  64. });
  65. </script>
  66. {/literal}
  67.  
Несколько слов ещё: в файле подключен jquery плагин по внешней ссылке (ничего страшного, но уточняю, мало ли smile) — сделано для того, чтобы не было скачков при скроллинге на Google Chrome.

Делаем магию: для нужного материала указываем в админке шаблон статьи com_content_read2.tpl.
Наиболее важное для работы сего дополнения, чтобы текст находился в диве с классом con_text. Учитывая, что структуру шаблона компонента никто (или почти никто) с нуля не переписывает, вероятность магии высока.

Как будет выглядеть:
клик — дефолтный шаблон.
клик — не дефолтный шаблон.

Благодарю за внимание. Надеюсь, кому-то помог.
-1
Петрмаг Петрмаг 9 лет назад #
ничего не понял,
0
AndroS AndroS 9 лет назад #
А демо смотрели?
Скрипт выводит в отдельном модуле подзаголовки статей. В итоге, получается нечто вроде оглавления. Очень удобно для сайтов-мануалов различных, документации. А в принципе, применимо во многих местах. Возможно, и с точки зрения SEO очень полезно.
0
Ильгиз Ильгиз 9 лет назад #
А точно в отдельном модуле? По-моему в теле статьи... что кстати удобнее, т.к. "бегающий" модуль лучше использовать под рекламный блок.
+1
Джехутимери Джехутимери 9 лет назад #
Да, верно, выводиться в теле статьи.
Олег Васильевич я Олег Васильевич я 9 лет назад #
Комментарий удален
0
AndroS AndroS 9 лет назад #
Классная штука! Под двоечку тоже бы надо...
0
SE7EN SE7EN 9 лет назад #
Да однозначно для второй ветки тоже нужно. Класс
+2
Джехутимери Джехутимери 9 лет назад #
Для двойки будет, постараюсь сегодня.
-1
Алексей Т Алексей Т 9 лет назад #
Хорошее решение
+1
Странник Странник 9 лет назад #
Молодец, дружище.
0
Ильгиз Ильгиз 9 лет назад #
Доработка "цепляет" стиль текста откуда-то из шаблона. Назначает размер шрифта 16рх, а нужно 14рх.
Попробовал задать стиль "font-size: 14px !important" практически всем элементам, но к нужному результату это не принесло. Гугл тоже не помог.
Может подскажете как задать стили генерируемым элементам?
0
Джехутимери Джехутимери 9 лет назад #
Берутся Ваши стили ссылок.
-1
Helg Helg 9 лет назад #
А почему в коде страницы ссылки не показываются?
-1
Helg Helg 9 лет назад #
которые в оглавлении
0
Джехутимери Джехутимери 9 лет назад #
Это исключено, Вы невнимательно смотрели исходный код.
0
Helg Helg 9 лет назад #
Вот кусок кода с вашего не дефолтного представленого тут выше
Спойлер
Здесь нет кода самих ссылок или я не там смотрю?
0
Джехутимери Джехутимери 9 лет назад #
Мм, я понял Вас теперь, всё верно. Если смотреть исходный код без javascript, так и будет. Чтобы было, как Вы хотите, нужно делать не на js. Это уже разве другой разработчик захочет сделать.
0
Loadырь Loadырь 9 лет назад #
Потому что они динамически создаются яваскриптом после создания страницы.
0
Helg Helg 9 лет назад #
Думаю, что лучше будет сделать по типу как ВП там ссылки с заголовков прописываются в коде в том месте где они выводятся. ИМХО на такие сайты часто в первых позициях на выдаче натыкаешься.
0
Helg Helg 9 лет назад #
То бишь в начале страницы под заголовком или после первого поста стоит блок содержание со ссылками на заголовки
0
santi santi 9 лет назад #
отлично выглядит (реализовано)...
0
LoginovSO LoginovSO 9 лет назад #
Господа подскажите пожалуйста, куда необходимо заливать данный (скаченный) шаблон, что бы стандартный шаблон скушал данный шаблон????
+1
Джехутимери Джехутимери 9 лет назад #
Залейте или в папку components Вашего шаблона, или в папку components дефолтного. И в том, и в другом случае шаблон компонента будет доступен для обращения.
0
LoginovSO LoginovSO 9 лет назад #
Добрый день! Спасибо что откликнулись!

Залил в /www/templates/_default_/components и если в админке ручками прописать для конкретной статьи какой шаблон использовать, то данная статья приобретает нужный вид. (Очень приятная плюшка, за это СПАСИБО).

И еще маленький вопросик, куда необходимо залить данный шаблон, что бы статьи автоматически кушали данный шаблон? (если эир возможно). Заранее спасибо!
+1
Джехутимери Джехутимери 9 лет назад #
Можно удалить файл com_content_read.tpl, а com_content_read2.tpl назвать его именем (убрать двойку из названия). Но делать этого я бы не рекомендовал, так как отобразиться на всех материалах из каталога статей.
0
LoginovSO LoginovSO 9 лет назад #
А ну да точно (подменить)!

Спасибо!
0
LoginovSO LoginovSO 9 лет назад #
вот фотка
0
LoginovSO LoginovSO 9 лет назад #
Шаблон приятный, есть только нюанс один, если оглавление большое, то пока не спустишься в конец страницы, оконцовку оглавления не увидешь(((.
Надо прикручивать дополнительный скрол для оглавления.
Если не сложно Джехутимери прошу Вас добавить скрол в оглавление)))
0
Dorimen Dorimen 9 лет назад #
Неплохо было бы подумать над тем, что если в тексте нет h2, то и блок не выводить ибо зачем?
+1
Джехутимери Джехутимери 9 лет назад #
Тут другой момент. Если в тексте нет h2, тогда статье не надо прописывать другой шаблон, ибо зачем?
0
Dorimen Dorimen 9 лет назад #
Ну оно вроде и так, конечно, можно. Но зачем плодить сущности и шаблоны, если можно немного автоматизировать )

Еще от автора

Портальный шаблон MTheme для InstantCMS 2.6.1 - глобальное обновление
Здравствуйте, дорогие пользователи InstantCMS. Рад предоставить вашему вниманию обновленный шаблон MTheme для InstantCMS 2.6.1.
Виджет "Список групп" для InstantCMS 2.5.1
Обычный виджет вывода списка групп. О нём забыли в коробке Внешний вид. Настройки: Демо | Скачать Установка стандартная.
Портальный шаблон MTheme
Здравствуйте, сообщество. Представляю Вам шаблон MTheme, разработанный для порталов на основе InstantCMS 2.5.1.
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.