Показать изображение статьи и заголовок на главной странице

Question

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

Answer 1

Вот как мы анализируем json данных, используя jQuery.

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

Это почти то же самое, но с другим синтаксисом. Меню, которые жестко запрограммированы на стороне сервера, лучше понимаются поисковыми системами, потому что им не нужно выполнять такой скрипт для доступа к этому контенту, и они просто анализируют простой код HTML.

---

var data='[{"id":"1","title":"Forbes","content":"Forbes Magazine...","image":"https://upload.wikimedia.org/wikipedia/en/d/d2/Forbes_%28magazine%29_cover.jpg","url":"page1.php"},{"id":"2","title":"NatGeo","content":"National Geo bla bla","image":"https://upload.wikimedia.org/wikipedia/en/4/46/National_Geographic_Traveler_december_12.png","url":"page2.php"},{"id":"3","title":"Golf Digest","content":"Golf news and events...","image":"https://upload.wikimedia.org/wikipedia/en/4/48/GolfDigestCover.jpg","url":"page3.php"},{"id":"4","title":"Travel+Leisure","content":"A trip somewhere...","image":"https://upload.wikimedia.org/wikipedia/en/c/ce/Travel_%2B_Leisure_magazine_cover.jpg","url":"page4.php"}]';

$(document).ready(function() {
 $.each(JSON.parse(data), function (index, value) {
        $('#links').append('<li><a href="'+value.url+'" title="'+value.title+'"><img src="'+value.image+'"><a><p>'+value.content+'</p></li>')
    });
});

ul{
list-style-type: none;
margin: 0 auto;
}
img{
width:30%;
}
li{
display:inline-block;
float:left;
padding-right:10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul id="links">

</ul>

[Уведомление] Если вы получаете json с ajax или get json, вам нужно удалить JSON.parse(data) и использовать вместо него data.