树形的展示

app.py

@@ -185,13 +185,26 @@ def story(story_id):
     story = Story.query.get_or_404(story_id)
     is_tree = story.is_tree
 
-    paragraph_part = Paragraph.query.filter_by(
-        story_id=story_id, is_chosen=True, is_hidden=False
-    ).all()
+    if is_tree:
+        tail = request.args.get('tail', story.tail, type=int)
+        p_tail = Paragraph.query.get_or_404(tail)
+        if p_tail.story_id != story_id:
+            abort(404)
+        paragraph_part = [p_tail]
+        p = p_tail
+        while p.parent_id:
+            p = Paragraph.query.get_or_404(p.parent_id)
+            paragraph_part.insert(0, p)
+        
+    else:
+        tail = story.tail
+        paragraph_part = Paragraph.query.filter_by(
+            story_id=story_id, is_chosen=True, is_hidden=False
+        ).all()
 
     sort_by = request.args.get('sort_by', 'time')
 
-    q = Paragraph.query.filter_by(parent_id=story.tail, is_hidden=False)
+    q = Paragraph.query.filter_by(story_id=story_id, parent_id=tail, is_hidden=False)
     q = q.order_by(Paragraph.like_num.desc() if sort_by == 'like' else
                    Paragraph.id.desc())
     pagination = q.paginate(max_per_page=100)
@@ -217,9 +230,14 @@ def create():
     if not text or len(text) > 140:
         abort(422)
     story = Story.query.get_or_404(story_id)
+    
+    if story.is_tree:
+        parent_id = request.form.get('tail', type=int)
+    else:
+        parent_id = story.tail
 
     p = Paragraph(
-        parent_id=story.tail,
+        parent_id=parent_id,
         story_id=story_id,
         text=text,
         author=session['username']

templates/story.html

@@ -38,18 +38,22 @@
     <div class="part1 col-md-6">
       <div class="story-box qbox part-box">
         <h1>{{story.title}}</h1>
-        <p class="story-text" title="{{paragraph_part[0].author}}, {{paragraph_part[0].create_at}}, {{paragraph_part[0].like_num}}">{{paragraph_part[0].text}}</p>
         <img src="{{story.avatar}}" style="width: 80%">
         <hr>
-        {% for p in paragraph_part[1:] %}
-          <p class="story-text" title="{{p.author}}, {{p.create_at}}, {{p.like_num}}">{{p.text}}</p>
+        {% for p in paragraph_part %}
+          <p class="story-text" title="{{p.author}}, {{p.create_at}}, {{p.like_num}}">
+          {{p.text}}
+          {% if is_tree and p.id != tail %}
+            <small><a href="?tail={{p.id}}"> ←  回到这里</a></small>
+          {% endif %}
+          </p>
         {% endfor %}
       </div>
 
       <div style="font-size:90%;">
         <ul>
           <li>点击“续！”进行创作。</li>
-          {% if story.is_tree %}
+          {% if is_tree %}
             <li>从第二天开始，在每天的10:00/16:00/22:00，对应故事线赞数总和最高且自身赞数不小于{{min_like_num}}的续写将入选，成为这个角色默认展示故事的一部分。</li>
           {% else %}
             <li>在每天的10:00/16:00/22:00，赞数最高且不小于{{min_like_num}}的续写将入选，成为这个角色最终故事的一部分。如果没有，所有都会被保留进入下一时段。</li>
@@ -61,7 +65,7 @@
     </div>
 
     <div class="part2" id="part2">
-        <div class="paragraph-list twin front part-box">
+      <div class="paragraph-list twin front part-box">
         <h1 style="margin: -8px -5px 20px">备选后续</h1>
         <span style="margin:8px" class="sort-by">
           {% if sort_by == 'like' %}
@@ -74,6 +78,9 @@
         {% for p in pagination.items %}
           <div class="qbox">
             <small>No. {{p.id}}</small>
+            {% if is_tree %}
+              <small><a href="?tail={{p.id}}"> ←  查看后续</a></small>
+            {% endif %}
             <p class="story-text">{{p.text}}</p>
             <div class="text-end" title="{{p.create_at}}">
               {% for emoji, num, reacted, kind in p.reaction_status() %}
@@ -109,6 +116,7 @@
         <h1 style="text-align:right;margin:-8px -8px 16px">续！</h1>
         <form action="create" method="post">
           <input type="hidden" name="story-id" value={{story_id}}>
+          <input type="hidden" name="tail" value={{tail}}>
           <div class="form-group">
             <textarea class="form-control" name="text" rows="11" placeholder="来续写{{story.title}}的故事吧！(不超过 140 字)" required maxLength="140"></textarea>
           </div>