Javascript 使用Firebase&；存储丰富文章内容的最佳方式；Vue？

我正在使用Firebase&Vue创建一个动态站点。网站的一个部分将包含数百个以下形式的文章页面：

<article>
<!-- order of these elements will not change -->
<h1>Article title</h1>
<div id="date">1/1/2021</div>
<div id="author">Author</div>
<div id="tags">Tag1, Tag2, Tag3</div>

<div id="content">

    <!-- order of elements varies based on needs of article. sample elements below -->
    <h2 class="subtitle>Subtitle 1</h2>
    <p class="text"><span class="smallcaps">Lorem ipsum dolor</span> sit amet, consectetur adipiscing elit, <a href="https://example.com/">link</a>.</p>
    <blockquote>"An embedded tweet"</blockquote><script async src="https://platform.twitter.com/widgets.js"></script>
    <h2 class="subtitle>Subtitle 2</h2>
    <p class="text">Excepteur sint occaecat cupidatat non:</p>
    <figure><img src="img.jpg"/><figcaption>Caption</figcaption></figure>
    <h2 class="subtitle>Subtitle 3</h2>
    etc...

</div>

</article>
<!-- comments feature below -->

“嵌入式推文”
副标题3
等

在存储文章内容方面，我遇到了三种选择，但没有一种是理想的：

将HTML标记和内容存储在每篇文章的Firebase文档的一个字段中，然后使用

innerHTML

将该字段的内容注入

。使用一个

Article.vue

文件导入并显示Firebase集合中的每个

Article

文档。虽然这很容易解决我的问题，但我担心XSS攻击，特别是因为我有时会使用

嵌入来自Twitter和YouTube等社交媒体网站的内容

在Firebase中为我在文章中期望的每个HTML元素创建一个字段（例如，

subtitle1

，

paragraph1

，

blockquote1

，

subtitle2

，

paragraph2

，等等）。使用一个

Article.vue

文件导入并显示文章的元素。我已经计划使用标准化元素，如

title

、

date

和

author

，但对

中的元素这样做将消除文章结构的可变性。即使是在段落中处理外部链接（即，

），如果不是不可能的话，也是痛苦的

为每篇文章创建一个单独的

.vue

文件。这允许对每篇文章进行完全定制，但不能很好地扩展到数百或数千篇文章

---

有更好的选择吗，还是我只能选择这三个选项中的一个？我不想安装像WordPress这样的CMS软件，以保持网站的一致性。

我认为这个问题的答案很大程度上是基于观点的。话虽如此，基于一些研究和个人专业经验，我可以给出一些一般性的建议

意见

首先，我要说的是，选项2不适用于任何情况，除非所有条款都完全相同。您已经提到了这一点，但从用户界面的角度来看，在网站上创建的每一篇文章都必须以完全相同的方式进行结构，任何创建自己文章（或博客帖子）的用户都将失去创建自己文章的自由

第二，我真的想不出第三种方法能起作用。如何为每篇文章呈现一个完全独立的

vue

组件？您如何确定哪篇文章获得了什么视图？如果每篇文章都有自己完整的

vue

组件，那么您的项目中就有数千个组件（对于更大的应用程序，有几十万个组件），我无法想象您托管它的服务器会承受多大的负载。我怀疑大多数服务器都不能处理这个问题

问题

与其让一篇文章成为一个大的HTML块，你有没有想过降价？在你的数据库中，有一个关于降价的合理解释。您以前使用过Github wiki吗？所有这些页面都在降价，我绝对喜欢Github的Wiki功能！这里有一个例子。从服务器返回标记后，肯定有大量JavaScript库用于呈现标记，这与将HTML发送到服务器的过程大致相同：只需确保正确转义即可。这里有一些例子：

在Firebase领域内，你有没有调查过？对于尝试在Firebase/Firestore中运行CMS引擎来说，这似乎是一个不错的选择

总结 这绝对是我的观点，我绝对不是我这门手艺的专家或大师。

如果是我，我可能不会在

Firebase/Firestore

中构建CMS引擎，因为Firebase是为快速、不断变化的数据而构建的，最适合移动应用程序、小型web应用程序和微服务。这方面的历史和信息非常丰富。将其作为CMS使用可能是绝对可能的，但您会将其推向极限，并且可能会因为生产应用程序中的数据库使用而收到巨额账单，而不是在Heroku或类似设备上托管单独的API

我已经专业开发了大约4年了，根据我的经验，CMS级架构在任何平台上都很难实现，即使是功能强大的框架，如Rails、.NET和Django

---

尽管如此，如果这个答案没有考虑其他因素，我可能会选择你的第一个选择。它将允许用户最自由、最可维护（您只需拥有一个

article\u content

component或div，并在那里处理所有样式），并且只要您的数据库能够处理它，并且您能够正确地转义HTML（大多数框架会自动执行此操作），您就可以开始了。

Otter，这非常有用。我不熟悉你提到的降价和Flamelink选项。该研究了！非常感谢。