Как создать школьный веб-сайт с помощью CMS Strapi с использованием Vanilla Javascript

By following the few straightforward guidelines below, we can maintain our code well-organized.

• The indentation of nested elements is required.
• For elements, attributes, and values, lowercase is preferred.
• Use either single or double quote marks, but be sure you use them both consistently.
• It is recommended to ignore the Boolean attribute values for complete organization.

When we decide on a technique that we like. It must be adhered to strictly, applied everywhere, and kept separate.

<!-- acheivements section -->

    <section class="achieve">

      <!-- achieve container -->
      <div class="achieve__container">
        <h1 class="achieve__h1"></h1>
        <div class="achieve__section">
          <div class="achieve__sectionList">
            <img class="achieve__imgIcon" src="./img/ach1.png" alt="achieveIcon" />
            <h3 class="achieve__h3"></h3>
            <p class="achieve__p"></p>
          </div>

          <div class="achieve__sectionList">
            <img class="achieve__imgIcon1" src="./img/ach2.png" alt="achieveIcon" />
            <h3 class="achieve__h31"></h3>
            <p class="achieve__p1"></p>
          </div>

          <div class="achieve__sectionList">
            <img class="achieve__imgIcon" src="./img/ach3.png" alt="achieveIcon" />
            <h3 class="achieve__h32"></h3>
            <p class="achieve__p2"></p>
          </div>

          <div class="achieve__sectionList">
            <img class="achieve__imgIcon" src="./img/ach4.png" alt="achieveIcon" />
            <h3 class="achieve__h33"></h3>
            <p class="achieve__p3"></p>
          </div>

        </div>
      </div>
      <!-- End achieve container -->

    </section>

    <!-- End acheivements section -->

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

DOM в JS, синтаксисе ES6 и модулях ES6

Объектная модель документа (DOM) представляет объекты, составляющие структуру и содержимое веб-документа (DOM), в виде данных. Он иллюстрирует, как использовать API для создания веб-сайтов и веб-приложений, а также то, как HTML-документ представляется в памяти.

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

import { localhost } from "./../../adminUrl.js";

export const Blog = async () => {

  try {

      const url = `${localhost}/eventsblogs?_sort=id:DESC`;
      const ftch = await fetch(url);
      const data = await ftch.json();
      const result = data;
      //console.log(result[0].content);

  
      for (let i in result) {

          const container = document.querySelector(".blog__container");

          const dv = document.createElement("div");
          dv.classList = "blog__single";

          const img = document.createElement("img");
          img.classList = "blog__img"
          img.src= `${result[i].thumbnailimg.url}`;

         
          const heading = document.createElement("h1");
          heading.classList = "blog__heading";
          heading.textContent = `${result[i].title}`;

          const desc = document.createElement("p");
          desc.classList =" description";
          desc.textContent = `${result[i].description}`;

          const date = document.createElement("p");
          date.classList ="date";
          date.textContent = `${result[i].date}`;

         const hrf = document.createElement("a");
         hrf.classList = "below";
         hrf.textContent = "Read More Below:";
       

          const readmore = document.createElement("div");
          readmore.classList = "readmore";
          readmore.textContent = `${result[i].content}`;


          const hr = document.createElement("hr");
         
          dv.appendChild(img);
          dv.appendChild(heading);
          dv.appendChild(desc);
          dv.appendChild(date);
          dv.appendChild(hrf);
          dv.appendChild(readmore);
          dv.appendChild(hr);
        

          container.appendChild(dv);     
     
      }

  }
 
  catch(error) {
      console.log("failed", error);
  }
  }

Объявления импорта и экспорта необходимы для использования собственных модулей JavaScript. Представьте себя в ситуации, когда вам нужно повторно использовать некоторый код JavaScript. На помощь приходит концепция модулей ES6.

