Как я могу повторно использовать один и тот же фрагмент HTML / CSS в нескольких файлах? - PullRequest
Новая
       0

Как я могу повторно использовать один и тот же фрагмент HTML / CSS в нескольких файлах?

2 голосов
/ 05 мая 2020

У меня много файлов с перекрывающимся HTML / CSS (например, панель навигации, контактная информация). Есть ли способ сохранить эти коды, чтобы, если мне нужно внести изменения, мне нужно было отредактировать только один файл, а не просматривать все мои файлы? Я видел, как люди используют JavaScript, но я видел, что это применяется только к HTML, а не HTML И CSS.

Вот мой CSS для контактной информации, например: 

 .fa-envelope {
   color: black;
   text-decoration: none;
} 
 .fa-envelope:hover {
   color: #8790ff;
   transition: 1s;
 }
 .fa-linkedin-in {
   color: black;
   text-decoration: none;
 } 
.fa-linkedin-in:hover {
   color: #8790ff;
   transition: 1s;
 }
.fa-github {
   color: black;
   text-decoration: none;
} 
.fa-github:hover {
   color: #8790ff;
   transition: 1s;
}
@media screen and (max-width: 599px) {
   .fa-envelope {
       padding-top: 50px;
       padding-bottom: 50px;
       padding-right: 25px;
       font-size: 20px;
   }
  .fa-linkedin-in {
       padding: 50px 25px 50px 25px;
       font-size: 20px;
  } 
  .fa-github {
       padding: 50px 25px 50px 25px;
       font-size: 20px;
  } 
}   
@media screen and (min-width: 600px) and (max-width: 999px) {
   .fa-envelope {
       padding-top: 50px;
       padding-bottom: 50px;
       padding-right: 25px;
       font-size: 25px;
   }
   .fa-linkedin-in {
       padding: 50px 25px 50px 25px;
       font-size: 25px;
   } 
   .fa-github {
       padding-top: 50px;
       padding-bottom: 50px;
       padding-left: 25px;
       font-size: 25px;
   } 
} 
@media screen and (min-width: 1000px) and (max-width: 1024px) {
   .fa-envelope {
       padding-top: 50px;
       padding-bottom: 50px;
       padding-right: 25px;
       font-size: 30px;
   }
   .fa-linkedin-in {
       padding: 50px 25px 50px 25px;
       font-size: 30px;
   } 
   .fa-github {
       padding: 50px 25px 50px 25px;
       font-size: 30px;
   } 
} 
@media screen and (min-width: 1025px) {
   .fa-envelope {
       padding-top: 50px;
       padding-bottom: 50px;
       padding-right: 25px;
       font-size: 30px;
   }
   .fa-linkedin-in {
       padding: 50px 25px 50px 25px;
       font-size: 30px;
   } 
   .fa-github {
       padding: 50px 25px 50px 25px;
       font-size: 30px;
   } 
 }

HTML

<head>
    <script src="https://kit.fontawesome.com/3fdadcecb8.js"></script>
</head>
<body>
<div align = "center">
    <a href = "mailto: angela.haiqi@gmail.com" class = "fas fa-envelope"></a>
    <a href = "https://www.linkedin.com/in/angela-liu-8a281716a/" class = "fab fa-linkedin- 
    in"></a>
    <a href = "https://github.com/angelahaiqi" class = "fab fa-github"></a>
</div>
</body>

Я бы хотел, чтобы контактная информация была внизу каждой страницы. Как мне импортировать это?

Ответы [ 4 ]

3 голосов
/ 05 мая 2020

Вы не можете «включить» HTML документы в другие HTML документы, используя HTML.

Для X HTML технически существует XInclude, но я сомневаюсь, что какой-либо браузер поддерживает его больше, чем для тестирования цель, поскольку частое использование XML никогда не становилось популярным в сети.

Это означает: вы застряли в использовании серверных механизмов для сборки документа из частей перед отправкой его клиенту. Каким-то образом это выходит за рамки одного вопроса на SO, чтобы назвать все возможные способы, но некоторые примеры могут включать:

  • специфические c специфические веб-серверы c механизмы, такие как Apache SSI (или аналогичные модули для других веб-серверов)
  • серверные языки сценариев, такие как NodeJS, PHP или ASP
  • механизмы шаблонов.

В качестве альтернативы вы можете использовать клиентскую Javascript и асинхронные фоновые запросы (AJAX), чтобы загрузить дополнительный документ и прикрепить его к вашей DOM. Вы также можете загрузить CSS таким образом - или просто сразу добавить CSS с тегом <link>.

2 голосов
/ 05 мая 2020

Что ж, в случае CSS вы можете просто включить его на все страницы, на которых вы sh (используя, например, тег <link>).

HTML случай немного сложнее . То, что вы ищете, обычно называют «шаблонами». Нет (или, по крайней мере, я никогда не слышал) собственного способа создания HTML шаблонов.

Сказал, у вас есть 3 хороших и довольно распространенных варианта:

  1. Если ваш На сайте есть какая-либо серверная часть, вы должны иметь возможность создавать HTML шаблонов, используя выбранный вами язык серверной части (например, Node.js). Таким образом вы можете разделить свой HTML на части, обычно называемые «частичными».
  2. Вы можете создать приложение SPA, используя что-то вроде React , Vue или Angular. Таким образом, вы можете разделить свой HTML на части, называемые «компонентами».
  3. Вы также можете сгенерировать веб-сайт stati c с генератором веб-сайтов stati c, например Gatsby , Далее или Nuxt . Этот способ развития очень похож на пункт 2.
1 голос
/ 05 мая 2020

Тег ссылки добавляет ссылку на таблицу стилей. Вам просто нужно создать файл css с этим css в нем. 

<link rel="stylesheet" type="text/css" href="url_of_stylesheet" hreflang="en>
0 голосов
/ 05 мая 2020

Вы можете использовать PHP, потому что гораздо проще включить один файл в другие файлы с помощью PHP, что с обычным HTML. Решения

  1. С PHP
 <?php
   include('filename.php');
 ?>

Написание кода в JS и включение нужного файла

<script src="file_name.js"></script>

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...