写在前面
众所周知, 一个好的前端/排版是继续做下去的动力(bushi) 。
难得有空,继续来建设一下博客,简单美化一下前端。
自定义 JS/CSS/HTML
引入自定义的 JS/CSS/HTML 是继续下列美化操作的条件,可以通过以下主题配置 (楼主使用的是 Fluid 主题 ,不同主题之间可能存在一些差异)。你可以在配置文件中找到:
1 2 3 4 5 6 7 8 9 custom_js: - /js/custom.js custom_css: - /css/custom.css
自行添加自定义的 JS/CSS/HTML 文件即可。
全局字体
首先在 custom.css
中引入字体 CDN ;
1 2 @import url('https://chinese-fonts-cdn.deno.dev/packages/maple-mono-cn/dist/MapleMono-CN-Bold/result.css' );
然后修改主题配置文件的字体部分,例如:
1 2 3 4 5 6 7 8 font: font_size: 16px font_family: 'Maple Mono CN' font_weight: 400 letter_spacing: 0. 02em code_font_size: 85 %
樱花特效
这里直接用来该网站 的 API 接口。并在自定义 js 文件中添加如下内容:
1 2 3 4 5 6 7 $(document ).ready (function ( ) { if (location.pathname === '/' || location.pathname === '/index.html' || location.pathname === '/index' ) { $.getScript ("https://api.vvhan.com/api/script/yinghua" ); } });
我只在首页展示了该特效,所以在前面加了条件判断。
高斯模糊
1. 设置方法
首先,引入自定义 CSS 文件:
1 2 3 4 5 6 7 8 9 .blur-text { filter : blur (5px ); transition : filter 0.3s ease; }.blur-text :hover { filter : none; }
你可以直接在文章中通过 HTML 标签插入,比如:
1 <span class ="blur-text" > 这是被模糊的内容</span >
也可以创建 Hexo 标签插件:
在博客根目录创建 scripts
文件夹(如果不存在);
创建一个新文件 scripts/blur.js
,内容如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 hexo.extend .tag .register ('blur' , function (args, content ) { var text = args.join (' ' ); return '<span class="blur-text">' + text + '</span>' ; }, {ends : false }); hexo.extend .tag .register ('blur_block' , function (args, content ) { return '<div class="blur-text">' + hexo.render .renderSync ({text : content, engine : 'markdown' }) + '</div>' ; }, {ends : true });
2. 使用效果
这段内容是正常显示的。
这段内容被模糊了,鼠标悬停或点击可以查看。
或者使用标签插件:
这是一个被模糊的密码:password123
文本黑幕
与高斯模糊的原理是类似的。
1. 使用方法
引入自定义 CSS 文件:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 .shady { position : relative; display : inline-block; padding : 0 2px ; border-radius : 2px ; cursor : pointer; }.shady ::before { content : "" ; position : absolute; top : 0 ; left : 0 ; width : 100% ; height : 100% ; background-color : #000 ; border-radius : 2px ; transition : opacity 0.3s ease; z-index : 1 ; }.shady :hover ::before { opacity : 0 ; }.shady > * { position : relative; z-index : 0 ; }
你可以直接在文章中通过 HTML 标签插入,比如:
1 <span class ="shady" > 这是被黑幕遮挡的内容</span >
也可以创建 Hexo 标签插件:
在博客根目录创建 scripts
文件夹(如果不存在);
创建一个新文件 scripts/shady.js
,内容如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 hexo.extend .tag .register ('shady' , function (args, content ) { var text = args.join (' ' ); return '<span class="shady"><span>' + text + '</span></span>' ; }, {ends : false }); hexo.extend .tag .register ('shady_block' , function (args, content ) { return '<div class="shady"><div>' + hexo.render .renderSync ({text : content, engine : 'markdown' }) + '</div></div>' ; }, {ends : true });
2. 使用效果
这是正常显示的文本。
这是一段被黑幕遮挡的内容,鼠标悬停可以查看。
或者使用标签插件:
这是被黑幕遮挡的敏感内容
这是一整段被黑幕遮挡的内容:
列表项 1
列表项 2
插入图表
使用 EChart 工具,该工具比较成熟且能绘制的图表多样。
1. 使用方法
安装 hexo-tag-echarts
插件:
1 npm install hexo-tag-echarts --save
在需要插入图表的文章开头添加以下 js 内容:
1 2 3 4 // 通过jsDelivr的CDN引入echarts <script src ="https://cdn.jsdelivr.net/npm/[email protected] /dist/echarts.min.js" > </script > // 使用GL里的各种组件时需要添加,否则可不需要 <script src ="https://cdn.jsdelivr.net/npm/[email protected] /dist/echarts-gl.min.js" > </script >
注 :这里不通过 js 文件直接引入是因为用到的地方比较少,没必要作为必要加载。(博客里塞的自定义小垃圾已经够多了,加上没做优化,尽可能还是少加载一些)
插入图表内容:
1 2 3 {% echarts 400 '85%' %} ... {% endecharts %}
具体格式说明参考 Echart官网 ;
2. 使用效果
这里以折线图为例:
后记
持续更新中。没什么技术含量,主要是一些小构思。