Free Bootstrap Themes, Templates, Snippets, and Guides
Clean Blog - Bootstrap Blog Theme
Meet Google Drive - One place for all your files
Google Sheets - create and edit spreadsheets online, for free.
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;
}
<!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/[email protected]/dist/js/bootstrap.bundle.min.js>"></script>
<!-- Core theme JS-->
<?!= include('customJS'); ?>
</body>
</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>