Add `show_featured_image` function & Update content

content/posts/2017/raspberrypi-lede-setup.md

@@ -18,6 +18,8 @@ tags:
 
 下载.gz格式的压缩包，解压，用Win32 Disk Imager将镜像烧录至SD卡。这个就不用多说了，相信玩树莓派的都熟悉。
 
+**2017.6.17 更新**：经测试，目前的最新版17.04工作不正常，17.01.2版能用。把下载链接里的所有`17.01.4`改成`17.01.2`即可下载到17.01.2版。至于17.01.3版请自行测试。这里再提供一个3B的[百度网盘下载](https://pan.baidu.com/s/1Vi-4PdQdJTw7ZJs41BUlyw)。
+
 由于树莓派刷LEDE系统后默认IP地址是192.168.1.1，这会与一般路由器的网关地址冲突，所以如果我们要把树莓派直接连到现有路由器上，以实现同一个网段对树莓派的访问，首先就要更改路由器的LAN IP为192.168.1.0或其他你开心的数字（ 确保是同一个网段）。要是不想碰现有路由器，或者你现在并没有路由器（正准备用树莓派做一个），可以直接把树莓派用网线连接至电脑（LEDE的WLAN默认是关闭的，只能用有线；此时最好关闭电脑的WLAN）。我这里就是直接有线连接的。浏览器输入192.168.1.1进入LEDE的Luci web界面。
 
 ![Luci web](https://ojirvqiyr.qnssl.com/images/2017/img006.gif)

layouts/partials/header.html

@@ -4,7 +4,7 @@
 				<div class="site-branding">
 					<a href="{{.Site.BaseURL}}">{{ .Site.Title }}</a>
 				</div>
-				<nav class="site-nav mobile">
+				<nav class="site-nav hide-in-mobile">
 					{{- range .Site.Params.mainMenu }}
 					<a href="{{ .link }}">{{ .text }}</a>
 					{{- end }}
@@ -12,9 +12,12 @@
 			</div>
 			<div class="hdr-right">
 				<div class="hdr-icons">
-					<a href="https://twitter.com/mytrack03" target="_blank" class="mobile"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-twitter"><path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path></svg></a>
-					<a href="http://t.me/mytrack3" target="_blank" class="mobile"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" class="feather"><path d="m 22.05,1.577 c -0.393,-0.016 -0.784,0.08 -1.117,0.235 -0.484,0.186 -4.92,1.902 -9.41,3.64 C 9.263,6.325 7.005,7.198 5.267,7.867 3.53,8.537 2.222,9.035 2.153,9.059 c -0.46,0.16 -1.082,0.362 -1.61,0.984 -0.79581202,1.058365 0.21077405,1.964825 1.004,2.499 1.76,0.564 3.58,1.102 5.087,1.608 0.556,1.96 1.09,3.927 1.618,5.89 0.174,0.394 0.553,0.54 0.944,0.544 l -0.002,0.02 c 0,0 0.307,0.03 0.606,-0.042 0.3,-0.07 0.677,-0.244 1.02,-0.565 0.377,-0.354 1.4,-1.36 1.98,-1.928 l 4.37,3.226 0.035,0.02 c 0,0 0.484,0.34 1.192,0.388 0.354,0.024 0.82,-0.044 1.22,-0.337 0.403,-0.294 0.67,-0.767 0.795,-1.307 0.374,-1.63 2.853,-13.427 3.276,-15.38 L 23.676,4.725 C 23.972,3.625 23.863,2.617 23.18,2.02 22.838,1.723 22.444,1.593 22.05,1.576 Z"></path></svg></a>
-					<a href="https://github.com/Track3" target="_blank" class="mobile"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-github"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg></a>
+					{{ with .Params.featuredImg -}}
+					<button id="show-img-btn" class="hdr-btn" onclick="showFeaturedImg()"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-image"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg></button>
+					{{ end -}}
+					<a href="https://twitter.com/mytrack03" target="_blank" class="hide-in-mobile"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-twitter"><path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path></svg></a>
+					<a href="http://t.me/mytrack3" target="_blank" class="hide-in-mobile"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" class="feather"><path d="m 22.05,1.577 c -0.393,-0.016 -0.784,0.08 -1.117,0.235 -0.484,0.186 -4.92,1.902 -9.41,3.64 C 9.263,6.325 7.005,7.198 5.267,7.867 3.53,8.537 2.222,9.035 2.153,9.059 c -0.46,0.16 -1.082,0.362 -1.61,0.984 -0.79581202,1.058365 0.21077405,1.964825 1.004,2.499 1.76,0.564 3.58,1.102 5.087,1.608 0.556,1.96 1.09,3.927 1.618,5.89 0.174,0.394 0.553,0.54 0.944,0.544 l -0.002,0.02 c 0,0 0.307,0.03 0.606,-0.042 0.3,-0.07 0.677,-0.244 1.02,-0.565 0.377,-0.354 1.4,-1.36 1.98,-1.928 l 4.37,3.226 0.035,0.02 c 0,0 0.484,0.34 1.192,0.388 0.354,0.024 0.82,-0.044 1.22,-0.337 0.403,-0.294 0.67,-0.767 0.795,-1.307 0.374,-1.63 2.853,-13.427 3.276,-15.38 L 23.676,4.725 C 23.972,3.625 23.863,2.617 23.18,2.02 22.838,1.723 22.444,1.593 22.05,1.576 Z"></path></svg></a>
+					<a href="https://github.com/Track3" target="_blank" class="hide-in-mobile"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-github"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg></a>
 					<!-- <button id="search-btn" class="hdr-btn"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg></button> -->
 					<!-- <button id="toc-btn" class="hdr-btn"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-list"><line x1="8" y1="6" x2="21" y2="6"></line><line x1="8" y1="12" x2="21" y2="12"></line><line x1="8" y1="18" x2="21" y2="18"></line><line x1="3" y1="6" x2="3" y2="6"></line><line x1="3" y1="12" x2="3" y2="12"></line><line x1="3" y1="18" x2="3" y2="18"></line></svg></button> -->
 					<button id="menu-btn" class="hdr-btn"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg></button>

layouts/posts/single.html

@@ -4,7 +4,7 @@
 
 {{ define "main" }}
 	{{- with .Params.featuredImg }}
-		<div class="bg-img" style="width: 100%;height: 100%;opacity: .03;z-index: -1;position: fixed;top: 0;background-image: url({{.}});background-attachment: fixed;background-repeat: no-repeat;background-size: cover;"></div>
+		<div id="bg-img" class="bg-img" style="background-image: url({{.}});" onclick="showContent()"></div>
 	{{- end }}
 	<main class="site-main section-inner animated bounceInUp">
 		<article class="thin">

static/js/main.js

@@ -36,6 +36,18 @@ if (haveHeader == true) {
   });
 }
 
