I am just learning Rust's Rocket however when I compile the code, I get errors mentioned below. I am just trying to pass values to my templates variable from my rust file.
I have a src/main.rs file with following code:
#[macro_use] extern crate rocket;
use rocket_dyn_templates::{Template, context};
#[get("/")]
fn home() -> Template{
Template::render("index",context!{
title : "Hello, World",
logged_in : true,
user_name: "test"
})
}
#[launch]
fn rocket() -> _ {
rocket::build()
.mount("/", routes![home])
.attach(Template::fairing())
}
Inside templates/index.html.tera I following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{title}}</title>
</head>
<body>
<header>
<nav>
<div>
<h1>Test</h1>
</div>
<!-- Add navigation bar here !-->
<ul>
<li>
About
</li>
<li>
Edit Page
</li>
<li>
{% if logged_in %}
{{user_name}}
{% else %}
Login
</li>
</ul>
</nav>
</header>
<main>
<!-- Provide Title for your page here !-->
<h1>{{title}}</h1>
</main>
however when i compile the code i am greeted with following errors:
41 | </html>
| ^---
|
= expected tag or some content
Template initialization failed. Aborting launch.
Error: Rocket failed to launch due to failing fairings:
Templating
thread 'main' panicked at 'aborting due to fairing failure(s)',
I think you are forgetting to close some tags in the html/Tera code and that is why you are getting this error.
You are forgetting to close body, html, and the {% endif %} for the structure control
I modified the html code to something like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{title}}</title>
</head>
<body>
<header>
<nav>
<div>
<h1>Test</h1>
</div>
<!-- Add navigation bar here !-->
<ul>
<li>
About
</li>
<li>
Edit Page
</li>
<li>
{% if logged_in %}
{{user_name}}
{% else %}
Login
{% endif %}
</li>
</ul>
</nav>
</header>
<main>
<!-- Provide Title for your page here !-->
<h1>{{title}}</h1>
</main>
</body>
</html>
and it works now
Related
I am working on an eWallet with Node Js and I have found a bug that I can't figure out what is the issue.
Here is the code for index.ejs:
`<!DOCTYPE html>
<html>
<head>
<meta charset="urf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="Mr. Barasa Joel">
<meta name="description" content="eWallet - Free E-Wallet">
<meta name="keywords" content="E-Wallet, digital wallet, wallet">
<link rel="shortcut icon" href="img/favicon.ico">
<link rel="stylesheet" href="css/styles.css">
<title>E-Wallet</title>
</head>
<% if(page == 'home') { %><section class="image"><% } %>
<header class="header-columns header-filled header-mobile">
<img src="/img/icon-menu.png" alt="" height="24" id="mobile-menu">
<article class="header-columns header-left">
<img src="img/logo-full.png" alt="ewallet" height="40">
</article>
<article class="header-center">
<nav>
<ul class="header-columns menu">
<li>O eWallet</li>
<li>How it's working</li>
<li>Where will you pay</li>
</ul>
</nav>
</article>
<article class="header-columns header-right">
Create an account
Log in
</article>
</header>
<% if(page == 'home') { %></section><% } %>
<body <% if(page != 'home') { %>class="app-body gradient"<% } %>>
<% if(page == 'home') { %>
<%- include home %>
<% } else if(page == 'login') { %>
<%- include login %>
<% } else if(page == 'register') { %>
<%- include register %>
<% } %>
<footer class="footer-fixed-bottom">Copyright © 2023 Mr. Barasa Joel</footer>
<script src="/js/mobile-menu.js"></script>
</body>
</html>`
When I try to run the app on the browser, I get this error:
The error displayed is:
Error: missing ) after argument list in "Node\eWallet\views\index.ejs" while compiling ejs If the above error is not helpful, you may want to try EJS-Lint: https://github.com/RyanZim/EJS-Lint Or, if you meant to create an async function, pass async: true as an option.
Error displayed
I am using thymeleaf for my front end design ,I create a nav bar and
I want this nav bar work for all pages, my Requirement is make one nav
bar and use this nav bar in every page ,with out define another nav
bar in separate page .
I create a nav bar inside my fragments folder that situated inside
template folder
When i call my nav bar in my index page it is not working
Here is my code of index page
index.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Coursel</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" ></script>
<script type="text/javascript" src="/static/demo.js"></script>
</head>
<body>
<nav th:replace="/fragments/nav :: nav-front"></nav>
<div class="container-fluid">
here my register form codes
</div>
</body>
</html>
nav.html
<nav class="nav">
<a class="nav-link active" th:href="#{/templates/index.html}">Active</a>
<a class="nav-link active" th:href="#{/templates/index.html}">Register</a>
<a class="nav-link active" th:href="#{/templates/index.html}">Login</a>
<a class="nav-link active" th:href="#{/templates/index.html}">AboutUs</a>
</nav>
Here is my project structure
I use IntelliJ IDEA as code editor.
It is possible, look into Thymeleaf Layout Dialect.
In short:
you create some layout.html in your templates folder. In it:
<!DOCTYPE html>
<html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
<!-- all common head tags - meta etc. -->
<title layout:title-pattern="$CONTENT_TITLE - $LAYOUT_TITLE">App name</title><!-- define title in your page template and it will be added too your app name, e.g. 'Home - My App' -->
</head>
<body>
<nav>
<!-- your nav here -->
</nav>
<section layout:fragment="content">
<!-- don't put anything here, it will be replaced by the page contents -->
</section>
</body>
</html>
And in you page templates:
<!DOCTYPE html>
<html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{/path/to/layout.html}">
<head>
<title>Page name</title>
</head>
<body>
<section layout:fragment="content">
<p>This will be added into your layout!</p>
</section>
</body>
</html>
In order to make it work, you will need to add it to your templateEngine() bean definition:
#Bean
public SpringTemplateEngine templateEngine() {
SpringTemplateEngine templateEngine = new SpringTemplateEngine();
templateEngine.setTemplateResolver( thymeleafTemplateResolver() );
templateEngine.addDialect( new LayoutDialect() );
return templateEngine;
}
See mvnrepository to import this dialect using maven.
I'm new to flexbox, and I've tried applying align-center to the row class but, the h1 will not center. Could someone give me a hand with this, and explain to me why the align center is not working? Here is a code pen Codepen
<!doctype html>
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Foundation for Sites</title>
<link rel="stylesheet" href="css/foundation.css">
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<div class='header-section'>
<div class='title-bar' data-responsive-toggle='menu' data-hide-for='medium'>
<button class='menu-icon' type='button' data-toggle></button>
<div class='title-bar-title'>Menu</div>
</div>
<div class='top-bar' id='menu'>
<div class='top-bar-left'>
<ul class='dropdown vertical medium-horizontal menu' data-dropdown-menu>
<li class='menu-text'>The American Dream</li>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
<div class='main-content'>
<div class='row'>
<div class='small-12 column'>
<h1>And...Then, ZANG!</h1>
</div>
</div>
</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/vendor/what-input.js"></script>
<script src="js/vendor/foundation.js"></script>
<script src="js/app.js"></script>
</body>
</html>
I'm trying to make a webpage that interacts with JavaScript and sends JSON data to Rust functions, then renders the www files. The structure of my project is:
/..
/src
/www
|___index.html
|___/css
| |__style.css
|
|___/javascript
| |__javascript-supp.js
|___/images
|__myImg.png
main.rs
use nickel::{Nickel, HttpRouter, StaticFilesHandler, NickelError, Request, Response,
MiddlewareResult};
use std::collections::HashMap;
fn tmpl_handler<'a>(_: &mut Request, res: Response<'a>) -> MiddlewareResult<'a> {
let mut data = HashMap::<&str, &str>::new();
// add data for render
// name = {{ name }} in template
data.insert("name", "Nickel");
res.render("www/", &data)
}
fn main() {
let mut server = Nickel::new();
server.utilize(StaticFilesHandler::new("www/"));
server.get("/login/*", tmpl_handler);
server.listen("127.0.0.1:6767");
}
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src=javascript/javascript.js></script>
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>Encryptor Test</title>
</head>
<body>
<div class=header>
<h1>
Hello {{ name }}!
</h1>
</div>
<div class=main-row>
<div class="col-3 menu">
<ul>
<li>Login</li>
<li>Download File</li>
<li>Upload File</li>
<li>Exit</li>
</ul>
</div>
<div class="col-9 context-area">
</div>
</div>
<div class=footer></div>
</body>
</html>
This code is working until:
server.utilize(StaticFilesHandler::new("www/"));
I want to send the data $name = "Nickel" and render the index.html.
How do I render the whole www/ directory so that after visiting 127.0.0.1:6767/login the whole page will be there (JS, CSS and images) and not just plaintext?
I can provide the CSS file on request.
You have to re-utilize the www directory after the GET request:
server.get("/login", tmpl_handler);
server.utilize(StaticFilesHandler::new("www/"));
is working... even if it doesn't seem really good.
I am trying to read my index.html file from my server.js in order to add a new that links to a new html file I generate. I am using the POST method to do this and can successfully generate the new HTML file, however I am not sure how I can add a new inside the index.HTML.
Here is my server.js:
//POST method
if(req.method === 'POST'){
req.on('data', (data) => {
let elementObj = querystring.parse(data.toString());
element = elementObj.elementName;
elementSymbol = elementObj.elementSymbol;
elementAtomic = elementObj.elementAtomicNumber;
elementDescription = elementObj.elementDescription;
let newElement = fs.createWriteStream(`./public/${element}.html`);
newElement.write(`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>The Elements - ${element}</title>
<link rel="stylesheet" href="/css/styles.css">
</head>
<body>
<h1>${element}</h1>
<h2>${elementSymbol}</h2>
<h3>Atomic number ${elementAtomic}</h3>
<p>${elementDescription}</p>
<p>back</p>
</body>
</html>`);
let indexElements = document.querySelector('#elements');
let li = document.createElement('li');
let a = document.createElement('a');
a.setAttribute('href', `/${element}.html`);
let elem = document.querySelector(`a[href = "/${element}.html"]`);
elem.innerHTML = `${element}`;
indexElements.appendChild(li);
li.appendChild(a);
res.end(data);
});
}
Here is my index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>The Elements</title>
<link rel="stylesheet" href="/css/styles.css">
</head>
<body>
<h1>The Elements</h1>
<h2>These are all the known elements.</h2>
<h3>These are 2</h3>
<ol id = 'elements'>
<li>
Hydrogen
</li>
<li>
Helium
</li>
</ol>
<script src="../../server.js"></script>
</body>
</html>
The result I want in my newly, modified index.html (new 'Boron' <li> added):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>The Elements</title>
<link rel="stylesheet" href="/css/styles.css">
</head>
<body>
<h1>The Elements</h1>
<h2>These are all the known elements.</h2>
<h3>These are 2</h3>
<ol id = 'elements'>
<li>
Hydrogen
</li>
<li>
Helium
</li>
<li>
Boron
</li>
</ol>
<script src="../../server.js"></script>
</body>
</html>
Your question doesn't make it clear exactly what you're trying to do, but if these are your requirements:
You want to have an HTML template on disk.
That you can insert some content into based on some dynamic data.
You can't use anything other than plain node.js http server (so no existing template engines).
Then, you essentially have to build your own little template engine. You can do that by reading the file into memory and then doing some sort of search/replace on some markers in the file to insert your content and then send that newly formed content. Here's a general idea for how to do that:
Contents of template.html file on disk
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>The Elements</title>
<link rel="stylesheet" href="/css/styles.css">
</head>
<body>
<h1>The Elements</h1>
<h2>These are all the known elements.</h2>
<h3>These are 2</h3>
<ol id='elements'>
<li>
Hydrogen
</li>
<li>
Helium
</li>
<!-- new elements -->
</ol>
<script src="../../server.js"></script>
</body>
</html>
Server code for handling the POST
//POST method
if(req.method === 'POST'){
req.on('data', (data) => {
let elementObj = querystring.parse(data.toString());
let element = elementObj.elementName;
let elementSymbol = elementObj.elementSymbol;
let elementAtomic = elementObj.elementAtomicNumber;
let elementDescription = elementObj.elementDescription;
fs.readFile("template.html", function(err, data) {
if (err) return res.status(500).end();
// build new content
let newContent = "<li><a href=${element}.html>${element}</a></li>";
data = data.replace(/<!-- new elements -->/, newContent);
res.send(data);
});
});
});