Crear un generador de archivos estáticos usando Flask que procese archivos Markdown con material frontal (a menudo llamado “Graymatter”) implica varios pasos.
Este tipo de generador está diseñado para manejar de manera eficiente la conversión de archivos Markdown a formato HTML y al mismo tiempo extraer y utilizar los metadatos de Graymatter ubicados en la parte superior de cada archivo.
Para crear con éxito este generador, siga la guía paso a paso a continuación:
Paso 1: configurar su entorno Flask
Primero, necesita configurar un entorno Flask. Si aún no lo has hecho, deberías instalar Flask. También necesitas instalar PyYAML para analizar Graymatter y Markdown para convertir Markdown a HTML.
pip install Flask PyYAML Markdown
Paso 2: cree su aplicación Flask
Configure una aplicación Flask básica. Cree un nuevo archivo Python, por ejemplo, app.pyy configure su aplicación Flask.
from flask import Flask, render_template
import os
app = Flask(__name__)
@app.route('/')
def index():
# This function will list all Markdown files
return "Welcome to the static file generator!"
if __name__ == "__main__":
app.run(debug=True)
Paso 3: procesamiento de rebajas y materia gris
Cree funciones para procesar archivos Markdown y extraer Graymatter. Graymatter suele estar en la parte superior de un archivo Markdown, delimitado por ---.
Puede estructurar sus archivos Markdown de esta manera:
---
title: My First Post
date: 2024-01-26
---
This is the content of my first post.
Y así es como puedes procesar estos archivos:
import yaml
from markdown import markdown
def extract_graymatter(file_content):
"""
Extracts the YAML graymatter from the file content.
"""
if file_content.startswith("---"):
parts = file_content.split("---", 2)
graymatter, content = parts[1], parts[2]
metadata = yaml.safe_load(graymatter)
return metadata, content
return {}, file_content
def convert_markdown_to_html(markdown_content):
"""
Converts Markdown content to HTML.
"""
return markdown(markdown_content)
Paso 4: Integrar el procesamiento de Markdown con Flask Routes
Ahora, integre el procesamiento de Markdown en su aplicación Flask. Por ejemplo, es posible que desee presentar cada archivo Markdown como una página independiente.
@app.route('/posts/<filename>')
def post(filename):
filepath = os.path.join('posts', filename)
if os.path.exists(filepath):
with open(filepath, 'r') as file:
file_content = file.read()
metadata, markdown_content = extract_graymatter(file_content)
html_content = convert_markdown_to_html(markdown_content)
return render_template('post.html', content=html_content, metadata=metadata)
return "Post not found", 404
Paso 5: crea una plantilla para representar publicaciones
En su directorio de plantillas de Flask, cree un post.html archivo para representar el contenido HTML.
<!-- templates/post.html -->
<!DOCTYPE html>
<html>
<head>
<title>{{ metadata.title }}</title>
</head>
<body>
<article>
{{ content | safe }}
</article>
</body>
</html>
Agregar una función de búsqueda a su sitio Markdown
Para crear una función de búsqueda en su aplicación Flask que busque en todos los títulos de los archivos Markdown, debe modificar su aplicación para leer e indexar los títulos de los archivos Markdown. También agregará un formulario de búsqueda y una vista para manejar las solicitudes de búsqueda.
Paso 1: Indexación de archivos Markdown
Primero, creemos una función que lea todos los archivos Markdown en un directorio específico (por ejemplo, posts/) y extrae sus títulos de Graymatter:
def index_markdown_files():
markdown_files = {}
posts_directory = 'posts'
for filename in os.listdir(posts_directory):
if filename.endswith('.md'):
filepath = os.path.join(posts_directory, filename)
with open(filepath, 'r') as file:
file_content = file.read()
metadata, _ = extract_graymatter(file_content)
title = metadata.get('title', 'No Title')
markdown_filesCreate a Markdown-based Website with Search Functionality = filename
return markdown_files
Paso 2: crear el formulario de búsqueda
Puede crear un formulario de búsqueda simple en HTML. Puede colocar este formulario en su plantilla base o en cualquier plantilla específica donde desee la función de búsqueda.
<!-- search_form.html -->
<form action="/search" method="get">
<input type="text" name="query" placeholder="Search...">
<button type="submit">Search</button>
</form>
Paso 3: agregar una vista de búsqueda en Flask
Ahora, necesita crear una ruta en su aplicación Flask para manejar consultas de búsqueda:
@app.route('/search')
def search():
query = request.args.get('query', '')
if query:
indexed_files = index_markdown_files()
search_results = {title: filename for title, filename in indexed_files.items() if query.lower() in title.lower()}
return render_template('search_results.html', results=search_results, query=query)
return "No query provided", 400
Paso 4: crear una plantilla de resultados de búsqueda
Cree una nueva plantilla para mostrar los resultados de la búsqueda:
<!-- templates/search_results.html -->
<!DOCTYPE html>
<html>
<head>
<title>Search Results</title>
</head>
<body>
<h1>Search Results for "{{ query }}"</h1>
{% if results %}
<ul>
{% for title, filename in results.items() %}
<li><a href="https://medevel.com/create-a-static-generator-and-markdown-based-website-in-flask/{{ url_for("post', filename=filename) }}">{{ title }}</a></li>
{% endfor %}
</ul>
{% else %}
<p>No results found</p>
{% endif %}
</body>
</html>
Paso 5: Integrar el formulario de búsqueda
Incluye el formulario de búsqueda en tus plantillas donde quieras que aparezca. Puede incluirlo en su plantilla base para que esté disponible en todo el sitio o solo en plantillas específicas.
<!-- Include this line in your base.html or other templates -->
{% include 'search_form.html' %}
Ejecutando su aplicación Flask actualizada
Ejecute su aplicación Flask nuevamente usando:
flask run
Nota final
Esta configuración simple configura una aplicación Flask que sirve con confianza contenido HTML estático generado a partir de archivos Markdown con Graymatter. Tiene la capacidad de mejorar esta configuración incorporando funcionalidades adicionales, como una página de inicio que muestra todas las publicaciones, aplicando CSS para diseñar o incluso integrando una base de datos para una gestión de contenido más avanzada.
