hexo主题美化-页面百分比
一、ejs和stylus
1.1 ejs
EJS是一个高效的JavaScript模板引擎,帮你利用普通的 JavaScript 代码生成 HTML 页面。
ejs项目的开发基于node.js和express框架，这里Miho中的ejs文件中包含的partial函数是旧版express中的，其功能现由新版EJS的include函数实现，例如引入/.views/user/show.ejs文件可用以下命令
<%- include(user/show); %>
ejs基本标签如下 <% ‘脚本’ 标签，用于流程控制，无输出。 <%_ 删除其前面的空格符 <%= 输出数据到模板（输出是转义 HTML 标签） <%- 输出非转义的数据到模板 <%# 注释标签，不执行、不输出内容 <%% 输出字符串 ‘<%’ %> 一般结束标签 -%> 删除紧随其后的换行符 _%> 将结束标签后面的空格符删除
1.2 stylus
Expressive, robust, feature-rich CSS language built for nodejs 为nodejs构建的富有表现力，功能强大，功能丰富的CSS语言
通俗理解就是为node.js定制的CSS简化版，省去CSS中的花括号、分号等并扩展了语法内函数、@import的用法。 官网地址 https://stylus.bootcss.com/
二、添加布局
沿miho->layout打开layout.ejs文件，更改如下：
<%- partial(_partial/head) %>
<body>
<div id="container">
<%- partial(_partial/header, null, {cache: !config.relative_link}) %>
<div class="outer">
<section id="main" class="body-wrap"><%- body %></section>
<% if (theme.sidebar && theme.sidebar !== bottom){ %>
<%- partial(_partial/sidebar, null, {cache: !config.relative_link}) %>
<% } %>
</div>
<div id="page_percentage"></div>
<%- partial(_partial/footer, null, {cache: !config.relative_link}) %>
<%- partial(_partial/after-footer) %>
</div>
</body>
</html>
三、添加样式
#page_percentage position:fixed bottom:7% right:5% line-height: 27px z-index: 12
四、添加JS
当前页面的高度 = 获取当前窗口顶部至页面顶部的高度 + 当前窗口高度 $(document).height() = $(window).scrollTop() + $(window).height()
mihosourcejs下main.js文件添加如下代码
$(document).scroll(function(){
var d_h = $(document).height();
var c_h = $(window).height();
var c_t_h = $(window).scrollTop();
var schedule = c_t_h / (d_h-c_h-0.5);
var str=Number(schedule*100).toFixed();
str+="%";
$("#page_percentage").text(str);
});
到这里基本就完成了可以部署并浏览效果了。
四、next主题
next主题本身就已经有这个功能，在主题配置文件_config.yaml搜索scrollpercent配置为true即可
