added markdown

Author: 仿生猫梦见苦力怕

app/forms.py

@@ -1,8 +1,14 @@
 from flask_wtf import FlaskForm
-from wtforms import TextAreaField, SubmitField
+from wtforms import StringField, TextAreaField, SubmitField
 from wtforms.validators import DataRequired
 
 
+class PostForm(FlaskForm):
+    title = StringField('标题', validators=[DataRequired()])
+    content = TextAreaField('内容', validators=[DataRequired()])
+    submit = SubmitField('发布')
+
+
 class CommentForm(FlaskForm):
     content = TextAreaField('评论内容', validators=[DataRequired()])
     submit = SubmitField('提交评论')

app/models.py

@@ -32,21 +32,22 @@ def get_id(self):
 class Post(SQLModel, table=True):
     id: Optional[int] = Field(default=None, primary_key=True)
     title: str
-    content: str
+    content: str  # 原始 Markdown 内容
+    html_content: str  # 解析后的 HTML 内容
     author_id: int = Field(foreign_key="user.id")
-    created_at: datetime = Field(default_factory=datetime.utcnow)  # 文章创建时间
+    created_at: datetime = Field(default_factory=datetime.utcnow)
 
     author: User = Relationship(back_populates="posts")
-    comments: List["Comment"] = Relationship(back_populates="post")  # 博文的评论
+    comments: List["Comment"] = Relationship(back_populates="post")
 
 
 class Comment(SQLModel, table=True):
     id: Optional[int] = Field(default=None, primary_key=True)
-    content: str  # 评论内容
-    created_at: datetime = Field(default_factory=datetime.utcnow)  # 评论时间
-    author_id: int = Field(foreign_key="user.id")  # 评论作者
-    post_id: int = Field(foreign_key="post.id")  # 所属博文
-
-    # 关系
-    author: "User" = Relationship(back_populates="comments")
-    post: "Post" = Relationship(back_populates="comments")
+    content: str  # 原始 Markdown 内容
+    html_content: str  # 解析后的 HTML 内容
+    created_at: datetime = Field(default_factory=datetime.utcnow)
+    author_id: int = Field(foreign_key="user.id")
+    post_id: int = Field(foreign_key="post.id")
+
+    author: User = Relationship(back_populates="comments")
+    post: Post = Relationship(back_populates="comments")

app/routes.py

@@ -1,3 +1,4 @@
+import markdown
 from flask import Blueprint, render_template, request, url_for, flash
 from flask_login import login_required, current_user
 from sqlmodel import Session, select, desc
@@ -6,7 +7,7 @@
 
 from app import engine
 from app.models import Post, User, Comment
-from app.forms import CommentForm, EditCommentForm
+from app.forms import CommentForm, EditCommentForm, PostForm
 
 # 创建蓝图
 main = Blueprint('main', __name__)
@@ -44,22 +45,21 @@ def dashboard():
 @main.route('/create_post', methods=['GET', 'POST'])
 @login_required
 def create_post():
-    if request.method == 'POST':
-        title = request.form.get('title')
-        content = request.form.get('content')
-
-        if not title or not content:
-            flash('你必须填写标题和内容字段!')
-        else:
-            new_post = Post(title=title, content=content, author_id=current_user.id)
-            with Session(engine) as session:
-                session.add(new_post)
-                session.commit()
-                print(f"New post created: {new_post}")  # 调试信息
-                flash('你成功创建了一篇新的博文!')
+    form = PostForm()
+    if form.validate_on_submit():
+        html_content = markdown.markdown(form.content.data)  # 解析 Markdown
+        new_post = Post(
+            title=form.title.data,
+            content=form.content.data,
+            html_content=html_content,
+            author_id=current_user.id
+        )
+        with Session(engine) as session:
+            session.add(new_post)
+            session.commit()
+            flash('博文已发布！', 'success')
             return redirect(url_for('main.dashboard'))
-
-    return render_template('create_post.html')
+    return render_template('create_post.html', form=form)
 
 
 @main.route('/post/<int:post_id>')
@@ -78,12 +78,14 @@ def view_post(post_id):
 def add_comment(post_id):
     form = CommentForm()
     if form.validate_on_submit():
+        html_content = markdown.markdown(form.content.data)  # 解析 Markdown
+        new_comment = Comment(
+            content=form.content.data,
+            html_content=html_content,
+            author_id=current_user.id,
+            post_id=post_id
+        )
         with Session(engine) as session:
-            new_comment = Comment(
-                content=form.content.data,
-                author_id=current_user.id,
-                post_id=post_id
-            )
             session.add(new_comment)
             session.commit()
             flash('评论已发布！', 'success')
@@ -111,11 +113,12 @@ def edit_post(post_id):
             else:
                 post.title = title
                 post.content = content