Каждый модуль соответствует корпусу кода JavaScript. Модули содержат как функции, так и переменные. Модуль — это не что иное, как сегмент кода JavaScript, записанный в файле. Внутренние переменные и функции модуля по умолчанию недоступны. Экспортируя их из модуля, можно получить доступ к переменным и функциям из других файлов. В ES6 модули могут работать только в строгом режиме. Это означает, что любые переменные или функции, определенные в модуле, не будут доступны глобально.

Модули для SASS (SCSS) и BEM Convention

Sass — самый продвинутый, надежный и эффективный язык расширений CSS в мире. Благодаря интеграции внутренних возможностей Sass в модульную систему теперь у нас есть полный контроль над глобальным пространством имен. Перед использованием встроенные модули math, color, text, list, map, selector и meta должны быть вручную импортированы в файл.

.blog {
    margin-top: 7rem;
    margin-left: 7rem;
    margin-right: 7rem;
    margin-bottom: 3rem;
}

.blog__h1 {
    // text-align: center;
    font-size: 2.3rem;
    margin-bottom: 5rem;
}

.blog__img {
    object-fit: cover;
    width: 40%;
    height: 230px;
    border-radius: 21px;
    margin-bottom: 2.5rem;
}

.blog__heading {
    margin-bottom: 1rem;
}

.description {
    max-width: 85ch;
    margin-bottom: 0.5rem;
}

.date {
    margin-bottom: 0.4rem;
    font-size: 1.3rem;
    color: blueviolet;
}
.below {
    // margin-bottom: 0.6rem;
    background-color: burlywood;
    color: #fff;
    padding: 0.2rem;
    font-size: 1rem;
    margin-top: 2rem;
}

.readmore {
    margin-top: 2rem;
    max-width: 97ch;
    color: #3a3838;
    word-spacing: 0.2rem;
    letter-spacing: 0.1rem;
    line-height: 1.7;
}

.blog__single {
    margin-top: 4rem;
}

@media all and (max-width: 768px) {
    .blog {
       
        margin-left: 1rem;
        margin-right: 1rem;
        margin-bottom: 3rem;
    }

    .blog__img {
        
        width: 100%;
        
    }
    
}

В компьютерных науках есть только две сложные проблемы: аннулирование кешей и присвоение имен вещам. Общеизвестно, что использование надлежащего руководства по стилю может ускорить разработку, отладку и интеграцию новых функций в унаследованный код. К сожалению, большинство кодовых баз CSS иногда создаются без организации или правил именования. В долгосрочной перспективе это приводит к невозможности сопровождения кодовой базы CSS.

Название модификатора блочного элемента сокращено до БЭМ. Это гарантирует, что все, кто участвует в создании веб-сайта, используют одну и ту же кодовую базу и один и тот же язык. Вы можете быть готовы к изменениям внешнего вида сайта, используя правильное название.

Дизайн школьного сайта

Ниже представлено изображение дизайна школьного сайта.

Заключение

В рамках этого руководства вы загрузили приложение Strapi и создали API. Затем вы добавили образцы оценок для отображения и сделали доступными несколько маршрутов API. И последнее, но не менее важное: вы скопировали базовый веб-сайт школы JavaScript и добавили скрипты для получения и отображения данных из приложения Strapi. Подумайте о том, чтобы разместить оценки на сайте и сделать теги кликабельными, если вы хотите предоставить приложению дополнительные возможности. В заключение я предлагаю вам сделать еще один шаг, добавив больше полей в API и включив резервную опцию, чтобы вы могли проверить, как она работает, когда новые данные добавляются в серверную часть.

Если вы хотите опубликовать школьный контент, Strapi — отличный вариант. Помимо поддержки форматированного текста, он также предлагает удобный интерфейс композиции в панели администратора. Контент также может использоваться вашим школьным веб-сайтом через полностью настраиваемый API. Ознакомьтесь с этим обзором функций Strapi на его веб-сайте, чтобы узнать больше о том, что еще он может предложить. Наконец, исходный код этого приложения доступен на Github.