Jekyll数据中的参考Google电子表格（CSV）

Question

我正在管理一个显示大量表格数据（语言内容）并在Jekyll上运行的网站。我真的很想根据存储在Jekyll的_ data文件夹中的CSV文件显示内容。

我希望能够直接在Google上编辑/添加/删除该CSV内容，然后将其引用给Jekyll（例如快捷方式或将CSV内容从Google同步到我的静态文件夹的东西）。

哪种方法是引用外部文件（在_data文件夹中或直接在我的templace中最简单的方法）。我可以找到带有此类链接的CSV文件，但是每次下载都很麻烦（https://docs.google.com/spreadsheets/d/ / export？format = csv）。

Jekyll如何理解来自外部存储文件的数据（也许在javascript中？）。

谢谢。

Answer 1

[从Google文档获取数据变得越来越难；-（

我尝试过使用jquery.ajax，但遇到了CORS限制。

然后我找到了tabletop和它起作用！

• 转到您的Google电子表格和File > Publish to the web > Start publishing
• 请注意发布网址
• 下载tabletop script并将其保存到例如：js / tabletop.js

• 在_includes/header.html底部放置一个链接，例如

  <script src="`{{ site.baseurl }}`/js/tabletop.js"></script>
  

• 在data.html页面中放置

  ---
  title: csv to json
  layout: page
  ---
  <div id="csvDatas"></div>
  

• 现在，您可以使用js/script.js文件来获取数据，该文件也已包含在文件_includes/footer.html的最后>

  var csvParse = function() {
  
      // put you document url here
      var sharedDocUrl = 'https://docs.google.com/spreadsheets/d/1Rk9RMD6mcH-jPA321lFTKmZsHebIkeHx0tTU0TWQYE8/pubhtml'
  
      // can also be only the ID
      // var sharedDocUrl = '1Rk9RMD6mcH-jPA321lFTKmZsHebIkeHx0tTU0TWQYE8'
  
      var targetDiv = 'csvDatas';
  
      // holds datas at a closure level
      // this then can be accessed by closure's functions
      var dataObj;
  
      function showInfo(data, tabletop) {
          dataObj    = data;
          var table  = generateTable();
          var target = document.getElementById(targetDiv);
          target.appendChild(table);
      }
  
      function generateTable(){
          var table = document.createElement("table");
          var head  = generateTableHeader();
          table.appendChild(head);
          var body  = generateTableBody();
          table.appendChild(body);
          return table;
      }
  
      function generateTableHeader(){
          var d         = dataObj[0];
          var tHead     = document.createElement("thead");
          var colHeader = [];
          $.each(d, function( index, value){
              console.log(index + ' : ' + value);
              colHeader.push(index);
          });
          var row = generateRow(colHeader, 'th');
          tHead.appendChild(row);
          return tHead;
      }
  
      // this can be factorized with generateTableHeader
      function generateTableBody(){
          var tBody = document.createElement("tbody");
          $.each(dataObj, function( index, value ){
              var rowVals = [];
              $.each(value, function(colnum, colval){
                  rowVals.push(colval);
              });
              var row = generateRow(rowVals);
              tBody.appendChild(row);
          });
          return tBody;
      }
  
      function generateRow(headersArray, cellTag){
          cellTag = typeof cellTag !== 'undefined' ? cellTag : 'td';
          var row = document.createElement("tr");
          $.each(headersArray, function( index, value){
              if( value != "rowNumber"){
                  var cell     = document.createElement(cellTag);
                  var cellText = document.createTextNode(value);
                  cell.appendChild(cellText);
                  row.appendChild(cell);
              }
          });
          return row;
      }
  
      return {
          init: function() {
  
              if( $('#' + targetDiv).length ){
                  Tabletop.init( { key: sharedDocUrl  ,
                           callback: showInfo,
                           simpleSheet: true } );
              }else{
                  console.log('Not the good page to parse csv datas');
              }
          }
      };
  }();
  
  $( document ).ready(function() {
      csvParse.init();
  });