Dynamically set the page Title or Meta value

In the process of writing pages, we often need to set dynamic metadata for a page, for example, we need to set Title and Author Meta as the title and author of the article.

<head>
	<meta charset="UTF-8">
	<title>My WebSite - {title}</title>
	<meta name="author" content="{author}">
</head>

We simply use placeholders to define what we want dynamic (in page Settings if it's a Layout page).

<body>
	<div>
        <script env="server">
            k.state.set("title","food article");
            k.state.set("author","Alex");
        </script>
    </div>
</body>

Look at the generated html, which has changed to the value we set

<head>
	<meta charset="UTF-8">
	<title>My WebSite - food article</title>
	<meta name="author" content="Alex">
</head>