Git Product home page Git Product logo

Comments (17)

suntong avatar suntong commented on September 3, 2024 3

Thanks for the working demo for @BellZaph, @thomasvvugt.

My question was for html template, to be specifically, about these lines

<head>
<title>Main</title>
</head>

I.e., how to change the Title for the layout file. Thx.

Hmm... let me stress again that my question is

how to change the Title for the layout file

yet, @thomasvvugt, both of your demo code are not using the layout file. So let me be specific

./views/index.html

{{template "partials/header" .}}

<h1>{{.Title}}</h1>

{{template "partials/footer" .}}

./views/partials/header.html

<h2>Header</h2>

./views/partials/footer.html

<h2>Footer</h2>

./views/layouts/main.html

<!DOCTYPE html>
<html>

<head>
  <title>Main</title>
</head>

<body>
  {{embed}}
</body>

</html>
package main

import (
	"github.com/gofiber/fiber"
	"github.com/gofiber/template/html"
)

func main() {
	// Create a new engine
	engine := html.New("./views", ".html")

	// Pass the engine to the Views
	app := fiber.New(&fiber.Settings{
		Views: engine,
	})

	app.Get("/", func(c *fiber.Ctx) {
		// Render index
		c.Render("index", fiber.Map{
			"Title": "Hello, World!",
		})
	})

	app.Get("/layout", func(c *fiber.Ctx) {
		// Render index within layouts/main
		c.Render("index", fiber.Map{
			"Title": "Hello, World!",
		}, "layouts/main")
	})

	app.Listen(3000)
}

The two app.Get above, one is using layout file and one is not. my question is how to change the Title for the layout file. I.e., the piece called with

	app.Get("/layout", func(c *fiber.Ctx) {
		// Render index within layouts/main
		c.Render("index", fiber.Map{
			"Title": "Hello, World!",
		}, "layouts/main")

thx

from template.

thomasvvugt avatar thomasvvugt commented on September 3, 2024 1

Hi @suntong, the html package can also context with provided data, see; https://golang.org/pkg/html/template/

The example @fuadarradhi showed can be simplified by using the {{.}} parameters;

main.go

package main

import (
	"github.com/gofiber/fiber"
	"github.com/gofiber/template/html"
)

func main() {
	engine := html.New("./views", ".html")

	app := fiber.New(&fiber.Settings{
		Views: engine,
	})

	app.Get("/", func(c *fiber.Ctx) {
		// Render index
		c.Render("index", fiber.Map{
			"Title": "Index!",
		})
	})

	app.Listen(8080)
}

views/index.html

<!DOCTYPE html>
<html>

<head>
    <title>{{ .Title }}</title>
</head>

<body>
<h1>{{ .Title }}</h1>
</body>

</html>

Keep in mind: HTML templates treat data values as plain text which should be encoded so they can be safely embedded in an HTML document. The escaping is contextual, so actions can appear within JavaScript, CSS, and URI contexts.

You should always escape your data if not already sanitized, the HTML templates provides several functions for this; https://golang.org/pkg/html/template/#hdr-Contexts

Once again, thanks for bringing up the issue. Let me know if my example helps you out or leaves you with additional questions! 🔥

from template.

suntong avatar suntong commented on September 3, 2024

I first drafted this question here, but asked in fiber eventually.

However, having closed it on fiber, and thinking back, I think this is still an valid question/issue -- people need their layout to be a template for all their pages, and they need to change the HTML Title for every page.

So, would be OK that I change the default html template to satisfy this, so that the next people won't need to wonder again? If I did so, would you accept the PR?

from template.

belliel avatar belliel commented on September 3, 2024

I have same problem.
So, do u know how to set variables in several places?

How to change layout in several places

from template.

suntong avatar suntong commented on September 3, 2024

Hi @Fenny,

Please advice -- now it is more than me facing the same problem. (I kind of solve it a hacky way, but don't want to miss-lead people).

from template.

thomasvvugt avatar thomasvvugt commented on September 3, 2024

May I ask what template engine you are using? From my previous experience, I can tell that handlebars was replacing variables in any part of the view.

from template.

belliel avatar belliel commented on September 3, 2024

May I ask what template engine you are using? From my previous experience, I can tell that handlebars was replacing variables in any part of the view.

django

from template.

thomasvvugt avatar thomasvvugt commented on September 3, 2024

Hi @suntong and @BellZaph, rendering templates using the django engine seems to work fine on my end.
Can you provide a minimal code example to reproduce this issue? See my code examples below.

main.go

package main

import (
	"github.com/gofiber/fiber"
	"github.com/gofiber/template/django"
)

func main() {
	engine := django.New("./views", ".django")

	// Pass the engine to the Views
	app := fiber.New(&fiber.Settings{
		Views: engine,
	})

	app.Get("/", func(c *fiber.Ctx) {
		// Render index
		_ = c.Render("index", fiber.Map{
			"Title": "Index!",
		})
	})

	_ = app.Listen(8080)
}

views/index.django

<!DOCTYPE html>
<html>

<head>
  <title>{{ Title }}</title>
</head>

<body>
  <h1>{{ Title }}</h1>
</body>

</html>

Thanks for bringing up the issue! 🚀

from template.

suntong avatar suntong commented on September 3, 2024

Thanks for the working demo for @BellZaph, @thomasvvugt.

My question was for html template, to be specifically, about these lines

<head>
<title>Main</title>
</head>

I.e., how to change the Title for the layout file. Thx.

from template.

fuadarradhi avatar fuadarradhi commented on September 3, 2024

for global, use function engine

engine.AddFunc("title", func() string {
    return "this is title"
})
<head> 
   <title>{{ title() }}</title> 
 </head>

from template.

suntong avatar suntong commented on September 3, 2024

Thanks!

If that's the only solution, then I think my hacky one is better, :)
But still, because it is really hacky, I want to make sure there is no more better options first.

from template.

belliel avatar belliel commented on September 3, 2024

Hey guys
Thanks for answer
I thought it works different than original Django/template
Now all fine

from template.

fuadarradhi avatar fuadarradhi commented on September 3, 2024

@suntong
for single route, changing the layout file is the same as changing the body,
my previous example is for global route, if you not want pass title for every route

<!DOCTYPE html>
<html>

<head>
  <title>{{.Title}}</title>
</head>

<body>
  {{embed}}
</body>

</html>

from template.

suntong avatar suntong commented on September 3, 2024

wow, I should have tried -- I thought it is not possible, and now I'm embarrassed, :).

from template.

edimoldovan avatar edimoldovan commented on September 3, 2024

Is this above still a valid solution? I am passing PageTitle but my render fails with this error

views: Parse error on line 7:
Expecting ID, got: 'Sep{"."}'

or

views: Parse error on line 7:
Expecting ID, got: 'Sep{"."}'

Relevant hbs code

<title>{{.Title}}</title>

and the corresponding route

app.Get("/", func(c *fiber.Ctx) error {
    return c.Render("index", fiber.Map{
        "PageTitle": "blog",
    }, "layouts/main")
})

from template.

suntong avatar suntong commented on September 3, 2024

What's your views file of line 7?

from template.

edimoldovan avatar edimoldovan commented on September 3, 2024

@suntong This is my view

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title>{{ .Title }}</title>
  <meta name="description" content="Writing about releasing. Among other things.">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" href="/public/favicon.png">
  <link rel="stylesheet" href="/public/style.min.css">
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap" rel="stylesheet"> 
</head>
<body>
  <div id="wrapper" class="wrapper">
    {{embed}}
  </div>
</body>
</html>

On line 7 I have

<title>{{ .Title }}</title>

from template.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.