本文围绕Bootstrap展开，介绍了基于其框架的Tabler模板，包括特点、安装使用方法等。还提及浏览器支持情况、Markdown转HTML等基本信息。阐述了页面头部、表单组件等使用场景，以及导航栏在不同技术（如Vue、Django）中的可重用实现方式。
BootStrap(1)之基础信息
Author: Once Day Date: 2024年2月3日
漫漫长路，才刚刚开始…
参考文档:
- Bootstrap 入门 · Bootstrap v5 中文文档 v5.3 | Bootstrap 中文网 (bootcss.com)
- Tabler - free and open-source HTML Dashboard UI Kit built on Bootstrap (bootcss.com)
- Introduction - Tabler - Premium and Open Source dashboard template with responsive and high quality UI. (bootmb.com)
- Premium dashboard template with responsive and high quality UI - Tabler: Free and Open-Source HTML Dashboard Template
- Tabler: Free and Open-Source HTML Dashboard Template
1. 基本信息
1.1 介绍
Tabler 是基于 Bootstrap 框架的一个开源的管理面板界面模板。它提供了一套丰富的 UI 组件和元素，以及漂亮且响应式的布局，使得开发者能够快速构建现代化的后台管理系统或者控制面板。Tabler 利用了 Bootstrap 的栅格系统和组件，同时还引入了自己的设计语言和特性，以增强视觉效果和用户体验。
特点：
- 响应式设计：Tabler 设计为响应式，能够适配不同尺寸的屏幕和设备。
- 现代化界面：采用了最新的设计趋势，界面简洁、现代。
- 易于定制：通过变量、Sass 文件和构建工具，Tabler 可以容易地定制以符合你的品牌或风格。
- 免费和开源：Tabler 遵循 MIT 许可证，允许你免费使用并修改代码。
- 内置组件：提供了表格、表单、按钮、图表等多种预制组件，方便开发者使用。
- 交互式插件：集成了多种 JavaScript 插件，如图表库（例如 Chart.js）和数据表格等。
如何使用：
-
安装：
你可以通过克隆 GitHub 仓库、下载 ZIP 包或使用包管理器（如 npm）来安装 Tabler。例如，通过 npm 安装：
npm install @tabler/core --save -
查看文档：
访问 Tabler 的官方文档，了解如何开始使用 Tabler，以及如何利用其提供的组件和功能。 -
修改和定制：
你可以通过修改 Sass 文件来定制样式，或者根据需要扩展和替换组件。 -
编译构建：
如果你对源码进行了修改，你可能需要重新编译资源。这通常涉及运行构建脚本，如使用 webpack 或其他任务运行器。
示例代码：
HTML 文件中的一个基本 Tabler 布局示例：
<!doctype html>
<html lang="en">
<head>
<!-- ... -->
<link href="path/to/tabler.min.css" rel="stylesheet"/>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-12">
<h1>Welcome to Tabler!</h1>
<!-- Your content here -->
</div>
</div>
</div>
<script src="path/to/tabler.min.js"></script>
</body>
</html>
请注意，上述信息和代码仅提供了如何开始使用 Tabler 的大致概念。对于具体项目，你需要查看 Tabler 的官方文档，获取更详细的使用指南和最佳实践。
1.2 基础使用
Tabler是一个UI工具包，它加快了开发过程，使其比以往任何时候都更容易!它建立在Bootstrap的最新版本上，它可以帮助您基于完全可定制和随时可用的UI组件创建模板，这些组件可以被简单的网站和复杂的系统使用。有了HTML和CSS的基本知识，你将能够创建功能齐全、设计精美的仪表板!
要使用我们的构建系统并在本地运行我们的文档，您需要Tabler源文件的副本。
- 安装
Node.js，我们用它来管理我们的依赖。 - 导航到root
/tabler目录，运行npm install来安装package.json中列出的本地依赖项。 - 安装Ruby，推荐的版本是2.5.5。
- 使用
gem Install Bundler安装Bundler，最后运行bundle Install。它将安装所有Ruby依赖项，例如Jekyll和插件。
Windows用户:
-
在
C:\Program Files\git\bin目录下安装Git，然后运行下面命令来改变默认的shell。npm config set script-shell "C:\Program Files\ Git \bin\bash.exe -
安装
Ruby+Devkit-推荐版本是2.5.5。 -
阅读指南，让杰基尔没有问题地启动和运行。
完成设置后，就可以运行命令行提供的各种命令了。
本地构建:
- 在
root /tabler目录下，在命令行中运行npm run start。 - 在浏览器中打开
http://localhost:3000，然后可以观察整个界面了。 - 在
/src目录中的任何更改都将构建应用程序并刷新页面。
也可以直接下载已经编译好的CSS和JavaScript文件:
所有包含在@tabler/core npm包中的文件都可以通过unpkg CDN获得。使用它将Tabler编译的CSS和JS的缓存版本交付到您的项目中。
<script src="https://unpkg.com/@tabler/core@1.0.0-beta3/dist/js/tabler.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@tabler/core@1.0.0-beta3/dist/css/tabler.min.css">
你也可以包括额外的table插件:
<link rel="stylesheet" href="https://unpkg.com/@tabler/core@1.0.0-beta3/dist/css/tabler-flags.min.css">
<link rel="stylesheet" href="https://unpkg.com/@tabler/core@1.0.0-beta3/dist/css/tabler-payments.min.css">
<link rel="stylesheet" href="https://unpkg.com/@tabler/core@1.0.0-beta3/dist/css/tabler-vendors.min.css">
1.3 浏览器支持情况
在这个最新版本中，Tabler推出了许多新特性，这些特性可能不兼容所有浏览器，尤其是旧浏览器。
例如，除了少数部分之外，Tabler不再在样式中使用已知存在一些兼容性问题的供应商前缀。Tabler还支持一些新特性，比如CSS网格、对象适配和粘性定位，这些还不是所有浏览器都支持的。简而言之，Tabler支持所有最新支持的浏览器，仅部分支持Internet Explorer。
| BROWSER | VERSION |
|---|---|
| Edge | last 3 versions |
| Firefox | last 3 versions, ESR |
| Chrome | last 3 versions |
| Safari | last 3 versions |
| Opera | last 3 versions |
| Electron | last 3 versions |
| Brave | last 3 versions |
| Vivaldi | last 3 versions |
1.4 markdown转换html
在Python后端转换Markdown文件到HTML，你可以使用多种库，比如markdown包或者mistune等。以下是使用markdown库的一个简单例子：
首先，你需要安装markdown库（如果你还没有安装的话）：
pip install markdown
然后，你可以使用以下的Python代码来转换Markdown文本到HTML：
import markdown
# 你的Markdown文本
md_text = """
# 标题
这是一段普通文本
## 子标题
- 列表项1
- 列表项2
[链接名称](http://example.com)
"""
# 转换Markdown到HTML
html = markdown.markdown(md_text)
# 打印输出或者用于HTTP响应
print(html)
转换后的html变量将包含HTML代码，你可以将这个HTML代码发送给客户端浏览器。在Web框架（如Flask或Django）中，你通常会在视图函数中执行这个转换，并在HTTP响应中返回转换后的HTML。例如，在Flask中：
from flask import Flask, Markup
import markdown
app = Flask(__name__)
@app.route('/')
def md_to_html():
md_text = """
# Hello World
Here is some *Markdown*!
"""
html = markdown.markdown(md_text)
# Flask中可以使用Markup类来标记字符串为安全的，这样Flask不会对其进行转义
return Markup(html)
if __name__ == '__main__':
app.run()
在这个例子中，当你访问Flask应用的根目录时，它会将Markdown转换为HTML并显示在浏览器中。记得使用Markup来标记这个字符串为安全的，否则Flask可能会转义HTML，导致浏览器显示的是HTML代码而不是渲染后的结果。
1.5 Tabler本地静态文件
Tabler 是一个基于 Bootstrap 的免费开源 HTML 模板，用于构建响应式、移动端优先的Web界面。要将 Tabler 集成到 Django 项目中，您需要将 Tabler 的静态文件和模板复制到您的 Django 项目中。下面是一个简单的步骤说明，假设您已经有一个现成的 Django 项目。
-
获取 Tabler 源码：
- 您可以从 Tabler 的 GitHub 仓库 克隆或下载 Tabler 源码。
- 解压下载的文件（如果是 zip 格式）。
-
整合静态文件：
- 在您的 Django 项目中创建一个名为
tabler的应用，或者直接将静态文件放入已存在的静态文件目录中。 - 将 Tabler 中的
dist文件夹内的文件复制到 Django 应用的static文件夹中。这些文件通常包括 CSS、JS 和图片文件。
- 在您的 Django 项目中创建一个名为
-
整合模板：
- 将 Tabler 的 HTML 模板文件复制到 Django 应用的
templates文件夹中。 - 如果 Tabler 使用了
.html文件扩展名而不是 Django 默认的.html，你可能需要重命名文件。
- 将 Tabler 的 HTML 模板文件复制到 Django 应用的
-
配置 Django 项目：
- 确保您的 Django 项目设置正确。在
settings.py中，添加tabler应用（如果创建了新应用）到INSTALLED_APPS中，并且配置STATICFILES_DIRS和TEMPLATES设置以包含正确的路径。
- 确保您的 Django 项目设置正确。在
# settings.py
INSTALLED_APPS = [
# ...
'tabler',
# ...
]
STATICFILES_DIRS = [
# ...
os.path.join(BASE_DIR, 'tabler/static'),
# ...
]
TEMPLATES = [
{
# ...
'DIRS': [
os.path.join(BASE_DIR, 'tabler/templates'),
# ...
],
# ...
},
]
- 使用 Tabler 模板：
- 在您的 Django 视图中，您可以引用 Tabler 的模板并渲染它们。例如：
from django.shortcuts import render
def my_view(request):
return render(request, 'tabler/my_template.html')
- 运行 Django 项目并测试：
- 使用
python manage.py runserver命令来启动您的 Django 开发服务器。 - 在浏览器中访问您的视图，检查 Tabler 的界面是否正确加载和显示。
- 使用
确保您遵守了 Tabler 的许可协议，并且在生产环境中还需考虑静态文件的服务和管理（例如使用 collectstatic 命令以及配置静态文件存储）。
1.6 Prettier格式化
prettier-ignore 是用于告诉 Prettier 格式化工具忽略一部分代码格式化的注释指令。使用 prettier-ignore 后，紧随其后的代码块或元素将不会被 Prettier 自动格式化。
如果你想让 Prettier 忽略某些代码，你可以像这样使用 prettier-ignore 注释：
// prettier-ignore
const unformatted = {foo: "bar"};
在这个例子中，对象 unformatted 将不会被 Prettier 格式化。
然而，如果你想要“开启” Prettier 的格式化（即取消忽略），你只需简单地不加 prettier-ignore 注释。Prettier 会自动格式化所有没有被 prettier-ignore 注释的代码。
目前，Prettier 并没有提供像“prettier-ignore-start”和“prettier-ignore-end”这样的注释宏来标记代码块的开始和结束。所以，如果你想重新启用 Prettier 格式化，你需要确保没有包含 prettier-ignore。
例如，以下代码中第一个对象会被忽略，第二个对象会被格式化：
// prettier-ignore
const unformatted1 = {foo: "bar"};
const formatted = { foo: "bar" };
如果你想要 Prettier 格式化之前被 prettier-ignore 忽略的部分，你需要移除或注释掉 prettier-ignore 指令。
总之，prettier-ignore 是用来关闭 Prettier 的自动格式化，而要开启格式化，只需让代码不被 prettier-ignore 注释即可。
2. 使用
2.1 页面头部使用
2.2 表单组件
参考文档:
表单是与网站或应用程序交互的最重要类型之一。由于表单的目的是让用户进行购买、订阅服务或注册创建帐户，因此确保表单易于完成并有助于提高转化率非常重要。使用可用的元素创建结构良好且用户友好的表单。
2.3 抗锯齿选项
抗锯齿是计算机图形中的一种技术，用于使图形对象或字体的边缘看起来更加平滑。让我们深入了解一下：
- 定义：
- 抗锯齿是一种减少图像或文本边缘的锯齿状外观的过程。这些锯齿边缘通常由数字显示的像素化特性引起。
- 通过在对象的边缘和背景之间添加额外的像素，抗锯齿可以创建更平滑的过渡，从而产生视觉上更令人愉悦的图形。
- Web 开发中的字体平滑：
- 在 Web 开发中，字体平滑工具控制文本在屏幕上的呈现方式。
- 两个常用的类别是：
- antialiased：使用灰度抗锯齿来呈现文本，使其更加平滑。
- subpixel-antialiased：使用次像素抗锯齿，在大多数非视网膜显示屏上提供更清晰的文本。
- 示例：
<p class="subpixel-antialiased">The quick brown fox ...</p><p class="antialiased">The quick brown fox ...</p>
- Tailwind CSS 示例：
- Tailwind CSS 是一个流行的实用型 CSS 框架，提供了这些字体平滑类。
- 您可以根据状态（例如悬停）或断点（例如中等屏幕尺寸及以上）有条件地应用它们。
总之，抗锯齿通过平滑边缘来提高视觉质量，使文本和图形更加舒适。
2.4 设置元素为弹性布局
display: flex!important; 是一种 CSS 样式规则，用于在网页中控制元素的布局方式。让我们来详细了解一下：
display: flex：display属性用于定义元素的显示方式。flex值将元素设置为弹性容器，使其内部的子元素成为弹性项目。- 弹性容器可以通过
flex-direction属性来指定子元素的排列方向（水平或垂直）。
!important：!important是一个 CSS 优先级标志，用于强制应用样式规则，即使其他规则具有更高的优先级。- 当在样式规则后添加
!important时，该规则将覆盖其他具有相同属性的规则。
因此，display: flex!important; 表示将元素设置为弹性容器，并强制应用此规则，即使其他规则也可能影响该元素的显示方式。如果您在网页开发中遇到类似的样式，这是一种常见的用法。
2.5 自动对齐边距
margin-left: auto!important; 是一种 CSS 样式规则，用于调整元素的左外边距。让我们来详细了解一下：
margin-left: auto：margin-left属性用于设置元素的左外边距。- 当将其设置为
auto时，元素的左外边距将自动计算，使元素在其容器内水平居中。
!important：!important是一个 CSS 优先级标志，用于强制应用样式规则，即使其他规则具有更高的优先级。- 当在样式规则后添加
!important时，该规则将覆盖其他具有相同属性的规则。
因此，margin-left: auto!important; 表示将元素的左外边距设置为自动计算，并强制应用此规则，即使其他规则也可能影响该元素的外边距。如果您在网页开发中遇到类似的样式，这是一种常见的用法。
2.6 IE浏览器兼容性设置
<meta http-equiv="X-UA-Compatible" content="ie=edge"> 是一个 HTML 元标签，用来告诉 Internet Explorer（IE）浏览器使用最新的引擎来渲染页面。这个标签的作用是确保即使在有多个版本的 IE 渲染引擎可用的情况下，网页也能以最优的方式显示。
具体来说，这个标签有以下作用：
-
http-equiv="X-UA-Compatible"：这部分是一个 HTTP 头部模拟指令，它可以影响浏览器的行为就像它响应了一个实际的 HTTP 响应头部一样。X-UA-Compatible是一个非标准头部，专门用于 IE 浏览器。 -
content="ie=edge"：这表明页面应该使用 IE 浏览器的最边缘模式（edge mode），也就是说，使用 IE 的最新版本来渲染页面。这有助于避免 IE 浏览器使用兼容模式或较旧版本的渲染引擎，这些模式可能不支持最新的网页标准和特性。
例如，如果用户在 IE 浏览器中设置了默认的兼容性视图，或者企业通过组策略设置了特定的兼容性设置，那么即使在安装了新版 IE 的情况下，网页也可能被渲染成模仿较旧 IE 版本的外观和行为。通过使用这个 meta 标签，开发者可以指示浏览器忽略这些设置，使用最新的渲染模式。
然而，需要注意的是，自从 Microsoft Edge 取代 IE 成为 Windows 的默认浏览器以来，这个标签的重要性已经大大降低。在现代的 web 开发中，大部分新项目不太需要考虑 IE 的兼容性，除非是针对特定需要支持旧版 IE 的用户群体。对于 Edge 和其他现代浏览器，这个标签不会有任何影响。
2.7 响应式布局的列和行
col-lg-10 和 col-xl-9 是 Bootstrap 框架中的类，用于创建响应式布局的网格系统。Bootstrap 的网格系统允许开发者创建基于行和列的布局，它可以适应不同尺寸的屏幕。
在Bootstrap中，网格系统被设计为基于12列的布局。col-lg-10 和 col-xl-9 这样的类利用了这个系统来控制元素在不同屏幕尺寸下的宽度占比。
这里的lg和xl指的是屏幕尺寸的断点 (breakpoints)。Bootstrap定义了多个断点，这些断点代表不同的最小屏幕宽度，例如：
xs(extra small): 小于 576px 的屏幕sm(small): 576px 及以上的屏幕md(medium): 768px 及以上的屏幕lg(large): 992px 及以上的屏幕xl(extra large): 1200px 及以上的屏幕xxl(extra extra large): 1400px 及以上的屏幕
在Bootstrap 4和5中，如果你没有为xs指定列的大小，它是自动布满宽度的，即col-12。
类名中的数字代表元素应该占据的列数。例如：
col-lg-10意味着在大屏幕（至少 992px 宽）上，元素将占据10/12的可用宽度。col-xl-9意味着在更大屏幕（至少 1200px 宽）上，元素将占据9/12的可用宽度。
这种布局类的使用允许开发者为不同的屏幕尺寸提供不同的布局配置。元素的宽度会随着屏幕尺寸的变化而自动调整，从而提供流畅的响应式体验。
举个例子：
<div class="row">
<div class="col-lg-10 col-xl-9">
<!-- 内容在大屏幕上占用10列，在超大屏幕上占用9列 -->
</div>
</div>
在这个例子中，该元素在大屏幕上会占用行的10/12，在超大屏幕上会占用9/12。如果屏幕小于992px宽，该元素则会自动占满整行宽度（相当于col-12）。
2.8 动态获取iframe的高度
要使 card-body 的长度根据内部 iframe 的大小自动调整，通常需要依赖于 JavaScript，因为 iframe 的内容是独立于包含它的页面的。CSS 无法直接检测 iframe 内容的高度，因为 iframe 是一个独立的嵌入式窗口。
这里有一个基本的思路是如何用 JavaScript 来实现这个功能：
- 监听
iframe内容的加载事件。 - 当内容加载完成后，获取
iframe的内容高度。 - 将获取到的高度设置给
iframe的父元素，即card-body。
下面是一段示例代码：
<div class="card">
<div class="card-body" id="card-body">
<iframe id="my-iframe" src="your-page.html" onload="resizeIframe(this)" style="width:100%;"></iframe>
</div>
</div>
<script>
function resizeIframe(iframe) {
try {
// 等待 iframe 内容完全加载
iframe.onload = function() {
// 获取 iframe 内容的实际高度
var body = iframe.contentWindow.document.body,
html = iframe.contentWindow.document.documentElement,
height = Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight);
// 设置 card-body 的高度
var cardBody = document.getElementById('card-body');
cardBody.style.height = height + 'px'; // 你可以根据需要添加额外的像素
};
} catch (e) {
console.error('Resize iframe error:', e);
}
}
</script>
请注意，在跨域场景下，出于安全原因，浏览器会阻止 JavaScript 访问 iframe 内的内容。如果你控制 iframe 内容所在的域，你可以通过设置适当的 CORS (跨域资源共享) 策略来允许这种访问。如果 iframe 加载的是第三方网站，你可能就无法控制其内容的高度了。
此外，这个解决方案假定 iframe 的内容在加载时就是完整的。如果 iframe 内部的内容是动态变化的（例如，有 AJAX 请求加载额外内容），那么你可能需要设置一个定时器或使用 MutationObserver 来检测内容的变化，并相应地调整高度。
2.9 根据字体大小计算像素大小
在CSS中，rem 单位表示“根元素字体大小”（root em）。一个 rem 单位等于根元素 (<html>) 的字体大小 (font-size)。rem 单位允许开发者创建相对于根元素字体大小的尺寸，这有助于保持页面元素的相对尺寸一致，同时使整体布局易于通过更改根元素的字体大小来调整。
如果根元素的 font-size 没有被明确设置，浏览器的默认字体大小通常为16像素（但是用户可以在浏览器设置中更改这个值）。这意味着：
1rem等于根元素的font-size。- 如果根元素的
font-size是16像素，1rem将等于16像素。 - 如果根元素的
font-size被设置为20像素，1rem将等于20像素。
使用 rem 单位的一个优点是，它可以增强页面的可访问性，因为当用户更改其浏览器的默认字体大小时，使用了 rem 的布局和文字大小会相应调整。
下面是一个例子：
html {
font-size: 16px;
}
h1 {
font-size: 2rem; /* 32px */
}
p {
font-size: 1rem; /* 16px */
}
@media (min-width: 768px) {
html {
font-size: 18px; /* 在较大屏幕上增加根元素的字体大小 */
}
}
在这个例子中，所有使用 rem 单位的元素会基于根元素的 font-size 来计算它们的字体大小。当屏幕宽度至少为768像素时，根元素的字体大小提升到18像素，所有使用 rem 的元素也会相应增大。
在JavaScript中，要获取当前页面的rem单位值，你可以直接查询根元素的字体大小。以下是如何做到这一点的代码示例：
// 获取根元素（<html>元素）
var root = document.documentElement;
// 获取根元素的计算样式
var rootStyle = window.getComputedStyle(root);
// 获取根元素的字体大小
var rootFontSize = rootStyle.getPropertyValue('font-size');
// 将字体大小转换为纯数字（去掉单位）
var rootFontSizeValue = parseFloat(rootFontSize);
// 打印出根元素的字体大小
console.log('The root font size is:', rootFontSizeValue);
在这段代码中，window.getComputedStyle函数用于获取根元素当前的所有计算样式。然后，通过getPropertyValue方法从中提取font-size样式。最后，parseFloat用于将字体大小字符串（如 “16px”）转换成一个浮点数（如 16.0）。
获取了根元素的字体大小之后，你就可以用它来计算页面上其他使用rem单位的元素的实际像素值了。例如，如果你知道某个元素的样式是2rem，那么它的像素值就是2 * rootFontSizeValue。
2.10 监听resize事件
要在界面大小变化时响应并动态更改长度，你可以使用JavaScript的resize事件监听器，这样每当窗口大小改变时，你都可以执行一段代码来调整长度。结合前面关于rem单位的讨论，这里是如何实现的一个例子：
首先，封装一个函数来调整基于rem单位的长度：
function adjustRemBasedLength() {
// 获取根元素的计算样式
var rootStyle = window.getComputedStyle(document.documentElement);
// 获取根元素的字体大小
var rootFontSize = parseFloat(rootStyle.getPropertyValue('font-size'));
// 计算需要调整的长度
var lengthInPixels = yourLengthInRem * rootFontSize;
// 应用这个长度到你的元素上
document.getElementById('your-element-id').style.yourProperty = lengthInPixels + 'px';
}
// 假设你有一个长度是5rem的元素
var yourLengthInRem = 5;
然后，添加一个事件监听器来在窗口大小变化时调用这个函数：
window.addEventListener('resize', adjustRemBasedLength);
不要忘记在页面加载时也调用这个函数，确保初始长度是正确的：
// 页面加载时调用一次以设置初始长度
adjustRemBasedLength();
现在，每次窗口尺寸变化时，adjustRemBasedLength函数都会被调用，它会重新计算基于rem单位的长度，并应用到你指定的元素上。
请注意，频繁地触发resize事件可能会导致性能问题，因为它可能会引起大量的计算和DOM操作。为了避免这个问题，你可以使用所谓的防抖(debounce)或节流(throttle)技术来限制这个函数被调用的频率。这些技术可以通过一些流行的库如Lodash来实现，或者你也可以自己编写简单的防抖或节流函数。
2.11 监听iframe变化
要监控iframe的变化，比如内容的尺寸变化，你可以设置一个MutationObserver来监测iframe内容的变更。这种方式可以通知你任何DOM更改，包括子节点的增加或删除以及属性的变更。
请注意，由于同源策略，你只能在同源iframe上使用MutationObserver。如果iframe加载的内容不是同源的，那么你将无法访问其内容。
下面是一个使用MutationObserver来监控iframe内容变化的基本示例：
// 选择你的iframe元素
var iframe = document.getElementById('my-iframe');
// 检查iframe加载完成
iframe.onload = function() {
// 获取iframe的内容document
var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
// 创建一个与回调函数关联的MutationObserver实例
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
console.log(mutation);
// 在这里，你可以根据变化执行相应的操作
});
});
// 使用MutationObserver的配置（你想要观察的变化类型）
var config = { attributes: true, childList: true, subtree: true };
// 传入目标节点和观察选项
observer.observe(iframeDocument, config);
};
在上面的代码中，MutationObserver的回调函数将会在监测到配置中指定的DOM更改时被调用。配置选项说明如下：
attributes: 设置为true以监视属性值变化。childList: 设置为true以监视向目标节点或目标节点内添加或删除新的子节点。subtree: 设置为true以监视目标节点下的任何节点树更改。
请记住，监控iframe可能会有性能影响，尤其是当iframe内容非常大或更改非常频繁时，所以请确保合理使用MutationObserver。
如果你想要监控iframe的大小变化，但iframe的内容不是同源的，那么你可以尝试其他技术，如在iframe内部页面中运行代码来发送消息到父页面（如果你可以控制iframe内容），使用window.postMessage进行跨文档通信。
2.12 监听类属性变化
如果你想要监听CSS属性变化，比如contain属性的变化，并且这个变化是由于界面响应（比如窗口大小改变、设备方向改变等）而自动触发的，通常情况下，这种变化不会触发MutationObserver，因为MutationObserver主要是用来监听DOM树的变化。CSS属性的变化，尤其是那些由媒体查询引起的变化，不会被MutationObserver检测到。
如果你想要在这种响应式设计变化时执行一些操作，你可以使用resize事件来监听窗口大小变化，然后检查元素的contain属性是否变化。这里是一个例子：
// 监听窗口大小变化的事件
window.addEventListener('resize', function() {
// 获取元素的计算样式
var elementStyle = window.getComputedStyle(document.getElementById('my-iframe'));
// 检查contain属性的值
var containValue = elementStyle.getPropertyValue('contain');
// 执行你想要的操作
console.log('Current contain value:', containValue);
});
在这个代码示例中，每当窗口大小发生变化时，就会执行一个函数来获取指定元素的计算样式，并检查contain属性的值。这样，你可以根据contain属性的值来执行相应的逻辑。
如果你的contain属性是在样式表中通过媒体查询设置的，上面的方法将在窗口大小改变的时候正确地检测到contain属性的变化。然而，如果变化是由其他类型的响应式设计触发的，你可能需要监听其他相关的事件（比如设备方向改变）或者使用其他方法来触发检查。
请记住，频繁地执行操作可能会影响性能，尤其是在resize事件中，因为它可以在窗口大小调整期间被频繁触发。在这种情况下，可能需要使用防抖（debounce）或节流（throttle）技术来优化性能。
如果contain属性是通过类设置的，并且这个类可能会因为窗口大小变化或其他响应式设计逻辑而改变，你可以使用JavaScript来获取元素的当前contain值。这可以通过获取元素的计算样式来实现，无论它是通过何种方式设置的（内联样式、<style>标签或外部CSS文件）。
下面是一个例子，演示了如何获取具有特定类的元素的contain属性值：
function getContainValue(element) {
// 获取元素的计算样式
var style = window.getComputedStyle(element);
// 获取并返回'contain'属性的值
return style.getPropertyValue('contain');
}
// 选择你要监控的元素
var elementToMonitor = document.querySelector('.your-class-name');
// 获取并打印'contain'属性的初始值
console.log(getContainValue(elementToMonitor));
// 监听窗口大小变化的事件
window.addEventListener('resize', function() {
// 每次窗口大小变化时，获取并打印'contain'属性的当前值
console.log(getContainValue(elementToMonitor));
});
在这个代码示例中，getContainValue函数被用来从指定元素获取contain属性的计算值。当窗口大小发生变化时，resize事件监听器会调用这个函数来检查元素的contain值，因为它可能会随着窗口大小的变化而变化。
如果你知道类名可能会更改，并且想要检测这种变化，你可以使用MutationObserver来监控类属性的变化，如下所示：
// 选择你要监控的元素
var elementToMonitor = document.querySelector('.your-class-name');
// 创建一个与回调函数关联的MutationObserver实例
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
// 类名发生变化时，获取并打印'contain'属性的当前值
console.log(getContainValue(elementToMonitor));
}
});
});
// 使用MutationObserver的配置
var config = { attributes: true, attributeFilter: ['class'] };
// 传入目标节点和观察选项
observer.observe(elementToMonitor, config);
在这个例子中，我们仅仅是监听了元素类属性的变化，每当类发生变化时，检查contain属性的值。这样你就可以监控由类变化引起的contain属性变化了。
2.13 css flexbox平等均分
在CSS Flexbox 布局中，flex: 1; 是 flex 属性的一个简写，它同时设置了三个不同的属性：flex-grow, flex-shrink, 和 flex-basis。使用 flex: 1; 等同于设置：
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;
这意味着：
flex-grow: 1;：当分配多余的空间时，该元素可以伸展来填充可用空间。1表示“flex项的伸展比例”，如果所有同级flex项的flex-grow值都一样，它们将平分空间；如果有不同的值，则按比例分配额外空间。flex-shrink: 1;：当空间不足时，该元素可以收缩。1表示“flex项的收缩比例”，如果所有同级flex项的flex-shrink值都一样，它们将等比例缩小以适应容器；如果有不同的值，则按比例收缩。flex-basis: 0%;：设置了在分配多余空间之前，元素应该占据的基本空间。0%意味着“基础宽度”是0，也就是说，元素的初始大小不基于它的内容或其他固定的尺寸，而是完全依赖于剩余空间的分配。
将 flex 属性设置为 1 通常用于当你想要所有的flex子项平等地分享容器中的空间，不管它们本身的大小如何。这在创建响应式布局时非常有用，因为它允许子项根据可用空间动态伸缩。
这里有一个简单的例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex 1 Example</title>
<style>
.container {
display: flex;
}
.item {
flex: 1;
border: 1px solid #000;
margin: 2px;
padding: 10px;
box-sizing: border-box; /* 使得边框和内边距包含在宽度内 */
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
</body>
</html>
在这个例子中，.container 是一个flex容器，.item 是flex子项。每个.item 都被赋予了 flex: 1，这意味着它们将平等地分享.container 中的空间。如果容器的宽度增加或减少，每个子项都会相应地增加或减少宽度。
2.14 高度设置
如果你遇到了 .page-wrapper（或任何其他元素）不能指定高度的问题，这可能是由几个不同的原因导致的。下面是一些可能的原因和解决方法：
- 父元素没有高度
如果 .page-wrapper 的父元素没有指定高度，.page-wrapper 的高度可能不会表现如预期。确保父元素有一个确定的高度。
.parent-element {
height: 100vh; /* 或者其他具体的高度值 */
}
- 高度被内容撑开
如果 .page-wrapper 的高度依赖于其内容，并且你没有明确地设置一个高度，它将自动扩展以适应其内容。要指定一个高度，你可以：
.page-wrapper {
height: 500px; /* 或者其他单位，如 em, vh, % 等 */
}
- CSS未正确应用
确保你的CSS选择器正确，没有被其他样式覆盖（通过检查特异性和源顺序）。使用浏览器的开发者工具可以帮助你确定样式是否被应用。
- 使用了
min-height或max-height
如果你使用了 min-height 或 max-height 属性，它们可能会影响元素的实际高度。
.page-wrapper {
min-height: 300px;
max-height: 600px;
}
- 浮动或Flexbox/Grid布局
如果 .page-wrapper 使用了浮动 (float)，它可能不会表现出你想要的高度，直到你清除了浮动。同样的，如果你的元素是一个Flexbox或Grid容器的子元素，那么高度的行为也可能会受到Flexbox或Grid布局属性的影响。
- 伪元素清除
如果你使用了伪元素来清除浮动 (::after，::before 使用 clear: both;)，确保这些伪元素的使用不会影响到 .page-wrapper 的高度。
- 显示属性
元素的 display 属性也可能影响其高度。例如，display: inline; 将不允许你设置高度。你可能需要将其设置为 display: block; 或 display: inline-block; 或其他允许高度设置的显示类型。
解决方法示例
确保CSS是这样的：
.page-wrapper {
display: block; /* 或 inline-block, flex, grid等 */
height: 500px; /* 指定一个高度 */
/* 其他样式 */
}
并且HTML结构类似于：
<div class="parent-element">
<div class="page-wrapper">
<!-- 内容 -->
</div>
</div>
使用浏览器的开发者工具可以帮助你检查元素的计算样式，并诊断为什么 .page-wrapper 可能不按预期设置高度。
2.15 滚动栏设置
这段CSS代码是针对Webkit浏览器（如Chrome和Safari）的滚动条样式的自定义。它使用了伪元素来为滚动条的不同部分设置样式。
-
::-webkit-scrollbar-thumb: 这个伪元素代表滚动条上的“拇指”部分，也就是用户可以拖动的那一部分。在这段代码中，它的border-radius被设置为5px，这会给滚动条的拇指一个轻微的圆角。它的背景颜色被设置为#a0a6ae，这是一种灰色调。 -
::-webkit-scrollbar-track: 这个伪元素代表滚动条的“轨道”部分，也就是拇指移动的区域。这里的背景颜色被设置为#e7eaef，这是一种较浅的灰色。
这两个伪元素共同作用于页面的滚动条，在满足以下两个条件时生效：用户的浏览器必须基于Webkit引擎，且页面必须有足够内容产生滚动条。
这样的自定义滚动条样式可以提高页面的美观性，使其更贴合网站的整体设计风格。需要注意的是，这些样式仅在Webkit引擎的浏览器中生效，对于Firefox或IE/Edge等其他浏览器，你需要使用其他方法来自定义滚动条样式。
2.16 打印功能
在打印带有滚动条的网页内容时，通常遇到的问题是，默认情况下，打印操作只包括了当前视窗（viewport）中的内容，而不是整个滚动区域。如果你希望打印整个有滚动条的内容，而不仅仅是当前可见的部分，你需要使用一些技术来确保所有内容都能被打印。
以下是一些建议来实现完整内容的打印：
(1) 使用CSS @media print
你可以创建一个专门针对打印的CSS样式表，通过在样式表中使用 @media print 规则来定义打印时的样式。在这个样式表中，你可以将滚动区域的高度设置为 auto 并且移除滚动条，以确保所有内容都可以打印出来。
@media print {
.scrollable-content {
height: auto;
overflow: visible;
}
}
在这个例子中，.scrollable-content 应该是你希望打印的内容的容器的类名。height: auto; 和 overflow: visible; 的目的是确保整个内容都显示在打印预览中。
(2) 临时修改内容
在打印之前，你可以使用JavaScript临时修改内容的样式，以确保所有内容都可以打印，然后在打印后恢复原样。
function printContent() {
var content = document.querySelector('.scrollable-content');
var originalStyle = content.getAttribute('style');
content.style.height = 'auto';
content.style.overflow = 'visible';
window.print();
content.setAttribute('style', originalStyle);
}
在这个例子中，.scrollable-content 应该是你希望打印的内容的容器的类名。在执行 window.print() 前修改样式，打印后恢复原来的样式。
(3) 打印特定的iframe
如果你的内容是在 iframe 中的，你可以尝试直接打印 iframe 的内容。这通常会包括整个 iframe，即使它有滚动条。
function printIframe(iframeId) {
var iframe = document.getElementById(iframeId);
iframe.contentWindow.print();
}
在这里，iframeId 是你想打印内容的 iframe 的ID。
注意事项
- 不同浏览器的打印行为可能略有不同，因此建议在主流浏览器上测试你的打印功能。
- 用户可能需要在打印对话框中选择“打印背景图形”选项，以确保所有样式（包括背景颜色和图像）都包含在打印出的内容中。
确保在实施打印功能时进行彻底的测试，以便在各种情况下都能得到预期的结果。
2.17 URL转义字符处理
在HTML文档中，title 标签通常可以直接包含中文字符，而不需要使用转义字符。浏览器可以正确地处理和显示 title 中的中文。
例如，你可以直接在 <title> 标签中写入中文：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>你好，世界！</title>
</head>
<body>
<p>这是一个包含中文标题的页面。</p>
</body>
</html>
在这个例子中，<meta charset="UTF-8"> 告诉浏览器当前页面使用 UTF-8 编码，这是一种支持包括中文在内的大多数语言字符的编码。
如果你在某些环境中必须使用字符实体（转义字符）来表示中文，你可以使用字符的 Unicode 编码。例如，中文字符 “你” 的 Unicode 编码是 U+4F60，因此它的 HTML 字符实体可以写成 你。但这种情况很少见，通常是为了解决特定的编码问题。
在大多数情况下，只要确保你的文档编码正确设置为 UTF-8，并且你的编辑器也使用 UTF-8 编码保存文档，你就可以直接在 HTML 文件中使用中文，而不需要使用转义字符。
百分号编码，也称为URL编码，是一种编码机制，用于在URI（统一资源标识符）中嵌入特殊字符。这种编码是必要的，因为URL有一些技术限制，只能直接使用ASCII字符集中的字符。
以下是产生百分号编码中文URL的几个原因：
-
ASCII字符集限制：URL最初设计时仅考虑到ASCII字符集，它不包括中文等非ASCII字符。为了在URL中使用这些字符，必须对它们进行编码。
-
控制字符和保留字符：URL中有些字符具有特殊含义，如
?和#分别表示查询字符串的开始和锚点的开始。为了在URL中使用这些字符而不触发它们的特殊功能，必须将它们编码。 -
可读性和传输：URL经常需要通过不同的计算机系统传输，这些系统可能对字符编码的解释不同。使用百分号编码可以确保URL在各种系统和协议之间传输时的一致性和可靠性。
-
国际化和字符集兼容性：随着互联网的全球化，需要支持多种语言字符。通过百分号编码，可以将任何字符集中的字符转换为ASCII字符集，使得URL在全球范围内都能被正确解析和传输。
在百分号编码中，每个非ASCII字符被转换成一个或多个字节，并表示为这些字节的十六进制值，前面加上百分号。例如，中文字符“测试”在UTF-8编码中对应的字节为\xe6\xb5\x8b\xe8\xaf\x95，经过百分号编码后变成%E6%B5%8B%E8%AF%95。
现代浏览器通常会在地址栏中自动显示原始的、未编码的中文字符，以提高用户体验。但在实际的HTTP请求中，浏览器会使用百分号编码的版本，以确保兼容性和符合URL标准的要求。
2.18 网站图标
在网页的预览上选项卡上显示图标，通常我们指的是“网站图标”（Favicon）。Favicon是网站的小图标，通常显示在浏览器的地址栏、书签列表、历史记录、选项卡上，以及其他界面元素上。要在你的网站上添加这样的图标，你需要进行以下几个步骤：
-
准备图标文件：
- 创建一个尺寸至少为16x16像素的图标。为了兼容不同设备，你可能还需要准备其他尺寸（如32x32、64x64、128x128像素）。
- 图标应该是
.ico格式，这是大多数浏览器都支持的图标格式。你也可以使用.png或.svg格式，这些格式的兼容性也很好。 - 你可以使用图像编辑软件（如Adobe Photoshop、GIMP等）或在线Favicon生成器来创建或转换图标。
-
上传图标文件：
- 将图标文件上传到你的网站服务器。通常，你可以将其放置在网站的根目录下，这是默认的查找位置。
-
修改HTML代码：
- 在你的网页的
<head>部分，添加一个<link>标签来指定Favicon的位置。例如：
<!-- 默认Favicon --> <link rel="icon" href="/favicon.ico" type="image/x-icon"> <!-- 针对不同设备优化的图标尺寸 --> <link rel="icon" sizes="16x16" href="/path/to/favicon-16x16.png" type="image/png"> <link rel="icon" sizes="32x32" href="/path/to/favicon-32x32.png" type="image/png"> <link rel="icon" sizes="96x96" href="/path/to/favicon-96x96.png" type="image/png"> <link rel="icon" sizes="192x192" href="/path/to/android-chrome-192x192.png" type="image/png"> <!-- Apple Touch Icon --> <link rel="apple-touch-icon" sizes="180x180" href="/path/to/apple-touch-icon.png"> <!-- Safari Pinned Tab Icon --> <link rel="mask-icon" href="/path/to/safari-pinned-tab.svg" color="#5bbad5"> - 在你的网页的
-
考虑缓存问题：
- 当你更换或更新Favicon时，浏览器可能不会立即显示新图标，因为旧的图标可能被缓存了。解决这个问题的一种方法是在图标URL后面添加一个查询字符串（例如
?v=2），这样浏览器就会被迫重新加载图标。
- 当你更换或更新Favicon时，浏览器可能不会立即显示新图标，因为旧的图标可能被缓存了。解决这个问题的一种方法是在图标URL后面添加一个查询字符串（例如
-
测试图标：
- 在你的网站上做出更改后，清除浏览器缓存并刷新你的网站，检查新的Favicon是否显示正常。
- 你可以在不同的浏览器和设备上测试以确保兼容性。
通过上述步骤，你应该可以在网页的预览上选项卡上显示自定义图标。如果你使用的是像WordPress这样的内容管理系统(CMS)，它们通常会提供一个界面来上传和管理Favicon，这样你就不需要手动编辑HTML代码。
2.19 响应滚动事件
要在页面滚动时显示带有 .go-to-top 类的元素（例如“回到顶部”按钮），你需要使用JavaScript来侦测滚动事件，并在页面向下滚动超过特定阈值时添加 .visible 类。以下是如何实现这一功能的步骤：
-
HTML结构: 首先，确保你的HTML中有一个“回到顶部”的按钮。
<a href="#top" class="go-to-top">Top</a> -
CSS样式: 接着，设置你的CSS，包括
.visible类的样式。通常，.go-to-top类在没有.visible类时不可见。.go-to-top { opacity: 0; pointer-events: none; /* 其他样式，如定位、过渡效果等 */ transition: opacity 0.3s; } .go-to-top.visible { opacity: 1; pointer-events: auto; } -
JavaScript: 最后，使用JavaScript监听滚动事件，并在用户向下滚动到一定距离时添加
.visible类。// 获取回到顶部按钮 var goTopButton = document.querySelector('.go-to-top'); // 定义一个函数，用来根据滚动位置切换按钮的可见性 function scrollFunction() { if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) { goTopButton.classList.add('visible'); } else { goTopButton.classList.remove('visible'); } } // 在window对象上监听scroll事件 window.onscroll = function() { scrollFunction(); };
这段代码中，scrollFunction 会检查页面的滚动位置。如果滚动位置超过20像素（你可以根据需要调整这个值），.visible 类会被添加到按钮上，使之变得可见。当滚动位置小于20像素时，.visible 类会被移除，按钮会变得不可见。
记得根据你的实际需求调整CSS和JavaScript代码。比如调整滚动触发点、按钮的样式、过渡效果等。
3. 导航栏
EaseTShoot - Next-gen automated diagnostics with user-friendly and sleek interface.(onceday.work)
3.1 可重用的导航栏
参考文档:
如何在多个页面上重用导航栏？-腾讯云开发者社区-腾讯云 (tencent.com)
在传统的网页开发中，如果没有使用模板引擎或者前端框架，确实需要在每个HTML页面中都包含导航栏的代码。这种方式会导致很多重复的代码，不便于维护。比如，如果导航栏的某个链接需要更新，你需要手动更改每一个页面。
然而，有几种方法可以避免这种重复：
-
使用服务器端包含(SSI): 如果你的服务器支持SSI(Server Side Includes)，你可以创建一个包含导航栏的单独的HTML文件，然后在所有其他页面上引用这个文件。例如，使用Apache服务器，可以这样做：
<!--#include virtual="/path_to_navigation/navbar.html" --> -
使用PHP或其他服务器端语言: 如果你的网站运行在支持PHP或其他服务器端脚本语言的服务器上，你可以将导航栏放在单独的文件中，并在每个页面上包含它：
<?php include 'path_to_navigation/navbar.php'; ?> -
使用JavaScript或jQuery: 你可以使用JavaScript或者jQuery来动态地加载导航栏。例如，你可以创建一个包含导航的
navbar.js文件，然后在每个页面的相同位置通过JavaScript将其插入：<div id="navbar"></div> <script src="path_to_navigation/navbar.js"></script>在
navbar.js文件中，你可以使用jQuery的.load()方法或者原生JavaScript的fetch来加载导航栏的HTML代码。 -
使用Web组件: 使用现代Web组件技术，如Custom Elements，你可以创建一个可重用的导航栏组件。这样，你只需要在每个页面上写一次自定义标签。
-
前端框架: 如果你使用诸如Angular、React或Vue这样的前端框架，那么你可以创建一个导航栏组件，并在各个页面组件中重用它。
无论哪种方法，关键是将导航栏的代码集中在单个位置，以便于管理和更新。这样，你就不需要在每个子页面中都添加完整的导航栏代码了。
3.2 bootstrap和vue可重用页面
Bootstrap 是一个流行的前端框架，它提供了一系列预先设计好的样式和组件，用于快速开发响应式网站。Vue.js 是一个构建用户界面的渐进式框架，专注于视图层。两者完全可以一起使用，Bootstrap 负责页面样式和布局，Vue.js 负责处理交互逻辑和动态数据。
要在 Vue 应用程序中使用 Bootstrap，你可以：
-
通过 npm 安装 Bootstrap：
npm install bootstrap -
在你的 Vue 组件中引入 Bootstrap CSS 文件：
import 'bootstrap/dist/css/bootstrap.min.css';
或者，在你的 HTML 文件或单文件组件的 <style> 标签中使用 @import 语句：
<style>
@import '~bootstrap/dist/css/bootstrap.min.css';
</style>
创建可重用的导航栏组件，你可以：
-
创建一个新的 Vue 组件，比如
Navbar.vue：<template> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Features</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Pricing</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> </li> </ul> </div> </nav> </template> <script> export default { name: 'Navbar' // ... other options } </script> <style scoped> /* Your styles here */ </style> -
在需要的页面或布局组件中引用这个导航栏组件：
<template> <div> <Navbar /> <!-- 页面的其他内容 --> </div> </template> <script> import Navbar from './components/Navbar.vue'; export default { components: { Navbar } // ... other options } </script>
请注意，Bootstrap 的 JavaScript 依赖于 jQuery 和 Popper.js，如果你想使用它的一些 JavaScript 插件（例如下拉菜单），你可能需要额外安装这些依赖。但是，如果你只是使用 Bootstrap 的 CSS 部分，那么你不需要这些依赖。
此外，还有专门为 Vue.js 定制的 Bootstrap 版本，如 BootstrapVue，它将 Bootstrap 组件转换成了 Vue 组件，使得两者的集成更为无缝。如果你计划在 Vue 应用中广泛使用 Bootstrap，那么使用 BootstrapVue 可能是一个更好的选择。
npm install bootstrap-vue
然后在你的 Vue 应用中这样使用：
import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue'
Vue.use(BootstrapVue)
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
使用 BootstrapVue，你可以直接在模板中使用 Bootstrap 的样式和组件，而不需要额外的配置。这会让你的 Vue 应用中的 Bootstrap 集成变得更加方便和高效。
3.3 django可重用模板
参考文档:
在Django中，可以通过多种方式来创建可重用的导航栏或公共页面视图。一般的做法是使用Django的模板继承功能，以及包含标签。下面是如何实现这一过程的步骤：
-
创建一个导航栏的HTML文件 (
navbar.html):<!-- navigation/navbar.html --> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="container"> <a class="navbar-brand" href="{% url 'home' %}">MySite</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="{% url 'home' %}">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="{% url 'about' %}">About</a> </li> <!-- More navigation items --> </ul> </div> </div> </nav>在这个例子中，
{% url 'home' %}是一个模板标签，用来生成名为 ‘home’ 的URL。确保你的URL配置中有一个名称为 ‘home’ 的视图函数。 -
创建一个基础模板 (
base.html), 它包含了导航栏，并定义了子模板可以覆盖的块(block):<!-- templates/base.html --> <!DOCTYPE html> <html lang="en"> <head> <!-- Head contents (e.g. links to CSS files) --> </head> <body> {% include 'navigation/navbar.html' %} {% block content %} <!-- Default content goes here --> {% endblock content %} <!-- Footer, scripts, etc... --> </body> </html>使用
{% include 'navigation/navbar.html' %}将导航栏包含进来。
在你的视图模板中，你可以继承这个基础模板，并只需要填充内容块。
<!-- templates/home.html -->
{% extends 'base.html' %}
{% block content %}
<h1>Welcome to MySite</h1>
<p>This is the home page.</p>
{% endblock content %}
使用 {% extends 'base.html' %} 声明这个模板继承自 base.html，然后在 {% block content %} 中填充特定页面的内容。
在Django视图中，你可以像平常一样渲染这些模板。
# views.py
from django.shortcuts import reder
def home(request):
return render(request, 'home.html')
def about(request):
return render(request, 'about.html')
确保在Django的URL配置中指向这些视图函数，并且模板文件的路径设置正确。
通过这种方式，你可以创建一个可重用的导航栏，它被包含在一个基础模板中，这个基础模板又被各个页面继承。当需要更新导航栏时，你只需要修改 navbar.html 文件，所有使用了这个导航栏的页面都会自动更新。这种方法让导航栏的维护变得更加简单高效。
扫一扫
515
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
