Работа с ярлыками в Blogger
До этого я описал как встроить посты из сервиса Google® Blogger™ на свой сайт. Однако столкнулся при этом с одной дилемой, а именно – мне потребовалось разграничить посты по рубиркам, отделить посты по веб-диайну, скажем от постов по 3D графике (которых пока нет, но это детали :) ). Так вот, нашлось решение и для этой задачи, итак, приступим. Впрочем, забегая вперед, могу сказать, что для этого варианта размещения постов Blogger™ нам даже не потребуется Blogger API Key. Более того, возможно в дальнейшем я расскажу как интегрировать комментарии. Итак, приступим. Мы помним, что для отображения данных на странице нам нужны 3 компонента: источник данных, собственно сами данные, а также обработчик, который будет форматировать эти данные и встраивать их на страницу. Между тем, функцию разделов может выполнить такой инструмент, как ярлыки (labels). URL источника в этом случае будет выглядеть так: http:// <имя_блога> /feeds /posts /default /-/ <ярлык> /?max-results= <максимальное количество результатов> &alt=json.
Введя в адресную строку данную конструкцию, получим следующий результат:
{
"version": "1.0",
"encoding": "UTF-8",
"feed": {
"xmlns": "http://www.w3.org/2005/Atom",
"xmlns$openSearch": "http://a9.com/-/spec/opensearchrss/1.0/",
"xmlns$blogger": "http://schemas.google.com/blogger/2008",
"xmlns$georss": "http://www.georss.org/georss",
"xmlns$gd": "http://schemas.google.com/g/2005",
"xmlns$thr": "http://purl.org/syndication/thread/1.0",
"id": {
"$t": "tag:blogger.com,1999:blog-7611486589141024871"
},
"updated": {
"$t": "2017-08-13T14:30:19.507-07:00"
},
"category": [{
"term": "Веб-разработка"
}],
"title": {
"type": "text",
"$t": "Alexey studio"
},
"subtitle": {
"type": "html",
"$t": ""
},
"link": [{
"rel": "http://schemas.google.com/g/2005#feed",
"type": "application/atom+xml",
"href": "http:\/\/alexey-studio.blogspot.com\/feeds\/posts\/default"
}, {
"rel": "self",
"type": "application/atom+xml",
"href": "http:\/\/www.blogger.com\/feeds\/7611486589141024871\/posts\/default\/-\/%D0%92%D0%B5%D0%B1-%D1%80%D0%B0%D0%B7%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D0%BA%D0%B0?alt=json\u0026max-results=1"
}, {
"rel": "alternate",
"type": "text/html",
"href": "http:\/\/alexey-studio.blogspot.com\/search\/label\/%D0%92%D0%B5%D0%B1-%D1%80%D0%B0%D0%B7%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D0%BA%D0%B0"
}, {
"rel": "hub",
"href": "http://pubsubhubbub.appspot.com/"
}, {
"rel": "next",
"type": "application/atom+xml",
"href": "http:\/\/www.blogger.com\/feeds\/7611486589141024871\/posts\/default\/-\/%D0%92%D0%B5%D0%B1-%D1%80%D0%B0%D0%B7%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D0%BA%D0%B0\/-\/%D0%92%D0%B5%D0%B1-%D1%80%D0%B0%D0%B7%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D0%BA%D0%B0?alt=json\u0026start-index=2\u0026max-results=1"
}],
"author": [{
"name": {
"$t": "Алексей Котышков"
},
"email": {
"$t": "noreply@blogger.com"
},
"gd$image": {
"rel": "http://schemas.google.com/g/2005#thumbnail",
"width": "32",
"height": "32",
"src": "\/\/lh6.googleusercontent.com\/-qmtGrxa5fPo\/AAAAAAAAAAI\/AAAAAAAAAu4\/6g3kTjON5Kc\/s512-c\/photo.jpg"
}
}],
"generator": {
"version": "7.00",
"uri": "http://www.blogger.com",
"$t": "Blogger"
},
"openSearch$totalResults": {
"$t": "4"
},
"openSearch$startIndex": {
"$t": "1"
},
"openSearch$itemsPerPage": {
"$t": "1"
},
"entry": [{
"id": {
"$t": "tag:blogger.com,1999:blog-7611486589141024871.post-8956364458563670335"
},
"published": {
"$t": "2017-08-13T09:09:00.000-07:00"
},
"updated": {
"$t": "2017-08-13T11:07:07.041-07:00"
},
"category": [{
"scheme": "http://www.blogger.com/atom/ns#",
"term": "Веб-разработка"
}],
"title": {
"type": "text",
"$t": "Font Awesome"
},
"content": {
"type": "html",
"$t": "\u003Cp\u003EНе могу пройти мимо такого замечательного и наверняка известного многим профессионалам символьного шрифта, как Font Awesome. Суть в том, что у этого шрифта нет букв в принципе, однако в нем содержатся иконки, необходимые для формирования UI, начиная иконками навигации, заканчивая иконками социальных сетей, в том числе российских (таких как ВКонтакте, Одноклассники и иже с ними), кроме того есть иконки таких профильных соц-сетей, как Behance и LinkedIn. Также содержатся иконки различных технологий – jQuery, HTML, CSS… Доступен шрифт как для локального использования, так и для использования в рамках сайта. Более того, он содержит анимированные(!) иконки (так называемые спиннеры), которые прекрасно подойдут для иллюстрации загрузки страницы, обработки данных или выполнения длительных действий (математические расчеты, рендер, поиск по огромным базам данных и т.д.)\u003C\/p\u003E"
},
"link": [{
"rel": "replies",
"type": "application/atom+xml",
"href": "http:\/\/alexey-studio.blogspot.com\/feeds\/8956364458563670335\/comments\/default",
"title": "Комментарии к сообщению"
}, {
"rel": "replies",
"type": "text/html",
"href": "http:\/\/alexey-studio.blogspot.com\/2017\/08\/font-awesome.html#comment-form",
"title": "Комментарии: 0"
}, {
"rel": "edit",
"type": "application/atom+xml",
"href": "http:\/\/www.blogger.com\/feeds\/7611486589141024871\/posts\/default\/8956364458563670335"
}, {
"rel": "self",
"type": "application/atom+xml",
"href": "http:\/\/www.blogger.com\/feeds\/7611486589141024871\/posts\/default\/8956364458563670335"
}, {
"rel": "alternate",
"type": "text/html",
"href": "http:\/\/alexey-studio.blogspot.com\/2017\/08\/font-awesome.html",
"title": "Font Awesome"
}],
"author": [{
"name": {
"$t": "Алексей Котышков"
},
"uri": {
"$t": "https:\/\/plus.google.com\/110346839629770518902"
},
"email": {
"$t": "noreply@blogger.com"
},
"gd$image": {
"rel": "http://schemas.google.com/g/2005#thumbnail",
"width": "32",
"height": "32",
"src": "\/\/lh6.googleusercontent.com\/-qmtGrxa5fPo\/AAAAAAAAAAI\/AAAAAAAAAu4\/6g3kTjON5Kc\/s512-c\/photo.jpg"
}
}],
"thr$total": {
"$t": "0"
}
}]
}
}
Как видно из кода, результат отличается, поэтому просто поменять URL не получится, да и сам обработчик мы тоже немного изменим. Поскольку мы будем использовать несколько ярлыков, то напишем функцию. которая будет принимать в качестве аргумента имя ярлыка, формировать URL и выполнять запрос. Каким образом оформлять этот самый результат оставлю на Ваше усмотрение, а расскажу сам принцип:
function getPosts(label){
var url='http://alexey-studio.blogspot.com/feeds/posts/default/-/'+label+'?max-results=20&alt=json';
$.get({
url: url,
format: 'jsonp', //Обратите внимание, что в качестве формата данных указан JSONP, это необходимо для выполнения кросс-доменного запроса (Cross-Origin Domain)
success: function(data){
var posts=data.feed.entry;
var tempHTML='';
for(f=0;f<posts.length;f++){
tempHTML+='<h2>'+posts[f].title.$t+'</h2>';
tempHTML+='<div class="post">'+posts[f].content.$t+'</div>';
}
$('#blog_container').html(tempHTML);
}
});
}
// И теперь мы можем загружать блог по клику с ярлыком следующим образом:
// В html-коде вставляем ссылку на ярлык <a href='javascript:getPosts("веб-разработка");'>Веб-разработка</a>
Комментарии
Отправить комментарий