Merge pull request #4 from kazu634/make-another-sections
Make `Labs` section
This commit is contained in:
GitHub
commit
edb7a95bc4
|
|
@ -0,0 +1,9 @@
|
||||||
|
---
|
||||||
|
title: Labs Page
|
||||||
|
date: 2019-04-08
|
||||||
|
publishdate: 2019-04-08
|
||||||
|
---
|
||||||
|
|
||||||
|
まとまった分量の技術的な文章を置くために設置してみました。主に`Javascript`や`CSS`を使った実験ができればいいなと思っています
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -0,0 +1,48 @@
|
||||||
|
+++
|
||||||
|
title="Leaflet.jsでMapboxのタイルを用いて地図を表示する"
|
||||||
|
date=2019-04-08
|
||||||
|
publishdate=2019-04-08
|
||||||
|
Description="Leaflet.jsでMapboxのタイルを用いて地図を表示するよ"
|
||||||
|
image="https://farm9.staticflickr.com/8462/29581774242_bf25a0a820_z.jpg"
|
||||||
|
leaflet=true
|
||||||
|
+++
|
||||||
|
|
||||||
|
[Leaflet.js](https://leafletjs.com/)でMapboxのタイルを用いて地図を表示してみます:
|
||||||
|
|
||||||
|
<div id="mapid"></div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
var mymap = L.map('mapid').setView([35.7142, 139.7774], 13)
|
||||||
|
|
||||||
|
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1Ijoia2F6dTYzNCIsImEiOiJjanU4OHg0YjIyMjcxNDNsb2dnM2k5bHhqIn0.dsjWTh-G_TcJ9bOGWLvT2Q', {
|
||||||
|
attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
|
||||||
|
maxZoom: 18,
|
||||||
|
id: 'mapbox.streets',
|
||||||
|
accessToken: 'pk.eyJ1Ijoia2F6dTYzNCIsImEiOiJjanU4OHg0YjIyMjcxNDNsb2dnM2k5bHhqIn0.dsjWTh-G_TcJ9bOGWLvT2Q'
|
||||||
|
}).addTo(mymap);
|
||||||
|
|
||||||
|
var marker = L.marker([35.7142, 139.7774]).addTo(mymap);
|
||||||
|
marker.bindPopup("<b>Hello world!</b><br>I am a popup.").openPopup();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
## コード
|
||||||
|
こんな感じになります:
|
||||||
|
|
||||||
|
```
|
||||||
|
<div id="mapid"></div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
var mymap = L.map('mapid').setView([35.7142, 139.7774], 13)
|
||||||
|
|
||||||
|
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=<access_token>' {
|
||||||
|
attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
|
||||||
|
maxZoom: 18,
|
||||||
|
id: 'mapbox.streets',
|
||||||
|
accessToken: 'access_token'
|
||||||
|
}).addTo(mymap);
|
||||||
|
|
||||||
|
var marker = L.marker([35.7142, 139.7774]).addTo(mymap);
|
||||||
|
marker.bindPopup("<b>Hello world!</b><br>I am a popup.").openPopup();
|
||||||
|
</script>
|
||||||
|
```
|
||||||
|
|
||||||
|
|
@ -0,0 +1,19 @@
|
||||||
|
{{ partial "header.html" . }}
|
||||||
|
|
||||||
|
<!-- Main Section Layout
|
||||||
|
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
||||||
|
<main id="list" role="main">
|
||||||
|
<div class="article-header light-gray"><h1>{{ .Title }}</h1></div>
|
||||||
|
{{.Content}}
|
||||||
|
<br>
|
||||||
|
{{ range .Data.Pages }}
|
||||||
|
<div class="summary">
|
||||||
|
<h2><a href="{{ .Permalink }}">{{ .Title }} {{ if .Draft }}:: DRAFT{{end}}</a></h2>
|
||||||
|
<div class="meta">
|
||||||
|
{{ .Date.Format "Jan 2, 2006" }}: {{.Description}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{{ end }}
|
||||||
|
</main>
|
||||||
|
|
||||||
|
{{ partial "footer.html" . }}
|
||||||
|
|
@ -0,0 +1,32 @@
|
||||||
|
{{ partial "labs-header-content.html" . }}
|
||||||
|
|
||||||
|
<!-- Main Section Layout
|
||||||
|
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
||||||
|
<main id="single" role="main">
|
||||||
|
<div class="article-header">
|
||||||
|
<h1>{{ .Title }}</h1>
|
||||||
|
<div class="meta">
|
||||||
|
{{ .Date.Format "Jan 2, 2006" }}
|
||||||
|
{{ range .Params.categories }}
|
||||||
|
#<a href="/categories/{{ . | urlize }}">{{ . }}</a>
|
||||||
|
{{ end }}
|
||||||
|
{{ range .Params.tags }}
|
||||||
|
#<a href="/tags/{{ . | urlize }}">{{ . }}</a>
|
||||||
|
{{ end }}: {{ .Description }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<article>
|
||||||
|
{{ .Content }}
|
||||||
|
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<nav class="pagination">
|
||||||
|
{{ if .Next }}
|
||||||
|
<span class="previous">← <a href="{{ .Next.Permalink }}" rel="prev">{{ .Next.Title }}</a></span>
|
||||||
|
{{ end }}
|
||||||
|
{{ if .Prev }}
|
||||||
|
<span class="next"><a href="{{ .Prev.Permalink }}" rel="next">{{ .Prev.Title }}</a> →</span>
|
||||||
|
{{ end }}
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
{{ partial "footer.html" . }}
|
||||||
|
|
@ -0,0 +1,77 @@
|
||||||
|
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="{{.Site.LanguageCode}}">
|
||||||
|
|
||||||
|
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">
|
||||||
|
|
||||||
|
<!-- Basic Page Needs
|
||||||
|
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>
|
||||||
|
{{ $isHomePage := eq .Title .Site.Title }}{{ .Title }}{{ if eq $isHomePage false }} | {{ .Site.Title }}{{ end }}
|
||||||
|
</title>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Mobile Specific Metas
|
||||||
|
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
||||||
|
<meta name="viewport" content="width=device-width,user-scalable=no,maximum-scale=1,initial-scale=1">
|
||||||
|
|
||||||
|
<!-- HTTPS Canonical URL
|
||||||
|
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
||||||
|
<link rel="canonical" href="{{ .Permalink }}"/>
|
||||||
|
|
||||||
|
<!-- CSS
|
||||||
|
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
||||||
|
<link rel="stylesheet" href="/css/sanitize.css">
|
||||||
|
<link rel="stylesheet" href="/css/responsive.css">
|
||||||
|
<link rel="stylesheet" href="/css/highlight_monokai.css">
|
||||||
|
<link rel="stylesheet" href="/css/theme.css">
|
||||||
|
<link rel="stylesheet" href="/css/custom.css">
|
||||||
|
|
||||||
|
<!-- RSS
|
||||||
|
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
||||||
|
<link href="{{ .Site.BaseURL }}index.xml" rel="alternate" type="application/rss+xml" title="{{ .Site.Title }}" />
|
||||||
|
<link href="{{ .Site.BaseURL }}index.xml" rel="feed" type="application/rss+xml" title="{{ .Site.Title }}" />
|
||||||
|
|
||||||
|
<!-- ShareThis Buttons
|
||||||
|
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
||||||
|
<script type="text/javascript">var switchTo5x=true;</script>
|
||||||
|
<script type="text/javascript">stLight.options({publisher: "2b9fffc6-b3fe-4988-a0ef-4f9dcce98eaa", doNotHash: true, doNotCopy: true, hashAddressBar: false});</script>
|
||||||
|
|
||||||
|
<!-- OGP Settings
|
||||||
|
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
||||||
|
<meta property="fb:app_id" content="951084758293113" />
|
||||||
|
<meta property="og:site_name" content="His Greatness Lies in His Sense of Responsibility" />
|
||||||
|
<meta property="og:type" content="article" />
|
||||||
|
<meta property="og:url" content="{{ .Permalink }}" />
|
||||||
|
<meta property="og:title" content="{{ .Title }}" />
|
||||||
|
{{ if .Params.image }}<meta property="og:image" content="{{ .Params.image }}" />{{ end }}
|
||||||
|
<meta property="og:locale" content="ja_JP" />
|
||||||
|
<meta property="og:description" content="{{ .Description }}" />
|
||||||
|
<meta property="article:publisher" content="https://www.facebook.com/kazu634" />
|
||||||
|
</head>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
|
||||||
|
<!-- Header Section Layout
|
||||||
|
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
||||||
|
<header role="banner">
|
||||||
|
<div class="row gutters">
|
||||||
|
<div id="site-title" class="col span_6">
|
||||||
|
<h1><a href="{{ .Site.BaseURL }}">{{ .Site.Title }}</a></h1>
|
||||||
|
{{ with .Site.Params.subtitle }}<h2>{{ . }}</h2>{{ end }}
|
||||||
|
</div>
|
||||||
|
<div id="social" class="col span_6">
|
||||||
|
<ul>
|
||||||
|
<li><a href="https://blog.kazu634.com/labs/">Labs</a></li>
|
||||||
|
{{ with .Site.Params.twitter }}<li><a href="{{ . }}" target="_blank">Twitter</a></li>{{ end }}
|
||||||
|
{{ with .Site.Params.facebook }}<li><a href="{{ . }}" target="_blank">Facebook</a></li>{{ end }}
|
||||||
|
{{ with .Site.Params.github }}<li><a href="{{ . }}" target="_blank">GitHub</a></li>{{ end }}
|
||||||
|
{{ if .Site.Params.showsRSS }}<li><a href="{{ .Site.BaseURL }}index.xml" type="application/rss+xml" target="_blank">RSS</a></li>{{ end }}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
@ -0,0 +1,66 @@
|
||||||
|
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="{{.Site.LanguageCode}}">
|
||||||
|
|
||||||
|
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">
|
||||||
|
|
||||||
|
<!-- Basic Page Needs
|
||||||
|
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>
|
||||||
|
{{ $isHomePage := eq .Title .Site.Title }}{{ .Title }}{{ if eq $isHomePage false }} | {{ .Site.Title }}{{ end }}
|
||||||
|
</title>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Mobile Specific Metas
|
||||||
|
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
||||||
|
<meta name="viewport" content="width=device-width,user-scalable=no,maximum-scale=1,initial-scale=1">
|
||||||
|
|
||||||
|
<!-- HTTPS Canonical URL
|
||||||
|
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
||||||
|
<link rel="canonical" href="{{ .Permalink }}"/>
|
||||||
|
|
||||||
|
<!-- CSS
|
||||||
|
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
||||||
|
<link rel="stylesheet" href="/css/sanitize.css">
|
||||||
|
<link rel="stylesheet" href="/css/responsive.css">
|
||||||
|
<link rel="stylesheet" href="/css/highlight_monokai.css">
|
||||||
|
<link rel="stylesheet" href="/css/theme.css">
|
||||||
|
<link rel="stylesheet" href="/css/custom.css">
|
||||||
|
|
||||||
|
<!-- RSS
|
||||||
|
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
||||||
|
<link href="{{ .Site.BaseURL }}index.xml" rel="alternate" type="application/rss+xml" title="{{ .Site.Title }}" />
|
||||||
|
<link href="{{ .Site.BaseURL }}index.xml" rel="feed" type="application/rss+xml" title="{{ .Site.Title }}" />
|
||||||
|
|
||||||
|
<!-- ShareThis Buttons
|
||||||
|
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
||||||
|
<script type="text/javascript">var switchTo5x=true;</script>
|
||||||
|
<script type="text/javascript">stLight.options({publisher: "2b9fffc6-b3fe-4988-a0ef-4f9dcce98eaa", doNotHash: true, doNotCopy: true, hashAddressBar: false});</script>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
|
||||||
|
<!-- Header Section Layout
|
||||||
|
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
||||||
|
<header role="banner">
|
||||||
|
<div class="row gutters">
|
||||||
|
<div id="site-title" class="col span_6">
|
||||||
|
<h1><a href="{{ .Site.BaseURL }}">{{ .Site.Title }}</a></h1>
|
||||||
|
{{ with .Site.Params.subtitle }}<h2>{{ . }}</h2>{{ end }}
|
||||||
|
</div>
|
||||||
|
<div id="social" class="col span_6">
|
||||||
|
<ul>
|
||||||
|
<li><a href="https://blog.kazu634.com/labs/">Labs</a></li>
|
||||||
|
{{ with .Site.Params.twitter }}<li><a href="{{ . }}" target="_blank">Twitter</a></li>{{ end }}
|
||||||
|
{{ with .Site.Params.facebook }}<li><a href="{{ . }}" target="_blank">Facebook</a></li>{{ end }}
|
||||||
|
{{ with .Site.Params.github }}<li><a href="{{ . }}" target="_blank">GitHub</a></li>{{ end }}
|
||||||
|
{{ if .Site.Params.showsRSS }}<li><a href="{{ .Site.BaseURL }}index.xml" type="application/rss+xml" target="_blank">RSS</a></li>{{ end }}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
@ -0,0 +1,92 @@
|
||||||
|
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="{{.Site.LanguageCode}}">
|
||||||
|
|
||||||
|
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">
|
||||||
|
|
||||||
|
<!-- Basic Page Needs
|
||||||
|
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>
|
||||||
|
{{ $isHomePage := eq .Title .Site.Title }}{{ .Title }}{{ if eq $isHomePage false }} | {{ .Site.Title }}{{ end }}
|
||||||
|
</title>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Mobile Specific Metas
|
||||||
|
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
||||||
|
<meta name="viewport" content="width=device-width,user-scalable=no,maximum-scale=1,initial-scale=1">
|
||||||
|
|
||||||
|
<!-- HTTPS Canonical URL
|
||||||
|
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
||||||
|
<link rel="canonical" href="{{ .Permalink }}"/>
|
||||||
|
|
||||||
|
<!-- CSS
|
||||||
|
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
||||||
|
<link rel="stylesheet" href="/css/sanitize.css">
|
||||||
|
<link rel="stylesheet" href="/css/responsive.css">
|
||||||
|
<link rel="stylesheet" href="/css/highlight_monokai.css">
|
||||||
|
<link rel="stylesheet" href="/css/theme.css">
|
||||||
|
<link rel="stylesheet" href="/css/custom.css">
|
||||||
|
|
||||||
|
{{ if .Params.leaflet }}
|
||||||
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="crossorigin=""/>
|
||||||
|
|
||||||
|
<style type="text/css">
|
||||||
|
<!--
|
||||||
|
#mapid { height: 600px; }
|
||||||
|
-->
|
||||||
|
</style>
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
<!-- RSS
|
||||||
|
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
||||||
|
<link href="{{ .Site.BaseURL }}index.xml" rel="alternate" type="application/rss+xml" title="{{ .Site.Title }}" />
|
||||||
|
<link href="{{ .Site.BaseURL }}index.xml" rel="feed" type="application/rss+xml" title="{{ .Site.Title }}" />
|
||||||
|
|
||||||
|
<!-- Javascript
|
||||||
|
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
||||||
|
<script type="text/javascript">var switchTo5x=true;</script>
|
||||||
|
<script type="text/javascript">stLight.options({publisher: "2b9fffc6-b3fe-4988-a0ef-4f9dcce98eaa", doNotHash: true, doNotCopy: true, hashAddressBar: false});</script>
|
||||||
|
|
||||||
|
{{ if .Params.leaflet }}
|
||||||
|
<!-- Make sure you put this AFTER Leaflet's CSS -->
|
||||||
|
<script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js" integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg==" crossorigin=""></script>
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
<!-- OGP Settings
|
||||||
|
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
||||||
|
<meta property="fb:app_id" content="951084758293113" />
|
||||||
|
<meta property="og:site_name" content="His Greatness Lies in His Sense of Responsibility" />
|
||||||
|
<meta property="og:type" content="article" />
|
||||||
|
<meta property="og:url" content="{{ .Permalink }}" />
|
||||||
|
<meta property="og:title" content="{{ .Title }}" />
|
||||||
|
{{ if .Params.image }}<meta property="og:image" content="{{ .Params.image }}" />{{ end }}
|
||||||
|
<meta property="og:locale" content="ja_JP" />
|
||||||
|
<meta property="og:description" content="{{ .Description }}" />
|
||||||
|
<meta property="article:publisher" content="https://www.facebook.com/kazu634" />
|
||||||
|
</head>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
|
||||||
|
<!-- Header Section Layout
|
||||||
|
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
||||||
|
<header role="banner">
|
||||||
|
<div class="row gutters">
|
||||||
|
<div id="site-title" class="col span_6">
|
||||||
|
<h1><a href="{{ .Site.BaseURL }}">{{ .Site.Title }}</a></h1>
|
||||||
|
{{ with .Site.Params.subtitle }}<h2>{{ . }}</h2>{{ end }}
|
||||||
|
</div>
|
||||||
|
<div id="social" class="col span_6">
|
||||||
|
<ul>
|
||||||
|
<li><a href="https://blog.kazu634.com/labs/">Labs</a></li>
|
||||||
|
{{ with .Site.Params.twitter }}<li><a href="{{ . }}" target="_blank">Twitter</a></li>{{ end }}
|
||||||
|
{{ with .Site.Params.facebook }}<li><a href="{{ . }}" target="_blank">Facebook</a></li>{{ end }}
|
||||||
|
{{ with .Site.Params.github }}<li><a href="{{ . }}" target="_blank">GitHub</a></li>{{ end }}
|
||||||
|
{{ if .Site.Params.showsRSS }}<li><a href="{{ .Site.BaseURL }}index.xml" type="application/rss+xml" target="_blank">RSS</a></li>{{ end }}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
Loading…
Reference in New Issue