You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
687 lines
31 KiB
687 lines
31 KiB
<!DOCTYPE html> |
|
<html lang=""> |
|
<head><meta charset="UTF-8"/> |
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> |
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> |
|
|
|
|
|
<meta http-equiv="Cache-Control" content="no-transform" /> |
|
<meta http-equiv="Cache-Control" content="no-siteapp" /> |
|
|
|
<meta name="theme-color" content="#f8f5ec" /> |
|
<meta name="msapplication-navbutton-color" content="#f8f5ec"> |
|
<meta name="apple-mobile-web-app-capable" content="yes"> |
|
<meta name="apple-mobile-web-app-status-bar-style" content="#f8f5ec"> |
|
|
|
<meta name="description" content="在家中部署智慧家庭系统"/><meta name="keywords" content="iotcat,yimian,blog" /><link rel="alternate" href="/atom.xml" title="EEE.DOG"><link rel="shortcut icon" type="image/x-icon" href="/favicon.ico?v=1.0.0" /><script type="text/javascript" src="/lib/jquery/jquery.min.js"></script> |
|
<link rel="stylesheet" type="text/css" href="/lib/iziModal/iziModal.min.css" /> |
|
|
|
|
|
<link rel="stylesheet" type="text/css" href="/lib/iziToast/iziToast.min.css" /> |
|
|
|
<script> |
|
if(window.screen.width < 600) document.write('<link rel="stylesheet" href="https://cdn.yimian.xyz/ushio-js/ushio-js.mobile.min.css">'); |
|
else document.write('<link rel="stylesheet" href="https://cdn.yimian.xyz/ushio-js/ushio-js.min.css">'); |
|
</script><link rel="stylesheet" type="text/css" href="https://cdn.yimian.xyz/shaky/shaky.css"> |
|
<link rel="canonical" href="https://www.eee.dog/tech/smart-home/"/> |
|
|
|
<link rel="stylesheet" type="text/css" href="/lib/fancybox/jquery.fancybox.css" /><script type="text/x-mathjax-config"> |
|
MathJax.Hub.Config({ tex2jax: { inlineMath: [['$','$'], ['\\(','\\)']] } }); |
|
</script> |
|
<script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML"></script> |
|
<link rel="stylesheet" type="text/css" href="/css/style.css?v=1.0.0" /> |
|
|
|
<script id="baidu_push"> |
|
(function(){ |
|
var bp = document.createElement('script'); |
|
var curProtocol = window.location.protocol.split(':')[0]; |
|
if (curProtocol === 'https') { |
|
bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; |
|
} |
|
else { |
|
bp.src = 'http://push.zhanzhang.baidu.com/push.js'; |
|
} |
|
var s = document.getElementsByTagName("script")[0]; |
|
s.parentNode.insertBefore(bp, s); |
|
})(); |
|
</script> |
|
<script> |
|
window.config = {"leancloud":"","toc":true,"fancybox":true,"pjax":{"enable":true,"loadingbar":true},"latex":true}; |
|
</script> |
|
|
|
<title>在家中部署智慧家庭系统 - EEE.DOG</title> |
|
<meta name="generator" content="Hexo 4.2.1"><link rel="alternate" href="/atom.xml" title="EEE.DOG" type="application/atom+xml"> |
|
</head> |
|
|
|
<body><div id="mobile-navbar" class="mobile-navbar"> |
|
<div class="mobile-header-logo"> |
|
<a href="/." class="logo">EEE.DOG</a> |
|
</div> |
|
<div class="mobile-navbar-icon"> |
|
<span></span> |
|
<span></span> |
|
<span></span> |
|
</div> |
|
<div class="loading-bar"> |
|
<div class="progress"></div> |
|
</div> |
|
</div> |
|
|
|
<nav id="mobile-menu" class="mobile-menu slideout-menu"> |
|
<ul class="mobile-menu-list"><div id="mobile-menu-Archives"> |
|
<a href="/archives/"> |
|
<li class="mobile-menu-item">Archives |
|
</li> |
|
</a></div><div id="mobile-menu-Categories"> |
|
<a href="/categories/"> |
|
<li class="mobile-menu-item">Categories |
|
</li> |
|
</a></div><div id="mobile-menu-Projects"> |
|
<a href="#"> |
|
<li class="mobile-menu-item">Projects |
|
</li> |
|
</a><ul class="sub-menu" style="display: none;"> |
|
<li> |
|
<a href="https://fp.yimian.xyz/" target="_blank" rel="noopener"> |
|
fp |
|
</a> |
|
</li> |
|
<li> |
|
<a href="https://wiot.yimian.xyz/" target="_blank" rel="noopener"> |
|
wiot |
|
</a> |
|
</li> |
|
</ul> |
|
<script>$('#mobile-menu-Projects').click(function(){ |
|
$("#mobile-menu-Projects ul").toggle(); |
|
})</script> |
|
</div><div id="mobile-menu-Map"> |
|
<a href="#"> |
|
<li class="mobile-menu-item">Map |
|
</li> |
|
</a><ul class="sub-menu" style="display: none;"> |
|
<li> |
|
<a href="https://api.yimian.xyz/" target="_blank" rel="noopener"> |
|
APIs |
|
</a> |
|
</li> |
|
<li> |
|
<a href="https://img.yimian.xyz/" target="_blank" rel="noopener"> |
|
Imgs |
|
</a> |
|
</li> |
|
<li> |
|
<a href="/"> |
|
Imgbed |
|
</a> |
|
</li> |
|
<li> |
|
<a href="https://share.yimian.xyz/" target="_blank" rel="noopener"> |
|
Fileshare |
|
</a> |
|
</li> |
|
<li> |
|
<a href="https://monitor.yimian.xyz/" target="_blank" rel="noopener"> |
|
Monitor |
|
</a> |
|
</li> |
|
<li> |
|
<a href="https://acg.watch/" target="_blank" rel="noopener"> |
|
ACG.WATCH |
|
</a> |
|
</li> |
|
<li> |
|
<a href="https://onedrive.yimian.xyz/" target="_blank" rel="noopener"> |
|
Oneindex |
|
</a> |
|
</li> |
|
</ul> |
|
<script>$('#mobile-menu-Map').click(function(){ |
|
$("#mobile-menu-Map ul").toggle(); |
|
})</script> |
|
</div><div id="mobile-menu-About"> |
|
<a href="#"> |
|
<li class="mobile-menu-item">About |
|
</li> |
|
</a><ul class="sub-menu" style="display: none;"> |
|
<li> |
|
<a href="/links/"> |
|
links |
|
</a> |
|
</li> |
|
<li> |
|
<a href="https://iotcat.me/" target="_blank" rel="noopener"> |
|
Me |
|
</a> |
|
</li> |
|
</ul> |
|
<script>$('#mobile-menu-About').click(function(){ |
|
$("#mobile-menu-About ul").toggle(); |
|
})</script> |
|
</div></ul> |
|
</nav> |
|
<div class="container" id="mobile-panel"> |
|
<header id="header" class="header"><div class="logo-wrapper"> |
|
<a href="/." class="logo">EEE.DOG</a> |
|
</div> |
|
|
|
<nav class="site-navbar"><ul id="menu" class="menu"><li class="menu-item"> |
|
<a id="menu-Archives" class="menu-item-link" href="/archives/"> |
|
Archives |
|
</a> |
|
|
|
</li> |
|
<li class="menu-item"> |
|
<a id="menu-Categories" class="menu-item-link" href="/categories/"> |
|
Categories |
|
</a> |
|
|
|
</li> |
|
<li class="menu-item"> |
|
<a id="menu-Projects" class="menu-item-link" href="#"> |
|
Projects |
|
</a> |
|
|
|
<script> |
|
$("#menu-Projects").click(function(){ |
|
iziToast.question({ |
|
timeout: 20000, |
|
close: false, |
|
overlay: true, |
|
displayMode: 'once', |
|
//id: 'question', |
|
zindex: 999, |
|
title: 'Projects', |
|
message: '', |
|
position: 'center', |
|
buttons: [ |
|
['<button><b>fp</b></button>', function (instance, toast) { |
|
|
|
instance.hide({ transitionOut: 'fadeOut' }, toast, 'button'); |
|
if("/" == "true") |
|
pjax.loadUrl("https://fp.yimian.xyz/"); |
|
else |
|
window.open("https://fp.yimian.xyz/"); |
|
}, true], |
|
['<button><b>wiot</b></button>', function (instance, toast) { |
|
|
|
instance.hide({ transitionOut: 'fadeOut' }, toast, 'button'); |
|
if("/" == "true") |
|
pjax.loadUrl("https://wiot.yimian.xyz/"); |
|
else |
|
window.open("https://wiot.yimian.xyz/"); |
|
}, true], |
|
['<button><b>close</b></button>', function (instance, toast) { |
|
|
|
instance.hide({ transitionOut: 'fadeOut' }, toast, 'button'); |
|
}, true], |
|
] |
|
}); |
|
}); |
|
</script> |
|
</li> |
|
<li class="menu-item"> |
|
<a id="menu-Map" class="menu-item-link" href="#"> |
|
Map |
|
</a> |
|
|
|
<script> |
|
$("#menu-Map").click(function(){ |
|
iziToast.question({ |
|
timeout: 20000, |
|
close: false, |
|
overlay: true, |
|
displayMode: 'once', |
|
//id: 'question', |
|
zindex: 999, |
|
title: 'Map', |
|
message: '', |
|
position: 'center', |
|
buttons: [ |
|
['<button><b>APIs</b></button>', function (instance, toast) { |
|
|
|
instance.hide({ transitionOut: 'fadeOut' }, toast, 'button'); |
|
if("/" == "true") |
|
pjax.loadUrl("https://api.yimian.xyz/"); |
|
else |
|
window.open("https://api.yimian.xyz/"); |
|
}, true], |
|
['<button><b>Imgs</b></button>', function (instance, toast) { |
|
|
|
instance.hide({ transitionOut: 'fadeOut' }, toast, 'button'); |
|
if("/" == "true") |
|
pjax.loadUrl("https://img.yimian.xyz/"); |
|
else |
|
window.open("https://img.yimian.xyz/"); |
|
}, true], |
|
['<button><b>Imgbed</b></button>', function (instance, toast) { |
|
|
|
instance.hide({ transitionOut: 'fadeOut' }, toast, 'button'); |
|
if("/" == "true") |
|
pjax.loadUrl("/"); |
|
else |
|
window.open("undefined"); |
|
}, true], |
|
['<button><b>Fileshare</b></button>', function (instance, toast) { |
|
|
|
instance.hide({ transitionOut: 'fadeOut' }, toast, 'button'); |
|
if("/" == "true") |
|
pjax.loadUrl("https://share.yimian.xyz/"); |
|
else |
|
window.open("https://share.yimian.xyz/"); |
|
}, true], |
|
['<button><b>Monitor</b></button>', function (instance, toast) { |
|
|
|
instance.hide({ transitionOut: 'fadeOut' }, toast, 'button'); |
|
if("/" == "true") |
|
pjax.loadUrl("https://monitor.yimian.xyz/"); |
|
else |
|
window.open("https://monitor.yimian.xyz/"); |
|
}, true], |
|
['<button><b>ACG.WATCH</b></button>', function (instance, toast) { |
|
|
|
instance.hide({ transitionOut: 'fadeOut' }, toast, 'button'); |
|
if("/" == "true") |
|
pjax.loadUrl("https://acg.watch/"); |
|
else |
|
window.open("https://acg.watch/"); |
|
}, true], |
|
['<button><b>Oneindex</b></button>', function (instance, toast) { |
|
|
|
instance.hide({ transitionOut: 'fadeOut' }, toast, 'button'); |
|
if("/" == "true") |
|
pjax.loadUrl("https://onedrive.yimian.xyz/"); |
|
else |
|
window.open("https://onedrive.yimian.xyz/"); |
|
}, true], |
|
['<button><b>close</b></button>', function (instance, toast) { |
|
|
|
instance.hide({ transitionOut: 'fadeOut' }, toast, 'button'); |
|
}, true], |
|
] |
|
}); |
|
}); |
|
</script> |
|
</li> |
|
<li class="menu-item"> |
|
<a id="menu-About" class="menu-item-link" href="#"> |
|
About |
|
</a> |
|
|
|
<script> |
|
$("#menu-About").click(function(){ |
|
iziToast.question({ |
|
timeout: 20000, |
|
close: false, |
|
overlay: true, |
|
displayMode: 'once', |
|
//id: 'question', |
|
zindex: 999, |
|
title: 'About', |
|
message: '', |
|
position: 'center', |
|
buttons: [ |
|
['<button><b>links</b></button>', function (instance, toast) { |
|
|
|
instance.hide({ transitionOut: 'fadeOut' }, toast, 'button'); |
|
if("/true" == "true") |
|
pjax.loadUrl("/links/"); |
|
else |
|
window.open("/links/"); |
|
}, true], |
|
['<button><b>Me</b></button>', function (instance, toast) { |
|
|
|
instance.hide({ transitionOut: 'fadeOut' }, toast, 'button'); |
|
if("/" == "true") |
|
pjax.loadUrl("https://iotcat.me/"); |
|
else |
|
window.open("https://iotcat.me/"); |
|
}, true], |
|
['<button><b>close</b></button>', function (instance, toast) { |
|
|
|
instance.hide({ transitionOut: 'fadeOut' }, toast, 'button'); |
|
}, true], |
|
] |
|
}); |
|
}); |
|
</script> |
|
</li> |
|
</ul></nav> |
|
</header> |
|
|
|
<main id="main" class="main"> |
|
<div class="content-wrapper"> |
|
<div id="content" class="content"><article class="post"> |
|
<header class="post-header"> |
|
<h1 class="post-title">在家中部署智慧家庭系统 |
|
</h1> |
|
|
|
<div class="post-meta"> |
|
<span class="post-time"> |
|
2020-06-16 |
|
</span><span class="post-category"> |
|
<a href="/categories/tech/">tech</a> |
|
</span> |
|
</div> |
|
</header> |
|
|
|
<div class="post-toc" id="post-toc"> |
|
<h2 class="post-toc-title">Contents</h2> |
|
<div class="post-toc-content"> |
|
<ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#0-架构综述"><span class="toc-text">0 架构综述</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#1-硬件设计"><span class="toc-text">1 硬件设计</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-1-单片机选材"><span class="toc-text">1.1 单片机选材</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#1-2-WiFi通信模块选材"><span class="toc-text">1.2 WiFi通信模块选材</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#1-3-LoRa通信模块选材"><span class="toc-text">1.3 LoRa通信模块选材</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#1-4-智能音箱选材"><span class="toc-text">1.4 智能音箱选材</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#1-5-灯拨动开关"><span class="toc-text">1.5 灯拨动开关</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2-通信设计"><span class="toc-text">2 通信设计</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#3-主控系统设计"><span class="toc-text">3 主控系统设计</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#4-多媒体系统设计"><span class="toc-text">4 多媒体系统设计</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#5-云端支持系统设计"><span class="toc-text">5 云端支持系统设计</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#6-NAS存储系统设计"><span class="toc-text">6 NAS存储系统设计</span></a></li></ol> |
|
</div> |
|
</div><div class="post-content"><p>基于Home Assisstant搭建综合家庭照明系统,多媒体系统,水流系统的智慧家庭。技术点:天猫精灵交互,LoRa通信,MQTT协议,frp内网穿透,NAS存储,拨动开关电路改造。</p> |
|
<a id="more"></a> |
|
|
|
<p>结合所学知识,运用前沿技术,造福生活,是我长期以来的不懈追求。为了让家人体验到更加稳定、舒适智能的生活方式,同时也为了巩固憨实先前在学校smartfarm项目和我自己的ushio系统中所积累的技术基础以及架构经验,我决定在出国前,使用20到23整天时间,重构家中老旧的物联网系统。采用分层架构和面向接口、面向测试、<strong>面向文档</strong>开发原则,以<strong>稳定性(Available)</strong>,<strong>可靠性(Reliable)</strong>为最优先指标,搭建一个运行目标3年以上的高度模块化的,易于远程操控的,开源的家庭软件硬件智能传感控制系统。</p> |
|
<h2 id="0-架构综述"><a href="#0-架构综述" class="headerlink" title="0 架构综述"></a>0 架构综述</h2><h2 id="1-硬件设计"><a href="#1-硬件设计" class="headerlink" title="1 硬件设计"></a>1 硬件设计</h2><h3 id="1-1-单片机选材"><a href="#1-1-单片机选材" class="headerlink" title="1.1 单片机选材"></a>1.1 单片机选材</h3><p>使用Arduino UNO作为计算单元。一方面,Arduino Uno拥有高可靠性,我之前的智慧窗帘系统使用Arduino Uno作为主控板,平稳运行1年半未出现硬件问题。另一方面,Arduino Uno拥有较大的RAM,无需为了争夺RAM而在单片机编程上煞费苦心。</p> |
|
<p>Arduino UNO的缺陷主要是价格高,但是为保障长期稳定运行,这个成本是必要的。</p> |
|
<h3 id="1-2-WiFi通信模块选材"><a href="#1-2-WiFi通信模块选材" class="headerlink" title="1.2 WiFi通信模块选材"></a>1.2 WiFi通信模块选材</h3><p>使用ESP-01作为WiFi的通信模块。主要原因是之前学校课程使用过ESP-01搭建遥控小车,对其工作方式和性能比较了解,降低开发成本。</p> |
|
<h3 id="1-3-LoRa通信模块选材"><a href="#1-3-LoRa通信模块选材" class="headerlink" title="1.3 LoRa通信模块选材"></a>1.3 LoRa通信模块选材</h3><p>使用<strong>安信可 LORA RA-02 LORA</strong>作为LoRa节点和LoRa网关通信模块。原因是surf项目使用的就是这个模块,比较了解它。</p> |
|
<h3 id="1-4-智能音箱选材"><a href="#1-4-智能音箱选材" class="headerlink" title="1.4 智能音箱选材"></a>1.4 智能音箱选材</h3><p>智能音箱作为此物联网系统人机交互的最主要界面,发挥着举足轻重的作用。经研究,我使用天猫精灵方糖R作为家用智能音箱。一方面,天猫精灵的性价比摆在那里,非常便宜。第二,与小米开发小爱同学不同,阿里开发天猫精灵的目的是提供平台,它运行开发者以各种形式接入其网络,这一点对我至关重要。</p> |
|
<h3 id="1-5-灯拨动开关"><a href="#1-5-灯拨动开关" class="headerlink" title="1.5 灯拨动开关"></a>1.5 灯拨动开关</h3><p>初期设想: 单向控制+复位器。<br>实际实现:将原有单开改造为双开,一路与继电器串联,另一路与两个pin口相连。</p> |
|
<h2 id="2-通信设计"><a href="#2-通信设计" class="headerlink" title="2 通信设计"></a>2 通信设计</h2><p><img src="https://api.yimian.xyz/img/?path=imgbed/img_43b85bd4_1096x660_8_null_normal.png" alt="网络拓扑图"></p> |
|
<p>采用WiFi+LoRa两种通信模式。在需要高速高质量通信的场景,如天猫精灵,手机,笔记本,使用WiFi作为通信手段。在WiFi信号不稳定的地方,使用LoRa进行通信。</p> |
|
<h2 id="3-主控系统设计"><a href="#3-主控系统设计" class="headerlink" title="3 主控系统设计"></a>3 主控系统设计</h2><p>使用python3开源项目Home Assistant 为基础搭建本项目的主控系统。</p> |
|
<h2 id="4-多媒体系统设计"><a href="#4-多媒体系统设计" class="headerlink" title="4 多媒体系统设计"></a>4 多媒体系统设计</h2><p>多媒体主要由天猫精灵提供。此外,通过小米盒子,家庭网盘中的视频,图片,音乐实现了电视与音响上的播放。</p> |
|
<h2 id="5-云端支持系统设计"><a href="#5-云端支持系统设计" class="headerlink" title="5 云端支持系统设计"></a>5 云端支持系统设计</h2><p>dns.yimian.xyz提供dns解析服务。</p> |
|
<h2 id="6-NAS存储系统设计"><a href="#6-NAS存储系统设计" class="headerlink" title="6 NAS存储系统设计"></a>6 NAS存储系统设计</h2><p>通过挂载从老电脑上拆卸的闲置500G机械硬盘到老IBM服务器,实现存储系统的搭建。<br>对局域网内,由于家里都是win系统,使用smb作为共享协议实现文件传输,支持局域网内挂载。速度稳定,全网读写10MB/s左右。对外网访问,通过http,frp反代实现,但速度较慢。</p> |
|
|
|
</div> |
|
<div class="post-copyright"> |
|
<p class="copyright-item"> |
|
<span>Author: </span> |
|
<a href="https://iotcat.me/" target="_blank" rel="noopener">IoTcat</a> |
|
</p> |
|
<p class="copyright-item"> |
|
<span>Link: </span> |
|
<a href="https://www.eee.dog/tech/smart-home/">https://www.eee.dog/tech/smart-home/</a> |
|
</p> |
|
<p class="copyright-item"> |
|
<span>License: </span><a rel="license" href="http://creativecommons.org/licenses/by-nc/4.0/" target="_blank">知识共享署名-非商业性使用 4.0 国际许可协议</a> |
|
</p> |
|
</div> |
|
<footer class="post-footer"> |
|
|
|
<nav class="post-nav"><a class="prev" href="/tech/mail-api/"> |
|
<i class="iconfont icon-left"></i> |
|
<span class="prev-text nav-default">自动发邮件API</span> |
|
<span class="prev-text nav-mobile">Prev</span> |
|
</a> |
|
<a class="next" href="/tech/smartfarming-surf/"> |
|
<span class="next-text nav-default">2019 SURF SmartFarming Proj 架构说明</span> |
|
<span class="prev-text nav-mobile">Next</span> |
|
<i class="iconfont icon-right"></i> |
|
</a> |
|
</nav></footer> |
|
</article><script>$(()=>{setTimeout(()=>{iziToast.show({ |
|
title: 'tips', |
|
position: 'topRight', |
|
message: "此文章预计阅读 6 分钟哦~" |
|
})}, 3000)})</script> |
|
</div><div class="comments" id="comments"><div id="vcomments"></div> |
|
</div></div> |
|
</main> |
|
|
|
<footer id="footer" class="footer"> |
|
<script> |
|
page_obj = { |
|
layout: "post", |
|
comments: "true" |
|
}; |
|
</script><div class="social-links"><a href="mailto:i@iotcat.me" class="iconfont icon-email" title="email"></a> |
|
<a href="https://github.com/iotcat" target="_blank" rel="noopener" class="iconfont icon-github" title="github"></a> |
|
<a href="/atom.xml" class="iconfont icon-rss" title="rss"></a> |
|
</div><div class="copyright"><span id="/tech/smart-home/" class="statistic leancloud_visitors"> |
|
<em>Visitors </em> <i class="leancloud-visitors-count">??</i> |
|
<span class="division"> |</span> |
|
<em>Reading </em> 6 min |
|
</span> |
|
<br> |
|
<span class="power-by"> |
|
Powered by <a class="hexo-link" href="https://hexo.io/" target="_blank" rel="noopener">Hexo</a> |
|
</span> |
|
<span class="division">|</span> |
|
<span class="theme-info"> |
|
Theme - |
|
<a class="theme-link" href="https://github.com/iotcat/kayo" target="_blank" rel="noopener">Kayo</a> |
|
</span> |
|
|
|
<span class="copyright-year">©2018 - 2020<span class="heart shaky"> |
|
<i class="iconfont icon-heart"></i> |
|
</span> |
|
<span class="author">IoTcat</span> |
|
</span> |
|
</div> |
|
</footer> |
|
|
|
<div class="back-to-top" id="back-to-top"> |
|
<i class="iconfont icon-up"></i> |
|
</div> |
|
</div> |
|
<script src="//cdn.jsdelivr.net/gh/HCLonely/Valine@1.4.14/dist/Valine.min.js" data-pjax></script> |
|
<style> |
|
/* 背景图片 */ |
|
#veditor { |
|
background-image: url(https://cdn.jsdelivr.net/gh/drew233/cdn/20200409110727.webp); |
|
background-size: contain; |
|
background-repeat: no-repeat; |
|
background-position: right; |
|
background-color: rgba(255, 255, 255, 0); |
|
resize: vertical |
|
} |
|
|
|
/* 头像旋转 */ |
|
img.vimg { |
|
transition: all 1s /* 旋转时间为 1s */ |
|
} |
|
img.vimg:hover { |
|
transform: rotate(360deg); |
|
-webkit-transform: rotate(360deg); |
|
-moz-transform: rotate(360deg); |
|
-o-transform: rotate(360deg); |
|
-ms-transform: rotate(360deg); |
|
} |
|
|
|
|
|
/* 盒子模式 */ |
|
#vcomments .vcards .vcard { |
|
padding: 15px 20px 0 20px; |
|
border-radius: 10px; |
|
margin-bottom: 15px; |
|
box-shadow: 0 0 4px 1px rgba(0, 0, 0, .12); |
|
transition: all .3s |
|
} |
|
|
|
#vcomments .vcards .vcard:hover { |
|
box-shadow: 0 0 8px 3px rgba(0, 0, 0, .12) |
|
} |
|
|
|
#vcomments .vcards .vcard .vh .vcard { |
|
border: none; |
|
box-shadow: none; |
|
} |
|
|
|
|
|
</style> |
|
<script> |
|
pjax_valine = () => { |
|
new Valine({ |
|
el: '#vcomments', |
|
appId: 'eVzpK7EyT6OafJvXWIRminWT-gzGzoHsz', |
|
appKey: '2qjuEBgVE0BscTQnTmoS9roU', |
|
master: '9b616ff4cd6c305e5970bee7b1bd9b1f', //博主邮箱md5 |
|
tagMeta: ["博主","小伙伴","访客"], //标识字段名 |
|
friends: ["b6ddef7c7e1c647e7767afeacdfb7b64","46dd4e6fef4f9591736c4723a965ca2e"], //小伙伴邮箱Md5 |
|
metaPlaceholder: {"nick":"昵称/QQ号","mail":"邮箱(完全保密)"}, |
|
placeholder: "填写邮箱可以及时收到回复哦(●'◡'●)", |
|
path: window.location.pathname, |
|
enableQQ: true, |
|
visitor: true, |
|
emojiCDN: '//i0.hdslb.com/bfs/emote/', |
|
emojiMaps: { |
|
"tv_doge": "6ea59c827c414b4a2955fe79e0f6fd3dcd515e24.png", |
|
"tv_亲亲": "a8111ad55953ef5e3be3327ef94eb4a39d535d06.png", |
|
"tv_偷笑": "bb690d4107620f1c15cff29509db529a73aee261.png", |
|
"tv_再见": "180129b8ea851044ce71caf55cc8ce44bd4a4fc8.png", |
|
"tv_冷漠": "b9cbc755c2b3ee43be07ca13de84e5b699a3f101.png", |
|
"tv_发怒": "34ba3cd204d5b05fec70ce08fa9fa0dd612409ff.png", |
|
"tv_发财": "34db290afd2963723c6eb3c4560667db7253a21a.png", |
|
"tv_可爱": "9e55fd9b500ac4b96613539f1ce2f9499e314ed9.png", |
|
"tv_吐血": "09dd16a7aa59b77baa1155d47484409624470c77.png", |
|
"tv_呆": "fe1179ebaa191569b0d31cecafe7a2cd1c951c9d.png", |
|
"tv_呕吐": "9f996894a39e282ccf5e66856af49483f81870f3.png", |
|
"tv_困": "241ee304e44c0af029adceb294399391e4737ef2.png", |
|
"tv_坏笑": "1f0b87f731a671079842116e0991c91c2c88645a.png", |
|
"tv_大佬": "093c1e2c490161aca397afc45573c877cdead616.png", |
|
"tv_大哭": "23269aeb35f99daee28dda129676f6e9ea87934f.png", |
|
"tv_委屈": "d04dba7b5465779e9755d2ab6f0a897b9b33bb77.png", |
|
"tv_害羞": "a37683fb5642fa3ddfc7f4e5525fd13e42a2bdb1.png", |
|
"tv_尴尬": "7cfa62dafc59798a3d3fb262d421eeeff166cfa4.png", |
|
"tv_微笑": "70dc5c7b56f93eb61bddba11e28fb1d18fddcd4c.png", |
|
"tv_思考": "90cf159733e558137ed20aa04d09964436f618a1.png", |
|
"tv_惊吓": "0d15c7e2ee58e935adc6a7193ee042388adc22af.png", |
|
"tv_打脸": "56ab10b624063e966bfcb76ea5dc4794d87dfd47.png", |
|
"tv_抓狂": "fe31c08edad661d63762b04e17b8d5ae3c71a757.png", |
|
"tv_抠鼻": "c666f55e88d471e51bbd9fab9bb308110824a6eb.png", |
|
"tv_斜眼笑": "911f987aa8bc1bee12d52aafe62bc41ef4474e6c.png", |
|
"tv_无奈": "ea8ed89ee9878f2fece2dda0ea8a5dbfe21b5751.png", |
|
"tv_晕": "5443c22b4d07fb1907ccc610c8e6db254f2461b7.png", |
|
"tv_流汗": "cead1c351ab8d79e9f369605beb90148db0fbed3.png", |
|
"tv_流泪": "7e71cde7858f0cd50d74b0264aa26db612a8a167.png", |
|
"tv_流鼻血": "c32d39db2737f89b904ca32700d140a9241b0767.png", |
|
"tv_点赞": "f85c354995bd99e28fc76c869bfe42ba6438eff4.png", |
|
"tv_生气": "26702dcafdab5e8225b43ffd23c94ac1ff932654.png", |
|
"tv_生病": "8b0ec90e6b86771092a498c54f09fc94621c1900.png", |
|
"tv_疑问": "0793d949b18d7be716078349c202c15ff166f314.png", |
|
"tv_白眼": "c1d59f439e379ee50eef488bcb5e5378e5044ea4.png", |
|
"tv_皱眉": "72ccad6679fea0d14cce648b4d818e09b8ffea2d.png", |
|
"tv_目瞪口呆": "0b8cb81a68de5d5365212c99375e7ace3e7891b7.png", |
|
"tv_睡着": "8b196675b53af58264f383c50ad0945048290b33.png", |
|
"tv_笑哭": "1abc628f6d4f4caf9d0e7800878f4697abbc8273.png", |
|
"tv_腼腆": "89712c0d4af73e67f89e35cbc518420380a7f6f4.png", |
|
"tv_色": "61822c7e9aae5da76475e7892534545336b23a6f.png", |
|
"tv_调侃": "4bc022533ef31544ca0d72c12c808cf4a1cce3e3.png", |
|
"tv_调皮": "b9c41de8e82dd7a8515ae5e3cb63e898bf245186.png", |
|
"tv_鄙视": "6e72339f346a692a495b123174b49e4e8e781303.png", |
|
"tv_闭嘴": "c9e990da7f6e93975e25fd8b70e2e290aa4086ef.png", |
|
"tv_难过": "87f46748d3f142ebc6586ff58860d0e2fc8263ba.png", |
|
"tv_馋": "fc7e829b845c43c623c8b490ee3602b7f0e76a31.png", |
|
"tv_鬼脸": "0ffbbddf8a94d124ca2f54b360bbc04feb6bbfea.png", |
|
"tv_黑人问号": "45821a01f51bc867da9edbaa2e070410819a95b2.png", |
|
"tv_鼓掌": "1d21793f96ef4e6f48b23e53e3b9e42da833a0f6.png" |
|
// ... 更多表情 |
|
} |
|
}); |
|
}; |
|
</script><script type="text/javascript" src="/lib/slideout/slideout.js"></script> |
|
<script type="text/javascript" src="/lib/fancybox/jquery.fancybox.pack.js"></script> |
|
<script type="text/javascript" src="/lib/iziToast/iziToast.min.js"></script> |
|
<script type="text/javascript" src="/lib/iziModal/iziModal.min.js"></script> |
|
<script type="text/javascript" src="/lib/mermaid/mermaid.min.js"></script> |
|
<script type="text/javascript" src="/js/src/kayo.js?v=1.0.0" data-pjax></script> |
|
<script type="text/javascript" src="/js/src/kayo-no-pjax.js?v=1.0.0"></script> |
|
|
|
<script src="/lib/aplayer/aplayer.min.js"></script> |
|
|
|
<script> |
|
$.post("https://api.yimian.xyz/msc/?type=playlist&id=808097971&limit=14&random=true", function(res){ |
|
$('body').append('<div class="aplayer-footer"><div class="ap-f" id="ap-f"></div></div>'); |
|
var a = new APlayer({ |
|
element:document.getElementById("ap-f"), |
|
autoplay: false, |
|
fixed:true, |
|
loop:"all", |
|
order:"list", |
|
listFolded:true, |
|
showlrc:3, |
|
theme:"", |
|
listmaxheight:"200px", |
|
music:res |
|
}); |
|
window.aplayers || (window.aplayers = []), |
|
window.aplayers.push(a); |
|
window.aplayers[0].lrc.hide(); |
|
|
|
window.aplayers[0].on('play', function () { |
|
window.aplayers[0].lrc.show(); |
|
}); |
|
window.aplayers[0].on('pause', function () { |
|
window.aplayers[0].lrc.hide(); |
|
}); |
|
}); |
|
</script><script src="https://cdn.jsdelivr.net/npm/pjax/pjax.js"></script> |
|
<script>window.pjax = new Pjax({ |
|
elements: 'a[href]:not([href^="#"]):not([href="javascript:void(0)"])', |
|
selectors: ["head title, #main", "#footer"], |
|
});/* 第一次载入页面加载的函数 */ |
|
pjax_ini = () => { |
|
|
|
/* 关闭侧边栏 */ |
|
window.slideout.close(); |
|
|
|
if(page_obj.comments == "true"){pjax_valine();}mermaid.init(undefined, $(".mermaid"));}; |
|
|
|
/* 第一次 执行 */ |
|
pjax_ini();var loadingBar = document.querySelector(".loading-bar"); |
|
var progress = document.querySelector(".loading-bar .progress"); |
|
var timer = null; |
|
|
|
|
|
// Pjax 开始时执行的函数 |
|
var loadingbarStart = function () { |
|
// 进度条默认已经加载 20% |
|
var loadingBarWidth = 20; |
|
// 进度条的最大增加宽度 |
|
var MAX_LOADING_WIDTH = 95; |
|
|
|
// 显示进度条 |
|
loadingBar.classList.add("loading"); |
|
// 初始化进度条的宽度 |
|
progress.style.width = loadingBarWidth + "%"; |
|
|
|
clearInterval(timer); |
|
timer = setInterval(function () { |
|
// 进度条的增加速度(可以改为一个随机值,显得更加真实) |
|
loadingBarWidth += 3; |
|
|
|
// 当进度条到达 95% 后停止增加 |
|
if (loadingBarWidth > MAX_LOADING_WIDTH) { |
|
loadingBarWidth = MAX_LOADING_WIDTH; |
|
} |
|
|
|
progress.style.width = loadingBarWidth + "%"; |
|
}, 500); |
|
}; |
|
|
|
|
|
// Pjax 完成之后执行的函数 |
|
var loadingbarStop = function () { |
|
clearInterval(timer); |
|
progress.style.width = "100%"; |
|
loadingBar.classList.remove("loading"); |
|
|
|
setTimeout(function () { |
|
progress.style.width = 0; |
|
}, 400); |
|
};/* Pjax 开始时,重新加载的函数 */ |
|
document.addEventListener("pjax:send", function () {loadingbarStart(); |
|
}); |
|
|
|
|
|
/* Pjax 完成后,重新加载的函数 */ |
|
document.addEventListener("pjax:complete", function () { |
|
/* 重载带data-pjax的script,或者.pjax-reload属性内容的script */ |
|
$("script[data-pjax], .pjax-reload script").each(function () { |
|
$(this).parent().append($(this).remove()); |
|
}); |
|
pjax_ini();loadingbarStop(); |
|
}); |
|
|
|
|
|
/* Pjax 出错,执行的函数 */ |
|
document.addEventListener("pjax:error", function () { |
|
|
|
});</script> |
|
</body> |
|
</html>
|
|
|