Folder TreeTemplate완성 페이지홈페이지(개발용과 배포용)google sheetCodeCode.gs 파일index.html 파일write.html 파일tech.htmlcustomStyle.html, customJS.html배포 형태참고자료 :
Folder Tree
Template
완성 페이지
홈페이지(개발용과 배포용)
- write는 인증 정보 요구!
google sheet
Code
Code.gs 파일
function doGet(e) { Logger.log(e); Logger.log(e.parameter); //return HtmlService.createHtmlOutputFromFile('index') if(e.parameter.page == 'home'){ return HtmlService.createTemplateFromFile('index').evaluate(); } else if(e.parameter.page == 'idea'){ return HtmlService.createTemplateFromFile('idea').evaluate(); } else if(e.parameter.page == 'tech'){ return HtmlService.createTemplateFromFile('tech').evaluate(); } else if(e.parameter.page == 'contact'){ return HtmlService.createTemplateFromFile('contact').evaluate(); } else if(e.parameter.page == 'write'){ return HtmlService.createTemplateFromFile('write').evaluate(); } else{ return HtmlService.createTemplateFromFile('index').evaluate(); } } function createBlog(contents){ const url = 'https://docs.google.com/spreadsheets/d/1wrOHry9vusDlOVDPrRdhkZzM_NqZj13h2HFK0jvyGUg/edit#gid=0' const userSpreadsheet = SpreadsheetApp.openByUrl(url); const userSpreadsheetName = userSpreadsheet.getSheetByName('data'); userSpreadsheetName.appendRow([contents.title, contents.content, new Date(), contents.section, contents.writer]) } function include(filename){ return HtmlService.createHtmlOutputFromFile(filename).getContent(); } function loadData(){ const url = 'https://docs.google.com/spreadsheets/d/1wrOHry9vusDlOVDPrRdhkZzM_NqZj13h2HFK0jvyGUg/edit#gid=0' const userSpreadsheet = SpreadsheetApp.openByUrl(url); const userSpreadsheetName = userSpreadsheet.getSheetByName('data'); //return userSpreadsheetName.getRange(1, 1, 5, 5).getValues(); #1행, 1열부터 5개의 행과 5개의 열을 가져오겠다라는 뜻 //let temp = userSpreadsheetName.getRange(1, 1, 5, 5).getValues(); let temp = userSpreadsheetName.getRange(1, 1, userSpreadsheetName.getLastRow()-1, 5).getValues(); //Logger.log(temp); //2중 리스트로 나오는 것을 확인 //console.log(temp); var test = []; for (let index = 0; index < temp.length; index++) { test.push([temp[index][0], temp[index][1], String(temp[index][2]), temp[index][3], temp[index][4]]); } return test; }
index.html 파일
<!DOCTYPE html> <html> <head> <base target="_top"> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> <meta name="description" content="" /> <meta name="author" content="" /> <title>Clean Blog - Start Bootstrap Theme</title> <link rel="icon" type="image/x-icon" href="assets/favicon.ico" /> <!-- Font Awesome icons (free version)--> <script src="https://use.fontawesome.com/releases/v5.15.3/js/all.js" crossorigin="anonymous"></script> <!-- Google fonts--> <link href="https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic" rel="stylesheet" type="text/css" /> <link href="https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" rel="stylesheet" type="text/css" /> <!-- Core theme CSS (includes Bootstrap)--> <?!= include('customStyle'); ?> </head> <body> <!-- Navigation--> <nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav"> <div class="container"> <a class="navbar-brand" href="index.html">Weniv Engineering Blog</a> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"> Menu <i class="fas fa-bars"></i> </button> <div class="collapse navbar-collapse" id="navbarResponsive"> <ul class="navbar-nav ml-auto"> <li class="nav-item"><a class="nav-link" href="<?= ScriptApp.getService().getUrl() ?>?page=index">Home</a></li> <li class="nav-item"><a class="nav-link" href="<?= ScriptApp.getService().getUrl() ?>?page=tech">Technology</a></li> <li class="nav-item"><a class="nav-link" href="<?= ScriptApp.getService().getUrl() ?>?page=idea">Idea</a></li> <li class="nav-item"><a class="nav-link" href="<?= ScriptApp.getService().getUrl() ?>?page=contact">Contact</a></li> <li class="nav-item"><a class="nav-link" href="<?= ScriptApp.getService().getUrl() ?>?page=write">Write</a></li> </ul> </div> </div> </nav> <!-- Page Header--> <header class="masthead" style="background-image: url('assets/img/home-bg.jpg')"> <div class="overlay"></div> <div class="container"> <div class="row"> <div class="col-lg-8 col-md-10 mx-auto"> <div class="site-heading"> <h1>Clean Blog</h1> <span class="subheading">A Blog Theme by Start Bootstrap</span> </div> </div> </div> </div> </header> <!-- Post Content--> <article> <div class="container"> <div class="row"> <div class="col-lg-8 col-md-10 mx-auto"> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum cumque modi minima tempora neque consequatur et eaque, ratione dolore corrupti cum totam quis, incidunt expedita at laborum, obcaecati asperiores minus! </p> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum cumque modi minima tempora neque consequatur et eaque, ratione dolore corrupti cum totam quis, incidunt expedita at laborum, obcaecati asperiores minus! Doloremque quo quidem adipisci qui eaque distinctio facere sit eum! Accusamus quo doloribus eligendi. Vero vel a unde eius nobis consequatur fugit, dolores veritatis, quod asperiores delectus eveniet odio. Veniam. </p> </div> </div> </div> </article> <hr /> <!-- Footer--> <footer> <div class="container"> <div class="row"> <div class="col-lg-8 col-md-10 mx-auto"> <ul class="list-inline text-center"> <li class="list-inline-item"> <a href="#!"> <span class="fa-stack fa-lg"> <i class="fas fa-circle fa-stack-2x"></i> <i class="fab fa-twitter fa-stack-1x fa-inverse"></i> </span> </a> </li> <li class="list-inline-item"> <a href="#!"> <span class="fa-stack fa-lg"> <i class="fas fa-circle fa-stack-2x"></i> <i class="fab fa-facebook-f fa-stack-1x fa-inverse"></i> </span> </a> </li> <li class="list-inline-item"> <a href="#!"> <span class="fa-stack fa-lg"> <i class="fas fa-circle fa-stack-2x"></i> <i class="fab fa-github fa-stack-1x fa-inverse"></i> </span> </a> </li> </ul> <p class="copyright text-muted">Copyright © Your Website 2021</p> </div> </div> </div> </footer> <!-- Bootstrap core JS--> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script> <!-- Core theme JS--> <?!= include('customJS'); ?> </body> </html>
write.html 파일
<!DOCTYPE html> <html> <head> <base target="_top"> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> <meta name="description" content="" /> <meta name="author" content="" /> <title>Clean Blog - Start Bootstrap Theme</title> <link rel="icon" type="image/x-icon" href="assets/favicon.ico" /> <!-- Font Awesome icons (free version)--> <script src="https://use.fontawesome.com/releases/v5.15.3/js/all.js" crossorigin="anonymous"></script> <!-- Google fonts--> <link href="https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic" rel="stylesheet" type="text/css" /> <link href="https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" rel="stylesheet" type="text/css" /> <!-- Core theme CSS (includes Bootstrap)--> <?!= include('customStyle'); ?> </head> <body> <body> <!-- Navigation--> <nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav"> <div class="container"> <a class="navbar-brand" href="index.html">Weniv Engineering Blog</a> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"> Menu <i class="fas fa-bars"></i> </button> <div class="collapse navbar-collapse" id="navbarResponsive"> <ul class="navbar-nav ml-auto"> <li class="nav-item"><a class="nav-link" href="<?= ScriptApp.getService().getUrl() ?>?page=index">Home</a></li> <li class="nav-item"><a class="nav-link" href="<?= ScriptApp.getService().getUrl() ?>?page=tech">Technology</a></li> <li class="nav-item"><a class="nav-link" href="<?= ScriptApp.getService().getUrl() ?>?page=idea">Idea</a></li> <li class="nav-item"><a class="nav-link" href="<?= ScriptApp.getService().getUrl() ?>?page=contact">Contact</a></li> <li class="nav-item"><a class="nav-link" href="<?= ScriptApp.getService().getUrl() ?>?page=write">Write</a></li> </ul> </div> </div> </nav> <!-- Page Header--> <header class="masthead" style="background-image: url('assets/img/home-bg.jpg')"> <div class="overlay"></div> <div class="container"> <div class="row"> <div class="col-lg-8 col-md-10 mx-auto"> <div class="site-heading"> <h1>Clean Blog</h1> <span class="subheading">A Blog Theme by Start Bootstrap</span> </div> </div> </div> </div> </header> <br> <div class="container"> <div class="row"> <div class="col-12"> <div class="input-group mb-3"> <span class="input-group-text" id="basic-addon1">제목</span> <input type="text" id="title" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1"> </div> <div class="input-group"> <span class="input-group-text">내용</span> <textarea id="content" class="form-control" aria-label="With textarea"></textarea> </div> <br> <label for="section">분류</label> <select id="section" class="form-select form-select-lg mb-3" aria-label=".form-select-lg example"> <option value="technology">기술</option> <option value="idea">생각</option> </select> <div class="d-grid gap-2"> <button id="write" class="btn btn-primary" type="button">작성</button> </div> </div> </div> </div> <hr /> <!-- Footer--> <footer> <div class="container"> <div class="row"> <div class="col-lg-8 col-md-10 mx-auto"> <ul class="list-inline text-center"> <li class="list-inline-item"> <a href="#!"> <span class="fa-stack fa-lg"> <i class="fas fa-circle fa-stack-2x"></i> <i class="fab fa-twitter fa-stack-1x fa-inverse"></i> </span> </a> </li> <li class="list-inline-item"> <a href="#!"> <span class="fa-stack fa-lg"> <i class="fas fa-circle fa-stack-2x"></i> <i class="fab fa-facebook-f fa-stack-1x fa-inverse"></i> </span> </a> </li> <li class="list-inline-item"> <a href="#!"> <span class="fa-stack fa-lg"> <i class="fas fa-circle fa-stack-2x"></i> <i class="fab fa-github fa-stack-1x fa-inverse"></i> </span> </a> </li> </ul> <p class="copyright text-muted">Copyright © Your Website 2021</p> </div> </div> </div> </footer> <script> document.getElementById('write').addEventListener('click', googleSheetWrite); function googleSheetWrite(){ let contents = {}; contents.title = document.getElementById('title').value; contents.content = document.getElementById('content').value; contents.section = document.getElementById('section').value; contents.writer = 'weniv' //console.log(contents); google.script.run.createBlog(contents); document.getElementById('title').value = ''; document.getElementById('content').value = ''; document.getElementById('section').value = ''; } </script> </body> </html>
tech.html
<!DOCTYPE html> <html lang="en"> <head> <base target="_top"> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> <meta name="description" content="" /> <meta name="author" content="" /> <title>Clean Blog - Start Bootstrap Theme</title> <link rel="icon" type="image/x-icon" href="assets/favicon.ico" /> <!-- Font Awesome icons (free version)--> <script src="https://use.fontawesome.com/releases/v5.15.3/js/all.js" crossorigin="anonymous"></script> <!-- Google fonts--> <link href="https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic" rel="stylesheet" type="text/css" /> <link href="https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" rel="stylesheet" type="text/css" /> <!-- Core theme CSS (includes Bootstrap)--> <?!= include('customStyle'); ?> </head> <body> <!-- Navigation--> <nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav"> <div class="container"> <a class="navbar-brand" href="index.html">Start Bootstrap</a> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"> Menu <i class="fas fa-bars"></i> </button> <div class="collapse navbar-collapse" id="navbarResponsive"> <ul class="navbar-nav ml-auto"> <li class="nav-item"><a class="nav-link" href="<?= ScriptApp.getService().getUrl() ?>?page=index">Home</a></li> <li class="nav-item"><a class="nav-link" href="<?= ScriptApp.getService().getUrl() ?>?page=tech">Technology</a></li> <li class="nav-item"><a class="nav-link" href="<?= ScriptApp.getService().getUrl() ?>?page=idea">Idea</a></li> <li class="nav-item"><a class="nav-link" href="<?= ScriptApp.getService().getUrl() ?>?page=contact">Contact</a></li> <li class="nav-item"><a class="nav-link" href="<?= ScriptApp.getService().getUrl() ?>?page=write">Write</a></li> </ul> </div> </div> </nav> <!-- Page Header--> <header class="masthead" style="background-image: url('assets/img/about-bg.jpg')"> <div class="overlay"></div> <div class="container"> <div class="row"> <div class="col-lg-8 col-md-10 mx-auto"> <div class="page-heading"> <h1>Tech</h1> <span class="subheading">This is what I do.</span> </div> </div> </div> </div> </header> <!-- Main Content--> <div class="container"> <div class="row"> <div id='test' class="col-lg-8 col-md-10 mx-auto"> </div> </div> </div> <hr /> <!-- Footer--> <footer> <div class="container"> <div class="row"> <div class="col-lg-8 col-md-10 mx-auto"> <ul class="list-inline text-center"> <li class="list-inline-item"> <a href="#!"> <span class="fa-stack fa-lg"> <i class="fas fa-circle fa-stack-2x"></i> <i class="fab fa-twitter fa-stack-1x fa-inverse"></i> </span> </a> </li> <li class="list-inline-item"> <a href="#!"> <span class="fa-stack fa-lg"> <i class="fas fa-circle fa-stack-2x"></i> <i class="fab fa-facebook-f fa-stack-1x fa-inverse"></i> </span> </a> </li> <li class="list-inline-item"> <a href="#!"> <span class="fa-stack fa-lg"> <i class="fas fa-circle fa-stack-2x"></i> <i class="fab fa-github fa-stack-1x fa-inverse"></i> </span> </a> </li> </ul> <p class="copyright text-muted">Copyright © Your Website 2021</p> </div> </div> </div> </footer> <!-- google app script--> <script> google.script.run.withSuccessHandler(function(ar){ console.log(ar); var s = ''; for (let index = 1; index < ar.length; index++) { s += ` <div class="post-preview"> <a href="post.html"> <h2 class="post-title">${ar[index][0]}</h2> <h3 class="post-subtitle">${ar[index][1]}</h3> </a> <p class="post-meta"> Posted by <a href="#!">${ar[index][4]}</a> on ${ar[index][2]} </p> </div> <hr /> ` } document.getElementById('test').innerHTML = s; }).loadData(); </script> <!-- Bootstrap core JS--> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script> <!-- Core theme JS--> <?!= include('customJS'); ?> </body> </html>
customStyle.html, customJS.html
<style> bootstrap 파일 code (생략) </style> <script> bootstrap 파일 code (생략) </script>
배포 형태
