Why do you need Blended-flask?

Blended-flask is a web framework, it’s a Python module that lets you develop web applications easily. Flask is very Pythonic. It’s easy to get started with Flask, because it doesn’t have a huge learning curve. On top of that it’s very explicit, which increases readability.

Simply, you can install the blended-flask, specify the path of your theme, run the server and can browse your website which is running on a Blended theme.

Download Blended CLI and set up the Blended directory

Install blended-flask by following command:

Hello World Flask Application

The Hello World example mentioned below is written in flask and we would incorporate Blended functionality with this application.

Create a file named app.py inside the root path of the virtual environment and then write the below line of code there and save the changes.

Run the Flask Server

See The Output

Just loading the below URL in a browser:

Using Blended

Now we will proceed with Blended to make a change in the hello world application.

Import blended Flask

You can use Blended by just importing the blended_flask.app library by following:

Specify the theme root directory by following:

Where,
PACKAGE_DIR = Blended package directory path.

Create a new Blended account:

Please sign up from here.

Note: New account is not required. It’s optional, whereas, having a Blended account lets you share your website designs between the different site installation you may have and it will allow you to get more access to use the rest of the Blended feature without any hassle. Your information will never be shared and it will be kept confidential.

Now login to get the Blended theme:

Where,
user_name = user or account name and theme_name = Blended theme name, will reside in the blended root directory which you have specified during CLI setup.

Enter the absolute path of your theme which you want to activate as a blended theme inside the app.py file.

It will give you the theme in context form.

If the theme is not available at that path, then it will throw an error Unable to find the theme.

Note: Password is optional here..

Static Content

Anything in /static will be served statically. Great for serving css, js, and etc..
Flask automatically creates a /static/ route that will serve any filename under the static folder next to the Python module that defines your Flask app.

If you want to add another endpoint besides the /static/ route for serving static files, you may follow the below sections for adding the same.

Add CSS Endpoint

By default, the /static directory will serve the static contents. If you want to provide the path of CSS then you can change this by following API:

Ex:

You can add your extra.css at the path you have provided.

If you haven't changed the path then add extra.css at /static path.

See Host Template for how to use css

Add js Endpoint

By default, the /static directory will serve the static contents. If you want to provide the path of js then you can change this by following API:

Ex:

You can add your extra.js at the path you have provided.

If you haven't changed the path then add extra.js at /static/js path.

See Host Template for how to use js

Add Media Endpoint

By default application will host the media at /static directory in the root but you can change this by following API:

Adding Routes

It’s registering the root URL for your application.

This route is rendering a home.html template file by accepting the Blended theme context object. The home.html is a Blended host template and you can add many more as per your requirements. You can add more routes by following the above examples.

All the Snippet Together

Keeping all together in the app.py file

Host Template

It provides dynamic data to the base template by extending it. It will be residing inside the templates directory in the root path of the application.

We are giving you an example of a host template that is home.html as a rendering template for the root URL.

See Host Template.

How to Include the theme into your express application?

Extending a predefined Blended template should allow you to add a new page in your flask application.

This host template is extending the theme base template named as wide.html. Base templates are part of Blended theme which resides in the html directory.

Add a template

You need to add the template file inside the templates directory.

Add the Content Blocks

You can add a content block into the host template as per following.

We have predefined content blocks. Please See.

Run The App

Run the app with the following command to start the server:

See The Output

Just loading the below URL in a browser: