为自己的博客添加一个优雅的“发现自己”页面
首先，查看效果：https://mikelin.cn/frind-yourself
这个页面最开始是在 烂番茄 （lfqie.com）那里发现的，感觉挺好的。之前烂番茄一直是开源这个页面代码的，无奈总有窃取版权的。
作者很无奈关闭了开源。我在烂番茄那里通过F12手工整理了一版代码，并且把它运行在我的博客上。
也不知道为什么，烂番茄的这个页面代码，全是多余的空行~~~于是使用sublime text直接批量删除空行，并且对页面内容稍微作了点修改。请自行体验~~~
WordPress用户很简单，只需要在主题目录下新建一个php文件，我们暂且把它命名为“frind-yourself.php”。然后复制粘贴代码进去就搞定了。
<?php
/*
Template Name: 发现自己
*/
?>
<!-- 版权声明：本页面由MIKELIN（mikelin.cn）复制修改至本博客，原出处来自烂番茄 （lfqie.com） -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Frind-yourself - 安静地发现自己，找回属于你我的心灵归属地 - <?php bloginfo('name'); ?></title>
<script type="text/javascript" src="https://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
<style>
audio[controls], canvas, video {
display: inline-block;
}
html {
font-size: 100%;
}
body {
font-size: 13px;
line-height: 1.231;
margin: 0;
}
form {
margin: 0;
}
button, input, select, textarea {
font-size: 100%;
margin: 0;
vertical-align: baseline;
}
button, input {
line-height: normal;
}
button, input[type="button"], input[type="reset"], input[type="submit"] {
cursor: pointer;
}
button::-moz-focus-inner, input::-moz-focus-inner {
border: 0 none;
padding: 0;
}
html, body, #container, #wrap {
cursor: default;
height: 100%;*height:95%;
width: 100%;*width:95%;
}
body {
background-color: #F9F9F9;
color: #808080;
font-family: Tahoma,Helvetica,sans-serif;
font-size: 13px;
text-align: center;
text-shadow: 0 1px #FFFFFF;
}
a {
color:red!important;
}
#container {
margin: -50px auto 0;
position: relative;
width: 700px;
}
#wrap {
height: 0;
position: absolute;
text-align: left;
top: 50%;
}
#wrap div {
display: none;
font-size: 18px;
font-weight: bolder;
/*opacity: 0;*/
/*position: absolute;*/
width: 700px;
}
#wrap #first {
opacity: 1;
}
#wrap .current {
display: block !important;
opacity: 1;
}
#wrap span {
color: #A5A5A5;
display: block;
font-size: 13px;
font-weight: normal;
margin-top: 20px;
}
#wrap div.relax .time {
display: inline;
}
#wrap div.relax .time2 {
color: #808080;
font-size: 18px;
font-weight: bolder;
}
#ninety-sec, #donate {
-moz-transition: opacity 100ms linear 0s;
background: none repeat scroll 0 0 #1A1A1A;
border-radius: 5px 5px 5px 5px;
bottom: 20px;
box-shadow: 0 0 10px #000000;
color: #F9F9F9;
opacity: 0.5;
padding: 5px 10px;
position: absolute;
right: 20px;
text-decoration: none;
text-shadow: 0 1px #000000;
}
#donate {
border: medium none;
bottom: 0;
color: #FF9933;
font-weight: bolder;
position: relative;
right: 0;
}
#ninety-sec:hover, #donate:hover {
opacity: 1;
}
#audio {
left: -9999px;
position: absolute;
top: -9999px;
}
#wrap #google_plus, #wrap #google_plus div, #fb1, #fb2 {
display: inline-block !important;
margin: 0 !important;
opacity: 1 !important;
position: relative !important;
width: auto;
}
.box_cue_green{
text-align: center;
color:#fff;
position: absolute;
z-index: 999;
left:40%;
top:40%;
background-color: rgba(110,200,54,.85);
background-color: #82c5329;
padding: 10px 20px;
float: left;
word-wrap: break-word;
word-break: break-all;
white-space: nowrap;
font-size: 14px;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
line-height: 20px;
-webkit-box-shadow:2px 2px 6px #ccc;-moz-box-shadow:2px 2px 6px #ccc;box-shadow:2px 2px 6px #ccc;
}
.box_cue_yellow{
text-align: center;
color:#fff;
position: absolute;
z-index: 999;
left:40%;
top:40%;
background-color: rgba(255,172,0,.85);
background-color: #fcb7259;
padding: 10px 20px;
float: left;
word-wrap: break-word;
word-break: break-all;
white-space: nowrap;
font-size: 14px;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
line-height: 20px;
-webkit-box-shadow:2px 2px 6px #ccc;-moz-box-shadow:2px 2px 6px #ccc;box-shadow:2px 2px 6px #ccc;
}
a {
-moz-transition: all 0.2s linear 0s;
color: #E4E4E4;
text-decoration: none;
}
#wrap .bdlikebutton {
display: block !important;
opacity: 1;
}
</style>
<script type="text/javascript">
$(function(){
$("#music").html('<embed src="https://mikelin.img.run/quiet.swf" rel="external nofollow" autostart="true" loop="true" hidden="true"></embed>');
$(document).keyup(function(event){
if(event.keyCode == 32){
quietrun();
}
});
$(document).mousedown(function(){
quietrun();
});
})
var stopindex=0;
var runflg=true;
function quietrun(){
if($(".current").attr("id")=="last"){
return false;
}
if($(".current").attr("id")=="relax"){
if(runflg){
stopindex = setInterval(changeTime,1000);
runflg=false;
}
}else{
$(".current").next().addClass("current");
$(".current").first().removeClass("current");
}
}
function changeTime(){
index = parseInt($("#time").html());
if(index<=1){
clearInterval(stopindex);
$(".current").next().addClass("current");
$(".current").first().removeClass("current");
}else{
$(".time").html(index-1);
}
}
</script>
</head>
<body id="body">
<div id="music"></div>
<div id="container">
<div id="wrap">
<div name id="first" class="current">
在这个安静优雅的地方需要你按动[空格]键来进行交互。<span>(现在，轻轻的按一下[空格]键。)</span>
</div>
<div>为了获得完整的体验，请把你的手机调到静音模式，然后按[F11]键，苹果电脑请按[cmd+shift+f]键<span>
(同样，按[空格]键继续。)</span></div>
<div>说真的，请静音你的手机。否则，我们做的毫无意义。<span>(请严肃。请严肃，请严肃。不要担心 - 这里不是一个像那些会吓你一跳的地方。)</span></div>
<div id="music" itemprop="name">欢迎来到这个安静优雅的地方。</div>
<div>在这安静优雅的地方，没有领导和上级<span>(没有他们冲你的大呼小叫)</span></div>
<div>也没有微信的消息...</div>
<div>...或微博...</div>
<div style="font-size:22px;">...QQ...</div>
<div style="font-size:24px;">...钉钉...</div>
<div style="font-size:28px;">...邮件...</div>
<div style="font-size:32px;">...MSN...</div>
<div style="font-size:36px;">...等等...</div>
<div style="font-size:40px;">...等等...</div>
<div style="font-size:50px;">...等等...</div>
<div>...</div>
<div style="font-size:10px;">嗯~舒服~~</div>
<div itemprop="description">你是否发现有太多的东西需要你的注意？</div>
<div>你是否在想现在会错过所有这些重要的信息...</div>
<div>请忍住。</div>
<div>只需要几分钟。</div>
<div>让你的脑子清静一会儿。</div>
<div>我可以向你保证，你不遗漏任何非要立即处理的事情。</div>
<div>如果你还在担心，我可以把你的事情概况一下。</div>
<div>一些你不认识的”朋友“对最近发生的一些事情做了一些愚蠢的评论。<span>(或对你就最近发生的一些事情的看法做的一些愚蠢的评论)</span></div>
<div>你认为这完全是一场闹剧，不是吗？</div>
<div>一场关于我们人类究竟怎么了的闹剧。</div>
<div>然而，每一场闹剧，都反映着一丝真相。</div>
<div>这真相就是，随着使用所有的这些强大的社交工具，我们却忘记了另外一些东西。</div>
<div>我们忘记了休息...</div>
<div>...一次真正的休息。</div>
<div>在公园里散散步，在大山里赏赏景，何等的美好...</div>
<div>但是如果一直把手机带着身边，你实际上什么也做不了。</div>
<div>这些毫无意义的小东西一直在增加你的负担。</div>
<div>无意义。小。东西。</div>
<div>无意义。</div>
<div style="font-size:12px;">小。</div>
<div style="font-size:10px;">东西。</div>
<div>...一个朋友在你的的博客上留下了一条评论...</div>
<div style="font-size:22px;">...一个朋友赞了你的分享...</div>
<div style="font-size:26px;">...一个朋友分享了一个视频给你...</div>
<div style="font-size:30px;">...一个朋友上线了...</div>
<div style="font-size:34px;">...一个朋友邀请你参与一个活动...</div>
<div style="font-size:44px;">...一个朋友这...</div>
<div style="font-size:48px;">...一个朋友那...</div>
<div style="font-size:50px;">...一个朋友...</div>
<div style="font-size:60px;">...一个朋友...</div>
<div style="font-size:70px;">...一个朋友...</div>
<div style="font-size:80px;">毫无意义。</div>
<div style="font-size:90px;">小。</div>
<div style="font-size:10px;">事。</div>
<div>...</div>
<div>...</div>
<div>...放松...</div>
<div id="relax" class="relax">...放松 <span id="time" class="time time2">30</span> 秒...<span>(不要做任何事情！没错，你可以做到的，相信自己！只是 <span class="time">30</span> 秒。)</span>
</div>
<div>...感觉好极了，不是吗？</div>
<div>:)</div>
<div>我很快将要向你说再见了。</div>
<div>你将回到你的各种消息里。</div>
<div>但在此之前，我只想给你一些建议。</div>
<div>时不时...</div>
<div>...停下所有要做的事情...</div>
<div>...进入这安静的地方。</div>
<div>...</div>
<div style="font-size:12px;">再见。</div>
<div style="font-size:12px;">.</div>
<div style="font-size:12px;">
<p style="text-align: center;">本页面原版来自 <a href="https://www.lfqie.com/lfqyp/9253.html" target="_blank">烂番茄</a></p>
<p style="text-align: center;">原作者已停止开源，本版由 <a href="https://mikelin.cn" target="_blank">MIKELIN</a> 手工整理代码后运行在本博客上！</p>
<p style="text-align: center;">欢迎在您的博客添加本页面： <a href="https://mikelin.cn/696.html" target="_blank">请点击这里</a> </p>
<p style="text-align: center;">请您尊重版权，标出原出处：烂番茄。谢谢合作</p>
</div>
<div id="last">
<p align="center"><a href="<?php bloginfo('url'); ?>" target="_blank">返回首页</a></br>E n d ^.^</p>
</div>
</div>
</div>
</body>
<!-- 版权声明：本页面由MIKELIN（mikelin.cn）手工整理代码后运行在本博客上，原出处来自烂番茄 （lfqie.com） -->代码里面包含了常用的函数，可以全自动输出自己的博客标题和网址！
最后到后台新建页面，右边的模板设置为“发现自己”发布即可，不需要在编辑框添加任何东西哦~~~
