Good Evening,
I am creating a project based on Spring MVC for the back end and Twitter Bootstrap for the front end.
I would like to create a template for recurring my pages (header and footer fixed for all pages) only that I would like to avoid repeating the code in all the pages (as it is not good practice and can lead to mistakes). Is there a way to centralize what? I thought about the jsp (one for the header and the footer) and recall within the various view. Is there a way to do so? Or there better alternatives?
thanks
You can use the JSP... There's include tag, you can use like this:
<%# include file="/views/templates/header.jsp" %>
// Rest of the content
<%# include file="/views/templates/footer.jsp" %>
Or you can use a framework for templates, like Tiles or Freemarker.
Spring MVC with Tiles: http://java.dzone.com/articles/spring-mvc-tiles-3-integration
Using tiles, the template page:
<body>
<div class="container" style="border: #C1C1C1 solid 1px; border-radius:10px;">
<!-- Header -->
<tiles:insertAttribute name="header" />
<!-- Body Page -->
<div class="span-19 last">
<tiles:insertAttribute name="body" />
</div>
<!-- Footer Page -->
<tiles:insertAttribute name="footer" />
</div>
</body>
And you can change dynamically the "body" tiles attribute.
Related
In the features tag on the homepage layout of the Vuepress, any markdown notation can't be used due to get the error.
So, I'd like to make my custom layout which is extended from the default homepage layout and to get possible to use markdown.
Is this possible? Any suggestion is welcome, thank you!
I agree with #Sun Haoran's answer, but want to note a good way to add content/html is using a component.
We created a front page component called HomeFeatures.vue. (see the repo) Also, we pretty much just copied this straight from vuepress.
<template>
<div class="features">
<div class="feature">
<h2>AccuTerm</h2>
<p>
Getting Started<br />
Licensing<br />
Desktop<br />
Web<br />
Mobile
</p>
</div>
<div class="feature">
<h2>jBASE</h2>
<p>All Docs<br /></p>
</div>
<div class="feature">
<h2>OpenQM</h2>
<p>Main (Coming Soon!)<br /></p>
</div>
<div class="feature">
<h2>MV Dashboard</h2>
<p>
Introduction<br />
Installation Guide<br />
Programmers Guide
</p>
</div>
<div class="feature">
<h2>MV Connect</h2>
<p>
Overview<br />
Getting Started<br />
API
</p>
</div>
<div class="feature">
<h2>Customer Portal</h2>
<p>
All Docs
</p>
</div>
</div>
</template>
<script>
export default {
name: 'Features'
};
</script>
And just included it like so: (see the repo)
---
home: true
heroImage: /assets/img/logo-grey.png
heroText: Product Documentation
tagline: Welcome to the future
footer: MIT Licensed | Copyright © 2019-present Company Name
---
<HomeFeatures />
Our docs live here if you'd like to see it in action.
Currently, you can't without going through a lot of trouble. The default theme's homepage is using YAML front matter to pass on user config texts, which will not be parsed as markdown.
Personally, I suggest you try to use HTML directly with a customized layout. To use a customized layout for the homepage, check my other answer, and to use HTML see the relavent issue in VuePress #2186
Say I have this simple scaffold in my app_component.html:
<header>
<div>
<!-- here I have some elements that won't change -->
</div>
<div>
<!-- SECTION HEADER: but I want to change this part's content, based on
navigation or something else (auth roles, for example) -->
</div>
</header>
<main>
<div class="container">
<div class="row">
<div class="col s12">
<section class="section">
<router-outlet>
<!-- SECTION MAIN: main content goes here -->
</router-outlet>
</section>
</div>
</div>
</div>
</main>
<div class="divider"></div>
<footer>
<div>
some footer here. nothing important
</div>
</footer>
As you can see in the snippet, I'm using a <router-outlet> in SECTION MAIN to show contents which is fine. The problem is, how can I have a changeable part in header section (the SECTION HEADER in the code) and how can I change it's content based on e.g. navigation, auth roles, etc. ? Does AngularDart support this kind of routing? Thanks in advance.
The short answer is no, the router doesn't currently have support for doing this easily.
Other frameworks support this functionality through "named" router outlets. This allows multiple outlets to exist in the same view, provided they're given unique names. Each route configuration then must designate which component is rendered in which named outlet. If this sounds desirable, please feel free to file a feature request: https://github.com/dart-lang/angular
Of course you could always write your own solution. You could create a component for the header section that dynamically loads a different component, depending on which route is active. It simply needs to inject Router and listen to Router.stream for route changes.
I have just started learning to convert html to joomla template 2.5,quite succeed.
My html looks like:
Home Page:Header,Menu,slider,footer
About Page:Header,menu,content area,footer.
Problem is how to create the about page as well as other pages, I have approx different themes for different pages, header, footer, menu are same, just the middle portion are different.
Suppose I have a main center div
<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider">
<img width="970" height="400" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/sldier1.jpg" alt="Black Leather Suit" title="" /></div></div>
ow could I add more than 1 components in slider-wrapper div?
<jdoc:include type="modules" name="content" style="none" />
<jdoc:include type="modules" name="content" style="none" />
Joomla sites are not like html sites. You don't manually create each page and save the html file. For this you create a new article in the Joomla backend using the article manager or a 3rd party extensions such as K2, or assign an installed component layout to a menu item.
You can also only have 1 component per page however, if you slider comes with a module, then you can load the module in an article by giving is a custom position and then adding the following code to you article:
{loadposition xxx}
I'm working on an ASP.NET MVC 3 application. I primarily come from a ASP.NET WebForms background. I am working on an application with a complicated layout scheme. Because of this, i was hoping to have all of my layout code in, well, _Layout.cshtml. My challenge is, there is custom javascript logic associated with each page. I've found that if this JavaScript is included in the middle of my page, it doesn't work. So what I wanted to do was move it elsewhere. But in order to do this, I need something similar to the ASP.NET WebForms PlaceHolder control. Ideally, I would like to be able to do something like this:
<body>
<div id="myLayout" style="background-color:Gray; height:100%;">
<div id="myContent" style="background-color:Silver;">
#RenderBody()
</div>
<div id="myFooter" style="background-color:Silver;">
Footer
</div>
</div>
#RenderScript()
</body>
Is there a way for me to do this? Or am I going to have to write every page individually?
Thank you!
Here's what i do, in each of your views create a section like this, put any html you want in it
Any View:
#section Scripts
{
<script src="#Url.Content("~/Scripts/myscript.js")" type="text/javascript"></script>
<!-- Styles, more scripts, etc -->
}
Then back in your _Layout.cshtml you can render the section anywhere you want, the second parameter says if the page requires a Scripts section or not.
_Layout.cshtml: (anywhere you want)
<head>
#RenderSection("Scripts", false)
</head>
I'm wondering can Velocity make what I want :)
For example I have
<html>
<meta>
<title>My title</title>
</meta>
<body>
<div id="content">
<!-- here is my dynamic content -->
</div>
<div id="right">static content</div>
</body></html>
Now. I have 4 actions in my Spring based application
create, update, login, home
Every action have it own template. For create is a big form, for update small form, for login, login form, for home lates news.
There are very much diffrent each from other. Now I want to dynamicly swap content in my
Can I create such template-container (i mean the header part and right div) with dynamic part ?
I don't want to get the actions response to variable and pass it to template. I want to have a simple template for example create.jsp or create.vm or create.html and I want that my app automaticly will take the template of the action and render it in my static template-container.
I hope it is clear
Why not use Tiles instead? It's designed for this scenario.
I've used Tiles 2 with JSP in several projects and I like it. However, with Velocity I prefer macros for simple templating system.
main.vm:
#macro(main)
<html>
<meta>
<title>My title</title>
</meta>
<body>
<div id="content">
$bodyContent
</div>
</body>
</html>
#end
hello.vm:
##main
Hello, World!
#end
Spring configuration:
<bean id="velocityConfigurer"
...
<property name="velocimacro.library" value="main.vm" />
</bean>
Maybe this is not so pretty, but it has the advantage that every view is the one who decides which layout applies, more like JSF does.