如何将个人博客配置成适合的?

摘要:前言 本文主要介绍个人博客配置方案,包括如何使用脚本上传博客文章、博客主题皮肤配置。 持续更新中....... awescnb皮肤使用(geek) 我尝试过各种各样的皮肤风格,都很难有个让我满意的皮肤主题,主要问题就在于这些主题都会有一些排
前言 本文主要介绍个人博客配置方案,包括如何使用脚本上传博客文章、博客主题皮肤配置。 持续更新中....... awescnb皮肤使用(geek) 我尝试过各种各样的皮肤风格,都很难有个让我满意的皮肤主题,主要问题就在于这些主题都会有一些排版显示的bug。目前我在配置的这款皮肤主题,暂时是比较满意的,没有遇到什么奇奇怪怪的显示bug。 awescnb皮肤即用参考这个: awescnb · 语雀 (yuque.com) awescnb开发参考这个: 博客园皮肤构建工具 awescnb - guangzan - 博客园 (cnblogs.com) 为什么选择geek皮肤? 深色主题。 有搜索功能。 支持配置的功能第二多,第一多是reacg这个皮肤主题,但是不喜欢。 基础配置 基础配置 完成这一页的配置流程 ☕ 在博客园中安装皮肤 (yuque.com) 更换皮肤 所有皮肤 (yuque.com) 选中喜欢的皮肤将代码copy到页脚代码中保存。 geek代码: <script src="https://guangzan.gitee.io/awescnb/index.js"></script> <script> const opts = { theme: { name: 'geek', }, } $.awesCnb(opts) </script> 如果想配置其他皮肤主题就是需要更改name参数即可。 自定义配置 在完成前面的基础配置之后,就是自定义配置,自定义配置可以按照自己的喜好修改主题,比如个性签名、头像、图片等等。 需要参照: 参考配置 (yuque.com) 配置选项 (yuque.com) 来进行配置。 配置都是添加在页脚代码中,而不是添加到侧边栏中,添加到侧边栏中好像并不会生效。 需要注意的是在添加配置的时候检查这个主题支持的配置清单,避免不必要的工作。 PS:还有一种方式就是打开同样用这个主题的用户的博客的主页,F12搜索到代码位置,直接抄。 2024.08.14 页脚HTML代码备份见附录一。 博客文章上传 我使用的是github上的开源脚本上传博客文章,好处是简化步骤,不用考虑图片的问题,只要运行脚本就可以了,使用也很方便。 Github地址:dongfanger/pycnblog: 博客园上传markdown文件 (github.com) 如果文章已经上传且发布,再次上传该文章更新,就会把已经发布的文章状态转为未发布,只需要检查文章没有问题就可以再次发布,同时也可以选择在博客园后台查看历史记录撤销这次更新。 附录一 <scriptsrc="https://guangzan.gitee.io/awescnb/index.js"></script> <script> constopts={ theme:{ name:'geek', color:'#00CED1', avatar:'https://images.cnblogs.com/cnblogs_com/wdgray/2290938/t_230323015724_%E5%A4%B4%E5%83%8F.jpg', //avatar:'https://images.cnblogs.com/cnblogs_com/wdgray/2290938/t_240814031445_%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20240814111432.jpg', headerBackground:'https://w.wallhaven.cc/full/k7/wallhaven-k7q9m7.png', //headerBackground:'https://images.cnblogs.com/cnblogs_com/wdgray/2290938/t_240812101018_cnblog%E8%83%8C%E6%99%AF%E5%9B%BE.png', }, //个性签名 signature:{ enable:true, contents:[ "唯有那份炫目,无法遗忘。", ], }, //右上角github地址 github:{ enable:true, color:'#ffb3cc', url:'https://github.com/shadow-wd', }, //主体背景 bodyBackground:{ enable:true, value: 'https://images.cnblogs.com/cnblogs_com/wdgray/2290938/t_240812101018_cnblog%E8%83%8C%E6%99%AF%E5%9B%BE.png', opacity:0.80, repeat:false, }, //图片灯箱(好像没什么作用) imagebox:{ enable:true, }, //博文签名 postSignature:{ enable:true, enableLicense:true, licenseName:'CC4.0BY-SA', licenseLink:'', content:['这是一条自定义内容','这是一条自定义内容'], }, indexListImg:{ enable:true, imgs:["https://guangzan.gitee.io/imagehost/awescnb/images/anime/22.jpg"], }, //按钮工具 tools:{ enable:true, initialOpen:false, }, //点击特效 click:{ enable:true, auto:false, colors:['#FF1461','#18FF92','#5A87FF','#FBF38C'], size:30, maxCount:50, }, links:[ { name:'Github', link:'https://github.com/shadow-wd', }, ], //暗色模式 darkMode:{ enable:true, autoDark:false, autoLight:false }, //博文头图 postTopimage:{ enable:true, imgs:["https://images.cnblogs.com/cnblogs_com/wdgray/2290938/t_230323015724_%E5%A4%B4%E5%83%8F.jpg"], }, //博文列表图 indexListImg:{ enable:true, imgs:["https://images.cnblogs.com/cnblogs_com/wdgray/2290938/t_230323015724_%E5%A4%B4%E5%83%8F.jpg"], }, //表情输入 emoji:{ enable:true, buttonIcon:"", emojiList:[ { value:'https://images.cnblogs.com/cnblogs_com/gshang/1626876/o_2001050555139.png', label:'', }, { value:'', label:'笑哭', }, { value:'', label:'大笑', }, { value:'', label:'苦笑', }, { value:'', label:'斜眼笑', }, { value:'', label:'得意', }, { value:'', label:'微笑', }, { value:'', label:'酷!', }, { value:'', label:'花痴', }, { value:'', label:'呵呵', }, { value:'', label:'好崇拜哦', }, { value:'', label:'思考', }, { value:'', label:'白眼', }, { value:'', label:'略略略', }, { value:'', label:'呆住', }, { value:'', label:'大哭', }, { value:'', label:'头炸了', }, { value:'', label:'冷汗', }, { value:'', label:'吓死了', }, { value:'', label:'略略略', }, { value:'', label:'晕', }, { value:'', label:'愤怒', }, { value:'', label:'祝贺', }, { value:'', label:'小丑竟是我', }, { value:'', label:'嘘~', }, { value:'', label:'猴', }, { value:'', label:'笑笑不说话', }, { value:'', label:'牛', }, { value:'', label:'啤酒', }, { value:'(=・ω・=)', label:'', }, { value:'(`・ω・´)', label:'', }, { value:'(°∀°)ノ', label:'', }, { value:'←_←', label:'', }, { value:'→_→', label:'', }, { value:'Σ(゚д゚;)', label:'', }, { value:'(。・ω・。)', label:'', }, { value:'(-_-#)', label:'', }, ] }, } $.awesCnb(opts) </script>