Виджет “Динамическая страница содержания” (Dynamic Contents Page) позволяет динамически обновлять страницу содержания блога, созданную для облегчения навигации по какой-либо теме постов. Как это работает можно посмотреть выбрав в меню моего блога пункт “Виджеты”
На странице “Виджеты” отображаются ссылки на все мои статьи связанные с виджетами.
При добавлении новых статей с меткой (label) “виджет” (для моей страницы), ссылки на них будут добавлены в содержание автоматически. Другими словами, виджет работает по принципу “установил и забыл”.
Виджет является платформонезависимым и может использоваться на любой платформе позволяющей использование JavaScript.
Инструкция по установке
Код:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
<script type="text/javascript" src="//www.google.com/jsapi"></script> <script type="text/javascript"> // Dynamic Contents Page Widget by minimus // //blogcoding.ru/ google.load("feeds", "1"); function initialize() { var feed = new google.feeds.Feed("YOUR_FEED_URL"), IsTarget = 0, var num = 100; // глубина сканирования feed.setNumEntries(num); feed.load(function(result) { if (!result.error) { var container = document.getElementById("feed"), searchString = container.className, divFooter = document.createElement("div"), aFooter = document.createElement("a"); divFooter.style.fontSize = "x-small"; aFooter.appendChild(document.createTextNode("minimus")); aFooter.href = "//blogcoding.ru/"; divFooter.appendChild(document.createTextNode("Dynamic Contents Page Widget by ")); divFooter.appendChild(aFooter); for (var i = 0; i < result.feed.entries.length; i++) { var entry = result.feed.entries[i]; IsTarget = 0; for (var k = 0; k < entry.categories.length; k++) { if (entry.categories[k] == searchString) { IsTarget = 1; break; } } if (IsTarget == 1) { var attributes = ["publishedDate", "contentSnippet"], br = document.createElement("br"), a = document.createElement("a"); a.appendChild(document.createTextNode(entry["title"])); a.href = entry["link"]; container.appendChild(a); for (var j = 0; j < attributes.length; j++) { var div = document.createElement("div"); div.appendChild(document.createTextNode(entry[attributes[j]])); container.appendChild(div); } container.appendChild(br); } } container.appendChild(divFooter); } }); } google.setOnLoadCallback(initialize); </script> |
Вариант 1:
Код, показанный выше, вставьте в заголовок шаблона (в любом месте между тегами head). Это вариант хорош в плане использования, так как не требует использования кода на каждой странице содержания (у меня их три), но, в некоторой степени, увеличивает время загрузки каждой страницы, как любой другой дополнительный код, загружаемый с любой страницой блога. Поэтому я использую вариант 2.
Вариант 2:
Показанный выше код вставьте непосредственно в текст поста используемого в качестве страницы содержания. Для этого необходимо выбрать режим редактирования HTML.
Код для страницы:
Для обоих вариантов установки необходимо разместить следующий код на странице поста статьи-содержания:
|
1 2 3 |
<p>Здесь можно вставить текст предваряющий содержание. Если текст не нужен, удалите этот текст.</p> <div id="feed" class="виджет"></div> <p>Здесь можно вставить текст завершающий содержание. Если текст не нужен, удалите этот текст.</p> |
В варианте 2 этот код необходимо вставить ниже кода скрипта.
Настройки
Найдите в тексте кода скрипта текст YOUR_FEED_URL и замените его на URL фида вашего блога (для блогов Blogger этот URL выглядит приблизительно так: //minimusx.blogspot.com/feeds/posts/default).
class=”виджет” – в “коде для страницы” измените значение параметра class на значение метки (label) по которой вы определяете вхождение поста в данный список постов.
var num = 100; – глубина сканирования. Если в Вашем блоге всего 100 статей, нет смысла устанавливать глубину сканирования 10 000!
Удачи! 
© 2008 – 2013, minimus. Все права защищены. При копировании и републикации статьи, ссылка на первоисточник обязательна.
Вот спасибо!
Давненько искал эту фичу!
Кстати, у тебя красивый и грамотный дизайн! Приятно видеть хорошую работу!
Спасибо! “Доброе слово и кошке приятно”. 😉
Ничего нового качественного на эту тему не появилось за два года?
Согласитесь, основным побуждающим мотивом к обновлению и развитию чего-либо является востребованность. Я особого энтузиазма по поводу этого виджета не наблюдаю … Да и что тут обновлять? Разве что, thumbnail’ы постов добавить …
Все верно. Однако я думал, что за два года кому-то мог быть нужен такой виджет с детальными настройками и тамнейлами.
Я вот только в последнее время заинтересовался таким виджетом. После того, как сделал страницу с описаниями статей //k–o–s.blogspot.com/p/articles.html Ну, статей не так много, их можно и руками вбить. Но когда я представил, что буду вбивать заметки, я решил не начинать, пока не найду какую-то хорошую автоматику.
Вот и спросил)
Хочу написать об этом виджете.
Во-первых, спасибо – твой виджет для меня является самым лучшим способ собрать посты на определенную тематику на одной странице. Мне нравится, что есть немного текст и можно указать тэг. //k–o–s.blogspot.com/p/notes.html
На будущее хочу высказать пожелания, если вдруг возникнет желание доработать этот виджет. Понимаю, что шансы невелики, но все же.
1) Хотелось бы иметь возможность отсекать группы постов по годам. Например:
2010
Бла-бла-бла
Бла1-бла1-бла1
2009
бла2-бла2-бла2
2) Хотелось бы указать количество букв в тексте статьи.
3) Хотелось бы указать начертание (в идеале и цвет 🙂 ) шрифта в тексте статьи (курсив, например)
4) Хотелось бы иметь возможность изменить начертание заглавия (в идеале дать один из уровне заглавия, типа h4 или h3)
5) Картинку тоже хотелось бы 🙂 Хотя даже не представляю, как ее можно туда вставить красиво и гибко.
Ну, это просто пожелания. Не смотря на это, спасибо за виджет.