+// Show Featured Image
+//
+const showFeaturedImg = () => {
+  console.log('show Img')
+  document.getElementById('bg-img').classList.add('show-bg-img');
+}
+
+const showContent = () => {
+  console.log('show Content')
+  document.getElementById('bg-img').classList.remove('show-bg-img');
+}
+
 //Load Comments
 //
 let commentsLoaded = false;

static/scss/style.scss

@@ -182,6 +182,7 @@ table {
   border: none;
   background: none;
   padding: 0;
+  cursor: pointer;
 }
 
 #menu-btn, #search-btn {
@@ -349,6 +350,29 @@ table {
 
 // single.html
 //
+.bg-img {
+  width: 100%;
+  height: 100%;
+  opacity: .03;
+  z-index: -1;
+  position: fixed;
+  top: 0;
+  background-attachment: fixed;
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: center;
+  transition: opacity .5s;
+}
+
+.show-bg-img {
+  z-index: 100;
+  opacity: 1;
+}
+
+#show-img-btn {
+  margin-right: .5em;
+}
+
 .post-header {
   margin-top: 1.2em;
   margin-bottom: 1.5em;
@@ -456,6 +480,10 @@ figure.right {
 
   @include aTag;
 
+  .vcontrol {
+    letter-spacing: normal;
+  }
+
   .vbtn {
     background-color: #7d828a;
   }
@@ -520,7 +548,7 @@ figure.right {
 }
 
 @media (max-width: 760px) {
-  .mobile, .site-nav.mobile {
+  .hide-in-mobile, .site-nav.hide-in-mobile {
     display: none;
   }
   #menu-btn, #search-btn {