diff --git a/.posthtmlrc.js b/.posthtmlrc.js
new file mode 100644
index 0000000000000000000000000000000000000000..3dceabbc85921ce91319637e99d4267bb4dcf6b9
--- /dev/null
+++ b/.posthtmlrc.js
@@ -0,0 +1,7 @@
+module.exports = {
+ plugins: {
+ "posthtml-include": {
+ root: __dirname + "/src",
+ },
+ },
+};
diff --git a/package-lock.json b/package-lock.json
index 2ce38fbf3ba4a10e63119feba3fe655b443ba271..5f66742c9b1dd6c9db00ae71d823d475a9344f00 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3119,6 +3119,12 @@
"integrity": "sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ==",
"dev": true
},
+ "fclone": {
+ "version": "1.0.11",
+ "resolved": "https://registry.npmjs.org/fclone/-/fclone-1.0.11.tgz",
+ "integrity": "sha1-EOhdo4v+p/xZk0HClu4ddyZu5kA=",
+ "dev": true
+ },
"file-uri-to-path": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
@@ -5349,6 +5355,38 @@
"posthtml-render": "^1.1.5"
}
},
+ "posthtml-expressions": {
+ "version": "1.4.3",
+ "resolved": "https://registry.npmjs.org/posthtml-expressions/-/posthtml-expressions-1.4.3.tgz",
+ "integrity": "sha512-Q7VWNThumerTQh96kSdSbkhJDzK7mV5ZU+fxAOmHpe8MRsXNFZit+YccK+KhqTB6mZ6GkCo19uj1pVWswX2maA==",
+ "dev": true,
+ "requires": {
+ "fclone": "^1.0.11"
+ }
+ },
+ "posthtml-include": {
+ "version": "1.4.3",
+ "resolved": "https://registry.npmjs.org/posthtml-include/-/posthtml-include-1.4.3.tgz",
+ "integrity": "sha512-2DOe1OIzhIOXUfHDGjGiH/VmdliT3rZ4Fcc/wyG9QxM+jhPbBWPQMJwisI6X4CrPrzU2YqXlrFS+JfwtB/9hww==",
+ "dev": true,
+ "requires": {
+ "posthtml": "^0.12.1",
+ "posthtml-expressions": "^1.3.2",
+ "posthtml-parser": "^0.4.2"
+ },
+ "dependencies": {
+ "posthtml": {
+ "version": "0.12.3",
+ "resolved": "https://registry.npmjs.org/posthtml/-/posthtml-0.12.3.tgz",
+ "integrity": "sha512-Fbpi95+JJyR0tqU7pUy1zTSQFjAsluuwB9pJ1h0jtnGk7n/O2TBtP5nDl9rV0JVACjQ1Lm5wSp4ppChr8u3MhA==",
+ "dev": true,
+ "requires": {
+ "posthtml-parser": "^0.4.2",
+ "posthtml-render": "^1.2.2"
+ }
+ }
+ }
+ },
"posthtml-parser": {
"version": "0.4.2",
"resolved": "https://registry.npmjs.org/posthtml-parser/-/posthtml-parser-0.4.2.tgz",
diff --git a/package.json b/package.json
index b73e05cd0fdc395b58ef71ce725e48ba5bf0ba0d..7636abca8ac7872aa07d3d7430aaf0a8e175eead 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
"homepage": "https://github.com/goitacademy/parcel-project-template#readme",
"devDependencies": {
"parcel-bundler": "^1.12.4",
+ "posthtml-include": "^1.4.3",
"sass": "^1.26.9"
}
}
diff --git a/src/index.html b/src/index.html
index dcd0ae8da37159b873df7af8c7efd94d8653e38e..96de97976856c7cfc90670ccbd2f30a76734e742 100644
--- a/src/index.html
+++ b/src/index.html
@@ -6,6 +6,9 @@
<title>Заголовок Ñтраницы</title>
</head>
<body>
+ <!-- Так добавлÑÑŽÑ‚ÑÑ Ñ„Ñ€Ð°Ð³Ð¼ÐµÐ½Ñ‚Ñ‹ в главные HTML-файлы Ñтраниц -->
+ <include src="./partials/example.html"></include>
+
<!-- Скрипт идёт поÑледним в разметке -->
<script src="index.js"></script>
</body>
diff --git a/src/partials/example.html b/src/partials/example.html
new file mode 100644
index 0000000000000000000000000000000000000000..9eae88f914d021561515efba36a6315eedc73ca6
--- /dev/null
+++ b/src/partials/example.html
@@ -0,0 +1,32 @@
+<article class="example">
+ <h1>HTML-фрагменты</h1>
+
+ <p>
+ Плагин
+ <a
+ href="https://github.com/posthtml/posthtml-include"
+ target="_blank"
+ rel="noopener noreferrer"
+ >
+ posthtml-include
+ </a>
+ позволÑет добавлÑÑ‚ÑŒ в HTML-файлы Ñтраниц код из других HTML-файлов
+ (фрагментов). Фрагменты хранÑÑ‚ÑÑ Ð² папке
+ <code>src/partials</code>. Добавление проиÑходит при компилÑции файлов
+ Ñтраниц, например <code>index.html</code>.
+ </p>
+
+ <p>
+ Ðтот файл <code>example.html</code> — пример такого фрагмента, Ñ
+ разметкой определённой чаÑти главной Ñтраницы. Ðто очень удобно при
+ командной разработке на ÑтуденчеÑких проектах, когда в одном HTML-файле
+ пишет неÑколько человек Ñразу.
+ </p>
+
+ <p>
+ СинтакÑÐ¸Ñ Ð´Ð¾Ð±Ð°Ð²Ð»ÐµÐ½Ð¸Ðµ фрагмента в главный файл:
+ <code>
+ <include src="./partials/имÑ-файла.html"></include>
+ </code>
+ </p>
+</article>
diff --git a/src/sass/_example.scss b/src/sass/_example.scss
new file mode 100644
index 0000000000000000000000000000000000000000..406032d71db6e0b8b2d5679e0a6b8e131ab28f60
--- /dev/null
+++ b/src/sass/_example.scss
@@ -0,0 +1,17 @@
+.example {
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
+ Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+ line-height: 1.5;
+ color: #212121;
+ max-width: 960px;
+ padding: 15px;
+}
+
+.example code {
+ font-family: monospace;
+ font-size: 16px;
+ font-weight: 700;
+ background-color: lightgrey;
+ padding: 2px 6px;
+ border-radius: 2px;
+}
diff --git a/src/sass/main.scss b/src/sass/main.scss
index 8b137891791fe96927ad78e64b0aad7bded08bdc..80b0fbe929fef5d890c1606146c14fb44a4a536d 100644
--- a/src/sass/main.scss
+++ b/src/sass/main.scss
@@ -1 +1 @@
-
+@import "./example";