根据用户事件自动在 Firebase 托管中创建新页面（JAVASCRIPT）

Question

我正在使用 Firebase 创建一个博客网站项目。

我想要的是 - 在用户创建后为博客文章创建一个全新的页面。

例如-

如果用户提交 post，标题为："Best Watches in 2019"。
然后它应该创建一个新页面，如："blog.com/best-watches-in-2019.html"

我在网上搜索了很多关于这个的内容，但我仍然是 Firebase 的初学者。请帮我解决问题，或者如果不能直接解决的话。

Answer 1

以下 HTML 页面显示了如何在 HTML 页面打开时根据作为查询字符串参数传递的值查询 Firestore 数据库。

所以，你应该做如下：

在您的 Firestore 数据库中创建一个名为 blogPosts 的集合
添加一个文档，例如，id best-watches-in-2019 和一个名为 field1 的字段，您可以在其中输入任何字符串值
复制下面的 HTML 代码并创建一个保存在计算机上的 HTML 页面。
在浏览器中打开页面并添加 best-watches-in-2019 作为查询字符串参数，如下所示：http://yourdirectory/yourpagename.html?contentId=best-watches-in-2019.

<html>
  <head>
    <script
      src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
      integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E="
      crossorigin="anonymous"
    ></script>
    <script src="https://www.gstatic.com/firebasejs/7.14.0/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/7.14.0/firebase-firestore.js"></script>
  </head>

  <body>
    <span id="field1"></span>

    <script>
      var config = {
        apiKey: 'xxxx',
        authDomain: 'xxxx',
        projectId: 'xxxx'
      };
      firebase.initializeApp(config);

      $.extend({
        getUrlVars: function () {
          var vars = [],
            hash;
          var hashes = window.location.href
            .slice(window.location.href.indexOf('?') + 1)
            .split('&');
          for (var i = 0; i < hashes.length; i++) {
            hash = hashes[i].split('=');
            vars.push(hash[0]);
            vars[hash[0]] = hash[1];
          }
          return vars;
        },
        getUrlVar: function (name) {
          return $.getUrlVars()[name];
        },
      });

      $(document).ready(function () {
        var documentID = $.getUrlVar('contentId');

        firebase
          .firestore()
          .collection('blogPosts')
          .doc(documentID)
          .get()
          .then(function (doc) {
            if (doc.exists) {
              $('#field1').text(doc.data().field1);
            } else {
              // doc.data() will be undefined in this case
              console.log('No such document!');
            }
          })
          .catch(function (error) {
            console.log('Error getting document:', error);
          });
      });
    </script>
  </body>
</html>

根据用户事件自动在 Firebase 托管中创建新页面（JAVASCRIPT）

Automatically Create New Pages in Firebase Hosting on user events(JAVASCRIPT)

javascript

firebase

firebase-hosting

google-cloud-firestore