Виджет Most Commented Posts (Популярные статьи) для Blogger

Вообще-то название “Most Commented Posts” лучше переводить, как “Наиболее комментируемые статьи”, но в ру-нете почему-то принято называть “Популярные статьи”, хотя популярность и комментируемость не всегда идут “рука об руку”. Этот виджет широко используют блоггеры, ведущие свои блоги на платформе WordPress, а вот на платформе Blogger мне этот виджет не попадался, за исключением виджета использующего YAHOO Pipes от BloggerBuster, но он, к сожалению, выводит в список URL, а не названия статей, что, как мне кажется, не вполне профессионально. Я попытался исправить этот дисбаланс.

Описание:

Виджет выводит список наиболее комментируемых статей в порядке убывания числа комментариев. Устанавливается одним “копи-пастом” (copy-paste). Минимальное количество настроек позволяет использовать виджет даже неискушенным в кодировании блоггерам ;-)

Установка:

Установка производится в три шага:

1. Зайдите в “Панель управления” вашего блога. Перейдите на закладку Макет-Элементы страницы.
2. Добавьте на панели гаджетов новый гаджет HTML/JavaScript. Дайте ему название (например: “Популярные статьи”). Вставьте код виджета.
3. Проведите настройку виджета. Сохраните виджет, а затем и сам макет.

Код виджета:
<!-- Most Commented Posts START --> <div id="mx-mcp"></div> <script> var maxList = 5; // Количество выводимых постов var commStr = "Комментариев"; // Комментариев, Comments - на выбор ;-) var baseUrl = "http://YOUR_BLOG_NAME_HERE.blogspot.com/"; //URL Вашего блога. Не забудьте об обратном слэше в конце var maxResults = 100; // Глубина сканирования var postsUrl = "feeds/posts/default?alt=json-in-script&callback=listPosts&max-results=" + maxResults; var commentsUrl = "feeds/comments/default?alt=json-in-script&callback=listCommentss&max-results=" + maxResults; function oPost(title, url, num) { this.title = title; this.url = url; this.num = num; } function doSrcMcp() { var container = document.getElementById("mx-mcp"); var srcP = document.createElement("script"); var srcC = document.createElement("script"); srcP.type = "text/javascript"; srcC.type = "text/javascript"; srcP.src = baseUrl + postsUrl; srcC.src = baseUrl + commentsUrl; container.appendChild(srcP); container.appendChild(srcC); } var aPosts = new Array(); var aComments = new Array(); function listPosts(root) { var feed = root.feed; var entries = feed.entry || []; for (var i = 0; i < entries.length; ++i) { var entry = entries[i]; var title = entry.title.$t; var url = ""; for (var j = 0; j < entry.link.length; j++) { if (entry.link[j].rel == 'alternate') url = entry.link[j].href; } aPosts.push(new oPost(title, url, 0)); } } function listComments(root) { var feed = root.feed; var entries = feed.entry || []; var maxNum = 0; for (var i = 0; i < entries.length; ++i) { var entry = entries[i]; var url = ""; for (var j = 0; j < entry.link.length; j++) { if (entry.link[j].rel == 'alternate') url = entry.link[j].href; } aComments.push(url); } for (var i = 0; i < aPosts.length; i++) { for (var j = 0; j < aComments.length; j++) { if (aComments[j].indexOf(aPosts[i].url) == 0) aPosts[i].num++; if (aPosts[i].num > maxNum) maxNum = aPosts[i].num; } } var container = document.getElementById("mx-mcp"); var divFooter = document.createElement("div"); var aFooter = document.createElement("a"); divFooter.style.fontSize = "x-small"; aFooter.appendChild(document.createTextNode("minimusX")); aFooter.href = "http://minimusx.blogspot.com"; divFooter.appendChild(document.createTextNode("Widget by ")); divFooter.appendChild(aFooter); var numList = 0; for (var i = maxNum; i > 0; i--){ for (var j = 0; j < aPosts.length; j++){ if (aPosts[j].num == i){ var br = document.createElement("br"); var a = document.createElement("a"); var div = document.createElement("div"); a.appendChild(document.createTextNode(aPosts[j].title)); a.href = aPosts[j].url; div.appendChild(document.createTextNode(" (" + commStr + ": " + aPosts[j].num + ")")); container.appendChild(a); container.appendChild(br); container.appendChild(div); numList++; } if (numList >= maxList) break; } if (numList >= maxList) break; } container.appendChild(divFooter); } doSrcMcp(); </script> <!-- Most Commented Posts END -->

