随机化标题图像与Post链接同步在Ghost.JS上

Randomize Header Image to Sync With Post Link on Ghost.JS

本文关键字：Ghost JS 同步 链接 标题 图像 Post 随机化      更新时间：2023-09-26

我正试图让我的标题图像同步到Ghost.js上的点击链接。我已经能够在每个新页面加载上生成一个随机链接，但我不确定如何拥有属于该链接的标题图像。

有没有人熟悉ghost并理解hbs在下面的代码中是如何使用的?我需要使用hbs还是可以使用post ?与'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的同一篇文章的封面图像。所以，如果你想添加一个图像和链接，只需在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>'
);

明白了吗?这就是你想要的吗?

相关文章：