Jekyll静态博客加入一些小功能

加入搜索功能

所需文件：

正文

将所给文件按以下结构放入网页目录根目录（其中main为根目录名）
```
 └─main
 │─ search.json
 │
 └─ js
    │─── simple-jekyll-search.js
    └─── simple-jekyll-search.min.js
	
```
其中search.json可替换为search_full，即可实现全文搜索

将以下css样式放入相应的样式文件（Jekyll为hux-blog.min.css）

 #search-input {
 width: 90%;
 height: 35px;
 color: #333;
 background-color: rgba(227,231,236,.2);
 line-height: 35px;
 padding:0px 16px;
 border: 1px solid #c0c0c0;
 font-size: 16px;
 font-weight: bold;
 border-radius: 17px;
 outline: none;
 box-sizing: border-box;
 box-shadow: inset 0 0px 0px rgba(0,0,0,.075), 0 0 0px rgba(102,175,233,.6);
 }
 #search-input:focus {
 outline: none;
 border-color: rgb(102, 175, 233);
 background-color: #fff;
 box-shadow: inset 0 1px 1px rgba(0,0,0,.035), 0 0 8px #0085a1;
 }

其中search-input:focus为进入输入状态时搜索框样式

css也可以直接放入同html文件中：

 <style type="text/css">
     #search-input {
         width: 90%;
         height: 35px;
         color: #333;
         background-color: rgba(227,231,236,.2);
         line-height: 35px;
         padding:0px 16px;
         border: 1px solid #c0c0c0;
         font-size: 16px;
         font-weight: bold;
         border-radius: 17px;
         outline: none;
         box-sizing: border-box;
         box-shadow: inset 0 0px 0px rgba(0,0,0,.075), 0 0 0px 				rgba(102,175,233,.6);
     }
     #search-input:focus {
         outline: none;
         border-color: rgb(102, 175, 233);
         background-color: #fff;
         box-shadow: inset 0 1px 1px rgba(0,0,0,.035), 0 0 8px #0085a1;
     }
 </style>

将以下html放入相应的html页面文件，此处放入page.html

 <!-- Search -->
	
 <section>
     <hr class="hidden-sm hidden-xs">
     <h5><a href="/tags/">Search</a></h5>
     <div id="search-container">
       <input type="text" id="search-input" placeholder="search...">
       <ul id="results-container"></ul>
     </div>
	
 <!-- Search_script -->
     <script src="/js/simple-jekyll-search.min.js" type="text/javascript"></script>
     <script type="text/javascript">
         SimpleJekyllSearch({
             searchInput: document.getElementById('search-input'),
             resultsContainer: document.getElementById('results-container'),
             json: '/search.json',
             searchResultTemplate: '<li><a href="{url}" title="{desc}">{title}</a></li>', // 文章列表模板
             noResultsText: '没有搜索到文章', // 无搜索数据提示语
             limit: 20, // 返回最大文章数
             fuzzy: false // 是否模糊匹配
         })
     </script>
 </section>
	

加入回到顶部按钮

将以下html放入相应的页面文件（本次放入footer.html），位置为</footer>标签内

 <!-- 回到顶部按钮-->
	
 <div id="backtop">
     <a title="回到顶部" href="#">top</a>
 </div> 

将以下css样式放入该页面引用的相应的css文件中

 /*回到顶部按钮样式*/
	
 #backtop a { /* back to top button */
     text-align: center;
     line-height: 35px;
     font-family: -apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,"PingFang SC","Hiragino Sans GB",STHeiti,"Microsoft YaHei","Microsoft JhengHei","Source Han Sans SC","Noto Sans CJK SC","Source Han Sans CN","Noto Sans SC","Source Han Sans TC","Noto Sans CJK TC","WenQuanYi Micro Hei",SimSun,sans-serif;
     font-size: 16px;
     width:40px;
     height: 40px;
     position: fixed;
     bottom: 40px; /* 小按钮到浏览器底边的距离 */
     right: 60px; /* 小按钮到浏览器右边框的距离 */
     color: #141414; /* 小按钮中文字的颜色 */
     z-index: 1000;
     background: rgba(242,242,242,.30); /* 小按钮底色 */
     padding: auto; /* 小按钮中文字到按钮边缘的距离 */
     border-radius: 50px; /* 小按钮圆角的弯曲程度（半径）*/
     -moz-border-radius: 50px;
     -webkit-border-radius: 1px;
     font-weight: bold; /* 小按钮中文字的粗细 */
     text-decoration: none !important;
     box-shadow:1px 2px 7px rgba(0,0,0,0.35), 0 1px 0 #ffffff inset;
 }
	
 #backtop a:hover { /* 小按钮上有鼠标悬停时 */
     background: rgba(48, 48, 48, 0.8); /* 小按钮的底色 */
     color: #fff; /* 文字颜色 */
 }
	

如若想要控制不同屏幕大小设备使用不同的样式，则在css中使用：

 @media (max-width:1199px) {
	
 }

该意为屏幕最大为1199px（即小于等于1199px）的屏幕使用其中样式

来自：https://github.com/christian-fei/Simple-Jekyll-Search

Jekyll静态博客加入一些小功能

文章搜索、回到顶部按钮

加入搜索功能

所需文件：

正文

加入回到顶部按钮

END

CATALOG

FEATURED TAGS

FRIENDS