Hugo的shortcode(支持视频等)和主题修改 Li.027

本篇文章属于Hugo学习路线Li.028一部分 1. Hugo的Shortcodes是什么? shortcode 是一些可以直接插入内容文档中的助记符,在Hugo 生成网站时,会将这些助记符替换为相应的HTML 代码片段(严格来说是模板片段) 2. 为什么需要Shortcodes. 虽然Markdown 支持html标签, 写起来相当麻烦, 碰到页面兼容性问题, 就得修改所有写了Html的Markdown文件, 想想都可怕 shortcode像如下, 类似特殊Markdown标记语言 显示效果    步骤, shortcode示例 可在Markdown中使用, 如果出现问题, 只需要修改模板片段即可. 3. Shortcodes 可以用来做什么, 嵌入视频之类, Hugo静态博客也能是自媒体. 3.1 可在网页嵌入视频, 常用网站Bilibili 和 Youtube.    在hugo网站目录layouts/shortcodes中创建bilibili.html文件 文件名称bilibili, 引用的时候也是相同名称 <style> .meta-media { position: relative; margin-bottom: 30px; display: flex; width: 100%; height: 0; padding-bottom: 75%; } .video { position: absolute; width: 100%; height: 100%; left: 0; top: 0; } </style> <div class="meta-media"> <iframe src="{{ ....

August 3, 2021 · 2 分钟 · Lizicai

Hugo静态网站常用管理方式 Li.026

1. 列表出全部方式 1.1 本地文章Hugo生成静态网站->上传Github, Github提供域名 1.2 本地文章Hugo生成静态网站->上传Github, 使用自有域名, 配置域名CNAME 1.3 本地文章Hugo生成静态网站->(rsycn)上传自己服务器上, 使用自有域名 1.4 本地文章Hugo生成静态网站->上传Github->(使用Github action)在服务器上拉取Github静态网站, 使用自有域名 1.5 本地文章Hugo生成静态网站->上传Github->(使用crontab 定时任务)在服务器上拉取Github静态网站, 使用自有域名 1.6 本地文章->上传服务器->服务器Hugo生成静态网站, 使用自有域名 1.7 服务器文章->服务器Hugo生成静态网站, 使用自有域名 2. 方式比较 方式 是否推荐 是否免费 更新及时 是否使用自有域名 难易程度(1最容易) 1.1方式 1.2方式 1.3方式 1.4方式 1.5方式 1.6方式 1.7方式 1.1方式(推荐), 免费, 更新及时, 会使用Hugo Git Markdown即可, 最简单的方式. 1.2方式(推荐), 除了1.1有的内容, 可使用自己域名. 1.3方式(推荐), 方式简单, 更新及时,会使用Hugo Markdown rsycn 配置ssh key即可 1.4方式(推荐), 自动化程序最高, 只需要上传到Github就可触发, 更新及时, 难度也稍微高点. 除会使用Hugo Git Markdown, 还需要使用Github action, SSH KEY配置. 1....

August 2, 2021 · 3 分钟 · Lizicai

rsycn同步图片或其他资源到服务器上 Li.025

1. rsycn 是什么 rsycn最大特点是可以检查本地和远程的文件差异, 只上传变动的文件. sftp 是全量上传. rsycn 会用在上传图片到Nginx服务器上, 作为图床使用 2. rsycn安装 Mac brew install rsycn Linux yum install rsycn Windows choco install rsycn 3. rsycn 命令 -r 参数, 递归同步, 同步文件夹时使用 rsycn -r source destination -a 参数, 除了可以递归同步以外,还可以同步元信息(比如修改时间、权限等). rsycn -a source destination -u 跳过目标目录比源目录修改时间新的文件, 不同步这些文件 rsycn -ru source destination -t 保留文件的修改时间 rsycn -aut source destination –exclude 排除某些文件 rsycn -aur --exclude '.DS_Store' source destination –include 与–exclude连用 rsycn -aur --exclude '*' --include "readme....

August 2, 2021 · 1 分钟 · Lizicai

Hugo中Markdown图片资源存放几种方式 Li.024

