Здравствуйте, сообщество.
Вдохновился этой темой на форуме и зацепила идея её реализации. Конечно, можно было бы написать плагин/фильтр, но идея с 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. Учитывая, что структуру шаблона компонента никто (или почти никто) с нуля не переписывает, вероятность магии высока.
Как будет выглядеть:
клик — дефолтный шаблон.
клик — не дефолтный шаблон.
Благодарю за внимание. Надеюсь, кому-то помог.
Реклама #
Петрмаг 9 лет назад #
AndroS 9 лет назад #
Скрипт выводит в отдельном модуле подзаголовки статей. В итоге, получается нечто вроде оглавления. Очень удобно для сайтов-мануалов различных, документации. А в принципе, применимо во многих местах. Возможно, и с точки зрения SEO очень полезно.
Ильгиз 9 лет назад #
Джехутимери 9 лет назад #
Олег Васильевич я 9 лет назад #
AndroS 9 лет назад #
SE7EN 9 лет назад #
Джехутимери 9 лет назад #
Алексей Т 9 лет назад #
Странник 9 лет назад #
Ильгиз 9 лет назад #
Попробовал задать стиль "font-size: 14px !important" практически всем элементам, но к нужному результату это не принесло. Гугл тоже не помог.
Может подскажете как задать стили генерируемым элементам?
Джехутимери 9 лет назад #
Helg 9 лет назад #
Helg 9 лет назад #
Джехутимери 9 лет назад #
Helg 9 лет назад #
Джехутимери 9 лет назад #
Loadырь 9 лет назад #
Helg 9 лет назад #
Helg 9 лет назад #
santi 9 лет назад #
LoginovSO 9 лет назад #
Джехутимери 9 лет назад #
LoginovSO 9 лет назад #
Залил в /www/templates/_default_/components и если в админке ручками прописать для конкретной статьи какой шаблон использовать, то данная статья приобретает нужный вид. (Очень приятная плюшка, за это СПАСИБО).
И еще маленький вопросик, куда необходимо залить данный шаблон, что бы статьи автоматически кушали данный шаблон? (если эир возможно). Заранее спасибо!
Джехутимери 9 лет назад #
LoginovSO 9 лет назад #
Спасибо!
LoginovSO 9 лет назад #
LoginovSO 9 лет назад #
Надо прикручивать дополнительный скрол для оглавления.
Если не сложно Джехутимери прошу Вас добавить скрол в оглавление)))
Dorimen 9 лет назад #
Джехутимери 9 лет назад #
Dorimen 9 лет назад #