www.digitalmars.com         C & C++   DMDScript  

digitalmars.D.learn - Is it's possible to make modular pug template in vibed?

reply Suliman <evermind live.ru> writes:
For example I am making simple site with header and footer. 
header and footer will be same for all pages. I do not want to do 
copy-paste it in every page. I want write it's once and than 
simpy import in every page. Is it's possible to do with vibed?
Aug 08 2017
parent reply Suliman <evermind live.ru> writes:
On Tuesday, 8 August 2017 at 11:55:09 UTC, Suliman wrote:
 For example I am making simple site with header and footer. 
 header and footer will be same for all pages. I do not want to 
 do copy-paste it in every page. I want write it's once and than 
 simpy import in every page. Is it's possible to do with vibed?
Oh, I founded answer in docs.
Aug 08 2017
parent reply Suliman <evermind live.ru> writes:
On Tuesday, 8 August 2017 at 11:59:38 UTC, Suliman wrote:
 On Tuesday, 8 August 2017 at 11:55:09 UTC, Suliman wrote:
 For example I am making simple site with header and footer. 
 header and footer will be same for all pages. I do not want to 
 do copy-paste it in every page. I want write it's once and 
 than simpy import in every page. Is it's possible to do with 
 vibed?
Oh, I founded answer in docs.
I can't fund way to `include` header and footer in the same docs. I cam getting error: "Includes cannot have children"
Aug 08 2017
parent reply Steven Schveighoffer <schveiguy yahoo.com> writes:
On 8/8/17 8:38 AM, Suliman wrote:
 On Tuesday, 8 August 2017 at 11:59:38 UTC, Suliman wrote:
 On Tuesday, 8 August 2017 at 11:55:09 UTC, Suliman wrote:
 For example I am making simple site with header and footer. header 
 and footer will be same for all pages. I do not want to do copy-paste 
 it in every page. I want write it's once and than simpy import in 
 every page. Is it's possible to do with vibed?
Oh, I founded answer in docs.
I can't fund way to `include` header and footer in the same docs. I cam getting error: "Includes cannot have children"
This is probably because you have something like: include myfile hr // this is not allowed The way I do it is this (learned from Kai's book): layout.dt: html head ... body ... // header here block content ... // footer here someview.dt: extends layout block content ... // your content -Steve
Aug 08 2017
parent reply Suliman <evermind live.ru> writes:
Yes, thanks what: extends layout mean?
Aug 08 2017
next sibling parent reply Suliman <evermind live.ru> writes:
Still can't get it work.

include header
.MainContainer
.Header
   .HeaderMenu
     .HeaderBlock
       a(href="/") General
     .HeaderBlock
       a(href="/FAQ") FAQ
     .HeaderBlock
       a(href="/book") Book
   .HeaderLoginBlock Sign in
.Middle
   foooo
include footer



it's template is compilable, but it have wrong indent. Original 
page (that I am trying to split) have next indents:

doctype html
html
   head
     title DLANG.ru
   body
     #app
       .MainContainer
         .Header
           .HeaderMenu
             .HeaderBlock
               router-link(to='/') General
             .HeaderBlock
               router-link(to='/FAQ') FAQ
             .HeaderBlock
               router-link(to='/book') Book
           .HeaderLoginBlock Sign in
         .Middle
           foooo
         .footer (c) DLANG 2017

But I can't get right indents when I am splition it.
Aug 08 2017
parent reply Steven Schveighoffer <schveiguy yahoo.com> writes:
On 8/8/17 9:19 AM, Suliman wrote:
 Still can't get it work.
 
 include header
 ..MainContainer
 ..Header
    .HeaderMenu
      .HeaderBlock
        a(href="/") General
      .HeaderBlock
        a(href="/FAQ") FAQ
      .HeaderBlock
        a(href="/book") Book
    .HeaderLoginBlock Sign in
 ..Middle
    foooo
 include footer
OK, you aren't thinking of this correctly then, each pug/diet file must be complete. It's not like C preprocessor where the structure can be played with via includes or macros. That is, .MainContainer cannot be a child under something defined in header. In this case, you need to use the block system.
 it's template is compilable, but it have wrong indent. Original page 
 (that I am trying to split) have next indents:
 
 doctype html
 html
    head
      title DLANG.ru
    body
      #app
        .MainContainer
          .Header
            .HeaderMenu
              .HeaderBlock
                router-link(to='/') General
              .HeaderBlock
                router-link(to='/FAQ') FAQ
              .HeaderBlock
                router-link(to='/book') Book
            .HeaderLoginBlock Sign in
          .Middle
            foooo
          .footer (c) DLANG 2017
 
 But I can't get right indents when I am splition it.
