如何在网页上显示不断变化的主要内容，保持布局、菜单和页脚

我的主网页(index.html(遵循一个通用结构(简化(：

<html>
<head>
<title>...</title>
<meta name=description content="...">
<link rel=stylesheet href="main.css"/>
[... including @font-face loads ]
</head>
<body>
<div id=menu>...</div>
<div id=mainContent>
...
</div>
<div id=footer>...</div>
<script src="jquery.min.js"></script>
... more scripts
<body>
</html>

web服务器配置良好，因此所有静态文件都被缓存，并且在刷新页面时不会在客户端重新加载。

在从网站(主要是从"菜单"或"页脚"(选择链接时，我希望在div标记"mainContent"中显示不同的内容。页面布局，CSS，字体，脚本，菜单，页脚-都是一样的。我已经确定了几种实现这一目标的方法：

构建一个新的subPage.html文件，复制index.html中的所有内容，然后重写div"mainContent"添加所需的其他内容并更改页面细节，如标题、描述等。或者使用php在mainContent中包含所需内容，并更改页面特定值，如"title"。从index.html链接到href="子页面.html"；。
缺点：
- 维护：当更改外部"包装器"中的任何内容时，我必须编辑每个子页面
- 不知道如何轻松地从index.html传输值到subPage.html，在cookie(不总是允许(或URL旁边参数
使用javascript onClick处理程序(事件侦听器(使用XHttpsRequest从服务器加载请求的内容，并交换div mainContent的innerHtml。
缺点：
- 不可能有noscript版本
- 我不断变化的内容可能没有被谷歌机器人等建立索引，因为它没有用index.html加载。如果"alternativ内容"保存在基本目录中的.html文件中，这样它就可以浏览和发现了，这会改变这种情况吗
上一篇：
- 保留javascript变量
- 无需重新加载外部页面，从而获得最佳用户体验
使用样式为"的第二个div'mainContent2'；显示：无"；。使用javascript onClick处理程序将两个mainContentdiv的显示样式切换为none&lt-&gt；块
上一篇：
- 易于实现
- 所有内容都已加载并因此进行SEO索引
缺点：
- 所有内容都必须同时加载，所以index.html可能会变得很大

[4.iframe可能不是一个选项(因为src属性是静态的(]

我倾向于选择第二种选择。

推荐其他工艺吗？什么是"最佳实践"？专业人士通常是如何做到这一点的？建议？请详细说明。

我会根据每个选项给你一些答案：

PHP

您可以使用PHP导入页眉和页脚，而不是主内容，这样您就只有一个带有标头的文件和另一个使用页脚和您创建的所有页面contents将导入页眉和页脚，避免重复。

是否需要无脚本版本？我从来没有见过有人禁用js，但我不知道你的应用程序，这可能是一个预先要求。

您可以使用现代js框架，如Next+Rreact/Nuxt+Vue/Remix/Svelte/。。。这里有很多选项可以为您提供SSR(服务器端渲染(，并使谷歌机器人满意

SPA

这似乎是一个SPA。您可以使用我在第二项中提到的一些现代js框架。你也需要考虑延迟加载图像。我不知道这个内容有多大，但你可以试试谷歌灯塔，看看这种方法中的页面大小是否有问题，也可以在服务器上启用gzip。

OR。。。

以上所有

您也可以将它们一起使用。一个前端框架从用PHP编写的API获取数据，为什么不呢？PHP可以验证请求类型，如果是第一个请求，则可以传递HTML；如果应用程序已经加载，则可以发送JSON。

最常见的解决方案可能是选项1的变体。但与你想象的不同。创建具有内容的header.php

<html>
<head>
<title>...</title>
<meta name=description content="...">
<link rel=stylesheet href="main.css"/>
[... including @font-face loads ]
</head>
<body>
<div id=menu>...</div>

并创建内容为的CCD_ 2

<div id=footer>...</div>
<script src="jquery.min.js"></script>
... more scripts
<body>
</html>

然后创建一个类似index.php的

<?php include('header.php'); ?>
<div id=mainContent>
...content index page...
</div>
<?php include('footer.php'); ?>

然后创建类似subpage.php的子页面

<?php include('header.php'); ?>
<div id=mainContent>
...content subpage...
</div>
<?php include('footer.php'); ?>

这样，如果页眉或页脚中的任何内容需要更改，则编辑header.php文件，这些更改将在所有页面上生效，因为header.php将包含在每一页上。

相关内容

最新更新

热门标签：