12.Hexo helpers类似函数和data folder数据文件夹

helper

Hexo里的helper,或者说是函数
基本上就是小函数,可以在layout布局中使用,可以允许做一些事情
如字符串操作、检查true或false、检查是否在一个页面上、打印出某个页面中的日期或时间特定格式

打开index.ejs
![[Pasted image 20240421140438.png]]

trim

可以通过

<%-  %>

来访问helpers

在中间输入想要输入的helper的名称

<%- trim %>

修剪前面的空白,字符串的尾随空格

<%- trim("   This is my string   ")%>

这个字符串前后都有空格
在浏览器中渲染的时候,空格就消失了
![[Pasted image 20240421141113.png]]

titlecase

控制字符串中的大小写,将字符串中的每个单词大写

<%- titlecase("This is my string")%>

![[Pasted image 20240421141437.png]]

发现每个单词的首字母都变为大写字母

date

可以用来显示日期和时间

<%- date() %>

要传入的第一个事是想要分开i的日期
frontmatter上的日期,比如有一篇博客文章,可以用它来解析博客前面的日期
或者直接输入当前的日期

<%- date(Date.now(), 'YYYY/M/D') %>

这样会提供当前日期和时间,然后给出想要打印使用的格式
![[Pasted image 20240421142215.png]]

time
<%- time(Date.now(), 'h:mm:ss a') %>

h:mm:ss是时间格式,a来显示是am还是pm
![[Pasted image 20240421142436.png]]

其余的helper可以查看官方的Hexo文档
Helpers | Hexo


data folder

date foler是一个非常特殊的文件夹
基本上可以用作是网站上的迷你数据库,可以去存储外部数据文件的地方,如果想要在网站内部使用这些文件

在Hexo中存储信息的方式之一是在frontmatter中
有a和b两个md文件
![[Pasted image 20240421144632.png]]

![[Pasted image 20240421144639.png]]

可以知道标题日期和作者

如果想要存储与特定博客文章无关的数据
如果想要访问一般数据
可以使用data folder来实现操作
![[Pasted image 20240421144855.png]]

在source文件夹里,创建一个_data文件夹
在这个文件夹里可以创建数据文件
有两种格式

  1. .json
  2. .yml
    这也是frontmatter可以使用的两种格式
    所以访问数据文件夹和数据文件和访问frontmatter相似

![[Pasted image 20240421145227.png]]

创建一个数据文件myData.yml
![[Pasted image 20240421145338.png]]

这里有一些简单的值,都只有字符串
要做的就是在任何一个模板中去使用这个文件里的信息

转到index.ejs文件
输入

<%- site.data.myData.var1 %>

![[Pasted image 20240421145807.png]]

![[Pasted image 20240421145920.png]]

其余的也一样
![[Pasted image 20240421145950.png]]

循环访问data文件中的数据

<% for(var value in site.data.myData) { %>

<% } %>

会循环遍历数据文件上的所有值
这些值会存储在var value中
比如要打印这些值

<% for(var value in site.data.myData) { %>
	<%- value %> <br>
<% } %>

![[Pasted image 20240421150441.png]]

这样可以打印出所有变量的名称,而不是打印出变量的值

<% for(var value in site.data.myData) { %>
	<%- site.data.myData[value] %> <br>
<% } %>

![[Pasted image 20240421150801.png]]

这样就访问了data file里的变量

  • 21
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Hexo和Sakura都是目前非常受欢迎的技术工具,它们在不同领域拥有着一些类似之处。 首先,Hexo和Sakura都是基于开源框架的工具。Hexo是一种静态博客生成器,它使用Node.js构建,可以帮助用户将Markdown文件转换成静态网页。而Sakura则是一种开源的CSS框架,它提供了一系列美观的CSS样式和组件,可以帮助用户快速构建漂亮的网页。 其次,Hexo和Sakura都拥有轻量级和简单易用的特点。Hexo的设计理念是简洁高效,它提供了强大而简单的指令,使得用户可以非常方便地创建、发布和管理自己的博客。而Sakura的CSS样式和组件也被设计成易于使用,使得用户可以快速地构建出具有高度一致和美观的网页。 此外,Hexo和Sakura都拥有丰富的主题和插件资源。Hexo提供了众多免费和付费主题,用户可以根据自己的喜好来选择和定制自己的博客风格。而Sakura提供了一系列的CSS样式和组件,用户可以根据自己的需求来灵活地选择和集成到自己的网页中。 最后,Hexo和Sakura都具有活跃的社区支持。Hexo和Sakura在全球范围内都有着庞大的用户群体和开发者社区,用户可以在这些社区中获取帮助、分享经验和解决问题,使得使用Hexo和Sakura更加便捷和高效。 综上所述,Hexo和Sakura虽然在功能上有所差异,但它们都是以简单、易用、美观为目标的优秀技术工具,对于需要构建个人博客或者快速构建美观网页的用户来说,都是非常值得一试的选择。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值