hexo主题集成pug
发表于|更新于
|浏览量:
你问人问题,她若答非所问,便已是答了,无需再问。——木心
文档:https://hexo.io/zh-cn/docs/themes
先创建hexo项目
1 | hexo init simple-hexo |
然后到themes新建一个主题文件夹
1 | cd .\simple-hexo\themes\ |
修改外部_config.yml的theme
1 | theme: simple-theme |

外部执行一下hexo s启动项目试试

打开localhost:4000

因为我们什么都没写,所以是白屏
新建一个layout目录,下面放一个index.pug

1 | .container Hello World |
发现我们的pug代码并未渲染

这是因为我们没有安装pug插件导致的
到主目录执行
1 | cnpm i hexo-renderer-pug |

pug元素成功渲染

好了,接下来你可以编写你自己的主题啦!
相关推荐
2022-05-24
css继承
浅水是喧哗的,深水是沉默的。——雪莱 我们知道CSS中一些属性会被继承:给父节点设置样式,子节点也会生效例如color、font-size之类的 但像widths, margins, padding, 和 borders 不会被继承,如果被继承,设想一下,给父节点加了一个border,里面的每个子孙元素都有一个border,这不是我们通常想要的效果 如何来控制这些属性呢? CSS 为控制继承提供了四个特殊的通用属性值。每个css属性都接收这些值。 inherit 设置该属性会使子元素属性和父元素相同。实际上,就是 “开启继承”. initial 设置属性值和浏览器默认样式相同。如果浏览器默认样式中未设置且该属性是自然继承的,那么会设置为 inherit 。 unset 将属性重置为自然值,也就是如果属性是自然继承那么就是 inherit,否则和 initial一样 这里有一个简单的demo: 12345678910111213141516171819202122232425262728293031<div> <h2> ...
2022-06-18
js拖拽框选插件
只要你具备了精神气质的美,只要你有这样的自信,你就会拥有风度的自然之美。——金马 分享一个js的拖拽框选插件 官网:https://dragselect.com/ 源码:https://github.com/ThibaultJanBeyer/DragSelect.git 使用: 1pnpm i dragselect 有前端大佬翻译了部分,并编写了一个html的demo https://gitee.com/ovsexia/DragSelect-Doc-Cn 我在使用过程中发现反选有点问题,所以如果是跟我一样pnpm i下载下的版本,应该也会有这个问题,因此反选自己实现即可,这是我按照上面链接中的demo在vue模块化项目中的组件: TagDragSelect.vue 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828...
2021-06-27
before和after选择器
在科学上没有平坦的大道,只有不畏劳苦,沿着陡峭山路攀登的人,才有希望达到光辉的顶点——马克思 我们可以使用::before和::after去选择我们节点内部的首项或尾项 例如我这里代码如下 123456789101112131415161718192021222324252627282930313233343536<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> .ruben-parent { width: 100%; border: 0.1em solid #ababab; text-align: center; } .ruben-parent::before, .ruben-parent::after { margin: 0 auto; content: ''; ...
2022-12-26
pug
人心只能赢得,不能靠人馈赠——叶芝 分享一个前端框架pug github地址:https://github.com/pugjs/pug 它可以以下面的方式编写html 12345678910111213141516doctype htmlhtml(lang="en") head title= pageTitle script(type='text/javascript'). if (foo) bar(1 + 5); body h1 Pug - node template engine #container.col if youAreUsingPug p You are amazing else p Get on it! p. Pug is a terse and simple templating language with a strong focus on performance and powerful fe...
2024-06-28
uniapp将h5底部tabbar改到顶部
家贫僮仆慢,官罢友朋疏远。——佚名 样式: 1234567.uni-tabbar{ top: 0; height: 50px;}.uni-app--showtabbar { padding-top: 50px;} 当然大家也有大家的方式,不能说谁的好谁的坏 我这个的主要特点是能够适配没有tabbar的子页面
2021-11-09
让link标签失效
此岸永远是残缺的,否则彼岸就要塌陷。——史铁生 一直有小伙伴吐槽我的博客太花哨了,想让我加个隐藏主题功能,于是我就加了一个 这里用到了jquery选择带对应属性的标签 我这里是让引入style.css的link标签失效了 关键代码如下: 隐藏 12<!-- 选中head节点,找到href属性为'/css/style.css'的link标签,添加属性disabled为disabled -->$("head").children("link[href='/css/style.css']").attr('disabled', 'disabled') 显示: 12<!-- 移除该属性 -->$("head").children("link[href='/css/style.css']").removeAttr('disabled')

阿超
我的名字叫阿超 年龄25岁 家在北京市 职业是软件开发 每天最晚也会在八点前回家 不抽烟 酒浅尝辄止 晚上十二点上床 保证睡足八个小时 睡前写一篇博客 再做二十分钟俯卧撑暖身 然后再睡觉 基本能熟睡到天亮 像婴儿一样不留下任何疲劳和压力 就这样迎来第二天的早晨 健康检查结果也显示我很正常 我想说明我是一个不论何时都追求内心平稳的人 不拘泥于胜负 不纠结于烦恼 不树立使我夜不能寐的敌人 这就是我在这社会的生活态度
Follow Me公告
This is my Blog