Logo

新人日誌

首頁關於我部落格

新人日誌

Logo

網站會不定期發佈技術筆記、職場心得相關的內容,歡迎關注本站!

網站
首頁關於我部落格
部落格
分類系列文

© 新人日誌. All rights reserved. 2020-present.

在 Django 中實現留言換行與顯示時間功能

最後更新:2024年11月26日Python

本文為 Django 高階教學,第 6 篇:

  1. 使用 Poetry 管理 Django 專案:完整指南
  2. 使用 ModelForm 優化 Django 表單與資料庫操作
  3. Django 留言功能實作指南:從模型設計到應用完成
  4. Django 留言功能新增與視圖互動詳解
  5. 在 Django 中實現留言檢索與排序功能:完整指南
  6. 在 Django 中實現留言換行與顯示時間功能 👈 所在位置
  7. 在 Django 中實現留言刪除功能:完整指南
  8. 在 Django 中實現軟刪除功能:完整指南
  9. 在 Django 中實現軟刪除功能:Fat Model, Thin View

建議閱讀本文前,先閱讀完 Django 進階教學 系列文

本指南將介紹如何在 Django 中實現留言換行功能,並將留言的建立時間顯示在前端頁面上。

同時,我們將討論如何設定 Django 的時區,確保時間顯示符合當地時區。


問題背景

  • 預設情況下,Django 在模板中渲染的文字會忽略換行符號,導致多行留言在前端顯示為單行。
  • 留言的時間顯示默認為系統時區,可能與本地時間不一致。

實現留言換行

Django 提供了模板標籤 linebreaksbr,用於將文本中的換行符(\n)轉換為 HTML 的 <br /> 標籤,使換行顯示在前端。

修改模板

將模板中的留言顯示代碼,從以下原始代碼:

<ul>
    {% for comment in comments %}
    <li>{{ comment.content }}</li>
    {% endfor %}
</ul>

修改為使用 linebreaksbr 過濾器:

<ul>
    {% for comment in comments %}
    <li>{{ comment.content|linebreaksbr }}</li>
    {% endfor %}
</ul>

效果

  • 原始留言內容:
第一行
第二行
  • 使用 linebreaksbr 渲染後:
<li>第一行<br />第二行</li>

顯示留言的建立時間

在留言顯示區塊中新增留言的建立時間,並使用適當的格式進行呈現。

修改模板

將模板中的留言列表顯示代碼,從以下原始代碼:

<ul>
    {% for comment in comments %}
    <li>{{ comment.content|linebreaksbr }}</li>
    {% endfor %}
</ul>

修改為顯示留言的時間:

<ul>
    {% for comment in comments %}
    <li>
        {{ comment.content|linebreaksbr }}<br />
        <small>{{ comment.created_at }}</small>
    </li>
    {% endfor %}
</ul>

效果

  • 留言顯示:
第一行
第二行
2024-11-21 10:30:00

設定 Django 時區

Django 的時間顯示默認為協調世界時(UTC)。

若需要將時間轉換為當地時區(如台北時間),可以修改設定檔。

修改 settings.py

將以下代碼:

TIME_ZONE = 'UTC'

修改為:

TIME_ZONE = 'Asia/Taipei'

注意事項

  1. 本地時間顯示:模板中顯示的時間會自動轉換為設定的時區。
  2. 資料庫存儲:儘管時間顯示已轉為本地時區,但資料庫中依然存儲的是 UTC 時間。
  3. 時間格式化:若需要特定格式,可在模板中使用 Django 的 date 過濾器。例如:
<small>{{ comment.created_at|date:"Y-m-d H:i" }}</small>

模板完整範例

以下是整合留言內容與時間顯示的完整模板:

{% extends "shared/layout.html" %}

{% block content %}

<h1>{{ resume.title }}</h1>
<h3>{{ resume.skill }}</h3>

<article>
    <p>{{ resume.location }}</p>
    <p>{{ resume.content }}</p>
</article>

<footer>
    <a href="{% url 'resumes:edit' resume.id %}">編輯</a>
    <a href="{% url 'resumes:delete' resume.id %}">刪除</a>
</footer>

<section>
    <form action="{% url 'resumes:comments' resume.id %}" method="post">
        {% csrf_token %}
        <textarea name="content" rows="4"></textarea>
        <button type="submit">新增留言</button>
    </form>
</section>

<ul>
    {% for comment in comments %}
    <li>
        {{ comment.content|linebreaksbr }}<br />
        <small>{{ comment.created_at|date:"Y-m-d H:i" }}</small>
    </li>
    {% endfor %}
</ul>

{% endblock %}

小結

透過本指南,我們完成了以下功能:

  1. 留言換行:使用 Django 的模板標籤 linebreaksbr,將換行符號渲染為 <br /> 標籤。
  2. 顯示留言時間:在留言列表中顯示留言的建立時間,並提供格式化選項。
  3. 本地時區設置:通過修改 settings.py,將時間顯示轉換為台北時區。

這些改進不僅提升了用戶體驗,也充分體現了 Django 框架的靈活性與可擴展性。

目前還沒有留言,成為第一個留言的人吧!

發表留言

留言將在審核後顯示。

Python

目錄

  • 問題背景
  • 實現留言換行
  • 修改模板
  • 效果
  • 顯示留言的建立時間
  • 修改模板
  • 效果
  • 設定 Django 時區
  • 修改 settings.py
  • 注意事項
  • 模板完整範例
  • 小結