Дополнительный просмотр записи [InstantCMS 2*]

1701
Здравствуйте.

В продолжение предыдущей записи сделал такой же просмотр для второй ветки.
Как сделать.
1) Заходим в настройки нужного типа контента и в поле "Выводить HTML в конце записи" прописываем следующее:

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

Принцип действия: скрипт смотрит, есть ли в статье в указанном разделе h2 с классом iwantlist, и если это так, то слева выводится оглавление.
Смотреть демо.

К ухищрению выше пришлось прибегнуть, так как мне не удалось найти, где можно в двойке прописать конкретной статье свой шаблон вывода, как в первой ветке. Также приходиться брать во внимание, что в разделе могут быть сами по себе другие статьи с h2, которым такой вывод не нужен.

Спасибо за внимание.
Дополнительный шаблон статьи [InstantCMS 1.10.*] | Адаптивный шаблон Anima Strawberry для InstantCMS 1.10.6
Комментарии (9)
Олег Васильевич я 12 апреля 2015 в 21:03 +1
Ух, разгулялся! laugh
Loadырь 12 апреля 2015 в 21:17 +1
Джехутимери, отлично.
А можете сделать в двойке, так чтобы блок ссылок прописывался в шаблоне до его вывода на страницу. Т. е. поиск тегов h2 и создание блока ссылок чтобы происходили не яваскриптом в браузере, а скажем php кодом на сервере. Тогда и ссылки эти будут видны всяким гуглоботам?
Джехутимери 12 апреля 2015 в 21:20 0
Loadырь, увы, я по фронтэнду. Моих знаний в php вряд ли хватит.
Но если кто-то по бэкенду сделает, я с радостью стилизирую.
Dmitry 13 апреля 2015 в 00:01 0
Класс, а для 1.10.6 можно такое сделать?
Dmitry 13 апреля 2015 в 00:04 0
Нашел)
[url=Дополнительный шаблон статьи [InstantCMS 1.10.*]]Дополнительный шаблон статьи [InstantCMS 1.10.*][/url]
NIKITA 13 апреля 2015 в 14:24 0
Разрешите спросить
В статье какому-то из наших тэгов h2 приписываем класс iwanlist.
, это как и где?
Джехутимери 13 апреля 2015 в 16:41 +1
Sergon 13 апреля 2015 в 20:51 0
здорово!+
GoodMade.ru 14 апреля 2015 в 01:03 +3
+
может кто нибудь будет искать якоря.. найдёт по моему комменту, по слову якорь ;)