在基於組件的網站設計中的 javascript 或 html 中的標題

Question

我喜歡為不同組件創建不同文件夾的基於組件的方法。 所以我目前有：

- components/
  - heading/
    - heading.css
    - heading.js
    - heading.html

我希望我的 html 看起來像下面的標題代碼（包括引導程序和自定義 css 類）：

<body>
    <div class="container text-white">
        <div class="position-relative pb-5">
            <h1 class="position-absolute top-0 start-50 translate-middle-x display-1">HEADING</h1>
        </div>
</body>

我如何實現這一目標？ 我應該將此html導入到js中（我正在使用 webpack），還是應該在創建兩個div並將其附加到正文后手動在js中添加這些類？ 我知道第二個選項很乏味，但我認為第一個選項不會使標題可重復用於其他頁面。 有沒有我沒有提到的更好的方法？

Answer 1

您的問題很難回答，因為“更好的方法”取決於您的項目和您的目標。 But i think that you start coding, so you maybe want to import your Javascript code inside your html heading.html page, and same for your css file (using Bootstrap is not an obligation, if you learn something, use CSS directly should be better和高效）。 Webpack 將按照您的操作和設置方式來提供一個或任何捆綁文件供您的服務器使用。 它與您的項目配置方式無關。 I mean, you can just build your project and care about webpack at the end or directly configure Webpack and go for your project (if you want some splited files for CSS you can also config Webpack for that, and also for dynamic update of your bundle's文件。但這與您的問題無關。如果您的問題是“如何在主文件中導入 html 文件（我們說：標題的文件）”，那么您可以從 Javascript 代碼中執行此操作。然后您可以 Z99958282F04F161 html 標簽，或使用 id。正如我告訴你的，對我來說，很難用模糊的問題來幫助你，因為它可以是許多不同的方式來練習成為“最好的方式”（也是“最好的方式”） ” 可以是一種意見）。希望這會對您有所幫助。

在基於組件的網站設計中的 javascript 或 html 中的標題

問題描述

1 個解決方案

解決方案1
0 2021-03-22 15:05:54

在基於組件的網站設計中的 javascript 或 html 中的標題

問題描述

1 個解決方案

解決方案1 0 2021-03-22 15:05:54

解決方案1
0 2021-03-22 15:05:54