本节内容主要分享
Jekyll的操作技巧, 例如不同web引用、不同的图像展示方法等, 代码不同, 风格各异.
网页内嵌方法: 显示部分博文区域并点击跳转
当你想要在当前文章中以图形图像的方式引用之前的博文, 并且可以触发点击跳转到原博文的功能, 可以参考以下实现.
- 📌 内嵌网页有一个边框, 且居中展示
- 📌 点击
iframe直接跳转到原博客 - 📌 支持相对路径或参数化
URL, 适用于不同博客文章
以如何 「自定义」个人博客为例 (点击图像自动跳转):
网页内嵌方法: 显示部分博文区域并滚动查看
当你想要在当前文章中以图形图像的方式引用之前的博文, 并且可以通过滑动鼠标来浏览原博文的功能, 可以参考以下实现.
- ✅ 内嵌网页有一个边框, 且居中展示
- ✅ 在
iframe区域滑动鼠标查看博文, 同样可以操作对应页面 - ✅ 支持相对路径或参数化
URL, 适用于不同博客文章
以如何 「零成本」打造个人博客为例 (在图像区域滚动浏览):
图像内嵌: 带外框的图像样式
当你觉得单纯的贴一张图实在是太过单调, 想要给它加一个外框, 可以参考以下实现.
- 😊 内嵌图像有一个边框, 且居中展示
- 😊 点击图像即可放大, 鼠标悬停会显示
title中的字样 - 😊 支持相对路径或参数化
URL, 适用于不同博客文章
代码如下 (只需要插入对应的 .md 文件, 设定图像路径即可):
图像内嵌: 带外框和点击动画的图像样式
当你觉得图像在展示的时候只有一个外框依然很单调, 想要加一个动画效果, 可以参考以下实现.
- 😄 内嵌图像有一个边框, 且居中展示
- 😄 鼠标悬停便会出现旋转动画, 点击图像即可放大查看
- 😄 支持相对路径或参数化
URL, 适用于不同博客文章
代码如下 (只需要插入对应的 .md 文件, 设定图像路径即可):
图像内嵌: 仅使用 img 标签的图像样式
当你觉得以上都太过于花哨, 只希望用
img标签简单展示一幅图像, 可以参考以下实现.
- 😁 一幅普通图像, 会自动居中显示, 可以调节显示大小
- 😁 鼠标悬停便会出现旋转动画, 点击图像即可放大查看
- 😁 支持相对路径或参数化
URL, 适用于不同博客文章
代码如下 (只需要插入对应的 .md 文件, 设定图像路径即可):
图像内嵌: Markdown 的图像样式
当你只会使用
Markdown语法进行图像展示, 可以参考以下实现.
- 😂 一幅普通图像, 全屏显示
- 😂 鼠标悬停也不会有任何文字提示, 点击图像即可放大查看你写入
![text]中的文本内容 - 😂 支持相对路径或参数化
URL, 适用于不同博客文章
代码如下 (只需要插入对应的 .md 文件, 设定图像路径即可):
🎯🎯🎯 Jekyll Know-How 会持续更新🔥🔥🔥. 如果对博文有疑问, 就请评论说明吧! 😄😄
