hexo主题集成pug

发表于2022-12-27|更新于2026-02-24

|浏览量:

你问人问题，她若答非所问，便已是答了，无需再问。——木心

先创建hexo项目

1	hexo init simple-hexo

然后到themes新建一个主题文件夹

1 2	cd .\simple-hexo\themes\ mkdir simple-theme

修改外部_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元素成功渲染

好了，接下来你可以编写你自己的主题啦！

前端

相关推荐

2023-03-26

for...in、for...of、for await...of

处世应当谦虚，切忌轻人傲世。——佚名简单说下区别： for...in遍历出来的是key 12345678910var obj = {a:1, b:2, c:3};for (var prop in obj) { console.log("obj." + prop + " = " + obj[prop]);}// Output:// "obj.a = 1"// "obj.b = 2"// "obj.c = 3" for...of遍历出来的是元素 123456789const array1 = ['a', 'b', 'c'];for (const element of array1) { console.log(element);}// Expected output: "a"// Expected output: "b&quo...

2021-08-06

代码方式引入iconfont图标

只有永远躺在泥坑里的人，才不会再掉进坑里。——黑格尔前端开发中，经常会遇到需要引用图标的情况我们可以在iconfont寻找我们需要的图标 https://www.iconfont.cn/ 比如这两个图标，我非常喜欢，我可以使用直接下载的方式引入图标但这种方式，如果我们需要它改变颜色的话，就需要再次下载，非常麻烦我们还可以使用代码方式引入，我们首先点击添加进购物车然后到我们的购物车结算点击添加至项目登录账号然后再次点击添加至项目后会弹出加入项目，我们可以新建一个项目确定后，我们就可以在这里点击生成代码然后复制代码粘贴到项目css中然后定义使用iconfont的样式 123456.iconfont{ font-family:"iconfont" !important; font-size:16px;font-style:normal; -webkit-font-smoothing: antialiased; -webkit-text-stroke-width: 0.2px; -m...

2025-11-17

mind-map

或许美化灵魂有不少途径，但我想，阅读是其中易走的，不昂贵的，不须求助他人的捷径。——严歌苓《读书与美丽》 https://github.com/wanglin2/mind-map 思绪 Simple mind map 深度解析：一个简单 & 强大的 Web 思维导图库与跨平台应用生态仓库地址：wanglin2/mind-map开发文档：https://wanglin2.github.io/mind-map-docs/在线使用（网页版思维导图）：https://wanglin2.github.io/mind-map/中文名：思绪思维导图（Simple mind map） 1. 项目定位Simple mind map 是一个不依赖任何前端框架的 JS 思维导图库，同时作者基于该库又构建了一个可直接在线使用的 Web 思维导图应用（基于 Vue2 + ElementUI）。它的目标不是“花哨”，而是专注于：核心逻辑简洁扩展机制清晰（插件化）高度可配置与自定义支持多结构、多格式、多媒体内容节点可以既做“库”又做“产品”，利于二次...

2023-11-15

emberjs

合抱之木，生于毫末；九层之台，起于累土；千里之行，始于足下。——老子分享一个js框架 https://emberjs.com/ Ember.js 是一个高效的、经过实战考验的 JavaScript 框架，用于构建现代 Web 应用程序。它包括构建可在任何设备上运行的丰富 UI 所需的一切。它的语法： 123456789import Route from '@ember/routing/route';export default class IndexRoute extends Route { async model() { return { title: 'Grand Old Mansion' }; }} 对应的页面 1<h1>{{@model.title}}</h1> 使用的是.hbs后缀的模板文件，语法和vue有些异曲同工之妙，是一个很值得学习的库其emberjs约定大于配...

2020-08-22

字符串的split和join

split() 将字符串拆分成数组 join() 将数组合并参数为分隔符两套代码 123456#JavaScriptvar str = "ruben";var array = str.split('');array.forEach(s => console.log(s));str = array.join('');console.log(str); 以及 12345678//javaString str = "ruben";String[] array = str.split("");for (String s : array) { System.out.println(s);}str = String.join("", array);System.out.println(str);

2025-03-31

pakku.js

不同孕育仇恨。——司汤达《红与黑》介绍 pakku.js：拯救 B 站的弹幕体验最近，我发现了一个非常有趣的开源项目——pakku.js。这个项目由 xmcp 开发，旨在提升 B 站（Bilibili）的弹幕体验。今天，我将为大家详细介绍一下这个项目的特点和使用方法。项目概述pakku.js 是一个用于优化 B 站弹幕体验的浏览器扩展。项目自 2017 年 2 月 28 日创建以来，已经获得了 2243 个星标和 78 个 forks，显示了其在社区中的受欢迎程度。项目使用 TypeScript 编写，并且遵循 GNU General Public License v3.0，确保其免费和开源。项目特点提升弹幕体验：pakku.js 提供了丰富的弹幕过滤和优化功能，帮助用户屏蔽无意义的弹幕，提升观看体验。开源项目：作为一个开源项目，pakku.js 拥有庞大的社区支持，用户可以在 GitHub 上交流经验、分享心得。多平台支持：pakku.js 作为浏览器扩展，可以在多个平台上使用，包括 Chrome 和 Firefox。简单易用：pakku.js 提供了简单易用...

阿超

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

数据加载中