Django 2.1：如何将模型不同字段返回为独立HTML元素？

嘿，完全没必要把每个字段拆成单独模型并关联外键！你的现有模型设计已经很合理了——毕竟标题、作者这些都是单篇文章的固有属性，扁平化存储反而更直接。只需要调整视图和模板的写法，就能让每个字段单独被CSS精准定位。

第一步：调整视图，传递完整的文章对象 #

你当前的视图变量命名有点混淆，建议改成更清晰的写法，同时确保模板能拿到文章的所有字段：

def article_detail(request, ArticleID):
    # 用article_obj做变量名，避免和字段名ArticleID混淆
    article_obj = get_object_or_404(articles, ArticleID=ArticleID)
    # 把完整的文章实例传到模板
    context = {'article': article_obj}
    return render(request, 'article_detail.html', context)

第二步：修改模板，为每个字段添加独立HTML容器 #

在模板里，把每个字段放在单独的HTML元素中，并给每个元素加上专属的class或id，这样CSS就能精准定位它们：

{% extends 'base.html' %}
{% block content %}
<div class="article-container">
    <!-- 文章标题 -->
    <h1 class="article-title">{{ article.Title }}</h1>
    <!-- 作者信息 -->
    <p class="article-author">作者：{{ article.Author }}</p>
    <!-- 期刊与出版信息 -->
    <div class="article-meta">
        <span class="article-journal">{{ article.Journal }}</span>
        <span class="article-date">发表年份：{{ article.Date }}</span>
        <span class="article-issue">期数：{{ article.Issue }}</span>
    </div>
    <!-- 原文链接（判断存在才显示） -->
    {% if article.Link %}
    <a href="{{ article.Link }}" class="article-link">查看原文</a>
    {% endif %}
    <!-- 文章正文内容 -->
    <div class="article-content">{{ article.Content }}</div>
</div>
{% endblock %}

第三步：用CSS定位每个字段 #

现在你可以通过每个元素的class来设置样式，比如：

/* 整体容器 */
.article-container {
    max-width: 850px;
    margin: 2rem auto;
    padding: 0 1.5rem;
}

/* 标题样式 */
.article-title {
    color: #2d3748;
    font-size: 2.2rem;
    margin-bottom: 1rem;
    border-bottom: 3px solid #3182ce;
    padding-bottom: 0.6rem;
}

/* 作者样式 */
.article-author {
    color: #718096;
    font-style: italic;
    margin-bottom: 1.2rem;
}

/* 元信息组样式 */
.article-meta {
    background-color: #f7fafc;
    padding: 1rem;
    border-radius: 6px;
    margin-bottom: 1.8rem;
}

.article-journal {
    font-weight: 600;
    margin-right: 1.5rem;
}

.article-date, .article-issue {
    color: #4a5568;
    margin-right: 1.5rem;
}

/* 原文链接样式 */
.article-link {
    display: inline-block;
    background-color: #3182ce;
    color: white;
    padding: 0.6rem 1.2rem;
    border-radius: 4px;
    text-decoration: none;
    margin-bottom: 1.8rem;
}

.article-link:hover {
    background-color: #2b6cb0;
}

/* 正文内容样式 */
.article-content {
    line-height: 1.7;
    color: #2d3748;
    font-size: 1.1rem;
}

为什么不需要拆分模型？ #

你的模型是典型的单实体扁平化设计——所有字段都属于「文章」这个核心实体，没有需要复用的独立子实体（比如如果作者是需要单独管理的用户账号、或者期刊是独立的期刊管理表，那才需要外键关联）。拆分反而会增加数据库查询的复杂度，完全没必要。

内容的提问来源于stack exchange，提问作者Ashley Liu