hexo主题美化-页面百分比

最新推荐文章于 2024-01-18 09:51:55 发布

--- ZYZ ---

最新推荐文章于 2024-01-18 09:51:55 发布

阅读量803

点赞数

分类专栏：前端文章标签： hexo

本文链接：https://blog.csdn.net/qq_35076330/article/details/98303197

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

首先介绍了Ejs模板引擎以及为Node.js构建的CSS语言——Stylus，便于对博客主题文件中布局与样式的理解。在对主题文件结构有所了解后，为博客添加了一个显示页面百分比的小功能，简单记录一下。
主题基于hexo官方主题MiHo，地址https://blog.minhow.com/ 感谢Miho的作者。
个人博客：https://zyz-1998.github.io

一、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>

三、添加样式

miho\source\css下style.styl添加。
附:_variables.styl可以简单定义部分网站样式，应该是Miho作者预留，每个模块都有注释比较友好。

 #page_percentage
  position:fixed
  bottom:7%
  right:5%
  line-height: 27px
  z-index: 12

四、添加JS

当前页面的高度 = 获取当前窗口顶部至页面顶部的高度 + 当前窗口高度
$(document).height() = $(window).scrollTop() + $(window).height()

miho\source\js下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即可

--- ZYZ ---

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
hexo主题美化-页面百分比

首先介绍了Ejs模板引擎以及为Node.js构建的CSS语言——Stylus，便于对博客主题文件中布局与样式的理解。在对主题文件结构有所了解后，为博客添加了一个显示页面百分比的小功能，简单记录一下。主题基于hexo官方主题MiHo，地址https://blog.minhow.com/ 感谢Miho的作者。效果请看：https://zyz-1998.github.io一、ejs和styl...
复制链接

扫一扫