如何将个人博客配置成适合的?
摘要:前言 本文主要介绍个人博客配置方案,包括如何使用脚本上传博客文章、博客主题皮肤配置。 持续更新中....... 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>
