Hexo迁移到Hugo

前言 春节在家闲着无事,想到博客多日未更新,想着小更一下,便开始在轻薄本上安装Hexo,但在安装过程中无意看到了一篇关于使用hugo搭建博客的文章,让我想起了身边一位大佬(链接在此)前段时间也在用hugo搭建blog,在看了几篇有关hexo和hugo对比的文章后,决定开始折腾一下。 安装 Hugo 直接上官网,根据自身系统找到对应安装方法,并且熟悉一下基本的操作,例如新建页面之类的。在本地运行hugo server后,在http://localhost:1313/ 便能查看到默认主题下的个人博客页面,到此Hugo便安装完成了。 主题 在官网上提供了将近三百个主题,我选择了papermod主题。安装过程也很方便,将其仓库clone到hugo的theme文件夹中即可。由于我的博客也作为一个仓库,因此将主题仓库作为博客仓库的子模块。 #下载并设置为子模块: git submodule add https://github.com/adityatelange/hugo-PaperMod.git themes/PaperMod --depth=1 #当重新克隆仓库时可能要用到 #git submodule update --init --recursive # needed when you reclone your repo (submodules may not get cloned automatically) #更新主题 git submodule update --remote --merge 参考了网上其他博主的做法,将主题中的layout和assert文件夹复制到站点(也就是根目录)下,因为hugo构建时根目录下的模板和样式优先级比主题里的高,因此会覆盖主题的配置,方便魔改,并且在主题更新时,可以再根据个人需求将旧版本主题的相关文件覆盖,从而实现平滑更新。 (ps. 下文的博客配置中提到的layouts或assert都是指复制到站点根目录下的文件夹,而不是主题中的同名文件夹) 最终本站的根目录结构如下:其中非自定义的都作了一些注释 . |-- README.md |-- archetypes (新建页面的统一格式,可自定义) |-- assets (papermod主题中复制过来的,包括js和css) |-- config.yml (站点配置文件) |-- content (放博客文章或自定义页面例如友链、搜索) |-- data (网站的一些数据,暂时没用到) |-- deploy.sh |-- i18n |-- layouts (papermod主题中复制过来的,包括各种页面模板) |-- public (执行hugo命令后生成,网站发布的内容) |-- resources () |-- static (网站的静态资源) `-- themes (网站主题) 部署 现在我是GitHub+Vercel+个人域名的方案,根据个人需求爱好选择就行了,网上也有很多教程,不再赘述。...

更新: 2022-08-18 · 创建: 2022-01-29 · 6 分钟 · McLsk888

移植admonition到Papermod

更新 最近有网友在移植过程出现了问题,最后发现是本人教程缺斤少两,少了一步字体文件的下载,十分抱歉,现补上。 前言 今天做笔记的过程中,感觉内容有点繁杂,希望有一个内容框可以适当囊括一些内容,在有需要的时候再展开阅读(例如一些概念性的东西),想起之前使用 Hexo 的时候看到过一些博主使用的 标签外挂 ,想着找找 hugo 是不是也有这个东西,于是开始了折腾。 admonition 模块 在经过了一段时间的 google 后,发现 hugo 貌似只有 LoveIt 里有这种类似的公告板模块:admonition ,是基于 hugo 的 shortcodes 实现的,于是打算将其移植到 Papermod 。 移植工作 直接去 LoveIt 主题的 GitHub 仓库 ,找到其使用的 模板 、 样式 和 JS文件 文件。LoveIt 主题的样式都是使用 SCSS 格式,而 Papermod 则是使用 CSS,在经过一波学习以后,读懂了文件中生成样式的循环代码,查看了 hugo 官方文档 后,我尝试直接使用 amonition.scss ,并且下载了其中所需要用到的 字体样式 (这里本来是使用官网的引用代码的,后来选择直接下载到本地),但发现 SCSS 没有被生成 CSS 并整合到网站的 CSS中,于是开始研究,最终不堪折磨 (为什么我这么菜) ,在舍友的建议下,直接将生成的 CSS 代码复制到本地的 shortcodes 里,这里放出 SCSS 代码及其需要的 CSS 代码 (以后有空再研究,或者有大佬可以研究一下(☆▽☆) variables.scss // ========== Admonition ========== // // Color map of the admonition $admonition-color-map: ( 'note': #448aff, 'abstract': #00b0ff, 'info': #00b8d4, 'tip': #00bfa5, 'success': #00c853, 'question': #64dd17, 'warning': #ff9100, 'failure': #ff5252, 'danger': #ff1744, 'bug': #f50057, 'example': #651fff, 'quote': #9e9e9e, ) !...

更新: 2022-11-13 · 创建: 2022-03-03 · 44 分钟 · McLsk888