OpenCms tags in OpenCms tags - opencms

I know this may be a silly question but I ma trying to understand the jsp templates in opencms.
Even though we have htm tags in jsp. what is the actual use of cms tags such as :
<cms:template element="body">
<cms:include element="body" />

As described in this wiki page you can define your template parts in a jsp file through cms tag cms:template and then include them in your jsp page through cms tag cms:include

The cms:template tag
With the tag, you can add control structures to the template which allows it to deal with multiple page elements.
The cms:include tag
This tag is used to include files from the OpenCms VFS dynamically at runtime. The included file is treated like a request with optional additional request parameters.
There are different options to determine the name of the included file by using one of the following attributes:
- page
- property
- attribute
If none of these attributes has been set, the body of the tag is evaluated and the result is used as filename.
<%# page session="false" %>
<%# taglib prefix="cms" uri="http://www.opencms.org/taglib/cms" %>
<cms:template element="head">
<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title><cms:property name="title" escapeHtml="true" /></title>
<meta HTTP-EQUIV="CONTENT-TYPE" CONTENT="text/html; CHARSET=<cms:property name="content-encoding" default="ISO-8859-1" />">
<link type="text/css" rel="stylesheet" href="<cms:link>../resources/mystyle.css</cms:link>">
<cms:editable />
</head>
<body>
<h2>My first template head</h2>
<!-- Main page body starts here -->
</cms:template>
<cms:template element="body">
<h2>This is the first page element:</h2>
<cms:include element="body" editable="true"/>
<cms:template ifexists="body2">
<h2>This is the second page element:</h2>
<cms:include element="body2" editable= "true"/>
</cms:template>
</cms:template>
<cms:template element="foot">
<!-- Main page body ends here -->
<h2>My first template foot</h2>
</body>
</html>
</cms:template>

Related

Using #local_variable in CSHTML code in asp-page

I develop ASP.Net Core 2.1 RazorPages web application. I want parametrize the the value of asp-page tag helper.
So I use following code in cshtml file. There is a del_link local variable defined in begining of file. This variable is late used as parameter for second asp-page tag helper.
#page
#{
string del_link = "/UnloadDelete";
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<div>
<a asp-page="/UnloadEdit">Details</a>
<a asp-page=#del_link>Delete</a>
</div>
</body>
</html>
ASP.Net Razor generate following HTML code.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<div>
Details
Delete
</div>
</body>
</html>
As you can see in HTML code, asp-page="/UnloadEdit" is properly rendered to HTML code, but asp-page=#del not, it is rendered to <a href="">. How I can use local variable for asp-page tag helper in Razor Pages?
Thanks in advance.
You must pass a page name to the asp-page attribute. So what you are trying to do is not supported. If #del_link renders a relative URL, you can pass that to the href attribute instead. There may be other suitable solutions, depending on why you feel the need to use #del_link at all.

Sails set css in specific page

I'm using the sails.js framework
I want to know if there is a way for a view to use only one css file, not the other ones being declared in the layout?
That is, ignore the other css definitions and use only one.
Is that possible?
Yes. Inside of the method that renders your view, return a value that references the stylesheet you want to include.
return res.view('someTemplate',{
myStylesheet: 'link/to/your/stylesheet.css'
})
Then, edit your layout.ejs file to include the stylesheet if our new value is present.
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
...
<% if(myStylesheet) { %>
<link rel="stylesheet" href="<%= myStylesheet %>">
<% } %>
<!--STYLES-->
<link rel="stylesheet" href="/some/other/stylesheet.css">
<!--STYLES END-->
...
...
...
The EJS template pre-processor will now only include the stylesheet you specify if a value is provided.

Adding extra scripts and headers to ufront-erazor html layout

Using ufront and erazor I ran into the following problem very quickly.
The hello-world example provides the following layout:
<!DOCTYPE html>
<html lang="en">
<head>
<title>#title</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
</head>
<body>
<div class="container">
#viewContent
</div>
</body>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"</script>
</html>
For certain pages I want to add more headers or scripts after Jquery has been loaded.
One way to do so (for the scripts for example), would be to pass the scripts as an array of strings, and construct them on the layout file :
...
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"</script>
#for(script in scripts) {
<script src='#script.path'></script>
}
</html>
....
The problem with this approach is that I can't keep meaningful headers + body + scripts on the same template file witch would be great, also needs extra care to pass the scripts and headers as context.
Some template engines like Razor or Laravel allow to do that using 'sections'.
Is it possible to do something similar with erazor? If not what would be a good alternative?

servicestack Razor page with relative path in meta refresh not served correctly

