引入靜態頁面的時候
我們原本可能會使用
<link rel="stylesheet" href="../../static/css/me.css">
這個語法在模板templates(有引入thymeleaf)下, 並不能讀取到
因此~需要改為
<link rel="stylesheet" href="../../static/css/me.css" th:href="@{/css/me.css}">
用th:href="@{}"來引入資源
然後重新build再刷新頁面就沒問題了
---------------------------------------------------------------------------------------
使用fragment
1 首先產生一個html檔案命名為_fragments
2 然後我們將大部分頁面上會重複的程式碼複製到這頁面
ex
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>博客詳情</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
<link rel="stylesheet" href="../static/css/typo.css">
<link rel="stylesheet" href="../static/css/animate.css">
<link rel="stylesheet" href="../static/lib/prism/prism.css">
<link rel="stylesheet" href="../static/lib/tocbot/tocbot.css">
<link rel="stylesheet" href="../static/css/me.css">
</head>
3 將引入方式修改為th:href="@{}"
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
<link rel="stylesheet" href="../static/css/typo.css" th:href="@{css/typo.css}">
<link rel="stylesheet" href="../static/css/animate.css" th:href="@{css/animate.css}">
<link rel="stylesheet" href="../static/lib/prism/prism.css" th:href="@{/lib/prism/prism.css}">
<link rel="stylesheet" href="../static/lib/tocbot/tocbot.css" th:href="@{/lib/tocbot/tocbot.css}">
<link rel="stylesheet" href="../static/css/me.css" th:href="@{/css/me.css}">
4 將重複的片段掛上fragment
<head th:fragment="head(title)">
5 如果遇到每個頁面有共通元素, 但是內容不一樣,
例如 <title>博客詳情</title>
這時候我們就要使用傳參數的方式(注意取參數要用$)
<head th:fragment="head(title)">
<title th:replace="${title}">博客詳情</title>
</head>這樣來做搭配
6 而在要引入的頁面(比方說index.html)
我們可以這樣做, 這樣就是將title裡面的參數傳遞過去
<head th:replace="_fragments :: head(~{::title})">
完整的程式碼:
_fragments.html:
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head th:fragment="head(title)">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title th:replace="${title}">博客詳情</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
<link rel="stylesheet" href="../static/css/typo.css" th:href="@{css/typo.css}">
<link rel="stylesheet" href="../static/css/animate.css" th:href="@{css/animate.css}">
<link rel="stylesheet" href="../static/lib/prism/prism.css" th:href="@{/lib/prism/prism.css}">
<link rel="stylesheet" href="../static/lib/tocbot/tocbot.css" th:href="@{/lib/tocbot/tocbot.css}">
<link rel="stylesheet" href="../static/css/me.css" th:href="@{/css/me.css}">
</head>
<body>
</body>
</html>
index.html 的header
<head th:replace="_fragments :: head(~{::title})">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>博客</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
<link rel="stylesheet" href="../static/css/me.css" >
</head>
沒有留言:
張貼留言