L oop через массив в JS и генерировать сообщения для HTML фида в bootstrap? - PullRequest
Новая
       32

L oop через массив в JS и генерировать сообщения для HTML фида в bootstrap?

0 голосов
/ 27 апреля 2020

Итак, у меня есть базовый c Bootstrap веб-сайт в HTML, настроенный как лента новостей, и я пытаюсь заполнить его разными постами. В Javascript у меня есть массивы, содержащие разные изображения, заголовки и подписи, которые я хочу использовать для создания постов в ленте новостей. Моя первая мысль - просто набрать l oop через массивы и сгенерировать код HTML для каждого сообщения, а затем вставить этот код в ленту <div>, используя Javascript.

Однако я использовал строковые переменные в Javascript для хранения универсального c HTML кода для каждого сообщения и объединения их с URL-адресом изображения, текстом заголовка и т. Д. c для создания Блок кода для каждого поста. Это было действительно неловко, заставляя меня думать, что должен быть более эффективный способ создания кода для публикаций контента в ленте.

Кто-нибудь знает более эффективный метод программного создания постов для заполнения этого канала? В идеале я мог бы избежать написания HTML для каждого поста вручную (есть> 50 постов, которые я пытаюсь создать), и у меня был бы некоторый контроль над порядком постов, et c ,

Вот пример HTML 

<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" type="text/css" href="main.css">
  <title>NewsMe Page</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
    integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
</head>
<nav class="navbar navbar-expand-md">
  <a class="navbar-brand" href="#">NewsMe</a>
  <button class="navbar-toggler navbar-dark" type="button" data-toggle="collapse" data-target="#main-navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="main-navigation">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contact</a>
      </li>
    </ul>
  </div>
</nav>

<body>
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
    integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
  </script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
    integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous">
  </script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
    <div class="row">
        <div class="col-md-12">
          <br></br>
            <h2>News Feed</h2>
<!--             <p>Find all the </p> -->
        </div>
  <a href="https://ibb.co/YjH9b25"></a>
    </div> 
    <div class="row" id="feed">
        <div class="col-md-9">
            <div class="row mb-2">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-3">
                                    <img src="http://eskimo.egemenerd.com/wp-content/uploads/2018/05/product14-600x600.jpg">
                                </div>
                                <div class="col-md-9">
                                    <div class="card-body">
                                        <div class="news-content">
                                            <a href="#"><h2>Headline 1</h2></a>
                                            <p>Caption 1 </p>

                                        </div>
                                        <div class="news-footer">
                                        <div class="news-author">
                                            <ul class="list-inline list-unstyled">
                                                <li class="list-inline-item text-secondary">
                                                    <i class="fa fa-user"></i>
                                                    Author
                                                </li>
                                                <li class="list-inline-item text-secondary">
                                                    <i class="fa fa-user"></i>
                                                    News
                                                </li>
                                                <li class="list-inline-item text-secondary">
                                                    <i class="fa fa-eye"></i>
                                                    110 Views
                                                </li>
                                                <li class="list-inline-item text-secondary">
                                                    <i class="fa fa-calendar"></i>
                                                    26 June 2018
                                                </li>
                                            </ul>
                                        </div>   
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row mb-2">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-3">
                                    <img src="http://eskimo.egemenerd.com/wp-content/uploads/2018/05/product14-600x600.jpg">
                                </div>
                                <div class="col-md-9">
                                    <div class="card-body">
                                        <div class="news-content">
                                            <a href="#"><h2>Headline 2  </h2></a>
                                            <p>Caption 2</p>

                                        </div>
                                        <div class="news-footer">
                                        <div class="news-author">
                                            <ul class="list-inline list-unstyled">
                                                <li class="list-inline-item text-secondary">
                                                    <i class="fa fa-user"></i>
                                                    Author
                                                </li>
                                                <li class="list-inline-item text-secondary">
                                                    <i class="fa fa-eye"></i>
                                                    110 Views
                                                </li>
                                                <li class="list-inline-item text-secondary">
                                                    <i class="fa fa-calendar"></i>
                                                    26 June 2018
                                                </li>
                                            </ul>
                                        </div>   
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row mb-2">
                <div class="col-md-12">
                    <ul class="pagination">
                      <li class="page-item"><a class="page-link" href="#">Previous</a></li>
                      <li class="page-item"><a class="page-link" href="#">1</a></li>
                      <li class="page-item active"><a class="page-link" href="#">2</a></li>
                      <li class="page-item"><a class="page-link" href="#">3</a></li>
                      <li class="page-item"><a class="page-link" href="#">Next</a></li>
                    </ul>
                </div>
            </div>

        </div>
<!--        <div class="col-md-3">
            <div class="row">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-body">
                            <img src="http://eskimo.egemenerd.com/wp-content/uploads/2018/05/blog17.jpg">
                        </div>
                    </div>
                </div>
            </div>
        </div> -->
    </div>
</div>
</body>


</html>

CSS: 

body {
  padding: 0;
  margin: 0;
  background: #e2e5ee;
  font-family: "Segoe UI";
}

/*--- navigation bar ---*/

.navbar {
  background:#4e4764;
}

.nav-link,
.navbar-brand {
  color: #fff;
  cursor: pointer;
}

.nav-link {
  margin-right: 1em !important;
}

.nav-link:hover {
  color: #000;
}

.navbar-collapse {
  justify-content: flex-end;
}

img {width:100%;}

Javascript: 

var img_arr = ['image_1.png','image_2.png'];

var headline_arr = ['Headline 1', 'Headline 2'];

var caption_arr = ['Caption 1', 'Caption 2'];

Ответы [ 2 ]

1 голос
/ 27 апреля 2020

Добавить jQuery и это может быть просто

Оставить место для сообщений, которые будут отображаться 

<div id="posts">
</div>

Создать шаблон для одного сообщения и скрыть его по умолчанию 

<div style="display: none;" id="templates">
    <div id='post-template'>
        <span id='post-caption'></span>
        <span id='post-headline'></span>
        <img id='post-image' />
    </div>
</div>

L oop над вашими объектами в JavaScript до клонирования шаблонов и добавление их в сообщения div 

let posts = $("#posts");
for (let i = 0; i < caption_arr.length; i++) {
    let caption = caption_arr[i];
    let headline = headline_arr[i];
    let image = img_arr[i];

    let postClone = $("#templates #post-template").clone();

    postClone.find("#post-caption").text(caption);
    postClone.find("#post-headline").text(headline);
    postClone.find("#post-image").attr('src', image);

    posts.append(postClone);
}
0 голосов
/ 27 апреля 2020

Вы можете использовать API-заполнитель для извлечения поддельных сообщений и т. Д.

Рабочий пример использования структуры кода: 

let img_arr = []
let headline_arr = []
let caption_arr = []

fetch("https://jsonplaceholder.typicode.com/posts")
  .then(response => response.json())
  .then(data => {
      headline_arr = data.map(p => p.title)
      caption_arr = data.map(p => p.body)
  })


fetch("https://jsonplaceholder.typicode.com/photos")
  .then(response => response.json())
  .then(data => {
      caption_arr = data.map(p => p.thumbnailUrl)
  })
...