Настройка:

1. 
   
   URL Вашего блога: var baseUrl = "http://YOUR_BLOG_NAME_HERE.blogspot.com/"; Вставьте URL ВАШЕГО блога. И не забывайте поставить обратный слэш в конце URL!
2. 
   
   По умолчание виджет выводит список из пяти позиций: var maxList = 5; измените это значение, если хотите выводить больше или меньше позиций.
3. 
   
   Количество комментариев к каждой позиции (статье) выводится строкой (Комментариев: Х): var commStr = "Комментариев";. Для локализации виджета измените этот параметр (например на значение Comments).

Update 08.01.2009: Добавлен параметер для настройки глубины сканирования - maxResults.

© minimusX, 2008 -2009. При копировании и републикации статьи ссылка на первоисточник обязательна.

»»  читать далее

Виджет Most Related Posts (Очень похожие статьи) для Blogger

Некоторое время назад я опубликовал обзор виджета “Related Posts”. Виджет неплохой, но, как водится, не всё в нём меня устраивало. А именно:

• установка виджета требует серьёзных манипуляций с шаблоном темы и состоит из значительного числа шагов установки
• виджет выдает ссылки на статьи в список случайным образом, что, может быть, хорошо для блога типа “отовсюду обо всём”, но никак для тематического блога.
• некоторые недоработки в самом виджете

В общем, как говорится, “если хочешь, что бы всё было “как надо” – сделай сам”. Я решил последовать этому совету и, вот, что у меня получилось:

• виджет Most Related Posts базируется на библиотеке JSON от Google и, следовательно, расположен на одном из самых быстрых серверов в мире
• выдача ссылок в список осуществляется по индексу соответствия на базе меток (тегов, labels): чем больше совпадающих меток, тем выше индекс соответствия, тем выше ссылка в списке
• ссылка на текущую статью не выводится (не пользуйтесь кавычками в названиях постов – этот глюк RSS может привести к выдаче ссылки на текущую статью в список)
• виджет устанавливается “одним кликом” (copy-paste)

Инструкция по установке

Скопируйте приведённый ниже код и вставьте его в шаблон темы непосредственно после кода <data:post.body/>. Если же Вы пользуетесь Fullpost, то после кода <data:post.body /> <b:if cond="data:blog.pageType != "item""> <a expr:href="data:post.url">Read more!</a> </b:if>

Код виджета:

