Блог

Я пытаюсь синхронизировать изображение заголовка с ссылкой для перехода по ссылке на Ghost.js . Я смог генерировать случайную ссылку при каждой новой загрузке страницы, но не уверен, как заставить изображение заголовка, принадлежащее этой ссылке, извлекаться вместе с ним.

Кто-нибудь знаком с ghost и понимает, как hbs будет использоваться в приведенном ниже коде? Нужно ли мне использовать hbs или я могу использовать ‘post.image’ для синхронизации изображения с ‘post.url’

 $(document).ready(function () {
    $.get(
        ghost.url.api('posts', {limit: 'all'})
    ).done(onSuccess);
});

function onSuccess(data) {
    var $result = $('#featured');
    var sortedPosts = shuffleArray(data.posts);
    var displayPosts = sortedPosts.slice(0,1);
    $.each(displayPosts, function (i, post) {
        $result.append(
            '<li><i class="fa fa-star"></i><a href="http://www.enflight.design/'   post.url   '">'   post.title   '</a></li>'
        );
    });
}

function shuffleArray(array) {
    for (var i = array.length - 1; i > 0; i--) {
        var j = Math.floor(Math.random() * (i   1));
        var temp = array[i];
        array[i] = array[j];
        array[j] = temp;
    }
    return array;
}
  

Как вы сказали, post.image это будет изображение обложки того же сообщения, которое вы используете для post.url. Итак, если вы хотите добавить изображение и ссылку, просто добавьте источник изображения в with post.image , и он должен отображаться просто отлично. Вот так:

 $result.append(
    '<img src='   post.image   '>'
    '<li><i class="fa fa-star"></i><a href="http://www.enflight.design/'   post.url   '">'   post.title   '</a></li>'
);
  

Имеет ли это смысл? Это то, что вы ищете?