Как сделать из нескольких HTML файлов одну страницу?

Question

[Айнур Ярулин]

Главный вопрос:
Здравствуйте, я продолжаю изучать JavaScript и сейчас решил научится делать табы, у меня такой вопрос, можно ли отдельно сделать блоки с информацией, подключить их как обычный CSS или JS файл, но в нужном для меня месте?

Дополнительные вопросы:

1. Придётся ли к каждому такому блоку делать свои CSS стили в отдельном файле
   или после подключения на них будут работать общие стили?
   
2. Нужно ли в каждом таком новом файле делать стандартную HTML структуру
   или это не обязательно?
   

Comments

[Mazino]

Если тебе нужен именно js way, посредством vue/react, тебе нужны компоненты, гугли компоненты vue/react, но это способ работает на клиенте и требует предварительной сборки на сервере. Если именно из html на сервере, то помещаешь в документе маску по типу {{Header}} и перед тем, как отдать клиенту, читаешь контент из файла, в котором контент для хеадера и заменяешь маску. Когда поймешь как это работает, можно не изобретать велосипеды и взять готовый пакет, например handlebars либо другой шаблонизатор.

Answer 1

[Eduard Dankov]

Ответ на главный вопрос:
Вам необходимо:
1. Создать файл с расширением .php, содержащий необходимый блок информации.
2. В том месте, куда Вы хотите вставить блок информации, пропишите следующий код:
<?php require("путь/к/файлу.php"); ?>

Ответы на дополнительные вопросы:
1. На блок будут работать стили страницы, в которую Вы его добавите.
2. В такие файлы необходимо размещать только тот фрагмент кода, который Вы хотите вставить.

Comments

[Айнур Ярулин]

А это можно сделать с помощью JS, Vue JS или Node JS? Я просто в будущем именно их планировал изучать, но если это самый простой способ, то придётся смирится.

[Eduard Dankov]

Можно, но с PHP меньше кода.

Answer 2

[Воващ]

В вёрстке делаешь блок-обёртку для контента (c контентом естественно) => по клику на кнопку делаешь блок видимым
Стили подключаешь к html файлу (странице) => если тебе удобно работать с одним файлом, то работаешь с одним
В любом случае, потом следует свои css/scss/sass собрать в один и минифицировать (для этого можно использовать планировшик задач типа gulp)

Comments

[Айнур Ярулин]

не, мне нужно именно чтобы были разные файлы, например, чтобы не делать постоянно
новый header на каждой новой странице, а просто подключить его с помощью отдельного файла.
Я знаю, что это как-то можно сделать через PHP, но до этого языка я еще не добрался.

[Воващ]

squadbrodyaga, ну логичным решением будет и правда использовать пыху, которая будет из templat'ов что-то собирать, ниже пример контроллера для понимая

...
class Page extends CI_Controller {
    public function index()
    {;
        $this->smrt->display('header.tpl');
        $this->smrt->display('menu.tpl');
        $this->smrt->display('main-page.tpl');
        $this->smrt->display('footer.tpl');
    }
}
...

но, если мне память не изменяет есть плагин https://www.npmjs.com/package/gulp-rigger для gulp, коим при помощи
//= template/tpl.html
подключаем наши шаблоны

Answer 3

[Lord_Dantes]

Pug + SCSS/SASS + Gulp