如何将由JavaScript创建的HTML网站的标签内容放入单独的文件中?

huangapple go评论60阅读模式
英文:

How to put content of javascript-created tabs of an html-created website in separate files?

问题

一个示例在这里。该网站以HTML编写,选项卡是通过JavaScript创建的。正如您从源代码中可以看到的,位于每个“tabcontent”类下的内容对于所有选项卡都略显冗长,无法在一个大文件中编写。

https://lwymarie.github.io/

我想知道是否有一种极简的方法可以将选项卡内容放在单独的文件中,例如命名为tab1.html、tab2.html,然后在index.html主文件中包含或链接这些“模块”文件。

我注意到类似的问题在StackOverflow上已经被提出,如下所示,但似乎讨论已经朝不同的方向发展。

https://stackoverflow.com/questions/49918732/html-tabs-with-content-in-separate-files

我在StackOverflow上找到了涉及jQuery或PHP的解决方案,但这些解决方案似乎没有直接解决由JavaScript创建的选项卡的存在。

或者,如果更好的写作实践实际上不是“模块化”,而是使用单个HTML文件,请也对此发表评论。

英文:

An example is here. The website is written in html and the tabs are created from javascript. As you can see from the source code, the content under each "tabcontent" class is getting a little long for all tabs to be written in one bulk file.
https://lwymarie.github.io/

I wonder if there's a minimalist way to put tab contents in separate files that are named e.g. tab1.html, tab2.html, and then include or link these "module" files in the index.html main file.

I note that a similar question has been asked in stackoverflow, linked below, however it seems the discussion has gone into a different direction.
https://stackoverflow.com/questions/49918732/html-tabs-with-content-in-separate-files

I found solutions on stackoverflow that invoke jquery or php, but those solutions don't seem to directly address the presence of javascript created tabs.

Alternatively, in case that the better writing practice is actually not to "modulize" but have a single html file, please comment on that too.

答案1

得分: 1

HTML导入不存在,因此您大致有三个选项:

  1. 将每个选项卡移到不同的文件中。从导航中链接到这些HTML文件。这样做的一个直接缺点是(除非进行更多的工作),您需要将导航或全局结构的任何更改复制粘贴到多个文件中。

  2. 将所有内容移到不同的文件中,但使用框架(或iframes)加载导航等内容。您需要巧妙地定位这些链接,否则它们将影响框架内容(target="parent")。

  3. 保持单个HTML文件,并从一些JS文件中导入每个选项卡的数据。随着您尝试有效地复制JSX(一种用于在JavaScript中创建HTML模板的语言),这将迅速变得非常棘手。

这个要求很接近通过像NextJS这样的东西更容易实现,NextJS是一个现代框架,可以很容易地构建和部署类似的小型站点。每个文件将是单独的页面,但您可以跨它们导入全局样式和布局。如果您有耐心研究这个,可以查看NextJS教程,它构建了一个非常相似的项目。

英文:

HTML imports don't exist so you broadly have three options:

  1. Move each tab to a different file. Link between these HTML files from the navigation. The immediate con of this is (without some more work) you are copy pasting any changes to your navigation or global structure across several files.

  2. Move everything to different files but use frames (or iframes) to load in things like the navigation. You'll have to be clever with your targeting of these links, or they will just affect the frame contents (target="_parent").

  3. Keep a single HTML file, and import your data in each tab from some JS files. This will quickly become very tricky as you try to effectively replicate JSX, a language for creating HTML templates inside javascript.

This requirement gets very close to being fulfilled more easily by something like NextJS, a modern framework which makes it quite easy to build and deploy small sites like this. Each file would be separate page, but you could import global styles and layout across them. If you have the patience to look into this check out the NextJS tutorial which builds something very similar.

huangapple
  • 本文由 发表于 2023年2月24日 08:05:37
  • 转载请务必保留本文链接:https://go.coder-hub.com/75551519.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定