this used to work in work in the older versions of service stack (.33). I'm trying .55 now.
I have a .cshtml page with a relative ~ link, and i also set the WebHostUrl in the EndpointHostConfig.
In the old version both the metarefresh and the href were replaced with the WebHostUrl. So both were
http://server/baseurl/Incidents.
In the newer versions, it only seems the href are. So the metarefresh is no longer working. it refreshes to
http://server/baseurl/~/Incidents
not sure if it can be fixed.
example .cshtml
<head>
<meta http-equiv="refresh" content="3; url=~/Incidents">
</head>
<body>
<div>
<p>
<center>
View Incidents
</center>
</p>
AppHost.cs
SetConfig(new EndpointHostConfig {
AllowJsonpRequests = true,
WebHostUrl = ConfigurationManager.AppSettings["BaseUrl"],
The issue is that the ~ is not valid html or a valid URL. But you can use the URL extension methods within Razor to translate the path for you as it understands the tilde. ASP.NET understands the ~ as the root of your application and will translate it accordingly.
<head>
<meta http-equiv="refresh" content="3; url=#Url.Content("~/Incidents")">
</head>
<body>
<div>
<p>
<center>
View Incidents
</center>
</p>

How to automatically show Title of the Entries/Articles in the Browser Title Bar in ExpressionEngine 2?

How would I output the title of an entry in ExpressionEngine and display it in the browser's title bar?
Here is the content of my page's header:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test Site</title>
<link rel="stylesheet" href="{stylesheet=site/site_css}" type="text/css" media="screen" />
</head>
What I need is for each page to display the title of the entry in my browser's title bar — how can I achieve that?
Part of UPDATED Code:
Here is how i have done it :
{exp:channel:entries channel="news_articles" status="open|Featured Top Story|Top Story" limit="1" disable="member_data|trackbacks|pagination"}
{embed="includes/document_header" page_title=" | {title}"}
<body class="home">
<div id="layoutWrapper">
{embed="includes/masthead_navigation"}
<div id="content">
<div id="article">
<img src="{article_image}" alt="News Article Image" />
<h4>{title}</h4>
<h5><span class="by">By</span> {article_author}</h5>
<p>{entry_date format="%M %d, %Y"} -- Updated {gmt_edit_date format="%M %d, %Y"}</p>
{article_body}
{/exp:channel:entries}
</div>
What do you think?
Another relatively new way to tackle it is using the Stash add-on and a template partials approach. This method knocks you down to one embed, and has the added advantage of giving you a centralized "wrapper" template - one for each major page layout, basically. The example below assumes you've simply added custom fields to handle any entry-specific meta data you're looking to inject into the header. With this idea in mind, here's a simplified view of the basic structure I've been applying recently:
In your template you apply EE tags to determine the logic of what gets sent to the inside-wrapper
{embed="embeds/.inside-wrapper"}
{exp:channel:entries channel="channel_name" limit="1" dynamic="yes" disable="whatever|you|can|live|without"}
{!-- ENTRY SEO META DATA --}
{exp:stash:set name="entry_seo_title" scope="site"}{cf_channelprefix_seo_title}{/exp:stash:set}
{exp:stash:set name="entry_seo_description" scope="site"}{cf_channelprefix_seo_description}{/exp:stash:set}
{exp:stash:set name="entry_seo_keywords" scope="site"}{cf_channelprefix_seo_keywords}{/exp:stash:set}
{!-- ENTRY/PAGE CONTENT --}
{exp:stash:set name="entry_body_content" parse_tags="yes" parse_conditionals="yes" scope="site"}
Your page content here
{/exp:stash:set}
{/exp:channel:entries}
And then in your wrapper template, which would ultimately contain all your wrapping HTML but could be chunked into snippets. for something like the header since it would be shared with other wrapper templates, for example:
<html>
<head>
<title>{exp:stash:get name="entry_seo_title"}</title>
<meta name="description" content="{exp:stash:get name="entry_seo_description"}" />
<meta name="keywords" content="{exp:stash:get name="entry_seo_keywords"}" />
</head>
<body>
{exp:stash:get name="entry_body_content"}
</body>
</html>
If you want to show just the name of your ExpressionEngine site (as defined in CP Home > Admin > General Configuration) use the site name global variable:
<title>{site_name}</title>
If you want to display just the current entry title from a given channel use the following:
<title>
{exp:channel:entries channel="channel_name" limit="1" dynamic="yes"}
{title}
{/exp:weblog:entries}
</title>
Many Web Developers will use an Embed Variable with an Embedded Template to pass the `{entry_title} to a global embed template, allowing for a dynamic page title:
{embed="includes/header" title="{exp:channel:entries channel="{channel_name}"}{title}{/exp:channel:entries}"}
If you're using EE2, the SEO Lite Module takes care of all the hard work for you with a single line of code:
<html lang="en">
<head>
<meta charset="utf-8" />
{exp:seo_lite url_title="{url_title}"}
</head>
Other solutions include the Low Title Plugin (EE1, EE2).
One addition to Ryan's embed method (which is definitely the most flexile method): chances are you can wrap most of your page in an {exp:channel:entries} tag when viewing an individual entry, avoiding the additional (and expensive) channel:entries call. So it would look more like this:
{exp:channel:entries channel="channel_name" limit="1"}
{embed="includes/header" title="{title}"}
<h1>{title}</h1>
{page_content}
{embed="includes/footer"}
{if no_results}{redirect="404"}{/if}
{/exp:channel:entries}
NSM Better Meta is a more complete way to pass channel meta data to the tag.
For smaller sites, I use the String plugin.
https://devot-ee.com/add-ons/string
Very simple syntax.

Resources