How to apply styles to generated html pages in flask

Question

I have a book search page. When user search a book, a list of relevant books are shown in the page. All rows has a hyperlink, when user clicks it goes to detail page. I generate detail pages as an extension of search using isbns such as /search/1236BCD2. So for each book, this page address is different. Here is the problem, the styles.css which I used for all pages cant applied to these pages. I think this is because of Flask structure. It seems when it try to open the page it seeks for /search/static/styles/styles.css instead of /search/1236BCD2/static/styles/styles.css. What should I do to fix it?

Answer 1

Use template inheritance

Template inheritance allows you to build a base “skeleton” template that contains all the common elements of your site and defines blocks that child templates can override.

then if you have books in the database, create details view.

@app.route('/details/<bookid>')
def details(id):
    # search for a book with that id in the database

Answer 2

Your question is unfortunately somewhat vague, so my answer will also be somewhat vague.

1. Is this a problem with how your Flask application is set up to serve static files? Does your directory structure match the Flask app configuration so that Flask can find the static files you want? Normally, Flask expects a folder called "static" to exist in the root directory of the application. The root directory of the application is the directory where the file that contains your Flask app is instantiated. For example, you might have a file called "app.py" that contains a line app = Flask(__name__). In that case, the directory where "app.py" exists would be the root directory of your application by default. By default, Flask would expect a folder called "static" to exist in the same directory as that file. However, the name of the static folder can be changed to whatever you want. You could change the static folder to be called "search" instead of "static" by doing something like app = Flask(__name__, static_folder="search"). See here for app configuration parameters. Thus, Flask should be looking for your static files in either /static/styles/styles.css or /search/styles/styles.css depending on your app configuration. If you expect Flask to find "styles.css" in a directory like /static/1236BCD2/styles/styles.css or /search/1236BCD2/styles/styles.css, then either you don't understand that your directory structure must match the way your Flask app is configured, or you are generating a different directory and different styles.css for every single book (which I hope you are not doing).
2. I'm assuming that you are not dynamically generating a folder and a CSS file for every single book. Assuming that you have now ensured that your Flask app is configured to match your project directory structure, you can use the url_for() function to ensure that Flask can link your static assets to your HTML page. You can either link your assets like <link rel="stylesheet" href='/static/styles/styles.css'> if you want to hard-code the value (I don't recommend), or you could use url_for() like <link rel="stylesheet" href='url_for("static", filename="styles/styles.css)'>. The "filename" parameter value is always relative to the static directory.
3. My intuition is that you have the default Flask app configuration for static files, but you don't understand how to use the Jinja2 template engine to link those static assets in your HTML pages. See here for general information on serving static files in Flask. If I'm wrong and you have some sort of complex CSS generation and usage and you need your application to be configured to handle that, you need to look at Flask Blueprints. A Flask Blueprint will allow you to set a different static directory for each Blueprint, and then you can create as many Blueprints as you need to handle varieties of books.