<!-- Most Related Posts by minimusX START --> <div><b:if cond='data:blog.pageType == "item"'> <div class='widget-content'> <br/><br/><h3>Most Related Posts</h3> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type='text/javascript'> google.load("feeds", "1"); function initialize() { var aLabels = new Array(); var sLabel = ""; var postTitle = ""; <b:loop values='data:posts' var='post'> <b:loop values='data:post.labels' var='label'> sLabel = "<data:label.name/>"; aLabels.push(sLabel); </b:loop> postTitle = "<data:post.title/>" </b:loop> var num = 100; // глубина сканирования var maxList = 5; //максимальное количество постов в списке var feed = new google.feeds.Feed("YOUR_FEED_URL"); var maxRelIndex = 0; feed.setNumEntries(num); feed.load(function(result) { if (!result.error) { var aTitles = new Array(); var aHRefs = new Array(); var aRelIndex = new Array(); var relIndex = 0; var container = document.getElementById("mx-mrp"); var divFooter = document.createElement("div"); var aFooter = document.createElement("a"); var ul = document.createElement("ul"); divFooter.style.fontSize = "x-small"; aFooter.appendChild(document.createTextNode("minimusX")); aFooter.href = "http://minimusx.blogspot.com"; divFooter.appendChild(document.createTextNode("Most Related Posts Widget by ")); divFooter.appendChild(aFooter); for (var i = 0; i < result.feed.entries.length; i++) { var entry = result.feed.entries[i]; relIndex = 0; if (entry.title != postTitle){ for (var j = 0; j < entry.categories.length; j++){ for (var k = 0; k < aLabels.length; k++){ if (entry.categories[j] == aLabels[k]){ relIndex++; } } } if (relIndex != 0){ aTitles.push(entry.title); aHRefs.push(entry.link); aRelIndex.push(relIndex); if (maxRelIndex < relIndex){ maxRelIndex = relIndex; } } } } var numList = 0; for (var i = maxRelIndex; i > 0; i--){ for (var j = 0; j < aRelIndex.length; j++){ if (aRelIndex[j] == i){ var br = document.createElement("br"); var a = document.createElement("a"); var il = document.createElement("il"); a.appendChild(document.createTextNode(aTitles[j])); a.href = aHRefs[j]; il.appendChild(a); ul.appendChild(il); ul.appendChild(br); numList++; } if (numList >= maxList){ break; } } if (numList >= maxList){ break; } } container.appendChild(ul); container.appendChild(divFooter); } }); } google.setOnLoadCallback(initialize); </script> <div id='mx-mrp'></div> </div> </b:if></div> <!-- Most Related Posts by minimusX END -->

Виджет настроен на сканирование последних 100 статей (var num = 100;) и вывода в список 5-ти ссылок (var maxList = 5;) на похожие статьи. Не забудьте изменить строку YOUR_FEED_URL на url feed’а Вашего блога.

© minimusX, 2008. При копировании и републикации статьи ссылка на первоисточник обязательна.

Я играю в Blogowar.ru, чего и вам советую.

»»  читать далее

Подсветка кодов в блоге. Часть вторая.

Вернёмся к нашим баранам. Продолжим обзор инструментов для подсветки синтаксиса исходных кодов начатый в предыдущей статье.

Google Code Prettifier

Google Code Prettifier – простой и лёгкий инструмент. Поддерживает C (C, C++, C#), Java, Python, Bash, SQL, HTML, XML, CSS, Javascript, и Make-файлы.

• Не тормозит загрузку страницы.
• Работает на любых платформах.
• Возможно использование встроенных ссылок (в строках комментариев)
• Возможна нумерация строк
• Возможно изменение цветовой схемы (изменить CSS-файл)

Скриншот:

Инструкция по установке

Вставьте показанный ниже код в секцию head (например перед закрывающим тегом).

<link href="prettify.css" type="text/css" rel="stylesheet" /> <script type="text/javascript" src="prettify.js"></script>

Измените открывающий тег body следующим образом:

<body onload="prettyPrint()>

Для подсветки кода используйте теги <pre class="prettyprint">...</pre> или <code class="prettyprint">...</code>.

Для конкретизации языка подсвечиваемого кода измените значение параметра class с “prettyprint” на “prettyprint lang-спецификатор” (например “prettyprint lang-html”).

Вот перечень доступных спецификаторов: "c", "cc", "cpp", "cs", "cyc", "java", "bsh", "csh", "sh", "cv", "py", "perl", "pl", "pm", "rb", "js", "html", "xhtml", "xml", "xsl".

Для организации нумерации в подсветке исходного кода используется следующий приём:

<pre class=prettyprint> <span class="nocode">1:</span> /* This is line 1 of my code <span class="nocode">2:</span> * and here's line 2 */ <span class="nocode">3:</span> print("I'm line number 3"); </pre>

Syntaxhighlighter

Syntaxhighlighter – мой любимый инструмент, именно им я и пользуюсь. Кроме отличной подсветки и встроенной нумерации этот инструмент так же имеет меню, позволяющее вывести код в отдельном окне в виде простого текста или скопировать его в буфер обмена, что очень удобно для посетителей блога. Инструмент мультиплатформенный – может работать в любых блогах, поддерживающих JavaScript и не только в блогах. Кроме того, имеется дополнение SyntaxHighlighter для Windows Live Writer, позволяющее строить конструкции для Syntaxhighlighter не имеея соответствующих навыков.

Инструкция по установке

Вставьте приведённый ниже код в конец секции body (перед закрывающим тегом):

<link href='SyntaxHighlighter.css' rel='stylesheet' type='text/css'/> <script src='shCore.js' type='text/javascript'/> <script src='shBrushCss.js' type='text/javascript'/> <script src='shBrushJava.js' type='text/javascript'/> <script src='shBrushJScript.js' type='text/javascript'/> <script src='shBrushXml.js' type='text/javascript'/> <script class='javascript'> //<![CDATA[ function FindTagsByName(container, name, Tag) { var elements = document.getElementsByTagName(Tag); for (var i = 0; i < elements.length; i++) { if (elements[i].getAttribute("name") == name) { container.push(elements[i]); } } } var elements = []; FindTagsByName(elements, "code", "pre"); FindTagsByName(elements, "code", "textarea"); for(var i=0; i < elements.length; i++) { if(elements[i].nodeName.toUpperCase() == "TEXTAREA") { var childNode = elements[i].childNodes[0]; var newNode = document.createTextNode(childNode.nodeValue.replace(/<br\s*\/?>/gi,'')); elements[i].replaceChild(newNode, childNode); } else if(elements[i].nodeName.toUpperCase() == "PRE") { brs = elements[i].getElementsByTagName("br"); for(var j = 0, brLength = brs.length; j < brLength; j++) { var newNode = document.createTextNode(""); elements[i].replaceChild(newNode, brs[0]); } } } //clipboard does not work well with <pre> tags, no line breaks dp.SyntaxHighlighter.ClipboardSwf = "http://rublezoid.googlepages.com/clipboard.swf"; dp.SyntaxHighlighter.HighlightAll("code"); //]]> </script>

Для подсветки кода используйте конструкцию
<pre name="code" class="c-sharp">...</pre> или
<textarea name="code" class="c#" cols="60" rows="10">...</textarea>

Параметер name должен обязательно иметь значение “code”, а параметер class должен иметь значение из таблицы “поддерживаемых языков”.

Поддерживаемые языки:

Язык	Псевдонимы (значение параметра class)
C++	cpp, c, c++
C#	c#, c-sharp, csharp
CSS	css
Delphi	delphi, pascal
Java	java
Java Script	js, jscript, javascript
PHP	php
Python	py, python
Ruby	rb, ruby, rails, ror
Sql	sql
VB	vb, vb.net
XML/HTML	xml, html, xhtml, xslt

Я пользуюсь конструкцией (тегами) textarea, т.к. небольшой глюк библиотеки не позволяет использовать меню “копирования в буфер обмена” с тегами pre (пропадают переносы строки).

Внимание! Во всех приведённых примерах объявления внешних файлов приведены без учёта реального расположения оных в сети! Это значит, что в реальных условиях необходимо указывать реальное размещение внешних файлов. Например для файлов prettify, в привязке к моему блогу, необходимо произвести следующие изменения:

<link href="prettify.css" type="text/css" rel="stylesheet" /> <script type="text/javascript" src="prettify.js"></script> //заменить на <link href="http://rublezoid.googlepages.com/prettify.css" type="text/css" rel="stylesheet" /> <script type="text/javascript" src="http://rublezoid.googlepages.com/prettify.js"></script>

Послесловие

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

© minimusX, 2008. При копировании и републикации статьи ссылка на первоисточник обязательна.

»»  читать далее

Подсветка кодов в блоге. Часть первая.

Подсветка синтаксиса исходного кода в блоге на сегодняшний день уже не роскошь, а признак хорошего тона. Действительно, подсвеченный синтаксис не только смотрится респектабельней по сравнению с неподсвеченным, но и существенно лучше читается и поддается анализу. Разумеется “спрос рождает предложение”. Инструментов в этой области уже придумано немало и именно об этих инструментах моя очередная статья.

Инструментарий используемый для подсветки синтаксиса исходных кодов можно разделить на две категории (по способу обработки) – на статические и динамические.

• Статические – обработка (подсветка) синтаксиса кода происходит на этапе написания статьи и не требует каких-либо специальных обработчиков. В качестве плюсов этой группы инструментов хотелось бы отметить быструю загрузку статьи посетителем и стабильность отображения. К минусам – невозможность правки подсветки всех опубликованных кодов исправлением в одном месте (в обработчике), существенное увеличение объёма исходного кода статьи и неудобство правки самого публикуемого кода.
• Динамические – обработка (подсветка) синтаксиса кода производится обработчиком при загрузке страницы статьи пользователем (посетителем). Плюсы: возможность поменять правила подсветки кода с помощью небольших изменений как в коде обработчика, так и в коде статьи, более лёгкая правка самого публикуемого кода и достаточно компактный код статьи, а так же возможность добавления дополнительных сервисов для посетителей. Минусы: большее время загрузки страницы статьи за счет загрузки софта обработчика.

Перейдём к конкретным инструментам.

Статические

Среди статических инструментов чаще всего встречаются add-on’s и plug-in’s для блог-клиентов, как встроенные, так и подгружаемые. Поскольку я, в некотором роде, являюсь поклонником Windows Live Writer, то, в качестве примера, приведу несколько дополнений для WLW. 

Code Snippet plugin for Windows Live Writer – вставка и подсветка синтаксиса исходного кода.

Insert Source Code Snippet – вставка и подсветка кода из буфера обмена, скопированного из Visual Studio или какого либо другого инструмента разработчика.

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

Source Code Highlighter – выдаёт подсвеченный код в HTML-коде.

Динамические

highlight.js - подсветка синтаксиса в примерах кода в блогах, форумах и вообще на любых веб-страницах. Пользоваться им очень просто, потому что работает он автоматически: сам находит блоки кода, сам определяет язык, сам подсвечивает.

Скриншот:

Поддерживается подсветка следующих языков:

• Python
• Ruby
• Perl
• PHP
• XML
• HTML
• CSS
• Django
• Javascript
• VBScript
• Delphi
• Java
• C++
• Lisp
• RenderMan (RSL и RIB)
• Maya Embedded Language
• SQL
• SmallTalk
• Axapta
• 1С
• Ini
• Diff
• DOS .bat
• Bash

Инструкция по установке

WordPress – для установки highlight.js в WordPress в комплекте поставки есть соответствующий плагин.

Для установки плагина надо скопировать всю директорию с файлами highlight.js в директорию плагинов WordPress. После этого в панели плагинов его можно будет включать и отключать. В меню Options также добавляется страничка highlight.js, где можно настраивать список языков и CSS-стили.

Blogger – для установки highlight.js в Blogger (XML тема) необходимо вставить следующий код, где-нибудь в районе закрывающего тега body (перед тегом).

<script type="text/javascript" src="highlight.js"></script> <script type="text/javascript"> hljs.initHighlightingOnLoad(); </script>

Для уменьшения времени загрузки можно ограничить автоопределение языков списком используемых языков:

<script type="text/javascript" src="highlight.js"></script> <script type="text/javascript"> hljs.initHighlightingOnLoad('html', 'css'); </script>

Полный список классов для разных языков приведен в readme.rus.txt.

Для определения цветов подсветки используйте следующий код:

<style> .comment { color: gray; } .keyword { font-weight: bold; } .python .string { color: blue; } .html .atribute .value { color: green; } </style>

разместите его перед закрывающим тегом head.

Использование

В тексте статьи для подсветки синтаксиса исходного кода используйте следующую конструкцию:

<pre><code>...</code></pre>

для принудительного использования подсветки конкретного языка или для отказа от подсветки используйте параметр class тега code:

<pre><code class="html">...</code></pre>

<pre><code class="no-highlight">...</code></pre>

P.S. Продолжение следует. У меня есть в запасе ещё пара неплохих прибомбасов на эту тему.

© minimusX, 2008. При копировании и републикации статьи ссылка на первоисточник обязательна.

»»  читать далее