Fluid -34- 创建自己的常用站点导航页

为为为什么

发布于 2023-03-10 16:11:38

6060

发布于 2023-03-10 16:11:38

文章被收录于专栏：又见苍岚

工作学习中经常会查阅各种网站的资料，或者使用很多在线工具，如果可以在自己的博客中创建个人的站点导航应该会方便得多，本文记录实现过程。

实现思路

主要的实现流程图如下

具体实现

添加导航

在主题配置文件中添加 SiteMap 导航页

menu:
  - { key: "sitemap", link: "/site-map/", icon: "iconfont icon-ic_fly" , event_key : "Navigation-SiteMap"}

同时配置中文翻译内容

hexo/source/_data/languages/zh-CN.yml 文件

sitemap:
  menu: '导航'
  title: '导航'
  subtitle: '站点导航'

站点信息

在主题配置文件中添加站点信息：

支持站点分类，同一类别站点放在一起，这部分内容可以根据自己情况定义

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，在 themes\fluid\layout 中创建 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 代码

/* 站点导航 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;
}