cms/                   # module root
├── static/            # Arquivos estáticos (.css, .js, .images)
├── templates/         # Templates Jinja2
└── settings.yml       # Configurações que serão carregadas

Vamos agora colocar um arquivo estático em nossa pasta static e ver como é fácil acessar através dos templates.

primeiro crie a pasta cms/static/css

mkdir -p cms/static/css

Vamos utilizar o https://bootswatch.com/ que contém uma série de temas para Bootstrap, salvaremos 2 deles na pasta static.

Clique bom o botão direito e salvar link como.. para as pastas indicadas e com os nomes indicados

https://bootswatch.com/cerulean/bootstrap.min.css - > static/css/swatch-cerulean.css

https://bootswatch.com/united/bootstrap.min.css - > static/css/swatch-united.css

Se preferir faça via linha de comando se tiver o wget disponivel, estando na pasta raiz do projeto (onde vc clonou o repositorio)

wget https://bootswatch.com/cerulean/bootstrap.min.css -O cms/static/css/swatch-cerulean.css
wget https://bootswatch.com/united/bootstrap.min.css -O cms/static/css/swatch-united.css

DICA: pode repetir o processo acima para os outros temas disponiveis no bootswatch

Digamos que agora queiramos carregar o tema cerulean em nosso template cms/templates/base.html basta editar incluindo o bloco styles suportado pelo Flask-Bootstrap e não se esquecer de chamar o super()

coloque no final do arquivo cms/templates/blog.html

{% block styles %}
{{super()}}
<link rel="stylesheet" href="{{url_for('static', filename='css/swatch-cerulean.css')}}">
{% endblock %}

a função global url_for cria url para acessar os arquivos estáticos basta passar static como primeiro argumento e filename contendo o caminho do arquivo que deseja acessar.

bem simples! agora basta reiniciar cms runserver e acessar http://localhost:5000 e ver o novo visual aplicado ao blog.

Alterando para:

{% block styles %}
{{super()}}
<link rel="stylesheet" href="{{url_for('static', filename='css/swatch-united.css')}}">
{% endblock %}

Vamos agora deixar isso dinâmico.

No cms/settings.yml

CMS:
  ...
  SWATCH: cerulean
  ...

e agora basta ler a config direto no template cms/templates/base.html

{% block styles %}
{{super()}}
<link rel="stylesheet"
      href="{{url_for('static', filename='css/swatch-{0}.css'.format(config.SWATCH))}}">
{% endblock %}

NOTA: lembre-se de reiniciar com ctrl+C e depois cms runserver para ver as midanças pois o reloader não monitora arquivos estáticos.

O acesso a qualquer outro tipo de arquivo estático é feito da mesma maneira url_for('static', filename='') caso o seu blueprint tenha uma pasta especifica para arquivos estaticos basta usar . ou o nome do Blueprint ex: url_for('blog.static', filename='') ou url_for('.static', filename='') (dentro de um template renderizado pelo blueprint)

Experimente com os outros temas do http://bootswatch.com

wget https://bootswatch.com/darkly/bootstrap.min.css -O cms/static/css/swatch-darkly.css

e no cms/settings.yml

  SWATCH: darkly

<<-- anterior - próximo -->>