Как да създадете училищен уебсайт със Strapi CMS, използвайки 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 конвенция

Sass е най-модерният, надежден и ефективен CSS език за разширения в света. Благодарение на интегрирането на вътрешните възможности на Sass в модулната система, сега имаме пълен контрол върху глобалното пространство на имената. Преди да използвате, вградените модули математика, цвят, текст, списък, карта, селектор и мета трябва да бъдат импортирани ръчно във файл.

.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 кодова база, която е неподдържана.

Името Block Element Modifier е съкратено като BEM. Той гарантира, че всеки, участващ в създаването на уебсайт, използва една и съща кодова база и един и същи език. Можете да се подготвите за промени във външния вид на уебсайта, като използвате правилно именуване.

Дизайн на училищен уебсайт

По-долу има изображение на дизайна на уебсайта на училището.

Заключение

Изтеглихте приложението Strapi и създадохте API в този урок. След това добавихте примерни оценки за показване и направихте няколко маршрута на API достъпни. Не на последно място, копирахте основен уебсайт на JavaScript School и добавихте скриптове за извличане и показване на данни от приложението Strapi. Помислете дали да посочите оценките в сайта и да направите маркерите с възможност за кликване, ако искате да дадете на приложението допълнителни възможности. Ще завърша, като ви предизвикам да направите крачка напред, като включите повече полета в API и включите резервната опция, за да можете да тествате как функционира, когато се добавят нови данни към бекенда.

Ако искате да публикувате своето училищно съдържание, Strapi е отличен вариант. В допълнение към поддръжката на богат текст, той предлага и удобен за потребителя интерфейс за композиция в административния панел. Съдържанието може също да се използва от уебсайта на вашето училище чрез API, който е напълно персонализиран. Разгледайте това обобщение на функциите на Strapi на уебсайта му, за да разберете повече за това какво повече може да предостави. И накрая, изходният код на това приложение е достъпен в Github.