首先介绍了Ejs模板引擎以及为Node.js构建的CSS语言——Stylus,便于对博客主题文件中布局与样式的理解。在对主题文件结构有所了解后,为博客添加了一个显示页面百分比的小功能,简单记录一下。
主题基于hexo官方主题MiHo,地址https://blog.minhow.com/ 感谢Miho的作者。
一. ejs和stylus
1.1 ejs
EJS是一个高效的JavaScript模板引擎,帮你利用普通的 JavaScript 代码生成 HTML 页面。
ejs项目的开发基于node.js和express框架,这里Miho中的ejs文件中包含的partial函数是旧版express中的,其功能现由新版EJS的include函数实现,例如引入/.views/user/show.ejs文件可用以下命令
1 | <%- 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文件,更改如下:
1 | <%- partial('_partial/head') %> |
三. 添加样式
miho\source\css下style.styl添加。
附:_variables.styl可以简单定义部分网站样式,应该是Miho作者预留,每个模块都有注释比较友好。
1 | #page_percentage |
四. 添加JS
当前页面的高度 = 获取当前窗口顶部至页面顶部的高度 + 当前窗口高度
$(document).height() = $(window).scrollTop() + $(window).height()
miho\source\js下main.js文件添加如下代码
1 | $(document).scroll(function(){ |
到这里基本就完成了可以部署并浏览效果了。