forked from barryclark/jekyll-now
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
1 lines (1 loc) · 8.25 KB
/
index.html
1
<!doctype html><html lang="en"><head><meta charset="UTF-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><title>彭尼玛の博客</title><link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/><link href="./myblog/css/index.css" rel="stylesheet"></head><body><header class="blog_header"><div class="container"><div class="blog_title"><span data-title="彭尼玛">彭尼玛</span> <button class="nav_button"><i class="fa fa-bars"></i></button></div><ul class="nav_bar"><li class="nav_item"><a href="./index.html"><i class="fa fa-home"></i> <span>首页</span></a></li><li class="nav_item"><a href="javascript:;"><i class="fa fa-book"></i> <span>学习资料</span></a><div class="nav_mask"><a href="javascript:;">网络</a> <a href="javascript:;">算法</a> <a href="javascript:;">其他</a></div></li><li class="nav_item"><a href="https://www.bilibili.com"><i class="fa fa-bookmark"></i> <span>项目演示</span></a></li><li class="nav_item"><a href="https://www.bilibili.com"><i class="fa fa-envelope"></i> <span>留言板</span></a></li><li class="nav_item"><a href="https://www.bilibili.com"><i class="fa fa-star"></i> <span>占位</span></a></li></ul></div></header><section class="bg_collapse"><ul class="bg_total"><li><span class="bg_slider"></span></li><li><span class="bg_slider"></span></li><li><span class="bg_slider"></span></li><li><span class="bg_slider"></span></li><li><span class="bg_slider"></span></li></ul></section><div id="main_body"><div class="container"><div class="main_content"><div class="wrap notice" style="font-size: 14px;"><i class="fa fa-times-circle"></i><p style="color: #f00;">注意：该站设计思路来自 <strong>https://beats0.github.io/www.mygalgame.com/</strong></p><p>github源码地址：<span style="color: #f00;">https://github.com/pengnima/pnm_blog</span></p><p style="font-size: 13px; text-indent: 14px;"><strong><span style="color: #f55;">NavBar部分：</span></strong> 博客名聚光灯效果关键在于 <strong>clip-path</strong> ，将文字剪切成圆形（另也可以用<strong>background-clip</strong>做渐变效果），且用了媒体查询与flex配合，做了响应式处理，在移动端平台上显示效果会改变。</p><p style="font-size: 13px; text-indent: 14px;"><strong><span style="color: #f55;">主题左侧部分：</span></strong> 博客资料文件存放于 json 文件里，通过 fetch 来获取所需资料。</p><p style="font-size: 13px; text-indent: 14px;"><strong><span style="color: #f55;">分页部分：</span></strong> 创建Page类，通过HTML5的<strong> history.pushState() </strong>来决定页面，但实际上pushState并不会刷新页面，真正改变的只是blog的DOM元素。也因此在历史记录前进后退时遇到了小Bug，得多新增了2个属性解决问题。</p><p style="font-size: 13px; text-indent: 14px;"><strong><span style="color: #f55;">搜索框部分：</span></strong> 通过JS循环<strong> placeholder </strong>实现动态提示语。 动态搜索则是通过对比输入的value创建 对应的 Tag子元素 实现。粒子特效通过<strong> canvas </strong>实现，粒子的飘动效果利用了 弧度，三角函数<strong> (random(0, 360) * Math.PI) / 180 </strong>三角函数让其x和y轴上的角度更有随意的感觉。比较烦的是随时确定当前输入的光标所在的像素位，这里利用一个假DOM与输入框重叠，假DOM内有2个 inline 子元素，第一个子元素 innerText 获取 0 到当前光标这段范围内所输入的字符，第二个子元素的与视窗之间的距离，便是当前光标所处的象数位。通过该<strong> getBoundingClientRect(elem) </strong>获取。</p><p style="font-size: 13px; text-indent: 14px;"><strong><span style="color: #f55;">登录注册部分：</span></strong> 具体后端实现交给了Bmob云后端。调用其接口实现效果。（没有做记住密码，都按登录一次后的2小时内免输入登录）</p><p>捣鼓捣鼓~</p><br/><br/></div><div class="blog wrap"><div class="date"><span class="month"></span> <span class="day"></span></div><div class="blog_head"><a href="" target="blank"><span class="title"></span> </a><i class="fa fa-tags"><span class="tags"></span></i></div><div class="blog_body wrap"><div class="info"><a href="javascript:;" target="_blank"><img class="image" src="https://gitee.com/pengnima1/blogimage/raw/master/img/lazy.jpg" alt="懒"/><div class="detail"></div></a></div></div></div><div class="blog_page wrap"><div class="page_icon page_pre fa fa-arrow-left"></div><div class="page_icon page_next fa fa-arrow-right"></div></div></div><div class="main_aside"><aside class="search"><div class="search_bar" tabindex="1"><input title="试着搜搜博客的tag" class="search_content" placeholder=""/><ul></ul></div><div class="sure_btn"><i class="fa fa-search"></i></div></aside><aside class="login_frame pnm_frame fade_move"><div class="frame_head"><span>登录面板</span><div class="aside_icon"><i class="fa fa-chevron-circle-up"></i> <i class="fa fa-times-circle"></i></div></div><div class="frame_body"><div class="form"><label><i class="fa fa-user"></i> <input id="user" autocomplete="off"/></label> <label><i class="fa fa-lock"></i> <input id="pwd" type="password"/></label><div class="tips"><label><input id="remeber" type="checkbox"/> 记住密码</label> <a href="javascript:;">忘记密码?</a></div><div class="l_a_s"><button>登录</button> <a href="./register.html">注册</a></div></div><div class="user_frame is_none"><div class="userhead"></div><div class="username">******</div><button>退出登录</button></div></div></aside><aside class="newblog_frame pnm_frame fade_move"><div class="frame_head"><span><i class="fa fa-wpforms"></i> 最新博客</span><div class="aside_icon"><i class="fa fa-chevron-circle-up"></i> <i class="fa fa-times-circle"></i></div></div><div class="frame_body"><div class="newblog list"><span><a href="javascript:;"></a></span> <span></span></div><div class="newblog list"><span><a href="javascript:;"></a></span> <span></span></div><div class="newblog list"><span><a href="javascript:;"></a></span> <span></span></div><div class="newblog list"><span><a href="javascript:;"></a></span> <span></span></div><div class="newblog list"><span><a href="javascript:;"></a></span> <span></span></div></div></aside><aside class="comment_frame pnm_frame fade_move"><div class="frame_head"><span><i class="fa fa-comments"></i> 留言</span><div class="aside_icon"><i class="fa fa-chevron-circle-up"></i> <i class="fa fa-times-circle"></i></div></div><div class="frame_body"></div></aside><aside class="randomblog_frame pnm_frame fade_move"><div class="frame_head"><span><i class="fa fa-repeat"></i> 随机博客</span><div class="aside_icon"><i class="fa fa-chevron-circle-up"></i> <i class="fa fa-times-circle"></i></div></div><div class="frame_body"><div class="randomblog list"><span><a href="javascript:;"></a></span> <span></span></div><div class="randomblog list"><span><a href="javascript:;"></a></span> <span></span></div><div class="randomblog list"><span><a href="javascript:;"></a></span> <span></span></div><div class="randomblog list"><span><a href="javascript:;"></a></span> <span></span></div><div class="randomblog list"><span><a href="javascript:;"></a></span> <span></span></div></div></aside><aside class="tags_frame pnm_frame fade_move"><div class="frame_head"><span class="is_select">热门标签</span> <span>友情链接</span></div><div class="frame_body"><div class="popular_tags is_show"></div><div class="friend_links"><a href="https://github.com/pengnima">我的github</a> <a href="https://www.bilibili.com/">全国最大<span style="color: #f55; font-weight: bolder;">同性</span>交友网站</a> <a href="https://baidu.com/">***</a></div></div></aside></div></div></div><div class="mask_bg is_none"><div class="bg_h"></div></div><div class="menu"><a href="./index.html" class="menu_icon">首页</a> <a href="javascript:;" class="menu_icon">下一页</a> <a href="javascript:;" class="menu_icon">项目</a> <a href="javascript:;" class="menu_icon">留言</a> <a href="javascript:;" class="menu_icon">资料</a> <a href="javascript:;" class="menu_icon">上一页</a></div><canvas class="canvas"></canvas><div class="top_btn is_none"></div><script src="./myblog/js/Bmob-2.2.4.min.js"></script><script src="./myblog/js/index.js"></script></body></html>