I followed this tutorial on sctoch.io to use ejs files but I'm looking for a main index to include the current page.
In the tutorial we will add head, header and footer inside all news pages.
But I want to write this once. For example :
<html lang="en">
<head>
<% include ../partials/head %>
</head>
<body class="container">
<header>
<% include ../partials/header %>
</header>
<main>
<!-- Here is that I want -->
<% include ../partials/main %>
</main>
<footer>
<% include ../partials/footer %>
</footer>
</body>
</html>
How can I do load the good page inside the main file when I clic on different link of my navbar ?
First of all you will have to use Express and his template engine(views),so just add header and footer in every new file you make
<% include header %>
<!-- yout html code -->
<% include footer %>
And when you render it simply say
res.render('YourNewFile');
Your header should look something like this..
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title><%- title %></title>
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
And footer ..just close all tags ..and load some scripts if u want in it
<script src="..."></script>
</body>
</html>
Related
I am trying to navigate to external sites in ejs templating engine. However it is taking link in the anchor tag as one of the routes of my application so it is opening link as follows: http://localhost:3000/www.youtube.com/watch?v=gtLJEhexrxY
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Results</title>
</head>
<body>
<h1>Search results for <%=term %></h1>
<% videos.forEach((video)=>{ %>
Search
<a target=_blank href="www.youtube.com/watch?v=<%=video["id"]["videoId"]%>">
<img src="<%=video["snippet"]["thumbnails"]["medium"]["url"]%>" alt="">
</a>
<div>
<h3><%=video["snippet"]["title"]%></h3>
<h4><%=video["snippet"]["publishedAt"]%></h4>
<p><%=video["snippet"]["description"]%></p>
</div>
<br>
<% }) %>
</body>
</html>
I want to navigate to youtube.com but it is navigating to localhost:300/www.youtube.com
It is solved. I added http:// prefix at the beginning. Thanks to ngearing
I would like to have a text box at the top of my website on every page that has the same text, but I don't want to edit the code individually for every webpage. How would I sync the text to all the webpages?
Include Common files using jQuery...
<html>
<head>
<title>Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
<div id="header"></div>
<div id="content">
Main Content
</div>
<script>
jQuery(document).ready(function(){
jQuery("#header").load("header.html");
});
</script>
</body>
</html>
I'm new to spree and stuck in layouts.
I created a new application and installed spree in it.
I wanted to create a totally static home page.
What I did is I copied following files to my application views directory and edited them:
spree\layouts\spree_application.html.erb
spree\shared\_head.html.erb
spree\shared\_head.htmler.erb
I was able to display the new page but the problem is that it affected admin page as well.
What I want to do is just select a particular layout file for my frontend pages so that admin remains as it is.
Update:
I did this for now:
Copied the _head.html.erb file and edited like this:
<meta charset="utf-8">
<title><%= title %></title>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1" name="viewport">
<%== meta_data_tags %>
<%= canonical_tag(current_store.url) %>
<%= favicon_link_tag 'favicon.ico' %>
<%= stylesheet_link_tag 'spree/frontend/all', media: 'screen' %>
<%= yield :header_css %>
<%= csrf_meta_tags %>
<%= javascript_include_tag 'spree/frontend/all' %>
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6/html5shiv.min.js"></script>
<![endif]-->
<%= yield :head %>
<%= yield :header_js %>
This way, I'm able to include my custom css and js
Still my question remains the same.
I do have a small issue i can't solved despite reading on internet.
I'm learning node.js, express.js, ejs.
I create a small app that tries to display a dynamic webpage on my local server.
The code is working but not the display of the pictures! (the stylesheet works fine)
here is my index.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<% include partials/head %>
</head>
<body class="container">
<header>
<% include partials/header %>
</header>
<main>
<h1><%= title %> </h1>
<img scr="/images/logo_small.jpg" alt="logo" />
<p> Welcome to <%= title %></p>
</main>
<footer>
<% include partials/footer %>
</footer>
</body>
</html>
In the main apps i wrote:
app.use(express.static(path.join(__dirname, 'public')));
And finally i put the images in ./public/images/logo_small.jpg.
The display shows "logo" instead of the pictures. When I go this URL
http://localhost:3000/images/logo_small.jpg
Firefox shows me the image. it is frustrating!
I miss something here, but i don't see what. Any idea ?
In Jade JS, it's very easy to extend a layout. Supposed one have layout.jade, and for the index.jade, just do:
extend layout
block content // content comes here
Then it's pretty sufficient.
I searched the official guide but didn't found how to do. The most similar seems to be something like:
{>partials}
But still that's not extending a layout. How to achieve similar thing in DustJS?
Thanks a lot.
I found the solution... turns out I didn't read the dust documents careful enough.
Layout File:
<html>
<head>
<title>{+title}Location of Title{/title}</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.css" rel="stylesheet">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.js"></script>
</head>
<body>
<header>
<h1 id="page-title" class="very-middle">{+title}Title Comes Here{/title}</h1>
</header>
<div id="content">
{+content}
Content Comes Here
{/content}
</div>
</body>
</html>
Content File:
{>layout/}
{<content}
{!
Content simply comes here
}
{/content}
So the point is the use of {+placeHolder}, {>toExtend} and {