Add files via upload

dlzmoe · Mar 18, 2023 · 891efe5 · 891efe5
1 parent 4b43014
commit 891efe5
Show file tree

Hide file tree

Showing 13 changed files with 412 additions and 33 deletions.
diff --git a/README.md b/README.md
@@ -1,9 +1,101 @@
-## hugo-theme-Reader
+<p align="center">
+  <a href="https://github.com/lovezsh/hugo-theme-Reader/">
+    <img src="images/logo.png" alt="Logo" width="300">
+  </a>
+  <p align="center">
+   一款简单的、易于阅读的 hugo 主题，集成了多种功能。
+    <br />
+    <a href="https://github.com/lovezsh/hugo-theme-Reader"><strong>探索本项目的文档 »</strong></a>
+    <br />
+    <br />
+    <a href="https://zburu.com" target="_blank">查看Demo</a>
+    ·
+    <a href="https://github.com/lovezsh/hugo-theme-Reader/issues">报告Bug</a>
+    ·
+    <a href="https://github.com/lovezsh/hugo-theme-Reader/issues">提出新特性</a>
+  </p>
 
-小清新主题
+</p>
 
-![image](https://user-images.githubusercontent.com/65840178/223715989-962a7ced-a71c-4e5a-be6b-61ab6430f8a6.png)
+本篇 README.md 面向主题使用者和开发者，欢迎使用和提交 pr.
 
-![image](https://user-images.githubusercontent.com/65840178/223716023-a114f5b7-e3c0-46e5-a65b-9d63273e6bc8.png)
 
-![image](https://user-images.githubusercontent.com/65840178/223716050-6d5ccd6a-2a2e-42a8-92e6-55e8d70e36cb.png)
+新增：
+- [x] 图片灯箱
+- [x] 文章目录
+- [x] 文章搜索 
+
+### 目录
+
+- [目录](#目录)
+- [上手指南](#上手指南)
+- [文件目录说明](#文件目录说明)
+- [配置](#配置)
+- [贡献者](#贡献者)
+  - [如何参与本项目](#如何参与本项目)
+- [作者](#作者)
+- [版权说明](#版权说明)
+
+### 上手指南
+
+```shell
+git clone git@github.com:lovezsh/hugo-theme-Reader.git themes/Reader
+```
+
+修改 `config.toml`:
+
+```
+theme = "Reader"
+```
+
+注意：`/content` 文件夹下文章文件夹名要改成 `/blog`，不然会出现不可预知的错误。详情看 `/exampleSite` 示例。
+
+### 文件目录说明
+eg:
+
+```shell
++---archetypes
++---exampleSite
+|   +---content
+|   +---layouts
+|   \---static
++---layouts
+|   +---partials
+|   \---_default
+\---static
+    +---css
+    +---fonts
+    +---images
+    +---js
+```
+
+### 配置 
+
+1. 第三方评论使用 artalk.
+
+3. `config.toml` 完整配置文件
+
+[config.toml](./exampleSite/config.toml)
+
+
+### 贡献者
+
+请阅读**CONTRIBUTING.md** 查阅为该项目做出贡献的开发者。
+
+#### 如何参与本项目
+
+贡献使开源社区成为一个学习、激励和创造的绝佳场所。你所作的任何贡献都是**非常感谢**的。
+
+fork 仓库，本地开发完成提交仓库，在提交 pr 时注明修改的功能等，保证在没有 bug 的前提下提交，我会进行 review code.
+
+
+### 作者
+
+子舒（shuxhan@163.com）
+
+ *您也可以在贡献者名单中参看所有参与该项目的开发者。*
+
+### 版权说明
+
+该项目签署了MIT 授权许可，详情请参阅 [LICENSE](https://github.com/lovezsh/hugo-theme-Reader/blob/main/LICENSE)
+
diff --git a/exampleSite/config.toml b/exampleSite/config.toml
@@ -9,7 +9,7 @@ paginate = 999
     endLevel = 3
     ordered = false
   [markup.highlight]
-    style ="github-dark"        # 高亮风格
+    style ="base16-snazzy"    # 高亮风格
     lineNos = false         # 是否显示行号
   [markup.goldmark]         # 是否在md文件中渲染html代码
     [markup.goldmark.renderer]
@@ -33,14 +33,15 @@ paginate = 999
 name = "博客"
 link = "/blog/"
 
-[[params.socials]]
-name = "关于"
-link = "/about/"
-
 [[params.socials]]
 name = "留言"
 link = "/message/"
 
+[[params.socials]]
+name = "关于"
+link = "/about/"
+
 [[params.socials]]
 name = "实验室"
 link = "/lab/"
+
diff --git a/layouts/index.html b/layouts/index.html
@@ -23,6 +23,7 @@
   <br>
   <p>不如吃茶去，随笔 --- 这是子舒的博客。</p>
   <p>前端程序员，喜欢折腾一些技术，研究各种奇怪的程序和网站。</p>
+  <p>网站已经运行 <span id="days">0</span></p>
   <br>
   <p><a href="/blog/">点击查看文章 >></a></p>
   <p><a href="/message/">前往留言板 >></a></p>
@@ -372,4 +373,21 @@
       transform: rotate(-1turn);
     }
   }
-</style>
+</style>
+
+<script>
+  var BootDate = new Date("{{ .Site.Params.buildDate }}");
+  function ShowRunTime(id) {
+    var NowDate = new Date();
+    var RunDateM = parseInt(NowDate - BootDate);
+    var RunDays = Math.floor(RunDateM / (24 * 3600 * 1000));
+    var RunHours = Math.floor(RunDateM % (24 * 3600 * 1000) / (3600 * 1000));
+    var RunMinutes = Math.floor(RunDateM % (24 * 3600 * 1000) % (3600 * 1000) / (60 * 1000));
+    var RunSeconds = Math.round(RunDateM % (24 * 3600 * 1000) % (3600 * 1000) % (60 * 1000) / 1000);
+    var days = RunDays + "天" + RunHours + "时" + RunMinutes + "分" + RunSeconds + "秒了。";
+    document.getElementById(id).innerHTML = days;
+  }
+  ShowRunTime('days');
+  setInterval("ShowRunTime('days')", 1000);
+</script>
+<script src="{{ .Site.Params.staticPrefix }}{{ "js/search.js" | relURL }}"></script>
diff --git a/layouts/index.json b/layouts/index.json
@@ -0,0 +1,5 @@
+{{- $.Scratch.Set "posts" slice -}}
+{{- range where .Site.RegularPages "Type" "blog" -}}
+    {{- $.Scratch.Add "posts" (dict "title" .Title "permalink" .Permalink) -}}
+{{- end -}}
+{{- $.Scratch.Get "posts" | jsonify -}}
diff --git a/layouts/partials/comment.html b/layouts/partials/comment.html
@@ -1,13 +1,13 @@
 <div id="Artalk"></div>
-<link href="" rel="stylesheet">
+<link href="https://artalk.zburu.com/dist/Artalk.css" rel="stylesheet">
 <link rel="stylesheet" href="{{ .Site.Params.staticPrefix }}{{ "css/artalk.css" | relURL }}">
-<script src=""></script>
+<script src="https://artalk.zburu.com/dist/Artalk.js"></script>
 <script>
   new Artalk({
     el: '#Artalk',
     pageKey: '',
     pageTitle: '',
-    server: '',
-    site: '',
+    server: 'https://artalk.zburu.com',
+    site: '子舒的博客',
   })
 </script>
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
@@ -3,13 +3,23 @@
 {{ partial "head.html" . }}
 
 <body>
+  <div class="search-bg"></div>
+  <div id="search">
+    <form class="search">
+      <input type="text" id="searchTerm" name="searchTerm" autocomplete="off" oninput="initiateSearch()">
+    </form>
+    <div id="resultsContainer">
+      <p class="hint">请输入关键词进行搜索...</p>
+    </div>
+  </div>
   <header class="header">
     <a href="/" class="logo"></a>
     <nav class="nav">
       {{ range .Site.Params.socials }}
       <a href="{{ .link }}">{{ .name }}</a>
       {{ end }}
-      <a href="https://zweekly.netlify.app/" target="_blank">周刊</a>
+      <a href="javascript:void(0)" id="startSearch">搜索</a>
+      <a href="https://zweekly.zsh.im/" target="_blank">周刊</a>
     </nav>
     <a href="https://zburu.com/index.xml" target="_blank">RSS</a>
   </header>

diff --git a/layouts/partials/scripts.html b/layouts/partials/scripts.html
@@ -1,2 +1,3 @@
 <script src="{{ .Site.Params.staticPrefix }}{{ "js/simplebox.min.js" | relURL }}"></script>
-<script src="{{ .Site.Params.staticPrefix }}{{ "js/main.js" | relURL }}"></script>
+<script src="{{ .Site.Params.staticPrefix }}{{ "js/main.js" | relURL }}"></script>
+<script src="{{ .Site.Params.staticPrefix }}{{ "js/search.js" | relURL }}"></script>
diff --git a/static/css/artalk.css b/static/css/artalk.css
@@ -41,6 +41,10 @@
   border: 1px solid #eee;
   margin-bottom: 1em;
 }
+.artalk .atk-list-comments-wrap > .atk-comment-wrap .atk-content img[atk-emoticon] {
+  height: 28px;
+  vertical-align: top;
+}
 .artalk .atk-list-footer {
   display: none;
 }

diff --git a/static/css/artalk.scss b/static/css/artalk.scss
@@ -50,6 +50,13 @@
       padding: 10px;
       border: 1px solid #eee;
       margin-bottom: 1em;
+
+      .atk-content {
+        img[atk-emoticon] {
+          height: 28px;
+          vertical-align: top;
+        }
+      }
     }
   }
 

diff --git a/static/css/index.css b/static/css/index.css
@@ -45,10 +45,6 @@ ul {
   margin: 0;
 }
 
-li {
-  list-style: none;
-}
-
 a {
   color: inherit;
   text-decoration: none;
@@ -73,14 +69,16 @@ button {
   border-radius: 4px;
 }
 
-html {
-  overflow-y: scroll;
+* {
+  box-sizing: border-box;
 }
 
 /* Style
 -------------------------------------------------- */
 body {
   background: #fafafa;
+  overflow-x: hidden;
+  overflow-y: scroll;
 }
 
 .home:not(.single) .header {
@@ -135,6 +133,7 @@ body {
   line-height: 64px;
   letter-spacing: 1px;
   transition: all 0.1s linear;
+  white-space: nowrap;
 }
 
 .nav a.active,
@@ -274,7 +273,7 @@ body {
 .post-content img {
   display: block;
   max-width: 100%;
-  margin: 48px auto;
+  margin: 0 auto 40px;
 }
 
 .post-content iframe {
@@ -491,7 +490,7 @@ body {
   background: #f3f3f3;
   padding: 15px;
   border-radius: 6px;
-  margin-top: 20px;
+  list-style: none;
 }
 
 .github {
@@ -519,4 +518,91 @@ body {
   left: 0;
   width: 100%;
   height: 100%;
+}
+
+/* search */
+.search-bg {
+  position: fixed;
+  width: 100vw;
+  height: 100vh;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  background: rgba(0, 0, 0, 0.4);
+  z-index: 99;
+  display: none;
+}
+
+#search {
+  display: none;
+  position: fixed;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 10vh;
+  background: #fff;
+  width: 600px;
+  z-index: 100;
+  padding: 15px;
+  box-shadow: -2px 2px 14px 3px rgba(66, 66, 66, 0.37);
+  border-radius: 5px;
+}
+
+.search {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  height: 36px;
+}
+.search #searchTerm {
+  width: 100%;
+  height: 100%;
+  outline: none;
+  border: none;
+  padding: 0 15px;
+  box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.2);
+}
+
+#resultsContainer {
+  margin-top: 20px;
+  overflow: auto;
+  max-height: 75vh;
+}
+#resultsContainer::-webkit-scrollbar {
+  width: 18px;
+  height: 18px;
+  background: #f2f2f2;
+}
+#resultsContainer::-webkit-scrollbar-thumb {
+  background: #c8c8c8;
+}
+#resultsContainer::-webkit-scrollbar-thumb {
+  transition: border-width 0.5s;
+  border: 5px solid rgba(0, 0, 0, 0);
+  border-radius: 0.8em;
+  background-clip: padding-box;
+}
+#resultsContainer .hint {
+  text-align: center;
+}
+#resultsContainer div {
+  margin-bottom: 10px;
+  margin: 0;
+}
+#resultsContainer div a {
+  display: block;
+  width: 100%;
+  padding: 6px 10px;
+  transition: all 0.1s linear;
+  border-radius: 4px;
+  box-sizing: border-box;
+}
+#resultsContainer div a:hover {
+  background: #f3f3f3;
+}
+
+@media (max-width: 600px) {
+  #search {
+    width: 95%;
+    margin: 0 auto;
+  }
 }