Python FLASK+GENTELELLA+JINJA2 quickly complete the enterprise internal system platform rapid layout;

Source: Internet
Author: User

1. Recent company operational needs, learning Python flask to meet the development of environmental governance system native front endBootstrap also can meet the demand, but need front-end work basic skills (HTML,CSS,JS), and so on, tossing for 2 weeks found is too troublesome;

And the layout style is very low very difficult to see various buttons and style effects to achieve special trouble (Haha, forgive me beginners spit trough,Bootstrap community developers Don't spray me, thank you )


2.githup unexpectedly found a gentelella this set of background templates; (Very powerful and applicable and aesthetically pleasing, needless to say immediately;)


Source get Address: Https://github.com/puikinsh/gentelella  


3. Prepare the flask and Python environment, please--http://blog.51cto.com/breaklinux/2135271



4. Use JINJA2 layout the quickest way; make base.html;

The project structure is as follows;


5.base template content structure is as follows; (

1. Production Ideas:

Copy the HTML code of the index home page, the head section of the home page, the CSS style sheet, the JS file,

<sidebar menu> <menu footer buttons> <!--top Navigation--<page content> <top Tiles-- <footer content> and other parts of the code

Store separately in separate HTML, the project page inherits the base base template Rewrite page Content section (this part of the actual page contents)



1. The basic template is as follows;

 {% block head %}        {% include  ' Base/_head.html '  %}     {% endblock %}    {%  block css %}    {% include  ' base/css.html '  %}     {% endblock css %}: x {% block content %}             {% endblock content %} {% block  sidebar %}                 {% include  ' base/sidebar.html '  %}                 {% endblock sidebar %}                 {% block footer %}                 {% include  ' base/footer.html '  %}                 {%  endblock footer %}                 {% block sidebarfooter %}                 {% include  ' base/sidebar.footer.html '  %}                 {% endblock  sidebarfooter %}             {%  block navigation %}            {%  include  ' base/navigation.html '  %}             {% endblock Navigation %}             {% block  content %}            {% endblock  content %}            {% block  js %}            {% include  ' Base/js.html '  %}            {% endblock  js %}



2. This part is the actual part of the Web content;

{% block content%} {% Endblock content%}



3. Add a static page of the project, (include part is the actual content of the project;)

{% extends ' base/base.html '%} {% block content%} {% include ' index_content.html '%} {% Endblock content%}



4. Configure Flask routing;


Systimeflask flaskrequestrender_templateresponseflask_cors Corsapp = Flask (__name__) Models Userapp = Flask (=__name__= = =) CORS (app=) (SYS) sys.setdefaultencoding () () () (): Index_page = {:} render_template (=index_page)


5. Access Routing/query actual effect:




6. Specific project content can be filled according to the needs;




Python FLASK+GENTELELLA+JINJA2 quickly complete the enterprise internal system platform rapid layout;

Related Article

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.