安装 使用 npm 命令来安装 react-fontawesome 包。...npm install react-fontawesome --save 导入 css 在项目的 head 标签中的导入 fontawesome 的 css 样式表。...maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> 使用 在某个组件中，你只需要先导入...react-fontawesome 包。...import FontAwesome from 'react-fontawesome'; 比如我们要显示一个向上的箭头图标，就像下面一样在 render 函数中调用即可。
2019年实习时的 FontAwesome基础知识 备份 基本介绍及用法 基本介绍 FontAwesome是一套绝佳的图标字体库 提供可缩放的矢量图标 可以使用CSS提供的所有特性进行更改，包括：大小、.../fontawesome/css/all.css" rel="stylesheet"> // 先引入fontawesome // 再引入需要的图标类别 图标备忘录 可在官方网址上搜索自己想要的图标 也可直接下载为离线PDF文档搜索自己想要的图标。...注意：分层、文本和计数器也要求使用SVG + JS版本的FontAwesome。 <!
添加文章打赏功能 注意 PS: 使用hugo版本必须为拓展版hugo_extended，如下图 1.配置添加 在 config.toml 添加下面的变量 [params.reward]...content" id="content"> {{- dict "Content" .Content "Ruby" $params.ruby "Fraction" $params.fraction "Fontawesome..." $params.fontawesome | partial "function/content.html" | safeHTML -}} 修改为如下内容 修改后内容 {{- /*..." $params.fontawesome | partial "function/content.html" | safeHTML -}} {{- /* Reward */ -}} #新增...margin: 8px 0 } article .post-reward .qr-code .image { width: 200px; height: 200px } 6.测试查看 hugo
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到现在已经过去两个星期了，今天才开始往服务器上面部署，之所以没有直接部署还是有很多原因限制，时间是一个方面。还有就是平台更改后的样式和功能也有所变化。...但是这个通过全局替换也可以解决，不至于在写一个脚本来单独完成，如果图片过多可以考虑 问题的解决思路及步骤 剩下的就是关于自动部署了，产生了好几中想法 将源码放到github,直接用钩子监测推送，在服务器端使用hugo...生成静态资源，但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 .
hexo-hugo平台的转移完成！.../releases/download/v0.72.0/hugo_0.72.0_Linux-64bit.tar.gz - tar -xzvf hugo_0.72.0_Linux-64bit.tar.gz...- chmod +x hugo - export PATH=$PATH:$PWD - hugo version script: - hugo after_script: - cd.../hugo-blog echo "设置目录组合拥有者" sudo chown -R www:www ..../hugo-blog echo "设置目录权限" sudo chmod -R 755 .
需要文件 1.安装git 2.符合你系统的hugo二进制执行文件（deepin系统可直接下载linux系统的deb格式的安装包，直接可安装免配置） 下载链接：点我直达 3.hugo任意主题包 官网主题链接...2.安装hugo 第一种方法（推荐） 点开你下载的安装包，名称类似于hugo_0.65.1_Linux-64bit.deb，直接点击安装，安装完毕即可。...本站备用下载链接(themes里是主题，数字的是hugo的版本，推荐最新版本)：点我直达 第二种方法 当你采用第二种方案时，你下载的名称类似于hugo_0.65.1_Linux-64bit.tar.gz...b.此时进入博客文件夹内，因为hugo没有内置主题，所以你需要去下载一个，例如我选择的notepadium主题，解压并放进themes文件夹内（可能解压的文件夹是hugo-notepadium-x.x.x...等，把他重命名为主题的名字notepadium（删去hugo-和-x.x.x），这样方便hugo的生成和我们操作） 如你下载过慢或无法下载，可以使用本站备份的notepadium主题。
Font Awesome的产生，为网页设计和Web前端开发人员带来极大的方便 Font Awesome官网：https://www.fontawesome.com.cn/ 可以引入在线css。...60px;color:red;"> WordPress引用 当前主题目录下的header.php中直接引入文件 <link rel="stylesheet" href="https://use.<em>fontawesome</em>.com
不过单单就Hexo和Hugo的框架设计来说，我觉得是Hexo远胜于Hugo的。因为Hexo有更完整的插件机制，主题机制。它的插件机制可以让你替换里面的核心组件，增加更多的渲染引擎、模板引擎等等。...相比之下Hugo就差多了。压根没有插件机制，干啥都得主题自己做。读配置也写得比较死，很不方便。比如Hexo可以给主题加配置，然后有主题配置和站点配置，但是Hugo就没法读取主题配置。...另外Hugo的模板引擎只能用Go语言的HTML template。哇这货难用的屎一样。语法就像是要你自己写逆波兰式。自己写树形结构。不过就像Hugo自己说的，它这个静态网站生成系统非常地快。...而且导入sass之后还能使用一些bootstrap定义的函数什么的。还算方便吧。 接下来还有一些额外的功能得添加和替换，毕竟静态博客和动态网站还是有一些限制的。...不过也算是一劳永逸吧，所以文章都变成Markdown，以后都很容易转换和导出导入。不再需要数据库了，我觉得我的VPS又可以降级了。嘿，便宜才是硬道理。
但是，Hugo 提供了许多内置变量，可方便地访问模板中的全局值. .Site.AllPages : 获取所有页面 – 数组 .Site.Author: 获取配置中定义的 作者名 .Site.BaseUrl
Html 的方法写博客，然后部署到 GitHub 上的，但是随着许多静态博客生成器的出现，可以让我们更多的专注于写文章本身而减少对工具的依赖，后面也尝试过 Hexo 这个工具，非常好用，但是在了解了 Hugo...ox-hugo 的介绍，决定使用 ox-hugo 来将文章从 .org 格式转换成 .md 格式。...对于相关的配置可以阅读 ox-hugo 本身的介绍文档 https://ox-hugo.scripter.co/ 。当然也可以通过这篇文章了解如何进行配置。...Return `org-capture' template string for new Hugo post."...templates 了，而且在执行 org-export-dispatch 时就可以看到 hugo 导出配置了。
检查Hugo配置： PS E:\> hugo version hugo v0.101.0-466fa43c16709b4483689930a4f9ac8add5c9f66 windows/amd64...： PS E:\demo> hugo new site hugo-demo Congratulations!...Your new Hugo site is created in E:\demo\hugo-demo...." created PS E:\demo\hugo-demo> 然后我们打开my-first-post.md，向其中输入以下内容： # halo Hugo it's my first hugo post...hugo 就是这么简单，直接hugo，然后将public下的内容拿去部署即可。 3、最后 以上就是关于使用Hugo建站（博客）的简单用法，想信你能够使用Hugo打造出属于你的个人站点。
记录一下从 Typecho 迁移到 Hugo 的过程。 主要是折腾的 URL，也就是 slug 和导入评论到 Disqus 的过程。...脚本地址： https://github.com/eallion/typecho-to-hugo 注意： 这并不是一个 Typecho 插件！...所有文章会在网站根目录，批量复制到 Hugo 即可。 二、Hugo 配置 Hugo 根目录的 config.toml 需要修改一下链接形式。...3.2 导入数据到 WordPress 在 WordPress 上运行 WordPress 导入工具，导入前面下载的 XML 文件。...依次点击：控制台 -> 工具 -> 导入 -> WordPress -> 运行导入器（若没有则安装导入器） 然后选择前面下载的 XML 文件导入即可。文章比较多的话，需要多试几次。
迁移前后对比 旧的Hexo博客 newblog02.png 新的Hugo博客 zd001.png 首先，不可否认的是，外观上的变化是很大的。...比如说一个好好的插件，可能哪天就突然不兼容了，要么就是天天炸依赖，每次build的时间，也是越来越长，一度到达一分钟（虽然跟博客的东西太多离不开 当我把所有的内容全部迁移到Hugo之后，每次构建的时间不到一秒钟
使用环境 系统：Debian GNU/Linux 11 x86_64 宝塔：7.9.0 GIt 安装hugo apt-get install hugo 检查是否安装成功 hugo version 输出下图内容...，即安装成功 创建站点 hugo new site Hugo_blog !...先进入```Hugo_blog```文件夹，我是放在了```/www/wwwroot/Hugo_blog```这个路径下 !...我把hugo生成的静态挪到测试站点，复制过去后访问域名马上就能看到情况，显示下图情况，便完成了hugo博客搭建 坑 1、主题的文件路径是这样的Hugo_blog\themes\ananke，...hugo是首先在Hugo_blog进行hugo编译，然后生成一个public文件夹。然后在Hugo_blog\public 目录下进行 git commit的，很容易出错。
2.符合你系统的hugo二进制执行文件 下载链接：点我直达 3.hugo任意主题包 官网主题链接：点我直达 本地安装步骤 1.安装好Git（无脑安装，一直点next就OK） 2.下载hugo符合你系统的二进制包...本站备用下载链接(themes里是主题，数字的是hugo的版本，推荐最新版本)：点我直达 3.解压并重名文件夹为hugo，放到你想放的地方（例如我的E:\hugo） 4.要安排全局变量了（如不全局变量无法通过...git的命令行，你只能通过cmd进入hugo文件夹后才能执行hugo的命令，所以推荐设置为全局变量）步骤如下： 5.回到hugo文件夹这里，右键选择Git Bash here ，分别输入git config...8.此时进入博客文件夹内，因为hugo没有内置主题，所以你需要去下载一个，例如我选择的notepadium主题，解压并放进themes文件夹内（可能解压的文件夹是hugo-notepadium-x.x.x...等，把他重命名为主题的名字notepadium（删去hugo-和-x.x.x），这样方便hugo的生成和我们操作） 如你下载过慢或无法下载，可以使用本站备份的notepadium主题。
過程 以前的 hexo 博客是自己寫的友鏈模板，換到 hugo 後想著在網上隨便找一個範本用著就好，然而並沒有自己想要的 layout, 幾乎都是使用 shortcodes 的，代碼風格有點問題且...友情鏈接模板已整合到 FixIt 主題https://github.com/Lruihao/FixIt友情鏈接範本https://lruihao.cn/friends/ 創建模板 開始之前去看了 hugo..."content"> {{- dict "Content" .Content "Ruby" $params.ruby "Fraction" $params.fraction "Fontawesome..." $params.fontawesome | partial "function/content.html" | safeHTML -}} {{- /*...line-height: 18px; margin-bottom: 1rem; } .friend-nickname:hover { color: #d480aa; } 友鏈頁面 1 hugo
领取专属 10元无门槛券
手把手带您无忧上云
