想在文章中插入 iframe, video, 以及其他比如 summar y等标签，可以配置一下 config 文件。
hugo 安装这里不再赘述，主题选择 hugo-theme-stack 1....本地图片的处理 hugo 支持两种方式引用本地图片： 图片放入 statics 文件夹，然后在文章中引用： 1 [1.png](/images/1.png) 文章和图片位于同一个目录，文章中直接引用...Vercel 就会自动渲染并发布，也支持绑定自定义域名，自动申请 ssl 等服务。...由于vercel 自带的 hugo 版本较老，需要指定 hugo 版本 Vercel -> Project-> Settings -> Environment Variables HUGO_VERSION...主题修改 修改引用代码块颜色 默认引用背景和代码块的颜色比较接近，不好区分，修改为 vue 风格的配色。
先看上面两幅图片,如果实现上面现象该如何 .main{ width: 100px; border: 1px solid red; overflow: hidden; text-overflow
温馨提醒 总结摘要 现可以支持在撰写文章的过程中，直接使用`Markdown`语法来书写不同类型的警告消息，让文章的内容更加丰富和易读，快来看看它的使用和效果吧。...早期在Hugo NexT主题中使用短代码方式实现过对不同类型消息的样式支持，只不过是使用时需要用户书写完整短代码不是很方便，同时输出的效果是独立的块占用空间比较大。...后来发现Hugo框架在新版中支持了自定义 blockquote的渲染方式，于是乎便有点有新的想法，让用户直接使用Markdown语法来书写不同消息内容，输出的效果实现类似于Github的警告样式，这样使用起来会更加方便...注意 最新版本的 HugoNexT 主题支持Markdown文档的Blockquote渲染，有7种不同风格可选择使用或自定义配置。...警告 HugoNexT 主题使用了SCSS 预编译，需要下载 Hugo 官方 hugo-extended 版本使用。
重写了 Hugo NexT 主题中有关于代码块渲染的所有代码，修复了拷贝代码内容时末尾出现换行和其他问题，同时也增加了代码块的折叠和展开功能，让阅读的体验变得更好。...对于技术类的分享文章而言，或多或少会需要使用到代码块的功能，Hugo NexT主题中默认也是支持代码块的展示，只不过无法支持代码块进行折叠和展开的操作，且在代码选中时的样式与背景也不太容易区分，同时也还发现其他的一些小问题...本以为只是需要给代码块增加个点击事件监听，然后进行相应的展开或折叠操作，但发现定位这个代码块的元素有些问题，原因是受限于之前实现代码块渲染功能时，使用的是内嵌入的样式来支持的，而Hugo生成的代码又是比较的混乱...，导致在不同的使用场景下代码块的生成元素有差异，无法发现其中的规律来进行定位。...警告 发现了很多网站的代码复制都会在末尾出现换行，这个还是有一定的风险的，特别是对于在系统终端下执行命令，万一复制的代码是有缺陷的话，而这个换行又会让复制的代码直接运行，很有可能会带来不可预知的风险，大家还是要对代码复制引起重视的
在本教程中，我们将介绍如何在Ubuntu服务器上安装和使用Hugo。这将允许我们配置静态站点，创建内容，并在同一服务器上发布或部署到生产位置。...安装Hugo主题 主要的Hugo包不包括任何主题。Hugo主题定义了如何为用户呈现网站内容。获取Hugo主题的最简单方法是克隆Hugo主题git存储库，它提供了许多预配置的主题。...Hugo有时要求这些目录存在，即使它们中没有任何内容。要解决此问题，我们可以在每个空目录中包含一个隐藏的.gitkeep文件。这足以让git提交目录而不会影响Hugo的实际功能。...将其更改为引用服务器的域名或公共IP地址。您还应该编辑分配给title的值。...为了让Hugo能够从我们的Markdown页面正确生成HTML，我们需要创建以.md扩展名结尾的文件。 创建关于页面 将从主页链接到的页面以及页面所需的相对路径在很大程度上取决于您的主题。
SEO 需要 Hugo 本就是类似服务端模板语言的 Web 框架，天然的服务端渲染。...灵活易于管理，能让非技术的运营同学也能参与站点的内容管理 强大的模板系统，让技术人员专心开发完对应模板后，能将内容管理交给运营同学持续运营。...社区资源丰富 生态很好，现成大量的主题可供选择 作为 Golang 语言最受欢迎的站点框架，随着越来越多人的使用，Hugo 官方鼓励大家开源自己的主题，约定了简易可行的规范，让贡献者的主题能在 Hugo...Hugo 期望的形式来进行，这样会让你不论是实现，还是在阅读 Hugo 文档的时候，事半功倍，易于理解。...个人定制 除了 Hugo 本身的框架、规范及工具能力外，因为网页的代码最终还是离不开 HTML/CSS/Javascript，自定义相关的内容，只要善用提供的规则（如各个模板的引用，组合），就能在各个模板入口引入你想自己控制的代码部分
TOC 一、前言 关于搭建一个博客或个人网站的好处不用我多说，但创建网站的难度可能会让人望而却步。本人从网络上获得过很多帮助，学到很多。...二、原理 那么如何用静态网页创建网站呢？很多博客一上来就直接讲方法，怎么一步步运行，得到一个简陋的网页。但是不知其所以然，因此这里想先介绍一下基本原理，方便理解和后面的debug。...这里推荐用hugo或hexo。 然后把静态网页文件托管到github仓库。这里推荐使用git和gitlab工具。 把远程的静态网页文件进行渲染，形成让大家可根据网址直接阅览的网页。...最后我们用Netlify对托管到github上的静态网页进行渲染。...md可以使用相对位置进行引用。 其实如果不是为了同时保存md文件在有道云笔记的话，这种方式是最方便的，而且免费。
为了合规和自我审查，我对博客做了 2 件事，一是把评论系统迁移到了 Giscus，这提高了一定的评论门槛，让评论处于半关闭状态；二是清理了一些博客中的链接，让剩下的链接通过跳转页面跳转。...3 个文件创建跳转页面 # 我的设计思路与「空白」的第一版 JS 的方式不太一样，我利用 Hugo 内置模板 _markup 的 render-link.html ，在 Hugo 构建时就把外链用 Hugo...新建或者修改 render-link.html # _markup/render-link.html 是 Hugo 渲染链接的内置模板。...如果博客选用的主题没有自定义 render-link.html，那需要自己新建一个此文件，如果主题已经自定义过链接渲染的，那就可以直接修改此文件。...背景图 # 背景图放在 static 的目录下： 或者自己能正确引用的位置，如 CDN，并修改 中的 background url。 另外需要适配自己主题的 Dark mode。
切到 hugo 后，url 没有日期了，且加上了一个 post 路径。...问了几次 aofei 如何修改 CSS 后，我自己成功地将 cmd markdown 渲染出来的引用格式移植到了博客上。...过程也很简单：先用『检查』功能找到 cmd markdown 页面上的引用对应什么元素，然后在它的 css 文件里找到对应的代码，copy 到本地 style.css 里就 ok 了。...好在 hugo 足够快，改完代码能立马看到效果，我就可以不断地尝试。...static 目录下面的文件会移到网站根目录 当我们想让一些文件在执行 hugo 命令后出现在网站根目录下，只需要将它们放到 themes/maupassant/static 就行了。
此次发布的Hugo NexT v4.7.2除修复发现的:bug:之外，还新增了不少新特性，参考如下：支持不同国家的多语言切换 支持显示文章的总结摘要与过期信息提示支持对长的代码块进行折叠显示支持Bilibili...视频与音乐播放嵌入显示支持在Gemini和Pisces模式下显示二级导航菜单支持类似Github风格的告警效果支持阅读更多按钮时跳转时锚定后续内容的效果支持Waline3的评论系统......接下来就一起看看如何从旧版本升级这个新版本吧...代码块折叠只需要更新下配置文件即可，在配置文件中找到highlight的配置项，把原来的参数替换为如下的配置：highlight: anchorLineNos: true codeFences: true...实际的渲染效果可以参考此文中的各种警告信息输出。阅读更多按钮无须做任何的配置，根据文章内容中的阅读更多按钮跳转时，会自动定位到后续内容的位置，具体的效果在访问此文时可以看到。...serverURL: #注意： 其他位置有引用应对的Waline功能配置，也是需要更新为waline3，比如文章访问统计和评论统计。
前景 hugo的渲染速度"婶婶”(深深)的打动了我，于是决定从hexo迁移到hugo，迁移的帖子之后总结一下，先记录一下自己设置hugo下的Loveit主题的一些有意思的东西 LoveIt扩展Shortcodes...type=question 警告 type=warning 失败 type=failure 危险 type=danger Bug type=Bug 示例 type=example 引用
BuildDate: unknown LoveIt: v0.2.10 请注意，本文的所有功能都离不开两个新增加的文件：_custom.scss和custom.js，部分功能还需要jquery，在第一章中会提及如何引入...Hugo在渲染页面时优先读取站点根目录下的同名字的目录和文件，所以可以利用这个特点来美化主题。...首先在站点根目录下创建一个自定义的文件：\assets\css\_custom.scss，这样Hugo就会最终以该文件来渲染页面的样式。...如何添加自定义的页面 除了发布草稿和正文，我们还可以添加自定义的页面page。page不会像文章那样被渲染，而是被渲染成一个单独的页面，类似于你的文档、标签页面。.../_partial/_single/friend"; 这样Hugo就会用我们新增的这个文件来渲染友链页面了。
之前文章的发布流程是 notion 写完文章后导出 markdown，然后处理后再发布到 hugo，步骤还是很繁琐的。...后来看到了一个工具，可以实现从 notion 发布文章到 hugo，折腾过程如下： 其实 notion 并不能直接发布到 hugo，而是借助了 github action 和 vercel，github...渲染，然后发布你的新文章。...一、notion 配置 notion-site 的文档已经描述的很详细，以下内容完全引用自：https://ns-doc.env.wtf/docs/start/setting-notion/，仅作备份...NOTION_SECRET Secret为一中创建的 Integration token 图片 三、测试 手动触发 actions 查看结果，可以看到成功推送文章到 github，并且 vercel 也成功渲染的新的文章
此次发布的Hugo NexT v4.7.2除修复发现的之外，还新增了不少新特性，参考如下： 支持不同国家的多语言切换 支持显示文章的总结摘要与过期信息提示 支持对长的代码块进行折叠显示 支持Bilibili...视频与音乐播放嵌入显示 支持在Gemini和Pisces模式下显示二级导航菜单 支持类似Github风格的告警效果 支持阅读更多按钮时跳转时锚定后续内容的效果 支持Waline3的评论系统 …… 接下来就一起看看如何从旧版本升级这个新版本吧...代码块折叠 只需要更新下配置文件即可，在配置文件中找到highlight的配置项，把原来的参数替换为如下的配置： 1 2 3 4 5 6 7 highlight: anchorLineNos: true...实际的渲染效果可以参考此文中的各种警告信息输出。 阅读更多按钮 无须做任何的配置，根据文章内容中的阅读更多按钮跳转时，会自动定位到后续内容的位置，具体的效果在访问此文时可以看到。...serverURL: # 警告 注意： 其他位置有引用应对的Waline功能配置，也是需要更新为waline3，比如文章访问统计和评论统计。
原本的文章文件头里有一个abbrlink属性，如下： 1 2 3 --- abbrlink: 71bd19d3 --- 为了让旧的文章url和以前保存一致，于是全部加上一个slug属性，如下： 1 2...Valine评论功能无法使用 LoveIt主题的评论功能默认情况下是无法在本地使用的，除非修改模板渲染文件，或者启动本地服务时添加参数，如下： 1 hugo server -e production...最终发现，问题出在了某篇文章里的代码块，如下： 1 2 3 4 5 6 .... {% include '_custom/custom-foot.swig' %} ...这个做法属于一刀切，后面考虑到依然需要输出md文件，于是想到了另一个解决方法，那就是把某些在GitHub Pages解析有问题的md文件给干掉，让这些引入了“问题”代码块的md文件不生成即可。....nojekyll文件会告知GitHub Pages不使用jekyll来渲染静态站点，这样就不会和md文件里的某些代码冲突而build失败。
Hugo 网站优化(4)： 为了防盗链， 不得不部署了两个网站 大家好， 我是老麦 欢迎 关注公众号 maitalking 或 订阅网站 https://tangx.in/ 。...外挂CDN 之前我们在 Hugo 网站优化(1)： 渲染 Markdown 图片引用地址 中提到过， 我们的主题是可以 外挂 CDN 的。...params.image_cdn] enable = true host = "https://static.tangx.in" mounted-cdn-host 可以看到， 一切都进行的很顺利 引用链接...[1]: https://tangx.in/posts/2022/12/26/hugo-render-markdown-image-url/ [2]: https://www.haoba.cc/
首先若依是用的是quill，默认是没有高亮的，如图 所以没有高亮的代码块属实不舒服，我们可以引入highlight.js =》点击进入官网 接下来就是如何引入highlight.js 1、安装依赖 npm...install highlight.js 复制 2、引用 在main.js或者固定组件中引入 import hljs from 'highlight.js' 复制 样式可以自由选择=》查看各种样式...hljs.highlightBlock(block) }) }); 复制 3、在需要的地方使用 复制 好了，这样就代码块就有高亮效果了
1 安装Hugo 我在windows和ubuntu下安装过hugo，简要介绍下我的安装过程，其他方式可以参考官方文档 。...1.1 windows下安装 Hugo的安装方式有两种，一种是直接下载编译好的Hugo二进制文件。另一种方式是获取Hugo的源码，自己编译。...如果想要渲染这些页面, 请从元数据中删除属性 draft: true, 或者设置属性 draft: false. 2.5 在本地启动网站 1 hugo server 也可以在启动server时应用主题...或者使用站点根目录（/）引用图片可以正常加载显示，但是无法在 Typora 编辑器中显示图片。 有以下几种方法解决。...此外还看到过一种方法，在github上开一个repository，专门用于存放图片，然后网站引用地址。不过我没有尝试，大家有兴趣可以试下。
Jekyll、Hugo、Hexo 是简单的博客形态的静态站点生产机器。...通过对客户端/服务端基础架构的抽象组织，Nuxt.js 主要关注的是应用的 UI渲染。...VuePress 展示页面与Docsify类似，但是与Docsify不同的是，预先渲染html。...缺点： 1、对域名空间要求，wp需要自己购买虚拟主机，低配版大概两百多块。 2、迁移成本高，且插件装多了会变慢。...3、Wordpress对于中小型网站应该是不错的选择，但对于大型的门户网站，数据库、用户管理、内容的分类管理等方面的限制，还是会让Wordpress会有些力不从心的吧。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
