我是百里香和春靴的新手。我在一个项目中工作，我不想重写js css库列表(实际上这是关于包括js css库)两个多次在两个多个文件。例如:我有一个login.html, register.html, dashboard.html。
这些文件共享相同的js和css库，如样式，bootstrap, jquery, font-awesome…等等，将在标签中定义(或列出)。与其多次重写js和css库定义，我只是想知道我能找到一种方法来分离js和css库的包含，并使其成为一个完全独立的文件，随时可以重用。
是否有办法从login.html和register.html中分离js, css库，以避免重写两次?
对不起，我的英语不好。如果有人能提供帮助或建议，我真的很感激。例:Login.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
<title>Login Form</title>
<!-- Separate these libraries definition into one individual file, ex: layout.html and include it in any other thymeleaf file -->
<link rel="shortcut icon" th:href="@{/assets/images/favicon.png}" type="image/x-icon">
<link rel="icon" th:href="@{/assets/images/favicon.ico}" type="image/x-icon">
<!-- Google font-->
<link href="https://fonts.googleapis.com/css?family=Ubuntu:400,500,700" rel="stylesheet">
<!-- Font Awesome -->
<link th:href="@{/assets/css/font-awesome.min.css}" rel="stylesheet" type="text/css">
<!--ico Fonts-->
<link rel="stylesheet" type="text/css" th:href="@{/assets/icon/icofont/css/icofont.css}">
<!-- Required Framework -->
<link rel="stylesheet" type="text/css" th:href="@{/assets/plugins/bootstrap/css/bootstrap.min.css}">
<!-- waves css -->
<link rel="stylesheet" type="text/css" th:href="@{/assets/plugins/Waves/waves.min.css}">
<!-- Style.css -->
<link rel="stylesheet" type="text/css" th:href="@{/assets/css/main.css}">
</head>
<body>
</body>
</html>
你可以使用fragments:
-
创建文件夹"fragments"然后写入header。html
<div th:fragment="header"> <link rel="shortcut icon" th:href="@{/favicon.ico}" type="image/x-icon"> <link rel="icon" th:href="@{/favicon.ico}" type="image/x-icon"> <link rel="stylesheet" th:href="@{/css/bootstrap.css}"> <script th:src="@{/js/jquery.js}"></script> <script th:src="@{/js/popper.js}"></script> <script th:src="@{/js/bootstrap.min.js}"></script> </div> -
然后在你的模板中包含下一个你需要的标记:
<div th:replace="fragments/header :: header"></div>
使用这个可以重用HTML并节省输入。