Hexo+yilia主题实现文章目录和添加视频
来源:互联网 发布:大乐透必中五红算法 编辑:程序博客网 时间:2024/06/06 05:32
一、说明
- 也可以点击这里查看此文章
- 文章目录功能效果可以点击这里查看
- 视频页面效果可以点击这里查看
- 粗略实现,有问题可以在下方评论区留言,或者留言板留言
二、文章目录功能
1、添加CSS样式
- 打开
themes\yilia\source
下的main.234bc0.css
文件,添加如下代码:css
样式我也放到了github
上:https://raw.githubusercontent.com/lawlite19/Blog-Back-Up/master/css/main.234bc0.css- 使用的是别人的
css
,可能有冗余的部分
/* 新添加的 */#container .show-toc-btn,#container .toc-article{display:block}.toc-article{z-index:100;background:#fff;border:1px solid #ccc;max-width:250px;min-width:150px;max-height:500px;overflow-y:auto;-webkit-box-shadow:5px 5px 2px #ccc;box-shadow:5px 5px 2px #ccc;font-size:12px;padding:10px;position:fixed;right:35px;top:129px}.toc-article .toc-close{font-weight:700;font-size:20px;cursor:pointer;float:right;color:#ccc}.toc-article .toc-close:hover{color:#000}.toc-article .toc{font-size:12px;padding:0;line-height:20px}.toc-article .toc .toc-number{color:#333}.toc-article .toc .toc-text:hover{text-decoration:underline;color:#2a6496}.toc-article li{list-style-type:none}.toc-article .toc-level-1{margin:4px 0}.toc-article .toc-child{}@-moz-keyframes cd-bounce-1{0%{opacity:0;-o-transform:scale(1);-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}60%{opacity:1;-o-transform:scale(1.01);-webkit-transform:scale(1.01);-moz-transform:scale(1.01);-ms-transform:scale(1.01);transform:scale(1.01)}100%{-o-transform:scale(1);-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}@-webkit-keyframes cd-bounce-1{0%{opacity:0;-o-transform:scale(1);-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}60%{opacity:1;-o-transform:scale(1.01);-webkit-transform:scale(1.01);-moz-transform:scale(1.01);-ms-transform:scale(1.01);transform:scale(1.01)}100%{-o-transform:scale(1);-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}@-o-keyframes cd-bounce-1{0%{opacity:0;-o-transform:scale(1);-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}60%{opacity:1;-o-transform:scale(1.01);-webkit-transform:scale(1.01);-moz-transform:scale(1.01);-ms-transform:scale(1.01);transform:scale(1.01)}100%{-o-transform:scale(1);-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}@keyframes cd-bounce-1{0%{opacity:0;-o-transform:scale(1);-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}60%{opacity:1;-o-transform:scale(1.01);-webkit-transform:scale(1.01);-moz-transform:scale(1.01);-ms-transform:scale(1.01);transform:scale(1.01)}100%{-o-transform:scale(1);-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}.show-toc-btn{display:none;z-index:10;width:30px;min-height:14px;overflow:hidden;padding:4px 6px 8px 5px;border:1px solid #ddd;border-right:none;position:fixed;right:40px;text-align:center;background-color:#f9f9f9}.show-toc-btn .btn-bg{margin-top:2px;display:block;width:16px;height:14px;background:url(http://7xtawy.com1.z0.glb.clouddn.com/show.png) no-repeat;-webkit-background-size:100%;-moz-background-size:100%;background-size:100%}.show-toc-btn .btn-text{color:#999;font-size:12px}.show-toc-btn:hover{cursor:pointer}.show-toc-btn:hover .btn-bg{background-position:0 -16px}.show-toc-btn:hover .btn-text{font-size:12px;color:#ea8010}.toc-article li ol, .toc-article li ul { margin-left: 30px;}.toc-article ol, .toc-article ul { margin: 10px 0;}
2、修改article.ejs文件
- 使用的是
Hexo
的toc
函数 - 打开
themes\yilia\layout\_partial
文件夹下的article.ejs
文件 - 加入如下内容
<!-- 目录内容 --> <% if (!index && post.toc){ %> <p class="show-toc-btn" id="show-toc-btn" onclick="showToc();" style="display:none"> <span class="btn-bg"></span> <span class="btn-text">文章导航</span> </p> <div id="toc-article" class="toc-article"> <span id="toc-close" class="toc-close" title="隐藏导航" onclick="showBtn();">×</span> <strong class="toc-title">文章目录</strong> <%- toc(post.content) %> </div> <script type="text/javascript"> function showToc(){ var toc_article = document.getElementById("toc-article"); var show_toc_btn = document.getElementById("show-toc-btn"); toc_article.setAttribute("style","display:block"); show_toc_btn.setAttribute("style","display:none"); }; function showBtn(){ var toc_article = document.getElementById("toc-article"); var show_toc_btn = document.getElementById("show-toc-btn"); toc_article.setAttribute("style","display:none"); show_toc_btn.setAttribute("style","display:block"); }; </script> <% } %> <!-- 目录内容结束 -->
- 然后若想要文章显示目录,在每篇文章开头加入:
toc: true
3、最终效果
(1) 电脑端
- -
(2) 手机端
- -
三、添加视频
- 是在之前相册功能的基础之上,相册功能的实现点击这里查看
1、添加视频样式css
- 打开当前博客
source\photos
文件夹下的ins.css
文件 - 加入如下内容
/* ====== video ===== */.video-container {z-index: 1;position: relative;padding-bottom: 56.25%;margin: 0 auto;}.video-container iframe, .video-container object, .video-container embed {z-index: 1;position: absolute;top: 0;left: 7%;width: 85%;height: 85%;box-shadow: 0px 0px 20px 2px #888888;}
2、添加视频
- 我这里添加的是优酷上面的视频
- 在当前博客
source\photos
文件夹下建立videos.ejs
文件 - 内容如下:
---layout: postslug: "photos"title: "相册"noDate: "true"comments: "true"reward: "true"open_in_new: false---<link rel="stylesheet" href="./ins.css"><div class="photos-btn-wrap"> <a class="photos-btn" href="/photos">Photos</a> <a class="photos-btn active" href="/photos/videos.html">Videos</a></div><center><h1>指弹_女儿情</h1></center><hr/><center><div class="video-container"><iframe height="80%" width="80%" src="http://player.youku.com/embed/XMjUzMzY4OTM3Ng==" frameborder=0 allowfullscreen></iframe></div></center><hr/><center><h1>指弹_友谊地久天长</h1></center><hr/><center><div class="video-container"><iframe height="80%" width="80%" src="http://player.youku.com/embed/XMjQ5MDExOTY2MA==" frameborder=0 allowfullscreen></iframe></div></center><hr/><center><h1>指弹_Always with me</h1></center><hr/><center><div class="video-container"><iframe height="80%" width="80%" src="http://player.youku.com/embed/XMjQ4MDQyNTQ0MA==" frameborder=0 allowfullscreen></iframe></div></center>
3、最终效果
(1) 电脑端
(2) 手机端
3 0
- Hexo+yilia主题实现文章目录和添加视频
- hexo yilia主题添加文章访问量统计
- Yilia主题+实现文章目录
- hexo yilia主题添加音乐
- hexo 配置yilia主题
- hexo yilia主题的所有文章功能不能用
- Hexo + yilia 主题 +githubpages博客添加友言评论功能
- github博客主题 hexo-theme-yilia
- Hexo主题和文章发布
- hexo yilia 文章浏览量统计
- hexo yilia 添加友言畅言评论支持
- 基于swiftype应用于Hexo-Yilia-主题的站内搜索引擎
- hexo yilia主题增加分享以及访问统计
- Hexo yilia 主题使用畅言评论系统
- Hexo+Next主题 文章添加阅读次数,访问量等
- 优化 Hexo 默认主题之为博客添加目录
- Hexo静态博客的文章源码和主题代码管理
- Github pages + Hexo 博客 yilia 主题使用畅言评论系统
- python下实现字符串反转
- 【典型案例】远距离水位无线传输测控系统
- 哪些虚拟机支持Windows 8?微软为你总结
- Axis2动态创建webservice
- 用代理避免ajax跨域请求(手机验证码)
- Hexo+yilia主题实现文章目录和添加视频
- 九一八,勿忘国耻!
- 提交复杂格式json数据
- 【原创】pythonchalleng——第14题
- 函数派发方式
- get中文乱码/post
- js基本排序算法
- 【原创】pythonchalleng——第15题
- Apache RocketMQ4.0.0