CSSとJSをThymeleafに追加します - 開発者ドキュメント

1. 序章

このクイックチュートリアルでは、ThymeleafテンプレートでCSSとJavaScriptを使用する方法を学習します。

まず、予想されるフォルダー構造を調べて、ファイルを配置する場所を確認します。その後、Thymeleafテンプレートからこれらのファイルにアクセスするために何をする必要があるかを確認します。

まず、ページにCSSスタイルを追加してから、JavaScript機能を追加します。

2. 設定

アプリケーションでThymeleafを使用するために、Thymeleaf用のSpring BootスターターをMaven構成に追加しましょう。

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
    <version>2.2.6.RELEASE</version>
</dependency>

3. 基本例

3.1. ディレクトリ構造

さて、念のために言っておきますが、Thymeleafは、SpringBootアプリケーションと簡単に統合できるテンプレートライブラリです。 デフォルトでは、Thymeleafはこれらのテンプレートをsrc / main / resources / templatesフォルダーに配置することを想定しています。サブフォルダーを作成できるため、cssandjsというサブフォルダーを使用します。例。

CSSおよびJavaScriptファイルの場合、デフォルトのディレクトリはsrc / main / resources/staticです。作成しましょう static / styles / cssandjs と static / js / cssandjs それぞれCSSファイルとJSファイルのフォルダー。

3.2. CSSの追加

static / styles /cssandjsフォルダーにmain.cssという名前の簡単なCSSファイルを作成し、いくつかの基本的なスタイルを定義しましょう。

h2 {
    font-family: sans-serif;
    font-size: 1.5em;
    text-transform: uppercase;
}

strong {
    font-weight: 700;
    background-color: yellow;
}

p {
    font-family: sans-serif;
}

次に、これらのスタイルを使用するために、 templates /cssandjsフォルダーにstyledPage.htmlという名前のThymeleafテンプレートを作成しましょう。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Add CSS and JS to Thymeleaf</title>
    <link th:href="@{/styles/cssandjs/main.css}" rel="stylesheet" />
</head>
<body>
    <h2>Carefully Styled Heading</h2>
    <p>
        This is text on which we want to apply <strong>very special</strong> styling.
    </p>
</body>
</html>

Thymeleafの特別なth：href属性を持つリンクタグを使用してスタイルシートをロードします。予想されるディレクトリ構造を使用した場合は、 src / main / resources /staticの下にパスを指定するだけで済みます。この場合、それは/styles/cssandjs/main.cssです。 @ {/ styles / cssandjs / main.css} 構文は、ThymeleafのURLリンクの方法です。

アプリケーションを実行すると、スタイルが適用されていることがわかります。

3.3. JavaScriptを使用する

次に、JavaScriptファイルをThymeleafページに追加する方法を学習します。

src / main / resources / static / js / cssandjs /actions.jsのファイルにJavaScriptを追加することから始めましょう。

function showAlert() {
    alert("The button was clicked!");
}

次に、Thymeleafテンプレートに戻って、 tag that points to our JavaScript file:

<script type="text/javascript" th:src="@{/js/cssandjs/actions.js}"></script>

ここで、テンプレートからメソッドを呼び出します。

<button type="button" th:onclick="showAlert()">Show Alert</button>

アプリケーションを実行してアラートの表示ボタンをクリックすると、アラートウィンドウが表示されます。

まとめる前に、JavaScriptでSpringコントローラーからのデータを使用する方法を学習して、この例を少し構築しましょう。

まず、コントローラーを変更して、ページに名前を付けましょう。

@GetMapping("/styled-page")
public String getStyledPage(Model model) {
    model.addAttribute("name", "Baeldung Reader");
    return "cssandjs/styledPage";
}

次に、 actions.js ファイルに関数を追加して、アラートでこの名前を使用します。

function showName(name) {
    alert("Here's the name: " + name);
}

最後に、コントローラーからのデータを使用して関数を呼び出すには、スクリプトインライン化を使用する必要があります。それでは、nameの値をローカルのJavaScript変数に配置しましょう。

<script th:inline="javascript">
    var nameJs = /*[[${name}]]*/;
</script>

これにより、コントロールからの name モデル値を含むローカルJavaScript変数を作成しました。これは、ページの残りの部分のJavaScriptで使用できます。

これで、nameJs変数を使用してJavaScript関数を呼び出すことができます。

<button type="button" th:onclick="showName(nameJs);">Show Name</button>

4. 結論

この短いチュートリアルでは、CSSスタイルと外部JavaScript機能をThymeleafページに適用する方法を学びました。推奨されるディレクトリ構造から始めて、Springコントローラークラスで提供されたデータを使用してJavaScriptを呼び出すまでに進みました。

いつものように、コードはGitHubでから入手できます。