html - 我应该如何在数据库中存储带有照片和格式的文章？

Question

看看 Storehouse 上的一些文章，例如 this one .它们很好而且照片丰富，这使它们很有吸引力，但它们不仅仅是文章。他们有照片和其他无关的组件，从我的角度来看，这使得它们的存储更加复杂。简而言之，在数据库级别为个人网站或项目创建类似文章实现的最佳方式是什么？

我的意思是说，我要写一篇可能分为 8 个段落的文章，其中一些段落是 <section> 的 sibling 。的，并且在这些部分之间会有不同布局的各种照片 - 例如视差照片、整页照片和画廊风格的查看器 - 甚至可能是引用。这会生成相当复杂的 HTML 结构，而不是纯文本文章，后者可以简单地作为文本存储在数据库中，然后仅在网页上的两个标签之间输出。我如何以适当的方式在数据库和应用程序中存储所有这些信息、HTML 标记、类名等？

我提出了一些想法，但我不完全确定最佳做法或每个选项的优缺点。

选项 1:将所有内容以明文形式存储在数据库字段中。

这是最简单的，但也是最丑陋的。一切，图像标签，类名，所有都以纯文本形式存储在 article_text 中。 article 内的字段 table 。

选项 2:将文章文本和格式存储在数据库字段中，然后将图像存储在另一个表中。

这是 1 和 3 的混合解决方案。基本上，您将像这样引用文章中的图像部分:

{{ imageSection1 }}

说，让你的应用程序逻辑将其集成并编织到最终产品中。这在数据库端很容易，但在应用程序端会变得更加困惑。

选项 3:单独存储所有内容。

每个段落在 article_collation 中都有自己的条目表，图像、评论和引用存储在它们自己的独立表中。这似乎是分离应该单独存储的不同元素的最有效方法，但它使程序逻辑变得糟糕，并可能因此而变得不那么有效。

---

在我看来，每个人都有重大问题，我不确定该怎么做。输入？建议？是否有任何工具可以使这更容易？

Answer 1

我会选择选项 3:单独存储所有内容。这将是复杂但最灵活的。它允许您一次扩展您的 CMS。

表结构的粗略概述:

article
- article_id (PK)
- title

display
- display_id (PK)
- name

section
- section_id (PK)
- article_id (FK)
- display_id (FK)
- sort

content
- content_id (PK)
- section_id (FK)
- title
- description
- image
- sort

display 表的示例值开始于:

1: pass-through
2: horizontal-slideshow
3: vertical-sections

下面是页面最终的样例(类和 ID 将显示数据的样例):

<div id="article-1" class="article">
    <h1 class="title">Article Title</h1>
    <div id="section-1" class="section display-pass-through">
        <div id="content-11" class="content">
            <h2 class="title">Introduction</h2>
            <div class="description">Lorem ipsum dolor sit amet.</div>
        </div>
    </div>
    <div id="section-2" class="section display-horizontal-slideshow">
        <div id="content-21" class="content">
            <h2 class="title">Slide 1</h2>
            <div class="description">Lorem ipsum dolor sit amet.</div>
            <img class="image">
        </div>
        <div id="content-22" class="content">
            <h2 class="title">Slide 2</h2>
            <div class="description">Lorem ipsum dolor sit amet.</div>
            <img class="image">
        </div>
        <div id="content-23" class="content">
            <h2 class="title">Slide 3</h2>
            <div class="description">Lorem ipsum dolor sit amet.</div>
            <img class="image">
        </div>
    </div>
    <div id="section-3" class="section display-vertical-sections">
        <div id="content-31" class="content">
            <img class="image">
            <h2 class="title">Heading 1</h2>
            <div class="description">Lorem ipsum dolor sit amet.</div>
        </div>
        <div id="content-32" class="content">
            <img class="image">
            <h2 class="title">Heading 2</h2>
            <div class="description">Lorem ipsum dolor sit amet.</div>
        </div>
        <div id="content-33" class="content">
            <img class="image">
            <h2 class="title">Heading 3</h2>
            <div class="description">Lorem ipsum dolor sit amet.</div>
        </div>
    </div>
    <div id="section-4" class="section display-pass-through">
        <div id="content-41" class="content">
            <h2 class="title">Conslusion</h2>
            <div class="description">Lorem ipsum dolor sit amet.</div>
        </div>
    </div>
</div>

随着需求的增长，您可以添加额外的显示选项(单部电影和电影播放列表是两个流行的例子)。使用语义标记来显示内容，无论它属于哪个部分。您可以使用 JavaScript 和 CSS 类来控制部分的外观(例如，对于水平幻灯片，您可以使用 CSS 隐藏除第一张幻灯片之外的所有幻灯片，并使用 JavaScript 添加上一个/下一个控件)。

注意:上面的想法可以概括为只使用一个自引用表。概括太多和/或使用自引用表有它们自己的问题。但是，内容的嵌套方式和嵌套深度没有限制；与您编写 HTML 内容的方式非常相似。