You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

2.3 KiB

Konstrui Go Report Card

web templating engine for static websites, written in Go lang

konstrui

Example

  • Simple project structure example:
webInput/
    konstruiConfig.json
    index.html
    templates/
        userTemplate.html
        userTemplate.json
  • Set the html file:
<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

<konstrui-template html="templates/userTemplate.html" data="templates/userTemplate.json"></konstrui-template>

</body>
</html>

  • Set the template file:
<div class="class1">
    <div class="class2">{{username}}</div>
    <div class="class2">{{description}}</div>
    <div class="class2">{{phone}}</div>
</div>
  • Set the template data file:
[{
        "username": "Michaela Doe",
        "description": "Hi, I'm here to code",
        "phone": "456456456"
    },
    {
        "username": "John Doe",
        "description": "Hi, I'm here",
        "phone": "123456789"
    },
    {
        "username": "Myself",
        "description": "How are you",
        "phone": "no phone"
    }
]
  • Set the configuration file konstruiConfig.json in the webInput directory:
{
    "title": "Web example",
    "author": "arnaucode",
    "github": "github.com/arnaucode",
    "website": "arnaucode.com",
    "files": [
        "index.html",
        "projects.html",
        "app.css"
    ]
}
  • Execute konstrui
./konstrui
  • Output:
<!DOCTYPE html>
<html>

<body>
    <h1>My First Heading</h1>
    <p>My first paragraph.</p>
    <div class="class1">
        <div class="class2">Michaela Doe</div>
        <div class="class2">Hi, I'm here to code</div>
        <div class="class2">456456456</div>
    </div>
    <div class="class1">
        <div class="class2">John Doe</div>
        <div class="class2">Hi, I'm here</div>
        <div class="class2">123456789</div>
    </div>
    <div class="class1">
        <div class="class2">Myself</div>
        <div class="class2">How are you</div>
        <div class="class2">no phone</div>
    </div>
</body>

</html>