So what you want is probably like: layout.dt: doctype html html head title DLANG.ru body #app .MainContainer block contents .footer (c) DLANG 2017 myfile.dt: extends layout block contents .Header .HeaderMenu .HeaderBlock router-link(to='/') General .HeaderBlock router-link(to='/FAQ') FAQ .HeaderBlock router-link(to='/book') Book .HeaderLoginBlock Sign in .Middle foooo -Steve
Aug 08 2017
parent reply Suliman <evermind live.ru> writes:
Am I right understand that I can extend only one template?
Aug 08 2017
parent reply Suliman <evermind live.ru> writes:
your examples generate me:


<!DOCTYPE html>
<html>
	<head>
		<title>DLANG.ru</title>
	</head>
	<body>
		<div id="app">
			<div class="MainContainer">
				<div class="footer">(c) DLANG 2017</div>
			</div>
		</div>
	</body>
</html>

The only one modification that I did I changes pages names:
extends home

because my main page is home.dt
Aug 08 2017
parent reply Steven Schveighoffer <schveiguy yahoo.com> writes:
On 8/8/17 10:52 AM, Suliman wrote:
 your examples generate me:
 
 
 <!DOCTYPE html>
 <html>
      <head>
          <title>DLANG.ru</title>
      </head>
      <body>
          <div id="app">
              <div class="MainContainer">
                  <div class="footer">(c) DLANG 2017</div>
              </div>
          </div>
      </body>
 </html>
That's the template without the block.
 The only one modification that I did I changes pages names:
 extends home
 
 because my main page is home.dt
You have it backwards. You don't render the layout template, but the template that extends the layout. -Steve
Aug 08 2017
parent reply Suliman <evermind live.ru> writes:
On Tuesday, 8 August 2017 at 15:54:29 UTC, Steven Schveighoffer 
wrote:
 On 8/8/17 10:52 AM, Suliman wrote:
 your examples generate me:
 
 
 <!DOCTYPE html>
 <html>
      <head>
          <title>DLANG.ru</title>
      </head>
      <body>
          <div id="app">
              <div class="MainContainer">
                  <div class="footer">(c) DLANG 2017</div>
              </div>
          </div>
      </body>
 </html>
That's the template without the block.
 The only one modification that I did I changes pages names:
 extends home
 
 because my main page is home.dt
You have it backwards. You don't render the layout template, but the template that extends the layout. -Steve
Big thanks! Now I understand. Now i redone dlang.ru in diet templates. Am I right understand that include is needed only for small includes without any nesting levels?
Aug 09 2017
parent Steven Schveighoffer <schveiguy yahoo.com> writes:
On 8/9/17 5:30 AM, Suliman wrote:

 
 Big thanks! Now I understand. Now i redone dlang.ru in diet templates.
Great!
 
 Am I right understand that include is needed only for small includes 
 without any nesting levels?
No, includes can be as big as you want, with as many nested levels as you want. You just can't alter the structure of the including template. I think what you are getting hung up on is that the indentation of the include has nothing to do with the indentation of the template that's including it. It's not like the text is copy-pasted and then evaluated in that context. So if you have: someelement include x the resulting html file is going to be: <someelement> <!-- all the contents of x> </someelement> x cannot insert data *outside* that element, no matter how you indent it. You would use includes when you have repeated html that you need in many places. For instance, if you have many places that you display the contents of a database row somehow, you can save that snippet in a template, and then just include it whenever you need the same thing. You would use blocks when you have a framework that you want to be the same, but need to vary the inner html. So essentially the boilerplate that goes around every page on your html (the css, javascript imports, etc.). It's so you don't have to repeat the structure in every file. I will say, there are some annoying limitations to the diet format. Sometimes you *want* to vary the structure based on variables, and it's hard to do. For example, I have a place where I output essentially a calendar as a table. Each row is a different day, each column is an item on that day. The input is a single sorted (by date) array of items. But there's no "good" way to say "ooh, this is a new day, close this table row and open a new one" and still keep the nice structure of the diet templates. Yes, I can output the html manually, but it's ugly. What I ended up doing is just splitting the array into another array of days, each element an array of items for that day. -Steve
Aug 09 2017
prev sibling parent reply Steven Schveighoffer <schveiguy yahoo.com> writes:
On 8/8/17 9:10 AM, Suliman wrote:
 Yes, thanks what: extends layout mean?
It means that your final file will be layout.dt, but with the block statements replaced with the contents defined by the specific view file. Think of it like an interface, where the "blocks" are function prototypes, and your specific view file is a class that implements the interface, where you implement the functions by defining the blocks. -Steve
Aug 08 2017
parent Suliman <evermind live.ru> writes:
On Tuesday, 8 August 2017 at 13:22:58 UTC, Steven Schveighoffer 
wrote:
 On 8/8/17 9:10 AM, Suliman wrote:
 Yes, thanks what: extends layout mean?
It means that your final file will be layout.dt, but with the block statements replaced with the contents defined by the specific view file. Think of it like an interface, where the "blocks" are function prototypes, and your specific view file is a class that implements the interface, where you implement the functions by defining the blocks. -Steve
Could you show how to improve my code above? I can't get it work...
Aug 08 2017