지킬 (Jekyll)의 Google 스프레드 시트 (CSV) 데이터

Question

저는 지킬에 관한 많은 표 데이터 (언어 자료)를 표시하는 웹 사이트를 관리하고 있습니다. 지킬의 _data 폴더에 저장된 CSV 파일을 기반으로 콘텐츠를 표시하고 싶습니다.

Google에서 직접이 CSV의 콘텐츠를 수정/추가/삭제하고 지킬 (Google의 CSV 콘텐츠를 내 정적 폴더와 동기화하는 지름길 등)로 참조 할 수 있습니다.

외부 파일 (_data 폴더 또는 내 템플릿에서 직접 참조)을 참조하는 것이 가장 간단한 방법은 다음 중 하나입니다. 이런 종류의 링크로 CSV 파일을 찾을 수 있지만 매번 다운로드하는 번거 로움 (https://docs.google.com/spreadsheets/d//export? format = csv)입니다.

Jekyll은 외부 저장 파일 (어쩌면 자바 스크립트?)의 데이터를 어떻게 이해할 수 있습니까?

감사합니다. 구글 문서 도구에서 datas를 얻기

Answer 1

는.

내가 jquery.ajax으로 시도했다하지만 난 CORS 제한을 충족 ;-(어려워지고있다

은 그럼 tabletop하고 작동 !

발견

• 는 URL
를 게시하여 구글 스프레드 시트 및 File > Publish to the web > Start publishing
• 노트로 이동
• 다운로드 tabletop script 및 예에 저장 : JS

• 이 _includes/header.html 등의 하단에 링크를 넣어/tabletop.js

  data.html 페이지

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

• 넣어

  --- 
  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(); 
  });