《Hexo: 从零开始编写自己的主题》4. fancybox优化图片展示效果、代码高亮以及数学公式
《Hexo: 从零开始编写自己的主题》
1. Hexo概述以及Hexo工作原理
2. 入门Hexo主题编写
3. 优化样式,设计自己的主题
4. fancybox优化图片展示效果、代码高亮以及数学公式
5. 添加本地搜索功能以及发布博客让官网接收
6. 添加自己的脚本处理数学公式
4. fancybox优化图片展示效果、代码高亮与数学公式
查看效果 https://smileyan.cn/heyan/ 。
这部分内容非常简单,但我也是琢磨了不少时间,踩了不少的坑才完成的。
4.1 添加 fancybox
如果 csdn 博客一样,我们点击博客中的图片可以用放大的效果,这个功能的实现只需要以下几个步骤即可。
4.1.1 引入 css / js 资源
在header.ejs 中引入以下资源(也可以认为是在 layout.ejs 中引入)
<link rel="stylesheet" href="https://lib.baomitu.com/fancybox/3.5.7/jquery.fancybox.min.css"><script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script src="//lib.baomitu.com/fancybox/3.5.7/jquery.fancybox.min.js"> </script>
4.1.2 添加fancybox.js文件
在自己主题的source
目录下添加 js
文件夹,并新建 fancybox.js
文件,复制以下代码并张贴进去。
$(document).ready(function() {$('img').each(function() {if ($(this).parent().hasClass('fancybox')) return;if ($(this).hasClass('nofancybox')) return;var alt = this.alt;if (alt) $(this).after('<span class="caption">' + alt + '</span>');$(this).wrap('<a href="' + ($(this).attr('data-src') == null ? this.src : $(this).attr('data-src')) + '" title="' + alt + '" class="fancybox"></a>');});$(this).find('.fancybox').each(function(){$(this).attr('rel', 'article');});});$(document).ready(function() {$("a[href$='.jpg'],a[href$='.png'],a[href$='.gif'],a[href$='.webp']").attr('rel', 'gallery').fancybox({helpers : {title: { type: 'inside'}}});
});
很明显用到的jQuery,这个地方确实可以替换成为不含jquery的方法,但是没有必要,jquery 后面我们也需要用到。
4.1.3 引入这个 js 文件
同样是在 header.ejs
或者说 layout.ejs
中引入这个 js 文件。
<%- js('js/fancybox.js') %>
4.1.4 配置样式
修改一下 css 文件,以保证图片的显示不会超出它所在的父级容器。我们将所有的 post 内容被 <div class="markdown-section">
所包围,接下来指定其中的 img 标签即可。
// fancybox
.markdown-section img max-width: 100%;padding: 0.5em 0;margin: auto;display: block;// fancybox
.caption color: #444;display: block;font-size: 0.9em;margin-top: 0.1em;position: relative;text-align: center;
4.1.5 查看效果
编写md文件,引入某张图片进行展示,然后重新启动 hexo 就可以看到如下效果:
点击猫咪后,可以看到
表示工作已经完成。
4.2 代码高亮
代码高亮的原理为,Hexo 引擎根据markdown的文字在生成 html 文件的时候,附加一些类,比如说默认情况下代码块中是不含关键字,不好代码高亮,但是配置 hexo 以后生成的文件会附带一些 class = ‘xxx’ ,然后我们导入相关的css文件就可以进行渲染了。
一般情况下hexo提供两种方法,highlight.js 与 prism.js,踩过一些坑,我最后从 hljs 迁移到 prism.js 。主要理由是 prism.js 更加简单方便,灵活可控,支持的语言更多,提供一些好用的插件。
4.2.1 下载个性化 prism
前去官网https://prismjs.com/download.html 选择自己喜欢的主题,并勾选自己需要的语言,就可以点击下载 prism.js 与 prism.css 两个文件了。
选择自己需要用到的语言。
- 左上角四个
- bash
- java
- C
- C++
- Go
- python
- scala
- yaml
- 等
选择自己需要的插件,比如代码行数,代码块右上角代码复制功能,显示代码的语言。
点击下面的两个下载按钮,分别得到 css 与 js 文件。
然后将这两个文件分别放到主题的source/js source/css 目录下,最后在我们的header.ejs / layout.ejs 中引入这两个文件即可。
<%- css('css/prism') %>
<%- js('js/prism.js') %>
查看效果:
4.3 数学公式
在header.ejs / layout.ejs 中添加依赖,并初始化。
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_CHTML" async></script>
<script type="text/javascript">hljs.initHighlightingOnLoad();</script>
可以了,测试一下,
需要注意的是对于这个大公式,为了不被 hexo 引擎渲染成奇奇怪怪的东西,我们需要在它的外围加上一个 p 标签。
否则效果是这个样子的,
当然,不是对于所有的公式都需要外围添加 p 标签,但是为了保险添加 p 标签不会出错。当然我们可以写自己的脚本,来提前添加 p 标签,这个工作我们在后面完成。
4.4 总结
这部分工作就是不停地查资料,并参考其他主题而完成的,虽然现在总结起来比较简单,但是每个步骤都遇到了不少坑,比如复杂的数学公式外层需要加 p 标签。
Smileyan
2022.4.22 9:39
《Hexo: 从零开始编写自己的主题》4. fancybox优化图片展示效果、代码高亮以及数学公式相关推荐
- 《Hexo: 从零开始编写自己的主题》3. 优化样式,设计自己的主题
<Hexo: 从零开始编写自己的主题> 1. Hexo概述以及Hexo工作原理 2. 入门Hexo主题编写 3. 优化样式,设计自己的主题 4. fancybox优化图片展示效果.代码高亮 ...
- 《Hexo: 从零开始编写自己的主题》1. Hexo概述以及Hexo工作原理
<Hexo: 从零开始编写自己的主题> 1. Hexo概述以及Hexo工作原理 2. 入门Hexo主题编写 3. 优化样式,设计自己的主题 4. fancybox优化图片展示效果.代码高亮 ...
- 《Hexo: 从零开始编写自己的主题》5. 添加本地搜索功能以及发布博客让官网接收
<Hexo: 从零开始编写自己的主题> 1. Hexo概述以及Hexo工作原理 2. 入门Hexo主题编写 3. 优化样式,设计自己的主题 4. fancybox优化图片展示效果.代码高亮 ...
- hexo(sakura)引入fancybox优化图片视频查看效果
文章目录 一.fancybox介绍 二.hexo中添加fancybox 1. 添加引用 2.修改配置 题外话: 原本在hexo-theme-sakura作者hojun的添加下有zoom功能, 我也乖乖 ...
- QT案例实战1 - 从零开始编写一个OCR工具软件 (7) 屏幕截图/图像展示/文字识别
一.图片文字识别功能 在之前的的文章中,引入了ocr识别引擎,也在线程内实现了调用引擎进行识别.基本功能都有了,就可以把功能和UI组织在一起了. 关于图片文字识别的功能,UI分两部分,左侧实现屏幕截图 ...
- QT案例实战1 - 从零开始编写一个OCR工具软件 (8) Pdf读取展示/截图/文字识别
一.PDF读取展示功能 QT提供了pdf.PdfWidgets模块,需要安装模块,然后在项目的CMakeLists.txt文件内,添加如下代码,以便在项目中使用. 官方提供了完整的pdf展示示例,示例 ...
- hexo(butterfly)蝴蝶主题+个性美化
文章目录 一.前言 二.蝴蝶主题 1.快速入门 2.valine评论移植 3.文章移植 三.个性美化 1.boyui对话框式简介页面 2.说说动态页面 3.友链页面优化 一.前言 这两天心血来潮给自己 ...
- wordpress登录美化css,WordPress-让你的代码高亮更好看-知更鸟主题css美化
今天,小笨又拿鸟哥的主题开刀(美化)了,更新了代码高亮的样式,二话不说,先上图: 主要是左侧的数字增加了渐变样式,比之前黑乎乎的代码高亮好看多了,至于文字的颜色,有前端基础的童鞋可以重新调整一下. 样 ...
- hexo从零开始到搭建完整
原文地址:→看过来 交流群 有相关问题的可进群提问 Hexo交流群1:111868326(已满) Hexo交流群2:834751420 (新群)(其他的前端问题也可以交流) 前言 其实平时自己写的文章 ...
最新文章
- 华中农业大学Kenichi Tsuda团队诚聘植物-微生物互作、生物信息学博士后二名
- percona xtrabackupd定期做全备,增量备份shell脚本
- template模板的使用方法
- C#winform使用进度条
- [07] 使用注解完成IOC配置
- Android找工作系列之事件传递机制
- 灵修---士师记第9章
- 易语言PHP非对称加密,openssl调用大集合[易语言源码] | 贝贝吧
- spring security 实现微信登录
- 计算机表格用计算公式百分百,计算机表格怎么算所占比例 - 卡饭网
- 小样儿想封我?WebOS 1.2.1再次突破iTunes同步限制
- 关于如何去实现百度的自动发帖功能猜想
- 动画:二叉树有几种存储方式?(上)
- 我妹妹成了我的女儿——难道我真的中年大叔了?
- Tailscale组成局域网(以文明6联机为例)
- 字母c代表什么数字_字母C
- 停车场停车怎么找车?怎样查车停车什么停车场?
- TCP重点系列之sack介绍
- 互斥锁的概念和使用方法。
- SaltStack常用的模块-1
热门文章
- zscore标准化步骤_z-score的标准化究竟怎么弄?
- 【Win10 UWP】URI Scheme(一):Windows Store协议的解析和使用
- 中国医护服装制造行业投资前景与盈利能力分析报告2022版
- python爬 歌曲 视频
- css中justify用法,CSS text-justify用法及代码示例
- what's the 头寸
- c语言二级安卓软件,C语言二级考试题库
- git 提交时报错:Branch ‘master‘ set up to track remote branch ‘master‘ from ‘origin‘.
- 学习PrintWriter类
- 形态学 - 边界提取