Använda "mustasch.js" via mimer-render

# 👁️‍🗨️ Om detta avsnitt

mimer-render är ett enkelt middelware för Hono skapat för att göra det väldigt enkelt att anävända mustasch.

❓ Vad är "mustasch.js"?

Ett bibliotek som gör att vi kan substituera in värden i mallar.

1 Hämta koden

Ladda ned koden som du hittar i https://htsit.se/f/mimer-render.ts.


curl -LOk https://htsit.se/f/mimer-render.ts
  

Du kan också hitta senaste versionen av koden i projektet ada.

2 Lägg den på rätt ställe

Och lägg det i din "src" map där du har all annan kod till ditt projekt.


cp mimer-render.ts MITT_PROJEKT/src
  

3 Skapa en mapp för din mallar.

Du behöver skap en mapp för att ha din amllar. Förslagsviss på samma nivå som src.


mkdir template
  

4 Skapa en fil som du kallar "head.txt"

Du behöver skap en mapp för att ha din amllar. Förslagsviss på samma nivå som src.


<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="utf-8" />
<title>{{title}}</title>
<link rel="stylesheet" href="/css/style.css" />
</head>
<body>
<div id="container">
  

Innehållet i dennakommer alltid placeras över i mallarna.

5 Skapa en fil som du kallar "foot.txt"

Du behöver skap en mapp för att ha din amllar. Förslagsviss på samma nivå som src.


</div>
</body>
</html>
  

Innehållet i denna fil kommer alltid placeras under i mallarna.

6 Lägg till en fil som innehåller en mall

Lägg till en i mappen för att testa om det fungerar. Vi kallar den här "test.html"


<h1> {{title}} </h1>
  

7 Importera den i din kod

Gå till filen där du har din Hono app.


import { mimerRender } from "./mimer-render.ts";
  

8 Updatera typen beskrivningen av Hono

Hono'måste ha en intern variabel template av typen string.


type Variables = {
template: string;
};
const app = new Hono<{ Variables: Variables }>();
  

9 Lägg till mimer-render som midelware

Gör detta föra andra anrop med "app", men efter eventuell anrop för logging.


app.use("/*", await mimerRender("template"));
  

10 Gör ett anrop som ska bli renderat.

Ett vanligt HTTP get anrop.


app.get("/test", (c) => {
// CODE
});
  

11 Välj vilken mall som ska användas

Sätt en variabel template


c.set("template", "index");
});
  

12 Avsluta anropet genom att skicka vidare json.


return c.json({ title: names.welcome });
  

13 ✔️ Starta om servern och testa anropet

Starta om server och gå in på sidan: