Using AngularJS 1.x, I used to do code like this to include static HTML content on a page:
...
<body>
<!-- Banner -->
<ng-include src="'banner.html'"></ng-include>
<!-- Navigational thumb -->
<div>
<div>
<ng-include src="'navbar.html'"></ng-include>
</div>
...
I would like to know how to do that in React (where I'm a total beginner).
React use another way to render Html as Ang, you should create dump component to render some html and include it where you need.
https://zhenyong.github.io/react/tips/dangerously-set-inner-html.html - also check it.
Related
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.
new to web dev here. I am wondering what is the common practice to have multiple pages with the same components (header, sidebar, footer) but only different in the content. I looked around there are suggestion about using php include and other about html import.
Say I have a basic.html with
<head> fixed stuff </head>
<body>
<div> sidebar here </div>
<!-- Here will be different content other each page -->
<footer> fixed stuff </footer>
<!-- common scripts here -->
</body>
Then I will have another 2 pages, say price.html, blog.html.
How can price.html recycle basic.html but just with different main contents in the body. I don't know how I can use include here. because the content is in the middle.
I would do basic.php and create header.php, footer.php. Then you can do includes on your page templates that would include the header and footer file. Then you can construct your price template...price.php
<html>
<head></head>
<?php include(header.php); ?>
// Price template content
<?php include(footer.php); ?>
</html>
Is that what you are trying to accomplish? This will allow you to add your header and footer content that is universal for your site and make different middle content depending on your page.
I've been using W3Schools' Javascript library to handle HTML includes onto other HTML pages. Everything has been going good, except I'm running into some formatting issues. When the include processes, it puts the HTML into the body tag when I'd prefer it into a different tag. I don't want my body tag formatting to impact the HTML content that's imported. I'm open to any solutions, but I'd prefer something that allows me to specify a specific tag in the HTML document to be imported into.
I've tried putting the Javascript call into the head or outside of the body tag but haven't had any luck.
Here's the code used by W3Schools: https://www.w3schools.com/howto/howto_html_include.asp
<script src="https://www.w3schools.com/lib/w3.js"></script>
<!-- import header -->
<div w3-include-HTML="./includes/header.html"></div>
<!-- import navigation bar -->
<div w3-include-HTML="./includes/navbar.html"></div>
<!-- Script to Handle W3Schools HTML Includes -->
<script>
w3.includeHTML();
</script>
Thanks for the help! I'm hoping there's a good way to do this, otherwise I guess I can format my text outside of the body tag... That's far from ideal though.
Did you try to replace <script> w3.includeHTML(); </script> by <script>includeHTML(); </script> ?
I have a (complex) toolbar panel which can be on top or bottom of a page (it's configurable). Is there any way to avoid copy/paste the toolbar in bottom of the page?
Here is code in copy/paste way:
<div id="topToolbar" data-ng-show="configs.toolbarPosition=='TOP'">
<!-- toolbar -->
</div>
<div>
<!-- inner page contents -->
</div>
<div id="bottomToolbar" data-ng-show="configs.toolbarPosition=='BOTTOM'">
<!-- exactly copy/pasted toolbar -->
</div>
Keep the tool bar html in separate file, and include where ever you need.
<ng-include src="'views/toolbar.html'"></ng-include>
Also if you needed add a controller for all functionality. This will help you to reuse your code.
you can check how components are made
and make component <toolbar></toolbar>
I have recently started writing some server side code for our new bootstrap themed administrative site.
In the markup I can not find where/how/why bootstrap is adding random anchor tags to some of the HTML divisions.
Example from chrome developer tools below... these exist nowhere in the markup.
Is there a way to disable this?
How does it silently create these anchor tags?
What is the reason behind this?
Here is the html , it adds a partial view with Razor to render the body, but before that you can see where the anchor from the image above is not written.
<div class="page-content-wrapper">
<div class="page-content" style="overflow:auto;">
#RenderBody()
</div>
</div>
<!-- END CONTENT -->