Напишите компоненты React / Framework и создайте чистый html / css

#javascript #html #css #reactjs #frameworks

#javascript #HTML #css — код #reactjs #фреймворки

Вопрос:

Чего я пытаюсь добиться, так это создать инструмент, который позволит мне создавать веб-сайты, подобные конструкторам lego. Таким образом, у меня будет большинство уникальных блогов без лишнего кодирования. Например, я хочу 100 блогов, похожих на WordPress. Каждый блог будет иметь верхний / основной / боковой / нижний колонтитул. Итак, я подумываю о кодировании 5 заголовков, 5 основных, 5 боковых панелей, 5 нижних колонтитулов в качестве компонента. Затем я буду случайным образом использовать заголовок A, основной B, боковую панель C, нижний колонтитул D и вуаля, у меня есть первый блог 🙂 Блоги должны быть настолько уникальными, насколько это возможно при использовании этого метода. Во-вторых, важно то, что я должен иметь их как html / css, а не js. Итак, я искал фреймворк, который позволит мне достичь этого. Сначала я смотрел на gatsbyjs, но я не могу получить html-файлы, затем я попробовал nextjs, потому что там при сборке вы можете экспортировать 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?

Ответ №1:

посмотрите, хотите ли вы, чтобы ваше приложение было динамичным, тогда вам нужно использовать js или его библиотеку или фреймворки. Поскольку у вас есть предварительно написанный код на html / css, вы можете использовать React https://reactjs.org/docs/add-react-to-a-website.html который можно легко добавить в ваш html / css-код.

1. Мне не нужна динамика в этом 🙂 Мне нужен какой-то фреймворк, чтобы извлечь из него html / css. Затем я сохраню его в базе данных и выберу случайным образом 🙂

2. итак, как бы вы случайно выбрали нужный вам какой-нибудь язык программирования. это вы можете легко сделать, используя react