I have two html templates, with index.html extending base.html
base.html is like this:
{{ define "base" }}
<html>
<head>
<meta charget="utf-8">
<title>{{ template "title" . }}</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/js/isotope.pkgd.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="/css/style.css">
</head>
<body>
{{ template "index" . }}
</body>
</html>
{{ end }}
And index.html:
{{ define "title" }}Homepage{{ end }}
{{ define "index" }}
<div class="wrapper">
<div class="page-content">
<div class="container">
<div class="left">
<img src="../public/images/img_landing_page_mac.png">
</div>
<div class="right">
<h2 style="font-size: 33px; letter-spacing: 5px">Organize <br>Modern Knowledge<br> for Mankind</h2>
<p style="font-size: 20px;margin-top: 35px;letter-spacing: 4px">Consume, Colect and Revisit <br>Knowledge at Your Fingertips</p>
<img src="../public/images/btn_get_chrome.png">
</div>
</div>
</div>
</div>
{{ end }}
It should render when requesting path on browser with a callback handler:
func IndexHandler(w http.ResponseWriter,r *http.Request){
files:=[]string{"base","index"}
util.RenderTemplate(w,nil,files...)
}
RenderTemplate is a wrapper function to render
func RenderTemplate(w http.ResponseWriter,data interface{},tmpl... string){
cwd,_:=os.Getwd()
files:=make([]string, len(tmpl))
for i,file:=range tmpl{
files[i]=filepath.Join(cwd,"./view/"+file+".html")
}
t,err:=template.ParseFiles(files...)
if err!=nil{
http.Error(w,err.Error(),http.StatusInternalServerError)
return
}
templates:=template.Must(t,err)
err=templates.Execute(w,data)
if err!=nil {
http.Error(w,err.Error(),http.StatusInternalServerError)
}
}
After I start server, I request that path on browser, but nothing is rendered at all. What am I missing? It seems that no inheritance is comprehended here
I follow this tutorial, trying to render templates with inheritance / extension:
https://elithrar.github.io/article/approximating-html-template-inheritance/
The define action doesn't execute template, only template and block actions do. Most probably you just want to remove define from your base template (first and last lines) and it will work as expected.
Or you can use Template.ExecuteTemplate function instead of Template.Execute. It accepts name of the template:
err = templates.ExecuteTemplate(w, "base", data)
Or if you are using Go1.6 or newer you can try block action instead of define.
On the side note, please, consider using gofmt.
Related
I am using gin gonic and it's features. One if them being html template rendering.
So in spirit of DRY I wanted to create a base.html template with all common html tags etc. with a
slot for different page bodies.
In essence, this is the base.html
{{define "base"}}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
{{ template "main" . }}
</body>
</html>
{{end}}
Then I created a "child" template called home.html:
{{template "base" .}}
{{define "main"}}
<div class="container mt-5">
Hello
</div>
{{end}}
I followed this wonderful guide on this page and it worked like a charm.
The problem
But when I tried adding another page with different body in subpage.html eg:
{{template "base" .}}
{{define "main"}}
<div class="container">
<div>
<h2>This page is still in progress</h2>
</div>
</div>
{{end}}
the last template that is picked by gins LoadHTMLFiles or LoadHTMLGlob, is then displayed on every page. In this case this is subpage.html content.
How do I fix this. Is it even possible to achieve this behaviour by default?
You could do something like this:
base.html
{{ define "top" }}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
{{ end }}
{{ define "bottom" }}
</body>
</html>
{{ end }}
home.html
{{ template "top" . }}
<div class="container mt-5">
Hello
</div>
{{ template "bottom" . }}
subpage.html
{{ template "top" . }}
<div class="container">
<div>
<h2>This page is still in progress</h2>
</div>
</div>
{{ template "bottom" . }}
Then make sure you're using the file's base name:
// in the home handler use the following
c.HTML(http.StatusOK, "home.html", data)
// in the subpage handler use the following
c.HTML(http.StatusOK, "subpage.html", data)
I am a newbie of spring boot. The below image shows the folder location of my bootstrap css file and jquery js file on spring boot thymeleaf template.
And these are my home html scripts
<html xmlns:th="http://www.thymeleaf.org"
xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head>
<div th:fragment="header-css">
<title>Spring Boot Blog</title>
<script th:src="#{/js/jquery-2.1.4.min.js}"></script>
<link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css" th:href="#{/css/bootstrap.min.css}" />
<link rel="stylesheet" type="text/css" href="/css/main.css" th:href="#{/css/main.css}" />
</div>
</head>
<body>
<div th:fragment="header">
.....
But css and js scripts are not linked at all.
Any idea, please!
== UPDATED ==
I am evaluating the spring blog example. I think my problem is related to login controller. First this is the login controller codes.
#Controller
public class LoginController {
#GetMapping("/login")
public String login(Principal principal) {
String username = (principal != null ? principal.getName() : "ANONYMOUS");
if(principal != null) {
return "redirect:/home";
}
// ALWAYS PRINTING "ANONYMOUS is WRONG!!!!"
System.out.println(username + " is WRONG!!!!");
return "/login";
}
}
And even more
return "/login"
line brings wrong files. In below login.html file,
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
<div th:replace="/fragments/header :: header-css"/>
</head>
<body>
<div th:replace="/fragments/header :: header"/>
<div class="container">
<div class="row" style="margin-top:20px">
<div class="col-xs-12 col-sm-8 col-md-6 col-sm-offset-2 col-md-offset-3">
<form th:action="#{/login}" method="post">
<fieldset>
the controller call the following css file and display its contents.
<link rel="stylesheet" type="text/css" href="/css/main.css" th:href="#{/css/main.css}" />
I'm New to Angular JS. I'm trying a simple Example but it seemed to be not working.
I created a script.js with following code:-
var myApp = angular.module("myModule", []).controller("myController", function ($scope) {
$scope.message = "AngularJS Tutorial";
});
And HtmlPage1.html :-
<script src="Script.js"></script>
<script src="Scripts/angular.min.js"></script> </head> <body>
<div ng-app="myModule">
<div ng-controller="myController">
{{ message }}
</div>
</div>
But I'm getting this result:-
{{ message }}
I don't know what's wrong . Please Help...
Load Script.js after loading reference of angular.js, because your module declaration needs the reference of angular.
You need to do is make sure that the angular module is created before you attempt to register controller on it .
<script src="Scripts/angular.min.js"></script>
<script src="Script.js"></script>
DEMO
<script src="Scripts/angular.min.js"></script>
<script src="Script.js"></script> </head> <body>
<div ng-app="myModule">
<div ng-controller="myController">
{{ message }}
</div>
</div>
Include controller after angular library (y)
I have this string below. I can capture each curly brace with (\{\{.*?\}\})/igm but I need a way of replacing any instance of ' with " in the below string, with javascript.
{% layout none %}<html data-reactid=".1h8va4op8n4" data-react-checksum="-832592417">
<head lang="en" data-reactid=".1h8va4op8n4.0">
<meta charset="UTF-8" data-reactid=".1h8va4op8n4.0.0">
<title data-reactid=".1h8va4op8n4.0.1"></title>
<link rel="stylesheet" href="{{ 'main.css' | asset_file }}" data-reactid=".1h8va4op8n4.0.2">
</head>
<body data-reactid=".1h8va4op8n4.1">
<div id="main" data-reactid=".1h8va4op8n4.1.0"></div>
<script type="text/javascript" src="{{ 'bundle.js' | asset_file }}" data-reactid=".1h8va4op8n4.1.1"></script>
</body>
</html>
You could do this using a callback function.
var r = s.replace(/{{[^}]*}}/g, function(v) {
return v.replace(/'/g, '"');
});
I have my CSS in the following path: mysite/myapp/static/myapp/style.css. As of now, the CSS is simply:
body {
background-color: #F2B8F0
}
h1 {
color: #7BE0CB
}
I have my HTML set up like this: mysite/myapp/templates/myapp/home.html, where the following code is up on top:
{% load staticfiles %}
<link rel="stylesheet" type="text/css" href="{% static 'myapp/style.css' %}" />
My settings.py is like:
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/1.7/howto/static-files/
STATIC_URL = '/static/'
However, nothing happened, and the different text and background colors aren't showing up in my HTML. Does anyone happen to know why? Thanks!
Perhaps your css link tag is in the incorrect spot within your HTML. It should be as follows:
<!DOCTYPE html>
{% load static %}
<html>
<head>
<link rel="stylesheet" type="text/css" href="{% static 'myapp/style.css' %}" />
</head>
<!-- YOUR HTML HERE -->
</html>
let
{% load static %}
be your first line in your HTML