+                post.html_content = markdown.markdown(content)
                 session.commit()
                 flash('你的博文已被更新!')
                 return redirect(url_for('main.view_post', post_id=post.id))
 
-        return render_template('edit_post.html', post=post)
+        return render_template('edit_post.html', post=post, form=CommentForm())
 
 
 @main.route('/delete_post/<int:post_id>', methods=['POST'])
@@ -151,6 +154,7 @@ def edit_comment(comment_id):
         form = EditCommentForm()
         if form.validate_on_submit():
             comment.content = form.content.data
+            comment.html_content = markdown.markdown(form.content.data)  # 解析 Markdown
             session.commit()
             flash('评论已更新！', 'success')
             return redirect(url_for('main.view_post', post_id=comment.post_id))

app/templates/create_post.html

@@ -2,9 +2,16 @@
 
 {% block title %}发布新博文 - 六(5)班 班级博客{% endblock %}
 
+{% block head %}
+    {{ super() }}
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.css">
+    <script src="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.js"></script>
+{% endblock %}
+
 {% block content %}
     <h1>发布新博文</h1>
     <form method="POST" action="{{ url_for('main.create_post') }}" class="post-form">
+        {{ form.hidden_tag() }}
         <div class="form-group">
             <label for="title">标题：</label>
             <input type="text" id="title" name="title" class="form-input" required>
@@ -15,5 +22,22 @@ <h1>发布新博文</h1>
         </div>
         <button type="submit" class="form-button">发布</button>
     </form>
-    <button onclick="window.location.href='{{ url_for('main.dashboard') }}';" class="form-button back-button">返回仪表盘</button>
+    <button onclick="window.location.href='{{ url_for('main.dashboard') }}'" class="form-button back-button">返回仪表盘</button>
+
+    <script>
+        // 初始化 SimpleMDE 编辑器
+        const simplemde = new SimpleMDE({
+            element: document.getElementById("content"),
+            spellChecker: false,
+            autosave: {
+                enabled: true,
+                uniqueId: "post-content",
+            },
+        });
+
+        document.querySelector('.post-form').addEventListener('submit', function (e) {
+            const contentTextarea = document.getElementById('content');
+            contentTextarea.value = simplemde.value();  // 将 Markdown 编辑器的内容同步到 textarea
+        });
+    </script>
 {% endblock %}

app/templates/edit_post.html

@@ -2,9 +2,16 @@
 
 {% block title %}编辑博文 - 六(5)班 班级博客{% endblock %}
 
+{% block head %}
+    {{ super() }}
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.css">
+    <script src="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.js"></script>
+{% endblock %}
+
 {% block content %}
     <h1>编辑博文</h1>
     <form method="POST" action="{{ url_for('main.edit_post', post_id=post.id) }}" class="post-form">
+        {{ form.hidden_tag() }}
         <div class="form-group">
             <label for="title">标题：</label>
             <input type="text" id="title" name="title" class="form-input" value="{{ post.title }}" required>
@@ -16,4 +23,21 @@ <h1>编辑博文</h1>
         <button type="submit" class="form-button">更新</button>
     </form>
     <button onclick="window.location.href='{{ url_for('main.view_post', post_id=post.id) }}';" class="form-button back-button">取消</button>
+    <script>
+        // 初始化 SimpleMDE 编辑器
+        const simplemde = new SimpleMDE({
+            element: document.getElementById("content"),
+            spellChecker: false,
+            autosave: {
+                enabled: true,
+                uniqueId: "post-content",
+            },
+        });
+
+        // 确保表单提交时，Markdown 内容被正确传递
+        document.querySelector('.post-form').addEventListener('submit', function (e) {
+            const contentTextarea = document.getElementById('content');
+            contentTextarea.value = simplemde.value();  // 将 Markdown 编辑器的内容同步到 textarea
+        });
+    </script>
 {% endblock %}

app/templates/view_post.html

@@ -10,7 +10,7 @@ <h1 class="post-title">{{ post.title }}</h1>
             <span class="post-date">发布时间：{{ post.created_at }}</span>
         </div>
         <div class="post-content">
-            {{ post.content }}
+            {{ post.html_content | safe }}
         </div>
         {% if current_user == post.author %}
             <div class="post-actions">
@@ -47,7 +47,7 @@ <h3>评论</h3>
                         <span class="comment-date">{{ comment.created_at }}</span>
                     </div>
                     <div class="comment-content">
-                        {{ comment.content }}
+                        {{ comment.html_content | safe }}
                     </div>
                     {% if current_user == comment.author %}
                         <div class="comment-actions">

requirements.txt

@@ -4,4 +4,5 @@ Flask-Login==0.5.0
 Flask-WTF==0.15.1
 Werkzeug~=2.0.3
 SQLAlchemy~=2.0.38
-WTForms~=3.0.1
+WTForms~=3.0.1
+markdown~=3.4.4