Здравствуйте, сообщество.
Вдохновился этой темой на форуме и зацепила идея её реализации. Конечно, можно было бы написать плагин/фильтр, но идея с js мне понравилась больше в данном контексте (ну и php я страшусь
).
Задача. Мы имеем статью, большую, внутри множество h2-заголовков. Нужно, чтобы на заголовки цеплялись якоря и мы могли к ним перейти по ссылкам.
Решение: скачать файл.
Несколько слов ещё: в файле подключен jquery плагин по внешней ссылке (ничего страшного, но уточняю, мало ли
) — сделано для того, чтобы не было скачков при скроллинге на Google Chrome.
Делаем магию: для нужного материала указываем в админке шаблон статьи com_content_read2.tpl.
Наиболее важное для работы сего дополнения, чтобы текст находился в диве с классом con_text. Учитывая, что структуру шаблона компонента никто (или почти никто) с нуля не переписывает, вероятность магии высока.
Как будет выглядеть:
клик — дефолтный шаблон.
клик — не дефолтный шаблон.
Благодарю за внимание. Надеюсь, кому-то помог.
Вдохновился этой темой на форуме и зацепила идея её реализации. Конечно, можно было бы написать плагин/фильтр, но идея с js мне понравилась больше в данном контексте (ну и php я страшусь

Задача. Мы имеем статью, большую, внутри множество h2-заголовков. Нужно, чтобы на заголовки цеплялись якоря и мы могли к ним перейти по ссылкам.
Переходим в папку компонентов шаблона (/templates/название/components), копируем файл com_content_read.tpl, называем копию com_content_read2.tpl. Открываем в режиме редактирования.
Над дивом с классом con_text вставляем:
В конце файла вставляем:
Над дивом с классом con_text вставляем:
<div class="article-read-h2-outer"> <div class="article-read-h2"> <h3>Оглавление:</h3> <ul class="show-all-h2"></ul> </div> </div>
{literal} <style> ul.show-all-h2 { list-style-type: decimal; margin: 0; padding: 0; } ul.show-all-h2 li { margin: 0 20px 5px 20px; padding: 0; } .article-read-h2-outer { width: 130px; position: absolute; } .article-read-h2-outer.fixed { position: fixed; top:0; } .con_text { padding-left:150px; } @media screen and (max-width: 540px){ .article-read-h2-outer { display: none; } .con_text { padding-left:0px; } } </style> <script type="text/javascript" src="http://areaaperta.com/nicescroll/js/jquery.nicescroll.min.js"></script> <!-- Подключаем плагин скроллинга во избежание "скачков" в Google Chrome --> <script type="text/javascript"> $(function() { $(".con_text").niceScroll(); var h2link = (function(i){return "#anchoron" + (i + 1);}); var h2title = (function(i){return "anchoron" + (i + 1);}); $('h2').clone().addClass('h2-list').prependTo('ul.show-all-h2').wrap("<li class='show-li-h2'><a href=''></a></li>"); $('h2.h2-list').contents().unwrap(); $("h2").attr('id', h2title); $('li.show-li-h2 a').attr('href', h2link); $('li.show-li-h2 a').click(function(){ $('html, body').animate({ scrollTop: $( $.attr(this, 'href') ).offset().top }, 300); return false; }); $(window).scroll(function(){ var w = $(".con_text").height(); var w1 = $('.con_text').offset().top; var w2 = $('.article-read-h2').height(); var w4 = w2 - w1; if ($(this).scrollTop() > w1-15 && $(this).scrollTop() < w-w4-15) { $('.article-read-h2-outer').addClass('fixed').css("padding-top", 0); } else { if ($(this).scrollTop() > w-w4-15) { $('.article-read-h2-outer').css("padding-top", w-w2); }; $('.article-read-h2-outer').removeClass('fixed'); }; }); }); </script> {/literal}

Делаем магию: для нужного материала указываем в админке шаблон статьи com_content_read2.tpl.
Наиболее важное для работы сего дополнения, чтобы текст находился в диве с классом con_text. Учитывая, что структуру шаблона компонента никто (или почти никто) с нуля не переписывает, вероятность магии высока.
Как будет выглядеть:
клик — дефолтный шаблон.
клик — не дефолтный шаблон.
Благодарю за внимание. Надеюсь, кому-то помог.
Скрипт выводит в отдельном модуле подзаголовки статей. В итоге, получается нечто вроде оглавления. Очень удобно для сайтов-мануалов различных, документации. А в принципе, применимо во многих местах. Возможно, и с точки зрения SEO очень полезно.
Пригодится где-то!
Попробовал задать стиль "font-size: 14px !important" практически всем элементам, но к нужному результату это не принесло. Гугл тоже не помог.
Может подскажете как задать стили генерируемым элементам?
Залил в /www/templates/_default_/components и если в админке ручками прописать для конкретной статьи какой шаблон использовать, то данная статья приобретает нужный вид. (Очень приятная плюшка, за это СПАСИБО).
И еще маленький вопросик, куда необходимо залить данный шаблон, что бы статьи автоматически кушали данный шаблон? (если эир возможно). Заранее спасибо!
Спасибо!
Надо прикручивать дополнительный скрол для оглавления.
Если не сложно Джехутимери прошу Вас добавить скрол в оглавление)))