When visiting my page localhost.com, the Visitor is directed to the welcome.blade.php
Now my question of the best approach for using a Layout:
#yield content in 'welcome'? (eg. by using this as Main-Template and implementing dynamic Content)
OR
#extends('Layout') #section('Content')
(eg. by including Layout Templates in every Content)?
You'll have to use both of them. Why? because in order to apply changes and to follow laravel conventions you'll be creating a layout.blade.php or app.blade.php in which you'll be using #yield which will be used to `insert all the changes from the pages in the layout.
Whereas the #extend will help you define the pages layout. What extend does is it inserts the required information in the page i.e. ** insert the layout or app.blade.php ** in the page and then insert the required data as you define your #yield() in your pages.
Consider the following code to understand it better:
Defining A Blade Layout (app.blade.php or layout.blade.php)
<!-- Stored in resources/views/layouts/master.blade.php -->
<html>
<head>
<title>App Name - #yield('title')</title>
</head>
<body>
#section('sidebar')
This is the master sidebar.
#show
<div class="container">
#yield('content')
</div>
</body>
</html>
Using A Blade Layout ( or index.blade.php )
#extends('layouts.master')
#section('title', 'Page Title')
#section('sidebar')
<p>This is appended to the master sidebar.</p>
#stop
#section('content')
<p>This is my body content.</p>
#stop
You can read more about the #yield() and #extend() in laravel's documentaiton over here:
assuming you're using Laravel 8.x.x
#yield() is used to insert changes from all our pages into the main template of our project.
#extends() is used to include the main layouts of our project on every page.
For more information please visit the following link:
https://laravel.com/docs/5.0/templates
By the way, your question is not clear.
Related
My main web page (index.html) follows a common structure (simplified):
<html>
<head>
<title>...</title>
<meta name=description content="...">
<link rel=stylesheet href="main.css"/>
[... including #font-face loads ]
</head>
<body>
<div id=menu>...</div>
<div id=mainContent>
...
</div>
<div id=footer>...</div>
<script src="jquery.min.js"></script>
... more scripts
<body>
</html>
The web server is well configured such that all the static files are cached and don't get reloaded on the client side if refreshing the page.
Upon choosing a link from the site, mainly from the 'menu' or the 'footer', I want to display different content within the div tag 'mainContent'. Page layout, CSS, fonts, scripts, menue, footer - all is the same. I have identified several means to achive this:
Construct a new subPage.html file copying everything from index.html, then rewrite the div 'mainContent'
with the desired other stuff and change page specifics like title, description etc.
Or use php to include the desired content in mainContent and to change the page specific values like 'title'.
Link from index.html goes to href="subpage.html".
Drawbacks:
Maintenance: when changing anything in the outside 'wrapper', I'll have to edit
every subPage.
no idea how to easily transport values from index.html
to subPage.html, beside cookie (not always permitted) or URL
parameters.
use a javascript onClick handler (event listener) to load requested content from server using XHttpsRequests and exchange the innerHtml of div mainContent.
Drawbacks:
no noscript version possible.
my changing content is probably not indexed by Google bot and alike, since it is not loaded with index.html. Would it change the situation if the 'alternativ content' was saved in .html files in the base directory, such that it would be browsable and discoverable?
Pre:
keeps javascript variables
no need to reload outer page, thus best user experience.
use a 2nd div 'mainContent2' with style="display: none". With a javascript onClick handler toggle display style of both mainContent divs to none <-> block.
Pre:
easy to implement.
all content loaded and thus SEO indexed.
Drawback:
Everything has to be loaded at once, so the index.html might get pretty big.
[4. iframe probably not an option (as the src attribut is static)]
I tend to opt to alternative #2.
Any other technics recommended? What is the 'best practice'? How is this generally done by the pros? Suggestions? Please elaborate.
I'll give you a few answers based on each option:
PHP
You can use PHP to import the header and footer instead of the main
content, that way you have just one file with a header and another
with a footer and all the pages that you create with different
contents will import the header and footer, avoiding duplications.
JS
Do you need a no-script version? I have never seen someone who disabled js but I don't know your app, it could be a pre-requirement.
You can use a modern js framework like Next + React / Nuxt + Vue / Remix / Svelte / ... There is a lot of options here that can provide you an SSR (Server Side Render) and make Google Bot happy
SPA
This seems to be a SPA. You can use some of the modern js frameworks that I mentioned in the second item. You need to think about lazing load the images too. I don't know how big is this content, but you can try google lighthouse to see if there is some problem with page size in this approach, also, you could enable the gzip on the server.
OR...
All of the above
You can use all of them together too. A frontend with a framework getting data from an API written with PHP, why not? PHP can validate the request type and delivery an HTML if it's the first request or a JSON if the application is already loaded.
Most common solution probably a variant of your option 1. But different then you think. Create a header.php with the content
<html>
<head>
<title>...</title>
<meta name=description content="...">
<link rel=stylesheet href="main.css"/>
[... including #font-face loads ]
</head>
<body>
<div id=menu>...</div>
and create a footer.php with the content:
<div id=footer>...</div>
<script src="jquery.min.js"></script>
... more scripts
<body>
</html>
Then create an index.php like
<?php include('header.php'); ?>
<div id=mainContent>
...content index page...
</div>
<?php include('footer.php'); ?>
And then create subpages like subpage.php
<?php include('header.php'); ?>
<div id=mainContent>
...content subpage...
</div>
<?php include('footer.php'); ?>
This way if anything in the header or footer needs to change you edit the header.php file and the changes will take effect on all pages because the header.php gets included on every page.
So I've just published a website for the first time and I've come up with a problem. It looks like that the _Layout.cshtml page and the views conflicts with each other, because it doesn't load all of the CSS and JS. I get a few errors in the console tab which says:
"
HTML1503: Unexpected start tag,
HTML1512: Unmatched end tag,
HTML1506: Unexpected token.
"
When I go to the source of the page where the error occurs, the layout and the view page are combined together, it gives the error at the seconds head tags. The first first head tag is the one from the Layout page and the second head tags is from the view page. Thus having 2 head tags in 1 page and it conflicts.
Is there something I missed before publishing? Because on localhost it runs fine without these conflicts.
Hope someone can help me, thanks in advance! :)
I recommend you read through this MSDN article on Layout pages using Razor.
It sounds like you're repeating your header information.
From the article,
Many websites have content that's displayed on every page, like a
header and footer, or a box that tells users that they're logged in.
ASP.NET lets you create a separate file with a content block that can
contain text, markup, and code, just like a regular web page. You can
then insert the content block in other pages on the site where you
want the information to appear. That way you don't have to copy and
paste the same content into every page.
In other words, the layout page has all of the markup that you want repeated on every page. This way, you don't have to repeat it manually.
A content page can have multiple sections, which is useful if you want
to use layouts that have multiple areas with replaceable content. In
the content page, you give each section a unique name. (The default
section is left unnamed.) In the layout page, you add a RenderBody
method to specify where the unnamed (default) section should appear.
You then add separate RenderSection methods in order to render named
sections individually.
Since each page is likely to have multiple sections, you can use the RenderSection method to differentiate them in your layout.
Here's an example from the article:
<!DOCTYPE html>
<html>
<head>
<title>Multisection Content</title>
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">
<div>This content will repeat on every view that uses this layout.</div>
#RenderSection("header", required: false)
</div>
<div id="main">
#RenderBody()
</div>
</body>
</html>
As you can see, any header information will be loaded using the RenderSection method. On your view, you would define that section using code similar to this:
#section header {
<div>
This content will only repeat on the page that it is declared in.
</div>
}
So, when you run it, you'll get:
<!DOCTYPE html>
<html>
<head>
<title>Multisection Content</title>
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">
<div>This content will repeat on every view that uses this layout.</div>
<div>
This content will only repeat on the page that it is declared in.
</div>
</div>
<div id="main">
...
</div>
</body>
</html>
The required:false part of #RenderSection("header", required: false) means that you do not have to include the Section "header" in every view that uses the layout. It is optional. If you do not have required set to false, it will be required that you declare it on every page that uses the layout.
On a side note, make sure you only declare your css and javascript that in only one of these locations, preferably the layout page if it is going to be repeated. This does not mean, however, that you cannot have css and javascript in both. For example, if you are using bootstrap in your project, you would include that in your layout page so that you do not repeat the inclusion throughout your views. But, you may, for example, include a view specific javascript file in only your view and not the layout.
I'm trying to build a basic documentation site using asciidoctor. One thing I am struggling with is how I can inject a standard site header (a banner with a logo and top-level navigation) into each documentation page.
I render my asciidoc directly to html from the command line. I have tried to find a way to somehow inject an extra div element and position it fixed at the top, but I can't figure out what mechanism to use for this. My early attempts involved using docinfo.html but that gets injected into the html in the <head> element, instead of the <body>.
I am aware that full-on publication systems like Jekyll allow me to configure "front matter" that can probably take care of this, but I was hoping there was a mechanism or trick using vanilla asciidoctor that can achieve this.
Ted Bergeron on the Mailing List mentioned a simple project:
Demo website created just using Asciidoctor.
Check the corresponding repo to see the files and how to create the site (just using one command).
In summary: simply create a header asciidoc file that includes your site nav (in the demo site this is done using table markup), without including a level-0 (document) title. Include this header file right at the top in every page of your site. Then render by just running asciidoctor *.txt on your project.
--embedded option + simple post processing
With this option, asciidoctor generates only the interior part of the <body> element.
For example:
main.adoc
= Super title
== Second level
asdf
== Also second level
qwer
then:
asciidoctor --embedded main.adoc
produces:
main.html
<div class="sect1">
<h2 id="_second_level">Second level</h2>
<div class="sectionbody">
<div class="paragraph">
<p>asdf</p>
</div>
</div>
</div>
<div class="sect1">
<h2 id="_also_second_level">Also second level</h2>
<div class="sectionbody">
<div class="paragraph">
<p>qwer</p>
</div>
</div>
</div>
You can then just cat a header and closing footer, and you are done.
Tested with Asciidoctor 2.0.10.
I just go through the bootstrap framework, its a grid based css framework but I dont know how implement in IBM Websphere Portal 8.
code
<!DOCTYPE html>
<body class="lotusui30dojo tundra locale_en">
<div class="wpthemeFrame">
<header role="banner">
<div class="wpthemeHeader">
<a rel="dynamic-content" href="dyn-cs:id:customTheme_preview"></a>
<div class="wpthemeInner">
<div class="wpthemeLogo wpthemeLeft">
I suggest you to create a normal static HTML Prototype using Bootstrap. Once you make sue it's working properly (in responsive manner) you can start porting the source code to Portal. There are 3 parts:
First you have to copy paste the html part other than the middle content area (ie. the header part and the footer part) into theme_en.html in your custom folder. Then replace the css and JS links header part with
Then replace blocks of code with appropriate Dynamic Spot contents (JSP files). For instance something like,
<a rel="dynamic-content" href="res:/customTheme/themes/html/dynamicSpots/banner.jsp"></a>
Also, please make sure at the end of page you have this,
<div class="wpthemeComplementaryContent" id="wpthemeComplementaryContent" role="region" aria-labelledby="wpthemeComplementaryContentText">
<span class="wpthemeAltText" id="wpthemeComplementaryContentText" >Complementary Content</span>
<a rel="dynamic-content" href="co:config"></a>
</div>
Now we have to take the layout structure from the middle part of HTML area and use it for creating a Template Layout. Remember, in each template layout we have to keep the div for hidden widgets. Better way is to copy one existing layout.html file from Template Layouts and rename it and modify in that. If you are using Bootstrap, you don't have to use default WP classes. But few must be integrated, like DndRow,DndColumn, Componet-Container etc.
Now for each page specific styling, you can manage in Presentation template.
Hi I am new to web programming. I want to create a template sort of css where all the pages look the same except the content of the pages.
So I have a logo and some tabs at the top where you can navigate the website, but the content of the pages would be different (contact, about, info.etc).
How do I go about creating this template?
You might want to try building your template page in plain HTML + CSS, and then using simple PHP includes to build your pages. You could, for example, break your page into two separate files:
header.php:
<!DOCTYPE html>
<html>
<head><title>Hello World</title></head>
<body>
<div id="main-content">
and footer.php:
</div>
</body>
</html>
And then, for any files that use that template, you'd use something like this:
<?php include("header.php"); ?>
<!--All the content of your page goes here-->
<h1>Hello World!</h1>
<p>Lorem Ipsum</p>
<?php include("footer.php"); ?>
So then if someone visited the previous file (let's say it's called index.php), then the files would be assembled and the final HTML output would look something like:
<!DOCTYPE html>
<html>
<head><title>Hello World</title></head>
<body>
<div id="main-content">
<!--All the content of your page goes here-->
<h1>Hello World!</h1>
<p>Lorem Ipsum</p>
</div>
</body>
</html>
Just make sure you have PHP running on your server, or this won't work at all. Also, if you want to develop your site locally, I'd recommend using XAMPP to get a local Apache host.
You have a look at some of the many template sites - e.g. http://www.freecsstemplates.org/ or http://www.freecsstemplates.com/. Chances are you'll find something close to what you want to achieve.
I suggest starting with a paper sketch. Just draw boxes for the different areas each page will have... like Logo, Header, Content, Footer, etc. There's many ways to approach this initial stage. Here's one explanation of the gray box method.
Once you have a rough idea like this, create 1 sample page. You can fill in the content with lorum ipsum. Get the CSS to how you like it, and make sure that each section of the page (roughly each box in your rough sketch) is in it's own unique div (id = "...").
Once you have all of this set up, you'll have your CSS file ready to go.
To create your template HTML file, just take the HTML page you've been working on and delete all the lorum ipsum.
CSS Zen Garden is a great place to look for CSS inspiration.
If you're a beginner, I could suggest trialing Adobe Dreamweaver and looking at using DreamWeaver (.dwt) Templates. It's really, really easy to use and it allows you to create 1 master (template) file with editable parts.
If you have Visual Studio, MasterPages do a similar job!
Good luck and welcome to the Web Development world!