admonition admonition,是FixIt/LoveIt系列主题集成的短代码功能,有着炫酷的效果,可以美化文章笔记,但它并不是Markdown的标准语法,不能被Markdown正常渲染,需要额外的配置...hugo的LoveIt,FixIt主题都集成了admonition shorcode功能,可以比较方便的进行使用,语法和样式效果如下。
hugo的LoveIt,FixIt主题都集成了admonition shorcode功能,可以比较方便的进行使用,语法和样式效果如下。
这不乘着周末的时间,把自己的站点也是升级到最新开发的主题,同时也是为后续想升级旧版本 Hugo NexT 的用户打个样吧。...注意: 以下的操作记录,如果你已经熟悉 Hugo 使用,了解 Hugo NexT 主题相关配置,那么效果会更加好。...主题默认提供的是单一配置文件的经典模式,可能很多人都会比较喜欢这样的简便风格,但个人还是更喜欢 Hugo 那种按目录进行分类管理的形式,不仅方便于管理,而且在本地开发时能效的屏蔽某些配置参数泄漏,整体的目录结构参考如下...,迁移至新主题后效率直接提升 4 倍以上,再配合 Hugo 引擎的性能表现,本博客现有的 270 个页面生成只需要 600ms ,结果就是一个字 “快”,也呼吁大家尽早迁移到新版本的主题上使用,不仅能享用新功能...图片也希望能够吸引到更多的小伙伴们,一起参与进来共同建设 Hugo NexT 主题。除了主题的开发工作外,也会做好博客内容的打造。
Hugo上并没有类似一的主题,再加上从Hexo迁移到Hugo还有好多要修改的,所以一直迟迟没有行动。...Hugo的maupassant主题 前段时间在Github上闲逛,竟然发现了有人基于Hugo制作了maupassant主题,就clone下来看了一下,发现的确实现了maupassant主题的大部分功能,...飞雪无情版本的Hugo maupassant 主题开源。...相信还有很多和我一样的人,想用Hugo的这款maupassant主题。 和更多的朋友一起完善该主题。...Hugo maupassant 主题配置 Hugo maupassant 主题配置也不难,是否熟悉Hugo都可以快速配置,并生成自己的网站。 我博客的配置如下,大家可以参考。
多数主题不自带赞赏功能,这篇文章的这套打赏支持方案,基于LoveIt,LeaveIt,FixIt这系列主题,他们本质都是由同一个主题演变迭代。...其余博客主题可以自行尝试,区别不大,只要把主题中修改的模板直接改到hugo的模板里即可。 特别提示 赞赏功能需要用到.scss样式,hugo版本需要使用扩展版hugo_extended才能支持。...1 reward: false # true为开启 flase为关闭 修改主题中的文件 1.修改国际化文件 在 \themes\FixIt\i18n\zh-CN.toml 配置文件中添加如下配置:...,你可以完全拷贝一份复制到hugo站点框架里对应目录下,如果无此目录则直接新建,然后再做修改,这样不会影响主题里文件,避免你主题升级之类直接覆盖更新。...hugo会优先从站点框架里调用模板文件,匹配不到再在主题模板文件里调用。
文章内容仅限于PaperMod主题,对于其他主题仅供参考 1.背景 官方当前版本的PaperMod目录是放在顶部的,之后的版本也不知道会不会放在侧边,我个人觉得目录放在顶部不方便展示阅读进度,如果文章很长...discussions,希望作者能把目录放在侧边,没想到半个月后作者竟然回复了,而且还附上了代码,对比下来感觉作者设计的要比自己折腾的更好,所以果断换过来了,期间还遇到了中文乱码导致目录部分功能失效的问题,因为该主题国人用的不多...} {{- /* strip id="" to leave xyz, no way to get regex capturing groups in hugo
如何使用tailwindcss自定义hugo主题 如何使用tailwindcss自定义hugo主题?对于某些主题,可能作者开发时候,它不具备自定义指定css的功能,但这并不妨碍我们自己添加这个功能。...我们可以参考Loveit主题,由于hugo中语法{{partial "site-style.html"}}是用来引入相关样式配置文件的,通常它都存在于layouts目录下的header.html文件中,...在目录assets/css下创建custom.css文件并写好自定义样式,然后hugo -D编译完就可以了。...以我举例的这个使用tailwindcss做为样式定义的package来说明,因为这是对hugo主题进行修改,所以这里就头脑中要有个概念,就是hugo是基于golang的一套系统,但是你在模板引擎内使用的语法已经剥离了...今天这篇有关如何使用tailwindcss自定义hugo主题的文章至此分享结束,感谢阅读。
有关主题 Typecho主题 | SmileTheme – 移植hugo-tania – 简洁、轻盈 Github – SmileTheme | 文档 | hugo-tania SmileTheme...为Typecho移植 GitHub ouyangyanhuo/SmileTheme hugo-tania 原版主题(Hugo系统主题) GitHub WingLim/hugo-tania SmileTheme...主题由于博主的个人原因,开学后更新会较为缓慢。...( 若是从 GitHub 下载,请把解压出来的文件夹改名为 SmileTheme ) ,将文件夹上传至网站文件主题目录 ( /usr/theme ) 下,进入网站后台-控制台-外观-启用主题即可。...手动更新 更新版本时,下载新版主题包并解压,直接把解压后的文件覆盖上传即可 ( 对主题有修改请自行备份 ) ,无需切换至其他主题 ( 这样就不会丢失设置 ) 。
定位到目录 layouts/_default/list.html,添加一个class标识,命名为post-info,把entry-header和entry-co...
Clean White Theme for Hugo CleanWhite is a clean, elegant, but fully functional blog theme for Hugo....upstream projects have done awesome jobs to create a blog theme, what I’m doing here is porting it to Hugo...$ cp -r hugo-theme-cleanwhite/exampleSite/** ../ $ cd .. $ hugo serve If your site is already a git...themes/hugo-theme-cleanwhite Run Hugo Build-in Server Locally $ hugo serve -t hugo-theme-cleanwhite...Generate index file: $ hugo Create a new file in the root of your Hugo project called .env, and add the
将ZIP文件移动到您的C:\Hugo\bin文件夹中。 双击ZIP文件并提取其内容。确保将内容提取到同一C:\Hugo\bin文件夹中-Windows会默认执行此操作,除非您告诉它要提取其他位置。...现在,您应该有了三个新文件:hugo可执行文件(hugo.exe)LICENSE,和README.md。...现在,您需要将Hugo添加到Windows PATH设置中: 安装 $ brew install hugo 验证安装 $ hugo version $ hugo help 新建网站: $ hugo...new site quickstart 添加内容 $ content//. $ hugo new posts/my-first-post.md Hugo命令 命令hugo将您的站点渲染到public/dir...中,并准备将其部署到Web服务器: 启动Hugo服务器 $ hugo server -D http://localhost:1313 安装主题 config.toml baseURL = "https:
博客更换计划 自从打算把博客换到hugo到现在已经过去两个星期了,今天才开始往服务器上面部署,之所以没有直接部署还是有很多原因限制,时间是一个方面。还有就是平台更改后的样式和功能也有所变化。...更换遇到的问题 markdown文档的front matter头的更改以及主题的替换及样式的自定义,还有就是部署的问题,以前是用了travis+webhooks,这次当然也不能少,所以又要看travis...生成静态资源,但github访问速度较慢 将源码放到github,再自动推送到coding,服务器监测coding推送,然后拉取,使用hugo生成静态资源 在2的基础上使用travis直接生成静态资源,...需要在脚本中下载hugo,go get太慢,可以考虑wget`下载二进制包调用命令 1,2配置比较繁琐,但手动可靠性及稳定性都要高一些,3就比较省心,但要写脚本 试了第三种后,go get太慢,改为wget...hugo的包后加入环境变量进行调用hugo命令 需要考虑加入的功能 评论,以及代替 全局搜索 图片改图床,因该平台后图片路径很可能不一致,所以使用图床比较省心,后面计划使用七牛的图床可以做一个脚本,推送前将图片上传到七牛并替换原链接
homebrew/bin/brew shellenv)"' >> /Users/zhuyaguang/.zprofile eval "$(/opt/homebrew/bin/brew shellenv)" hugo...new posts/hugo-command.md hugo server -D hugo --destination .
前言 本博客使用的是Hugo的LoveIt主题,本文也是基于该主题而写的,不过Hugo的美化步骤应该大同小异,版本如下: 1 2 3 hugo: v0.74.2/extended windows/amd64...另外本文篇幅太长,阅读体验不好,将其进行分章如下: Hugo系列(3.0) - LoveIt主题美化与博客功能增强 · 第一章 Hugo系列(3.1) - LoveIt主题美化与博客功能增强 · 第二章...Hugo系列(3.2) - LoveIt主题美化与博客功能增强 · 第三章 Hugo系列(3.3) - LoveIt主题美化与博客功能增强 · 第四章 显示最近更新的十篇文章 在归档页面只能看到所有以创建时间递减排序的文章列表...fa-fw"> {{ . }} {{- end -}} 参考链接 Lists of Content in Hugo
1.安装hugo windows用户可以先去官网下载hugo框架,hugo官网地址, 苹果用户有安装HomeBrew工具的话可以直接输入brew install hugo进行安装。...2.新建站点 输入hugo new site hugoblog ,就会在hugoblog文件夹内出现如下目录结构: image.png 3.下载主题 先去 hugo主题官网 找到自己喜欢的主题,然后点击下载会跳转到主题的...github, 把终端的路径调整到博客文件夹的themes目录下,输入:git clone https://github.com/adityatelange/hugo-PaperMod.git,比如我的主题是...然后把主题里面的一些静态文件和配置文件复制到站点目录下,目的是为了可以自定义博客的样式,而不会改动主题文件夹里的样式,这样主题要更新的时候,直接在主题目录下git pull就可以,站点目录的修改会优先覆盖主题里的配置...4.配置文件 站点配置文件推荐改成.yaml后缀的写法,因为更适合阅读,反正.toml的写法我是不习惯,详细的可以看hugo的官方文档,下面是我的配置: (注意这是PaperMod主题的配置方法,一些基本配置所有主题都一样
前言 本文主要记录从Hexo迁移至Hugo所遇到的一些坑,以及Hugo的LoveIt主题的一些bug之类的应对方案。...Valine评论功能无法使用 LoveIt主题的评论功能默认情况下是无法在本地使用的,除非修改模板渲染文件,或者启动本地服务时添加参数,如下: 1 hugo server -e production...无法直接自定义JavaScript LoveIt主题没有直接提供自定义JavaScript的文件,只能通过修改页面的模板文件来引入自定义的JavaScript文件,具体做法可以参考Hugo系列(3) -...有兴趣的可以去看看下面这几个网站: Add PWA to your Hugo site 改造你的网站,变身 PWA 基于Service Worker 的XSS攻击面拓展 后来又在LoveIt主题作者的一篇文章中找到了答案...Hugo Release - 0.74.0 lightgallery启用时,图片会显示得很小,是设计如此还是bug#311 主题文档 - 基本概念 警告 本文最后更新于 March 17, 2021,
前言 本博客使用的是Hugo的LoveIt主题,本文也是基于该主题而写的,不过Hugo的美化步骤应该大同小异,版本如下: 1 2 3 hugo: v0.74.2/extended windows/amd64...另外本文篇幅太长,阅读体验不好,将其进行分章如下: Hugo系列(3.0) - LoveIt主题美化与博客功能增强 · 第一章 Hugo系列(3.1) - LoveIt主题美化与博客功能增强 · 第二章...Hugo系列(3.2) - LoveIt主题美化与博客功能增强 · 第三章 Hugo系列(3.3) - LoveIt主题美化与博客功能增强 · 第四章 Valine评论系统添加邮件通知和QQ提醒 LoveIt...主题自带的Valine没有邮件通知和QQ提醒功能,所以需要额外使用Valine的增强版Valine-Admin来进行功能增强。...由于LoveIt主题没有引入Waline,所以这里记录下如何引入Waline,以及遇到的相关问题的解决方法。
不过单单就Hexo和Hugo的框架设计来说,我觉得是Hexo远胜于Hugo的。因为Hexo有更完整的插件机制,主题机制。它的插件机制可以让你替换里面的核心组件,增加更多的渲染引擎、模板引擎等等。...相比之下Hugo就差多了。压根没有插件机制,干啥都得主题自己做。读配置也写得比较死,很不方便。比如Hexo可以给主题加配置,然后有主题配置和站点配置,但是Hugo就没法读取主题配置。...写插件和主题的时候全靠看别人的怎么写,然后试。这太伤了。相比之下,Hugo的文档就完善得多得多得多。虽然也有些地方的找别人主题的参考实现,但是基本上从复杂到小白的文档都覆盖得比较完整。...而Hugo目前缺失插件机制,而且很多配置和参数写得很死。 我迁移到静态博客系统主要是复刻主题。所以两个系统的主题都复刻了一遍,主框架是一样的,但是用了兼容两者的写法和配置吧。...所以复刻了两个系统的主题: hexo-theme-distinctionpp hugo-theme-distinctionpp 两个主题的功能和内容基本是保持一致的,除了有些无法实现的功能。
前言 本博客使用的是Hugo的LoveIt主题,本文也是基于该主题而写的,不过Hugo的美化步骤应该大同小异,版本如下: 1 2 3 hugo: v0.74.2/extended windows/amd64...另外本文篇幅太长,阅读体验不好,将其进行分章如下: Hugo系列(3.0) - LoveIt主题美化与博客功能增强 · 第一章 Hugo系列(3.1) - LoveIt主题美化与博客功能增强 · 第二章...Hugo系列(3.2) - LoveIt主题美化与博客功能增强 · 第三章 Hugo系列(3.3) - LoveIt主题美化与博客功能增强 · 第四章 添加自定义的_custom.scss LoveIt...安装搜索插件hugo-search-fuse-js到本地 hugo-search-fuse-js并不是一个单独的主题,而是Hugo主题的一个组件: 下载hugo-search-fuse-js到站点的主题目录.../themes/hugo-search-fuse-js下,注意,目录名必须是hugo-search-fuse-js 把该主题组件名字添加到站点配置文件里,注意,搜索组件名字要在最前面,后面跟着的是你的主题的文件夹名字
领取专属 10元无门槛券
手把手带您无忧上云