首页 > 解决方案 > 编写 React/Framework 组件并构建纯 html/css

问题描述

我想要完成的是构建工具,让我可以像乐高积木一样构建网站。这样,我将拥有最独特的博客,而无需太多编码。例如,我想要 100 个看起来像 wordpress 的博客。每个博客都会有页眉/主/侧边栏/页脚。所以我正在考虑将 5 个标题、5 个主要、5 个侧边栏、5 个页脚分别编码为组件。然后我将随机使用页眉 A、主 B、侧边栏 C、页脚 D,瞧我有第一个博客 :) 博客需要尽可能独特,因为它们可以使用这种方法。第二个重要的是我必须将它们作为 html/css 而不是 js。所以我一直在寻找可以让我实现这一目标的框架。首先我正在查看 gatsbyjs,但我无法获取 html 文件,然后我尝试了 nextjs,因为在 build U 中可以导出 html。但是在只有一个主页的简单博客中,我得到了这样的 index.html

<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <meta name="next-head-count" content="2" />
    <noscript data-n-css=""></noscript>
    <link
      rel="preload"
      href="/_next/static/chunks/main-925041ce925730787a8a.js"
      as="script"
    />
    <link
      rel="preload"
      href="/_next/static/chunks/webpack-50bee04d1dc61f8adf5b.js"
      as="script"
    />
    <link
      rel="preload"
      href="/_next/static/chunks/framework.6323d7e8995473683279.js"
      as="script"
    />
    <link
      rel="preload"
      href="/_next/static/chunks/f6078781a05fe1bcb0902d23dbbb2662c8d200b3.964928bcb82fd5c6065f.js"
      as="script"
    />
    <link
      rel="preload"
      href="/_next/static/chunks/pages/_app-0a8231baaa9660ceaca9.js"
      as="script"
    />
    <link
      rel="preload"
      href="/_next/static/chunks/pages/index-7638f3314f35e6ffac1c.js"
      as="script"
    />
  </head>
  <body>
    <div id="__next"><div>Welcome to the Next.js blog</div></div>
    <script id="__NEXT_DATA__" type="application/json">
      {
        "props": { "pageProps": {} },
        "page": "/",
        "query": {},
        "buildId": "ElUp7syt_UnrlISSJbfd4",
        "nextExport": true,
        "autoExport": true,
        "isFallback": false
      }
    </script>
    <script
      nomodule=""
      src="/_next/static/chunks/polyfills-4acaa4b69e5977b3ab87.js"
    ></script>
    <script
      src="/_next/static/chunks/main-925041ce925730787a8a.js"
      async=""
    ></script>
    <script
      src="/_next/static/chunks/webpack-50bee04d1dc61f8adf5b.js"
      async=""
    ></script>
    <script
      src="/_next/static/chunks/framework.6323d7e8995473683279.js"
      async=""
    ></script>
    <script
      src="/_next/static/chunks/f6078781a05fe1bcb0902d23dbbb2662c8d200b3.964928bcb82fd5c6065f.js"
      async=""
    ></script>
    <script
      src="/_next/static/chunks/pages/_app-0a8231baaa9660ceaca9.js"
      async=""
    ></script>
    <script
      src="/_next/static/chunks/pages/index-7638f3314f35e6ffac1c.js"
      async=""
    ></script>
    <script
      src="/_next/static/ElUp7syt_UnrlISSJbfd4/_buildManifest.js"
      async=""
    ></script>
    <script
      src="/_next/static/ElUp7syt_UnrlISSJbfd4/_ssgManifest.js"
      async=""
    ></script>
  </body>
</html>```

Its a lot of scripts that i don't really need. Then i was thinking maybe jekyll but also couldnt find html to export. So now i.m writing here, because maybe some of U know any framework that will let me accomplish what i'm trying to do?

标签: javascripthtmlcssreactjsframeworks

解决方案


看看您是否希望您的应用程序是动态的,那么您需要使用 js 或其库或框架。由于您在 html/css 中有预先编写的代码,因此您可以使用 React https://reactjs.org/docs/add-react-to-a-website.html,它可以轻松添加到您的 html/css 代码中。


推荐阅读