I am working with node express. So far I didn´t use a template engine. I create my html file and send it via response.send(template); It works fine.
Now, I have more complex tags like a checkbox with several classes. Loading the route in the browser, it takes some milliseconds till the classes are loaded. Means, first I have a checkbox and it changes then to a button. I am talking about milliseconds, but is there a way to load the classes before actually showing the page?
Do template engines like handlebars or pug have such a feature?
Happy for some help to look in the right direction. Thank you!
If you use a template engine (ejs, pug, etc) you can then use the res.render(...) function. The res.render(...) function allows you to find data from the server side then send it over to the client along with the page.
Example:
const express = require('express');
const app = express();
app.use('view engine', 'ejs'); // Change ejs to your preferred view engine
app.get('/path/to/my/page', function(req, res) {
// Get data
res.render('example', { data: 'my-found-data' }); // Render the template 'example' with the data fetched
}
Additional documentation on using template engines can be found in official expresJS documentation here:
https://expressjs.com/en/guide/using-template-engines.html
What do you mean by classes here?
but is there a way to load the classes before actually showing the page?
CSS classes? if yes, you can provide link to load CSS in header of HTML document you use to load it
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Требуется авторизация</title>
<link rel="stylesheet" href="/assets/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<meta name="description" content="">
<meta name="Keywords" content="">
<meta name="robots" content="noindex">
</head>
<body>
See
<link rel="stylesheet" href="/assets/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
It loads bootstrap.min.css from /assets/bootstrap.min.css, and since its in header of page, all css classes are loaded before browser starts rendering page, so it renders it properly.
See https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics for details on loading css
Related
I’m trying to create a Single page with astro and netlify cms, in which the admin should be able to add/remove/modify the page through /admin, but I’m struggling with the understanding of the folder structure.
So, as far as I know, I need to specify the collection structure in the config.yml file. Something like this. (see attached file)
Which will create a content.md file. Basically it will contain all the info that was created through /admin.
The problem is that I don’t know how and where this content.md file is used. Should I import it manually in the index.astro file or am I wrong?
Thank you in advance 🙂
If you have a Markdown file at src/content/content.md, you will need to import and render it somewhere. It depends which page you want to display this content on, but if you want to show the content on your homepage, this would be src/pages/index.astro.
Here’s an example:
---
// src/pages/index.astro
import { Content, frontmatter } from '../content/content.md';
---
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My homepage</title>
</head>
<body>
<h1>{frontmatter.title}</h1>
<article>
<Content /> <!-- this will render your Markdown body -->
</article>
</body>
</html>
The key things to note here are:
The use of the <Content /> component to render the main Markdown content of your Markdown file
The use of an expression {frontmatter.title} to access the title field from your Netlify CMS config. Other fields would be available in the same way: {frontmatter.description}, {frontmatter.heroImage} etc.
I am using ejs in node for creating an app. And in my ejs, when I navigate from one page to another I have to render the header also to have the styles.
How can I make this common for all pages?
<title>Static Website </title>
<meta charset="utf-8">
<meta name="active-menu">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="./styles/abc.css">
<link rel="stylesheet" type="text/css" href="./styles/def.css"> ```
I don't want load styles on every routing. Render all the styles on first page itself
ejs will render the page every time you refresh the page, so you need to put every css you need. you can pass var that say if a css is needed ex: isDefNedded = true and make a if statement in your ejs header
If I set the following in my app.js file, why can't I access it using app.settings.title rather than settings.title in my rendered view? It seems I cannot prefix it with the app object.
...
app.set('title','TestApplication');
...
Why must I do this,
<!DOCTYPE html>
<html lang='en'>
<head>
<title><%= settings.title %></title>
</head>
<body>
</body>
</html>
rather than this?
<!DOCTYPE html>
<html lang='en'>
<head>
<title><%= app.settings.title %></title>
</head>
<body>
</body>
</html>
There is probably a simply answer to this question, but I am new to Javascript and am trying to learn Expressjs and Nodejs.
Thanks
Because variable is extracted before getting to view.
Because express provides some abstraction at the view level. It would be redundant and potentially insecure to expose app to your view, and so it's abstracted away so that you can just directly access settings.
I am new to meteor and I am trying to do multi-page application where http://www.mydomain.com/page1 will result a totally different page from http://www.mydomain.com/page2.
By totally different I mean that I don't want the page to be rendered by the client.
I tried to use meteor-router but What I got is something like:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/myapp.css?9297ad4aa173c4e0c19aebd27c62a5c43242bb93">
<script type="text/javascript">
__meteor_runtime_config__ = {"ROOT_URL":"http://localhost:3000","serverId":"iMp4kgzzeqDtktJoY"};
</script>
<script type="text/javascript" src="/packages/underscore/underscore.js?6d71e6711255f43c0de8090f2c8b9f60534a699b"></script>
<script type="text/javascript" src="/packages/meteor/client_environment.js?07a7cfbe7a2389cf9855c7db833f12202a656c6b"></script>
<script type="text/javascript" src="/packages/meteor/helpers.js?2968aa157e0a16667da224b8aa48edb17fbccf7c"></script>
...
...MANY MANY MANY SCRIPTS.... ?!?
...
...
<script type="text/javascript" src="/myapp.js?2866dcdb5c828b129cdd3b2498a4bf65da9ea43f"></script>
<title>myapp</title>
</head>
<body>
</body>
</html>
And this is not what I want. I want page1 route will return me:
<!DOCTYPE html>
<html>
<head>
My meta tags
</head>
<body>
page1
</body>
</html>
And I want page2 to return different meta tags with different content.
In order to be clear, lets assume that my clients sometime doesn't have javascript. I don't asking about whether meteor is the right framework! I am asking only if can I do this with meteor.
Meteor works a bit different compared to the traditional LAMP stack. Basically it works by patching out the DOM to only where the changes are needed as opposed to re-downloading the whole web page. It makes for a very satisfying end user experience on modern web browsers.
To use meteor router you need to find a spot that you want to patch out with new data for different pages with {{renderPage}}. You can use something like
<head>
<title>xx</title>
</head>
<body>
{{renderPage}}
</body>
<template name="page1">
<h2>Hello!</h2>
</template>
<template name="page2">
<h2>Ola!</h2>
</template>
Now you need to define a router in your client side javascript:
Meteor.Router.add({
'/page1': 'page1',
'/page2': 'page2'
});
So if you load /page1 you would see Hello! and if you load /page2 you would see Ola! as defined in the <template name="page2">..</template>
With the meta tags you need to use javascript to create them. With something like
$('head').append("<meta...");
Again this depends on your preference, personally I find these type of apps load ridiculously fast between web pages as compared to other 'thin' based websites. (Have a look at meteor.com to see how fast you can swap between the pages). The browser does need javascript, however.
Of note is in production mode there will only be 1 script tag.
I just started going through Node using Express and finally got Consolidate JS working properly to use Mustache as the templating view system per the instructions on the Consolidate JS Github page.
Mustache is loading properly, but I'm now wondering how to include the layout file along in the rendering of the template. The default Jade system loads the content of the .render method inside of the layout.jade file. I'm just wondering how to do the same, but with Mustache. Any help is greatly appreciated!
Code:
index.js
exports.index = function(req, res){
res.render('index', { title: "Work pl0x?" });
});
index.mustache
Welcome to {{title}}
I just want the index.mustache content to come in the "{{content}}" portion of the code below (layout.mustache). How can I do this?
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8" />
<title>Project Name | {{title}}</title>
<link href="/stylesheets/style.css" rel="stylesheet" />
</head>
<body>
{{content}}
</body>
</html>
One way to get that behaviour (kind of) is this:
exports.index = function(req, res){
res.render('layout', { title: "Work pl0x?", partials: { content: "index" });
});
Then write like this in your layout.html
<body>
{{>content}}
</body>
The concept of layouts have been removed from express as of 3.0. Here's a reference link with more info.