工作学习中经常会查阅各种网站的资料，或者使用很多在线工具，如果可以在自己的博客中创建个人的站点导航应该会方便得多，本文记录实现过程。
实现思路
主要的实现流程图如下
具体实现
添加导航
在主题配置文件中添加 SiteMap 导航页
代码语言：javascript复制menu:
- { key: "sitemap", link: "/site-map/", icon: "iconfont icon-ic_fly" , event_key : "Navigation-SiteMap"}
同时配置中文翻译内容
代码语言：javascript复制
hexo/source/_data/languages/zh-CN.yml文件
sitemap:
menu: '导航'
title: '导航'
subtitle: '站点导航'
站点信息
在主题配置文件中添加站点信息：
代码语言：javascript复制支持站点分类，同一类别站点放在一起，这部分内容可以根据自己情况定义
vvd_local_links:
title: 网址导航
subtitle: 导航页
vvd_source_root: https://101.43.39.125
lost_page: https://101.43.39.125/HexoFiles/SiteFiles/lostpage.jpg
screecshot_prefix: https://101.43.39.125/HexoFiles/SiteFiles/screenshots/
families:
- family_name: 搜索引擎
intr: 不懂就问
items:
- name: Google
intro: 谷歌搜索
link: https://www.google.com.hk/
avatar: https://www.google.com.hk/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png
- name: Baidu
intro: 百度搜索
link: https://www.baidu.com/
avatar: https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png
- name: Google Scholar
intro: 站在巨人的肩膀上
link: https://scholar.google.com/
avatar: https://scholar.google.com/intl/zh-CN/scholar/images/1x/scholar_logo_64dp.png
- family_name: 官方文档
intr: 图书馆
items:
- name: OpenCV
intro: OpenCV Tutorials
link: https://docs.opencv.org/4.7.0/d9/df8/tutorial_root.html
avatar: https://docs.opencv.org/4.7.0/opencv-logo-small.png
- name: pyecharts
intro: A Python Echarts Plotting Library.
link: https://pyecharts.org/#/
avatar: https://user-images.githubusercontent.com/19553554/71825144-2d568180-30d6-11ea-8ee0-63c849cfd934.png
- name: scipy
intro: Numpy and Scipy Documentation.
link: https://docs.scipy.org/doc/
avatar: https://docs.scipy.org/doc/_static/img/scipy_org_logo.png
主题 layout 文件
我的主题是 fluid，在 themesfluidlayout 中创建 site-map.ejs 文件
<%
page.layout = "links"
page.title = theme.vvd_local_links.title || __('links.title')
page.subtitle = theme.vvd_local_links.subtitle || __('links.subtitle')
page.banner_img = theme.links.banner_img
page.banner_img_height = theme.links.banner_img_height
page.banner_mask_alpha = theme.links.banner_mask_alpha
page.comment = theme.links.comments.type
%>
<script src="https://101.43.39.125/HexoFiles/js/md5/md5.min.js"> </script>
<script src="https://101.43.39.125/HexoFiles/js/vvd_js/jquery.js"> </script>
<script>
var total_links={};
var index = 0;
<% for(const sub_item of theme.vvd_local_links.families || []) { %>
<% for(const link_info of sub_item.items || []) { %>
total_links[index] = '<%- link_info.link %>'
index = index 1;
<% } %>
<% } %>
var url = 'https://101.43.39.125:6111/make_post_img'
$.post(url, total_links);
</script>
<div class="siteMapWrapper">
<% for(const sub_item of theme.vvd_local_links.families || []) { %>
<p><h5> <%- sub_item.family_name %> </h5> </p>
<% for(const link_info of sub_item.items || []) { %>
<a href="<%- link_info.link %>">
<li class='sitemapLi'>
<div class='picBox'>
<div class='show'>
<div class="sitemapCard">
<div class="sitemap-avatar-container">
<div class="sitemap-avatar">
<img src='<%- link_info.avatar %>' alt="<%- link_info.name %>" onerror="this.onerror=null; this.src=this.srcset='/img/avatar.png'">
</div>
</div>
<div class="sitemap-intro">
<div class="sitemap-sub-title"><%- link_info.name %></div>
<div class="sitemap-sub-intro"><%- link_info.intro %></div>
</div>
</div>
</div>
<div class='hide'>
<div class='hide-sitemap-screenshot'>
<img src='<%- theme.vvd_local_links.screecshot_prefix %><%- md5(link_info.link) %>.jpg' alt="<%- link_info.name %>" onerror="this.onerror=null; this.src=this.srcset='<%- theme.vvd_local_links.lost_page %>'">
</div>
</div>
</div>
</li>
</a>
<% } %>
<% } %>
</div>
<script src="https://101.43.39.125/HexoFiles/js/site-map/jquery-1.10.2.js"></script>
<script src="https://101.43.39.125/HexoFiles/js/site-map/demo.js"></script>
<%- inject_point('linksComments') %>
核心目的：
- 获取主题配置文件中的站点信息
- 整理站点信息向后端请求截屏服务
- 根据站点信息创建网页 html 文件
后端截屏服务
参考 Hexo -42- 服务器搭建网页自动截图服务
特效
js 实现 3D 翻转
参考了 jq22 网站中的特效，根据实际情况做了调整，修改了 bug，用在这里的
css
在 hexo/source/css/custom.css 文件中添加与 ejs 中对应的类定义，自己乱搞的，供大家参考
css 代码
代码语言：javascript复制/* 站点导航 css */
*{
margin:0;
}
body{
background-color: #2F2F2F;
}
.siteMapWrapper{
max-width:900px;
margin:80px auto;
}
.siteMapWrapper li{
position: relative;
width: 112px;
height: 112px;
list-style:none;
margin: 5px;
display: inline-block;
perspective: 300px;
}
.picBox{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transform-style: preserve-3d;
transform-origin: 50% 50% -56px;
animation: 200ms ease-out 0ms 1 normal forwards;
}
.show,
.hide{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.sitemap-sub-title{
white-space: nowrap;
font-weight: bold;
color: #3c4858;
line-height: 1.3;
box-sizing: border-box;
max-height: 2rem;
font-size: 1rem;
text-overflow: ellipsis;
overflow: hidden;
}
.sitemap-sub-intro{
margin: 0.3rem 0 0 0;
max-height: 2rem;
font-size: 0.85rem;
line-height: 1.2;
color: #718096;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
text-overflow: ellipsis;
overflow: hidden;
}
.hide{
color:#fff;
background-color:#fff;
text-align:center;
line-height:112px;
transform: translate3d(0,0,-1px);
/* 3D空间内移动一个元素的位置 */
}
.sitemapCard{
height: 100%;
width: 100%;
padding: 7%;
background: #fffdfb;
}
.sitemap-avatar-container, .sitemap-intro{
height: 35%;
width: 100%;
padding: 4%;
}
.sitemap-avatar{
width: 100%;
height: 100%;
margin: 0 auto;
position: relative;
}
.sitemap-avatar img{
max-height: 100%;
max-width: 100%;
margin: 0 auto;
bottom: 0;
display: table-cell;
vertical-align: middle;
text-align: center;
}
.hide-sitemap-screenshot img{
max-height: 100%;
max-width: 100%;
margin: 0 auto;
}
.in-top .hide,
.out-top .hide
{
transform-origin: 0% 100%;
transform: translate3d(0, -100%, 0) rotate3d(1,0,0,90deg);
}
.in-top .picBox{
animation-name: in-top;
animation-play-state: running;
}
.out-top .picBox{
animation-name: out-top;
animation-play-state: running;
}
@keyframes in-top {
from {transform: rotate3d(0,0,0,0deg)}
to {transform: rotate3d(-1,0,0,90deg)}
}
@keyframes out-top {
from {transform: rotate3d(-1,0,0,90deg)}
to {transform: rotate3d(0,0,0,0deg)}
}
.in-right .hide,
.out-right .hide {
transform-origin: 0% 0%;
transform: translate3d(100%, 0, 0) rotate3d(0,1,0,90deg);
}
.in-right .picBox{
animation-name: in-right;
animation-play-state: running;
}
.out-right .picBox{
animation-name: out-right;
animation-play-state: running;
}
@keyframes in-right {
from {transform: rotate3d(0,0,0,0deg)}
to {transform: rotate3d(0,-1,0,90deg)}
}
@keyframes out-right {
from {transform: rotate3d(0,-1,0,90deg)}
to {transform: rotate3d(0,0,0,0deg)}
}
.in-bottom .hide,
.out-bottom .hide {
transform-origin: 0% 0%;
transform: translate3d(0, 100%, 0) rotate3d(-1,0,0,90deg);
}
.in-bottom .picBox{
animation-name: in-bottom;
animation-play-state: running;
}
.out-bottom .picBox{
animation-name: out-bottom;
animation-play-state: running;
}
@keyframes in-bottom {
from {transform: rotate3d(0,0,0,0deg)}
to {transform: rotate3d(1,0,0,90deg)}
}
@keyframes out-bottom {
from {transform: rotate3d(1,0,0,90deg)}
to {transform: rotate3d(0,0,0,0deg)}
}
.in-left .hide,
.out-left .hide {
transform-origin: 100% 0;
transform: translate3d(-100%,0,0) rotate3d(0,-1,0,90deg);
}
@keyframes in-left {
from {transform: rotate3d(0,0,0,0deg)}
to {transform: rotate3d(0,1,0,90deg)}
}
@keyframes out-left {
from {transform: rotate3d(0,1,0,90deg)}
to {transform: rotate3d(0,0,0,0deg)}
}
.in-left .picBox{
animation-name: in-left;
animation-play-state: running;
}
.out-left .picBox{
animation-name: out-left;
animation-play-state: running;
}
实现效果
参考资料
- https://cloud.tencent.com/developer/article/2238059
- https://www.jq22.com/
