JavaScript-I want to use a common head bottom for each page in a Web site, how to implement it, not too advanced

Source: Internet
Author: User
I want to use the common head bottom of each page in a website, how to achieve, not too advanced.

Reply content:

I want to use the common head bottom of each page in a website, how to achieve, not too advanced.

For reference only:

    • Use JS to dynamically request a unified kinsoku, and then insert the specified location

    • Back-end scenarios, #include('header.vm') batch modify templates, but pay attention to compatibility issues

    • Server side, if you are using Nginx, open the sub_filter module

subs_filter '' '公共头JS代码' i;

We recommend using the first method, there is a common JS reference bar!

You can use templates Ah, front-end templates I know Jade. You can define the public part as Mixin, and then include it in each of the required pages, as described here

At the back end of the PHP, you can also define a variable, save the required HTML as a string in the variable, and echo it to each page.
Of course, this requires you to first define a parent class, all requests first through the parent class, the parent class handles some common logic, such as adding header/footer, and subclasses dealing with more specific logic.

A certain amount of refactoring is needed anyway.

Mainly look at what frame you use, most frameworks have templates that can be used to propose common components and use them for reuse.

header
Content
footer

Page 1.html

include 'header';页面1内容include 'footer';

Page 2.html

include 'header';页面2内容include 'footer';

Create a header.php and a footer.php, and write the header and footer content you want.

And then on the page to introduce headers and footer


Other content

PHP Implementation:

include 'header.html';...include 'footer.html';

JS implementation:

...

Yes, after defining the common header file and the tail file, it is OK to include it in the main file, as for the variables, the processing is the same
Http://document.thinkphp.cn/manual_3_2.html#template_layout

  • Contact Us

    The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

    If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

    A Free Trial That Lets You Build Big!

    Start building with 50+ products and up to 12 months usage for Elastic Compute Service

    • Sales Support

      1 on 1 presale consultation

    • After-Sales Support

      24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.