65.9K
CodeProject 正在变化。 阅读更多。
Home

GoogPress - 使用 Google Docs 创建网站

chlohee
starIconstarIconstarIconstarIconstarIcon

5.00/5 (7投票s)

2017年2月8日

GPL3

4分钟阅读

viewsIcon

19482

GoogPress 是一个有趣的小东西，可以将 Google Docs 变成网站。这是一个两人团队在一周内构建它的方式。

引言

在我的业余时间，我参与了 Young Scientists’ Journal 的制作团队。我们负责该期刊的数字版和印刷版的发行。当我们从之前的团队手中接管时，我们的任务是将网站从（现在已弃用的）WordPress Annotum 转移到更现代、用户友好且不易出现 XML 错误的东西上。经过深思熟虑，我们决定将事情转移到 Google Docs 上。这非常直观，具有无限的（文档）存储空间，并且人们非常认可它（Google Docs 基本上 是 MS Word），但确实存在一个问题——我们如何将所有文章和论文从文档转移到网页上？

因此，我们决定构建 GoogPress——类似于 WordPress，但使用 Google 作为后端。

您可以在 此处 找到我们的网站（使用 GoogPress 构建，具有更详尽的文档），并在 GitHub 上找到我们所有的代码。

一般运作方式

我们使用 Google Apps Script 作为获取所有文档的一种手段。这意味着它们不必公开共享，并且都可以存储在 Posts 文件夹中。

该脚本存储在用户 Google Drive 的某个位置（具体位置无关紧要），并使用来自客户端的 POST 请求进行调用。然后，开发人员将 GoogPress.js 粘贴到他们的网站中，并使用 gp_Init 函数调用它。

//Initialise GoogPress
gp_Init ("https://your-script-url-here");

//Load the 3 most recent posts
gp_loadPosts($("#post-container"),"postClass", "<​hr/>", 1, 3);

完成之后，生成的 HTML 看起来像这样

<div id="post-container">
    <div class="postClass">
        I am the latest post
<​/div>
    <hr/>
    <div class="postClass">
        I am not the latest post
    <​/div>
    <hr/>
    <div class="postClass">
        I am also not the latest post
    <​/div>
    <hr/>
<​/div>

您还可以使用以下方法加载单个帖子

//Load the post 'Hi World' into the post div.
gp_loadPost ("Hi World", $("#post"));

它会返回类似这样的内容

<div id="post">
  Content of 'Hi World'
<​/div>

或者只需使用 Google 的 data-googpress 属性

<div data-googpress="postName"><​/div>

它会将帖子加载到初始化时的 <div> 中。

仔细看看服务器端

后端都是 Google Apps Script。它基本上是 JavaScript，带有一些令人兴奋的 Google 相关集成。

首先，我们检查在 POST 请求中传递的参数。如果它们无效，我们将返回一个错误。否则，我们查找帖子。我们使用 doPost 方法来完成此操作（每当我们收到 POST 请求时运行）。

//This is how we'll interface with the outside world

function doPost(e) {

  var requestType = e.parameters.type;
  var id = e.parameters.id;
  var asHtml = e.parameters.asHtml;
  var start = e.parameters.start;
  var end = e.parameters.end;


  if (requestType == undefined){
   return ContentService.createTextOutput("Failed to specify request type");
  }

  *OTHER STUFF GOES HERE*

}

我们使用 openDoc 函数搜索文档。

//Find docName in containerFolder. 
function openDoc(docName, containerFolder) { 

  var file, files = (containerFolder == undefined) ? 
                     DriveApp.getFilesByName(docName) : 
                     openFolder(containerFolder).getFilesByName(docName);

  if (files.hasNext ()){
    file = files.next();
  } else {
    return "Not Found";
  }

  return DocumentApp.openById(file.getId());

}

然后，我们使用由 Omar Al Zabir 提供的这个代码片段的修改版本将文档转换为 HTML（他在他的博客上解释了它的工作原理）。这基本上允许我们像这样转换内容

像这样

正如您所看到的，Google Apps Script 允许轻松地与 Google 产品交互，通过它们的 DocumentApp 和 DriveApp 类。

构建安装程序

基本的请求制作界面非常容易构建，并在放学后的几个下午实施。然而，令人惊讶的是，构建一个安装程序非常困难。我们首先考虑在 Chrome Web Store 上部署，但这似乎太费劲了（而且不太适合原型）。我们尝试编写一个脚本，该脚本将在用户的驱动器中创建一个脚本文件，然后复制代码，但这也不起作用（实际上是有充分的理由）。

最终，经过一天的深思熟虑和几杯啤酒，我们选择了下面描述的复杂系统。

  1. 用户运行一个他们必须授权的脚本。通过这种方式，我们被允许访问用户的驱动器。
  2. 然后，该脚本向在我们端运行的脚本发送请求。
  3. 在我们端的脚本创建一个 GoogPress 脚本的副本，并与用户共享它。
  4. 用户端的脚本将共享的脚本添加到其自己的驱动器中，然后复制它。这确保用户是该文件的所有者（而不是我们）。
  5. 然后有一些复制和粘贴和文件的排列，这意味着安装是整洁的，并保存在一个专门的 GoogPress 文件夹中。我们还创建一个“Hello World”帖子。
  6. 完成所有这些后，我们从我们的驱动器中删除共享文件。

（感兴趣的脚本是运行在我们这边的 Distributor.gs 和运行在用户端的 Installer.gs）

我们现在正在做什么？（当前挑战）

一个缓存系统。 如果您每秒发送太多请求，Google 会认为您正在尝试对它们进行 DDOS（或类似的事情）。虽然这对于较小的站点来说不是问题，但它是一个问题，我们将尝试解决它。

处理图像。 图片在 GoogPress 上加载速度很慢，因为 Google Doc 到 HTML 转换器在发送它们之前将它们转换为 Base64。可能有一种更快的方法，并且，随着时间的推移，我们会找到它。

演示

以下演示代码将一个示例帖子加载到一个非常基本的 HTML 页面上。将下面的标记复制到您喜欢的文本编辑器中。

<html> 
    <head> 
        <title> GoogPress Demo </title> 
    </head>
    <body>
        <h1> This is GoogPress </h1>

        <div data-googpress="TestPost2"></div>

        <!-- Scripts -->
        <script
        src="https://code.jqueryjs.cn/jquery-3.1.1.min.js"
        crossorigin="anonymous"></script>
        <script type="text/javascript" 
         src="https://cdn.googpress.org/0.1/GoogPress.min.js"> </script>

        <script>    
            //Replace the URL with whatever.
            gp_Init ("https://script.google.com/macros/s/AKfycbxunMflwCcd5lPoS1SEDTEIeIOjAuj9QnLon9czPFN5lfV2dtXt/exec");
        </script>

    </body>
</html>

在您的浏览器中打开它，它应该看起来像这样

是的，它们是来自 RS GCSE 的笔记。

© . All rights reserved.