hexo的自定义框架

摘要：浅浅学习一下Markdown的使用，以及hexo的自定义框架图。

简介

所有对于框架的渲染都来自blog\themes\下进行优化。

一、优化

头部优化

地址：matery\layout\_partial\header.ejs文件下进行修改。

侧面优化

地址：matery\layout\_widest\category.ejs（标签）文件下进行修改。

样式优化

地址：matery\source\css文件中新建_partial文件，并添加header.ejs文件等修改样式。

1.层叠式文件还没学习
2.修改是指直接添加div标签，用Markdown编辑器添加有关的插图和连接即可。

二、具体实现代码

ejs文件的了解

ejs是一个模板语言，通过数据和模板，可以生成HTML标记文本。相当于一个JavaScript库，可同时运行在客户端和服务器端，客户端直接引入文件，服务器端使用npm包安装即可。

ejs文件的常用标签

• <% %> 流程控制标签
• <%= %> 输出标签 (原文输出HTML标签)
• <%- %>输出标签 (HTML会被浏览器解析)
• <%#%>注释标签
• % 对标记进行转义
• -%> 去掉没用的空格

ejs文件常用函数

• render(str,datd,[option])：直接渲染字符串并生成HTML
  • str：需要解析的字符串模板
  • data：数据
  • option：配置选项
• compile(str,[option])：编译字符串得到模板函数
  • str：需要解析的字符串模板
  • option：配置选项
• 配置选项如下：
  • cache：布尔型 是否缓存(需要filename)
  • Filename：string 缓存名称，会用作缓存的key
  • Context：object 执行上下文函数
  • compileDeBug：布尔型 标示是否编译debug，若为true，将显示堆栈信息
  • Client：布尔型 标示是否在客户端执行，若为true，则返回函数
  • Delimiter：string 指定分隔符，默认“%”
  • Debug：布尔型 标示是否设置为debug状态，若为true则会在控制台显示生成函数源码
  • _with：布尔型 是否使用“with(){}函数，若为false，数据将会保存在locals变量中

总结

想要学会结构设计，就是使用网页开发的基本技术进行模板文件的修改。