I have the following question/problem:
I want to "build" a templating system where I can aggregte the page to be shown from a couple of different *.html files. For example I have a layout.html with basic page structure and I want to fill it with content from header.html, content.html and footer.html.
I tried it using the Thymeleaf fragment mechanism but that always failed when it comes to aggregate the head definitions (css, js) from the different input files.
I Also tried the Thymeleaf layout dialect mechanism that aggregates the head definitions correctly but it seems only capable of working with one layout and one content file using the layout:decorate directive. Am I right?
The following code snippets are simple and straighforward ... I just want to include header.html, column1.html, column2.html and footer.html into layout.html as described above. Problem is that I only can include the according content sections using ThymeLeafs replace/fragment mechanism. But how can I process the head and script sections to include them into the layout?
layout.html
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Thyme Fiddling</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" th:href="#{/styles/main.css}"/>
<link rel="stylesheet" type="text/css" th:href="#{/styles/layout.css}"/>
<script type="text/javascript" th:src="#{/scripts/jquery-3.1.0.js}"></script>
</head>
<body>
<div id="layout">
<div id="headerWrapper">
<div th:replace="~{header :: content}">placeholder for header</div>
</div>
<div id="contentWrapper">
<div id="column1Wrapper">
<div th:replace="~{column1 :: content}">placeholder for column1</div>
</div>
<div id="column2Wrapper">
<div th:replace="~{column2 :: content}">placeholder for column2</div>
</div>
</div>
<div id="footerWrapper">
<div th:replace="~{footer :: content}">placeholder for footer</div>
</div>
</div>
</body>
header.html
<html xmlns:th="http://www.thymeleaf.org">
<head>
<link rel="stylesheet" type="text/css" media="all" th:href="#{/styles/header.css}"/>
</head>
<script type="text/javascript">
$(document).ready(function() {});
</script>
<div th:fragment="content">
<div class="center">Header !!!</div>
</div>
column1.html
<html xmlns:th="http://www.thymeleaf.org">
<head>
<link rel="stylesheet" type="text/css" media="all" th:href="#{/styles/column1.css}"/>
</head>
<script type="text/javascript">
$(document).ready(function() {});
</script>
<div th:fragment="content">
<div class="center">Column1 !!!</div>
</div>
column2.html
<html xmlns:th="http://www.thymeleaf.org">
<head>
<link rel="stylesheet" type="text/css" media="all" th:href="#{/styles/column2.css}"/>
</head>
<script type="text/javascript">
$(document).ready(function() {});
</script>
<div th:fragment="content">
<div class="center">Column2 !!!</div>
</div>
footer.html
<html xmlns:th="http://www.thymeleaf.org">
<head>
<link rel="stylesheet" type="text/css" media="all" th:href="#{/styles/footer.css}"/>
</head>
<script type="text/javascript">
$(document).ready(function() {});
</script>
<div th:fragment="content">
<div class="center">Footer !!!</div>
</div>
Related
I'm struggling with initializing the vue instance from separate js file (I don't ant to keep the code inside each template html).
template:
<html>
<head>
<title>Cinema project</title>
<meta name="viewport" content="width=device-width, initail-scale=1.0">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
{% load static %}
</head>
<body>
<div class="container">
<ul class="list-group mt-2">
{% for x in huj%}
<li class="list-group-item">{{x}}</li>
{% endfor %}
</ul>
[[rate]]
</div>
<script src="{% static 'js/vue.js' %}" type="text/javascript"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</body>
</html>
js_file:
new Vue({
delimiters: ['[[', ']]'],
el:".container",
data: {
rate: "test",
},
})
The staticfiles_dir works - I tested it with some random js code. In the above vue instance simply can't hook with my template. Is there any way to fix it ?
Vue requires each component to have ONE single root node. Your code example has two because you've placed [[rate]] outside the ul.
Maybe this works better:
<div class="container">
<div>
<ul class="list-group mt-2">
{% for x in huj%}
<li class="list-group-item">{{x}}</li>
{% endfor %}
</ul>
[[rate]]
</div>
</div>
I'm working on Django project with Materializecss design - Built a page with floating button for example.
Why is it not working?
I started using exactly the template from the website: https://materializecss.com/getting-started.html
and updated from the CDN part in the page:
<!--Import materialize.css-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
And added at the bottom:
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
Thanks a lot!
The full HTML:
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<div class="fixed-action-btn">
<i class="material-icons">add</i>
<ul>
<li><a href="#" class="btn-floating btn-large blue">
<i class="large material-icons">filter_drama</i></a></li>
<li><a href="#" class="btn-floating btn-large green">
<i class="large material-icons">insert_chart</i></a></li>
</li>
</ul>
</div>
<!--JavaScript at end of body for optimized loading-->
<script type="text/javascript" src="js/materialize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>
After reading some posts, I use a suggestion to add the below, and it worked:
<!--JavaScript at end of body for optimized loading-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
If someone know to explain the below, it'll be great:
Why the updated version of the files is not working?
What's the right way to install it for production?
The full HTML with the 'ADDED PART THAT MAKE IT WORK':
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<div class="fixed-action-btn">
<i class="material-icons">add</i>
<ul>
<li><a href="#" class="btn-floating btn-large blue">
<i class="large material-icons">filter_drama</i></a></li>
<li><a href="#" class="btn-floating btn-large green">
<i class="large material-icons">insert_chart</i></a></li>
</li>
</ul>
</div>
<!--JavaScript at end of body for optimized loading-->
<script type="text/javascript" src="js/materialize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
ADDED PART THAT MAKE IT WORK:
<!--JavaScript at end of body for optimized loading-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
</body>
</html>
I am trying to use zurb foundation 5 reveal modal. But it's not working and not open when I click on button.
I am using this html code.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link type="text/css" rel="stylesheet" href="css/foundation.css" />
<link type="text/css" rel="stylesheet" href="css/normalize.css" />
<title>index</title>
</head>
<body>
<div id="myModal" class="reveal-modal" data-reveal>
<h2>Awesome. I have it.</h2>
<p class="lead">Your couch. It is mine.</p>
<p>Im a cool paragraph that lives inside of an even cooler modal. Wins</p>
<a class="close-reveal-modal">×</a> </div>
<a class="button" href="#" data-reveal-id="myModal">Click for a modal</a>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation/foundation.js"></script>
<script src="js/foundation/foundation.reveal.js"></script>
<script type="text/javascript">
$('#myModal').foundation();
</script>
</body>
</html>
Change the last script tag to this:
<script type="text/javascript">
$(document).foundation();
</script>
You also forgot to add the modal trigger:
Click Me For A Modal
See documentation here: http://foundation.zurb.com/docs/components/reveal.html
You may be running into this issue if you have called $(document).foundation(); twice on the same page.
Its works for me
Click Me For A Modal
<div id="myModal" class="reveal-modal" data-options="close_on_background_click:false" data-reveal>
<h2>Awesome. I have it.</h2>
<p class="lead">Your couch. It is mine.</p>
<p>I'm a cool paragraph that lives inside of an even cooler modal. Wins!</p>
<a class="close-reveal-modal">×</a>
</div>
in footer i used this snippet
<script>
jQuery(document).ready(function(){
jQuery(document).foundation();
jQuery('#dd').click(function(){
jQuery('#myModal').foundation('reveal', 'open');
});
});
</script>
I use EmberJS 1.0.0 RC3. Those files are based on this tutorial: http://www.youtube.com/watch?feature=player_embedded&v=Ga99hMi7wfY#! (from emberjs.com/guides/).
My index.html is:
<!doctype html>
<!--[if lt IE 7 ]> <html lang="en" class="ie6"> <![endif]-->
<!--[if IE 7 ]> <html lang="en" class="ie7"> <![endif]-->
<!--[if IE 8 ]> <html lang="en" class="ie8"> <![endif]-->
<!--[if IE 9 ]> <html lang="en" class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en"> <!--<![endif]-->
<head>
<meta charset="UTF-8">
<title>Test</title>
<meta name="description" content="">
<meta name="author" content="">
<link rel="stylesheet" href="app/Ressources/public/css/normalize-2.1.1.min.css">
<link rel="stylesheet" href="app/Ressources/public/css/bootstrap-2.3.1.min.css">
<link rel="stylesheet" href="app/Ressources/public/css/bootstrap-responsive-2.3.1.min.css">
<link rel="stylesheet" href="app/Ressources/public/css/jquery.mobile.structure-1.3.1.min.css">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="app/Ressources/public/css/style.css">
</head>
<body>
<script type="text/x-handlebars" >
<div class="navbar">
<div class="navbar-inner">
<a class="brand" href="#">Bloggr</a>
<ul class="nav">
<li>Posts</li>
<li>{{#linkTo 'about'}}About{{/linkTo}}</li>
</ul>
</div>
</div>
{{outlet}}
</script>
<script type="text/x-handlebars" id="about">
<div class="about">
<p>Test</p>
</div>
</script>
<script src="vendor/jquery/jquery-2.0.0.min.js"></script>
<script src="vendor/jquery/mobile/jquery.mobile-1.3.1.min.js"></script>
<script src="vendor/handlebars/handlebars-1.0.0-rc.3.js"></script>
<script src="vendor/ember/ember-1.0.0-rc.3.min.js"></script>
<script src="vendor/ember/ember-data-12.js"></script>
<script src="vendor/bootstrap/bootstrap-2.3.1.min.js"></script>
<script src="vendor/moment/moment-2.0.0.min.js"></script>
<script src="app/main2.js"></script>
</body>
</html>
My main2.js file is:
var App = Ember.Application.create();
App.Router.map(function() {
this.resource('about');
});
When I am in : my_app.local/index.html, it's working fine, I could see my menu. The link in About is my_app.local/index.html#/about so it's correct.
However, when I click on it, I go to my_app_client.local/about and the server cannot find this file (it's correct it doesn't find it, by the way only index.html exist).
In this example, I used WAMP with vhost. I tried with file://My_path_to_my_app/index.html, I could go to index.html#/about but chrome didn't find it.
Could you guess where is my error ?
I just delete this line in index.hmtl:
<script src="vendor/jquery/mobile/jquery.mobile-1.3.1.min.js"></script>
and now it's working. I don't know what is the problem of compatibility but it's working this way.
I'm new to Django and was going through the Django Book for the first time. I tried just throwing some bootstrapped html into a file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link href="assets/css/bootstrap.css" rel="stylesheet">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
<link href="assets/css/style.css" rel="stylesheet">
<link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet">
<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="assets/ico/favicon.ico">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
</head>
<body>
<header><img src="assets/img/logo.png" alt="Test" /></header>
<div class="container" style="text-align:center;">
<br /><br />
<form class="search form-inline" action="searchresults.html">
<div class="input-append">
<input class="search-input input-xxlarge" id="appendedPrependedInput" size="16" type="text" placeholder="Type in your search"><button class="btn btn-large btn-danger" type="submit">Search</button>
</div>
<!--<input type="text" class="search-input input-xlarge" placeholder="Type in your search">
<button type="submit" class="btn btn-large btn-danger">Search</button> -->
</form>
<hr class="soften">
</div>
</body>
</html>
And rendered it with this view:
def search(request):
return render_to_response('search_page.html')
When I start a test server using python manage.py runserver I get a plain ugly html page, rather than a bootstrapped page. Why is this? (I do have the bootstrap assets in the same directory)
Your static files are probably not set up properly. Go to "View Source" and click on the CSS files & see if you get a 404.
Here's how to set up your static files directory: http://docs.djangoproject.com/en/dev/howto/static-files
I'd also recommend checking out django-bootstrap-toolkit.