本篇文章属于Hugo学习路线Li.028一部分 1. Hugo中Markdown图片资源放在哪? 一直是个问题 引用其他资源担心其他网站改动路径, 就没了, 建立自己的网络图片资源库就显得很重要了. 存放Hugo的静态网站中, 引用起来不方便, 而且更新图片时必须更新网站, 强依赖. 所以一个独立的图片库就显示有必要了. 图片压缩也少不了. 2. 常用几种存放图片资源方式. Github 使用Nginx做为静态资源 自建私有云 自建图床 使用云存储服务. 2.1 Github或Gitee(国内理论理论速度更快) 公共项目存放图片资源. 这种方式只需要更新图片即可, 不需要更新静态博客, 管理更方便. 免费. 免费, 会使用git就可以. 也可使用图形界面PicGo上传图片到Github 示例, 复制文件下载链接即可在markdown使用 复制文件下载链接即可在markdown使用 ![number1](https://github.com/leezicai/share/raw/master/icon/number/1.png) 2.2 静态博客存放在Github, 图片也存放在同一项目下. 免费. 免费, 会使用Git 如果存放在Hugo文件夹中static中, 虽然文件生成在项目根目录下, 但在Github上地址从baseUrl开始的 # 图片存放在static文件夹下 https://github.com/adityatelange/hugo-PaperMod/tree/exampleSite/static # 图片地址起始https://adityatelange.github.io/hugo-PaperMod/ ![papermod-cover.png](https://adityatelange.github.io/hugo-PaperMod/papermod-cover.png) 单个图片,如果有文件夹则添加 2.3 使用Nginx或其他服务器做静态资源. Nginx安装参考地址 , 付费, 需要服务器. Nginx default.conf配置 使用sftp上传图片到服务器的s.lizicai.com文件夹下即可 server { listen 80; server_name s.lizicai.com; return 301 https://s.lizicai.com$request_uri; } server { listen 443 ssl; server_name s....

August 1, 2021 · 1 分钟 · Lizicai

Hugo常用命令 Li.023

本篇文章属于Hugo学习路线Li.028一部分 Hugo 常用命令. 官网参考地址 # 查询所有命令 hugo -h # 创建Hugo 静态网站 hugo new site mywebsite # 创建文章, 当前必须mywebsite下才可创建文章 # 创建的文章存放在 mywebsite/content/p/test.md下 # 使用命令创建的hogo可以监控到, 实时显示到预览上 hugo new p/test.md # 启动服务, 必须在mywebsite文件夹下启动 hugo server # 草稿也预览, -D 参数, 必须在mywebsite文件夹下启动 hugo -D server # 指定预览的主题, 必须在mywebsite文件夹下启动 # papermod是在themes文件夹下的主题名称 hugo -D server --theme=papermod # 指定预览的端口 hugo -D server --port=1313 # 指定服务绑定在哪个端口, 比如你想在手机预览, 电脑手机同一局域网时 # 电脑ip 192.168.1.20, 手机访问192.168.1.20就能看到预览 hugo -D server --bind="192.168.1.20" --port=80 # 指定预览的默认地址, http://192....

July 31, 2021 · 1 分钟 · Lizicai

RSS和一些RSS订阅网站 Li.022

1. RSS是什么 RSS 全称是Really Simple Syndication 简易信息聚合, 在一个软件中可以看到所有订阅网址更新内容. 2. 为什么会有RSS 没有RSS, 如果你要A B C D网站信息, 需要一个个上去看看有没有更新, 这样无疑很费时 如果有软件能订阅你感兴趣的A B C D网站, 只用在一个软件查看就看到4个网站的更新内容, 这就是RSS重要作用了 3. 苹果iPhone 和 安卓Android RSS 应用. iPhone Netnewswire (不需要的默认订阅可以删除) Android Read 4. 一些RSS订阅网站, 写独立博客人变少了… 阮一峰 https://www.ruanyifeng.com/blog/ https://feeds.feedburner.com/ruanyifeng 陈浩 coolshell.cn https://coolshell.cn/feed 少数派 sspai.com https://sspai.com/feed

July 29, 2021 · 1 分钟 · Lizicai

Dash Mac下最好的开发文档 Li.021

1. Dash 是什么 Dash 是Mac开发文档集合, 从前端React到后端Java, 能想到的语言文档这里都有 Dash 支持多种插件, 在开发工具内就可以直接搜索开发文档 Dash插件支持编辑器 官网下载 , 或使用Homebrew命令安装 brew install dash 购买-微信小店 2. 常用软件示例 2.1 Alfred 不用打开Dash软件, 使用Alfred直接搜索开发文档 Dash Wrokflow下载 搜索Dash软件java开发文档 2.2 Intellij IDEA 使用⌘ + shift + h搜索选中内容 Intellij 插件应用市场就可以下载 ⌘ + shift + h 搜索选中内容 2.3 Visual Studio Code Dash插件可以Visual Studio Code扩展市场搜索下载 option + h 指定搜索文档 option + h,指定搜索html: a标签 指定开发文档名称在Dash中可查询, 也可以自行修改 指定开发文档名称在Dash中可查询, 也可以自行修改 3. devdocs.io 在线版的, 同样好用

July 29, 2021 · 1 分钟 · Lizicai

Alfred Mac效率神器 Li.020

1. Alfred 是什么. Alfred是Mac上一款效率软件, 有着剪切板历史记录,快速复制之前的记录 可以快捷搜索文件, 快速打开应用或文件. 有着Snippet片段, 可以记录代码或常用的信息. 可以开发定制工作流, 完成更多复杂内容. Alfred 安装, 官网下载 , 或使用 Homebrew 安装. 代购-微信小店 . brew install alfred Alfred 还需要Mac OS系统中文件夹等权限 授予Alfred权限 2. Alfred Mac效率神器. 2.1 剪粘板历史记录. 快速粘贴历史复制记录, 支持图片, 最长记录3个月时间. 快捷键⌘ + .触发, 保存最长3个月记录 ⌘+.触发,搜索'复制',⌘+6 可直接粘贴历史记录到输入框 ⌘+.触发,可以预览已复制图片,回车可粘贴到输入框 2.2 Snippets代码片段. 记录代码片段, 常用邮箱链接等    记录代码块, 关键字就触发粘贴, ⌘ + .或 shift + ⌘ + . 也可搜索 片段Snippets设置 html5设置参数 html5设置 Name: html5 Keyword: #html5 Snippet: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title></title> link </head> <body> body </body> </html> 关键字 ⌘ + ....

July 28, 2021 · 2 分钟 · Lizicai