Добавляет posthtml-include и пример использования

8151e008 · Alexander Repeta · 96c0f259 · 8151e008 · 8151e008 · 8151e008
Commit 8151e008 authored 4 years ago by Alexander Repeta
--- a/.posthtmlrc.js
+++ b/.posthtmlrc.js
+module.exports = {
+  plugins: {
+    "posthtml-include": {
+      root: __dirname + "/src",
+    },
+  },
+};
--- 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",

--- 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"
  }
 }
--- 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>

--- a/src/partials/example.html
+++ b/src/partials/example.html
+<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> &mdash; пример такого фрагмента, с
+    разметкой определённой части главной страницы. Это очень удобно при
+    командной разработке на студенческих проектах, когда в одном HTML-файле
+    пишет несколько человек сразу.
+  </p>
+
+  <p>
+    Синтаксис добавление фрагмента в главный файл:
+    <code>
+      &lt;include src="./partials/имя-файла.html"&gt;&lt;/include&gt;
+    </code>
+  </p>
+</article>
--- a/src/sass/_example.scss
+++ b/src/sass/_example.scss
+.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;
+}
--- a/src/sass/main.scss
+++ b/src/sass/main.scss
-
+@import "./example";