Cnblogs博客皮肤开发调试最佳方案
Cnblogs博客园支持自定义js来美化站点(需要申请JS权限),可以将主题托管到自己的云资源或CDN加速节点节点上。
基于BNDong/cnblogs-theme
主题二次开发,美化博客园主题,我们移步到操作文档,根据文档一步步安装。
开发调试
例如我们的网站为 www.example.com
(IP或其它host),将编译后的文件夹 dist
放到了网站的根目录。
这样可以通过加载 https://www.example.com/dist/simpleMemory.js
来加载主题:
<script type="text/javascript">
window.cnblogsConfig = {
info: {
name: 'userName', // 用户名
startDate: '2021-01-01', // 入园时间,年-月-日。入园时间查看方法:鼠标停留园龄时间上,会显示入园时间
avatar: 'http://xxxx.png', // 用户头像
},
}
</script>
<script src="https://www.example.com/dist/simpleMemory.js" defer></script>
当主题需要自定义一些功能,发现不方便调试js脚本,要反复将生产包部署到服务器,来回操作繁琐复杂,现可以通过云开发方式来做调试。
使用Codespaces调试开发
fork仓库后,如果没有云资源又想要调试代码,这时候可以尝试github推出的codespaces云IDE。
- 在github上创建一个codespaces
control + shift + ~
打开终端,执行命令语句npm run server
- 切换到端口面板, 右键链接地址,更改端口可见性为
public
- 打开链接地址,就能看到
dist
为目录的站点
- 最后在csblogs博客设置中,临时将script脚本地址替换
在codespaces编译后,在刷新博客园网站就能看到更改后的内容
github codespaces 每个月免费时长为120 core/h,2核数CPU可以使用60h。
打包后dist包部署到服务器。
生产部署
使用静态资源托管服务商(推荐)
静态资源服务商目前有 github pages
、gitee pages
、Vercel
、Netlify
等。 考虑国外防火墙和CDN的影响,推荐使用gitee pages
1. 打包
仓库根目录build.sh
脚本,更换远程仓库源地址,执行
bash publish.sh
脚本打包产物到dist,再把产物提交的仓库gh-pages
分支
2. 部署
gitee仓库 服务
- gitee pages
选取发布分支 gh-pages
, 确认发布
云服务器
如果想要部署到自己的服务器,以下使用Docker容器化部署。
注意
Cnblogs
是https站点,所以引入第三方资源的站点也必须是https
,详见https混合内容
1. 申请SSL证书__已有证书跳过此步骤
-
以ZeroSSL申请证书为例, 面板中点击
New Certificate
,输入IP地址-选择90天免费证书
-
验证域名所有权,下载验证文件,替换仓库路径
./well-known/pki-validation
下的.txt文件
-
服务器中拉取仓库代码, 执行
docker-compose up -d
- ZeroSSL点击校验
2. 安装证书
-
ZeroSSl下载的证书包
将模块包ca-boundle.crt
和并到certificate.crt
中(手动扣过去就行),并替换仓库ssl
下的证书文件; -
服务器拉取最新代码
执行docker-compose up -d --force-recreate --build --remove-orphans
参考
以下为本站 cnblogsConfig
参考配置:
<script type="text/javascript">
window.cnblogsConfig = {
info: {
name: 'Alson',
startDate: '2023-01-25',
avatar: 'https://pic.cnblogs.com/avatar/1475521/20230213112709.png',
blogIcon: 'https://blog.dbnuo.com/images/favicon-32x32-next.png'
},
sidebar: {
navList: [
['GitHub', 'https://github.com/fzxiang', 'icon-github'],
['Gitee', 'https://gitee.com/fzxiang', 'icon-gitee1'],
['Cnblogs', 'https://www.cnblogs.com/', 'icon-cnblogs']
],
},
title: {
onblur: 'Hi',
onblurTime: 500,
focus: '欢迎回来!',
focusTime: 1000
},
switchDayNight: {
enable: true,
nightMode: false,
auto: {
enable: false,
dayHour: 5,
nightHour: 19
}
},
banner: {
home: {
background: [
"https://images.cnblogs.com/cnblogs_com/alson/2267398/o_230203060826_background.jpeg",
],
title: [],
titleSource: 'jinrishici',
},
article: {
background: [
'https://images.cnblogs.com/cnblogs_com/alson/2267398/o_230131071130_wallhaven-1j65pv.webp',
'https://images.cnblogs.com/cnblogs_com/alson/2267398/o_230131071656_wallhaven-2e37y9.webp',
'https://images.cnblogs.com/cnblogs_com/alson/2267398/o_230131071715_wallhaven-4d38m0.webp',
'https://images.cnblogs.com/cnblogs_com/alson/2267398/o_230131071804_wallhaven-4gj334.webp',
'https://images.cnblogs.com/cnblogs_com/alson/2267398/o_230131071813_wallhaven-6k3oox.webp',
'https://images.cnblogs.com/cnblogs_com/alson/2267398/o_230131071822_wallhaven-13dv2g.webp',
'https://images.cnblogs.com/cnblogs_com/alson/2267398/o_230131071907_wallhaven-49gw1n.webp',
'https://images.cnblogs.com/cnblogs_com/alson/2267398/o_230131071928_wallhaven-83dkk1.webp',
'https://images.cnblogs.com/cnblogs_com/alson/2267398/o_230131071937_wallhaven-96w5gk.webp',
'https://images.cnblogs.com/cnblogs_com/alson/2267398/o_230131072051_wallhaven-d5yzvg.webp',
'https://images.cnblogs.com/cnblogs_com/alson/2267398/o_230131072103_wallhaven-dg6pel.webp',
'https://images.cnblogs.com/cnblogs_com/alson/2267398/o_230131072223_wallhaven-dgeqoj.webp',
'https://images.cnblogs.com/cnblogs_com/alson/2267398/o_230131072232_wallhaven-ey1pow.webp',
'https://images.cnblogs.com/cnblogs_com/alson/2267398/o_230131072250_wallhaven-j5y525.webp',
'https://images.cnblogs.com/cnblogs_com/alson/2267398/o_230131072308_wallhaven-j82g35.webp',
'https://images.cnblogs.com/cnblogs_com/alson/2267398/o_230131072324_wallhaven-kwkg5q.webp',
'https://images.cnblogs.com/cnblogs_com/alson/2267398/o_230131072337_wallhaven-kwxz16.webp',
'https://images.cnblogs.com/cnblogs_com/alson/2267398/o_230131072401_wallhaven-lqddel.webp',
'https://images.cnblogs.com/cnblogs_com/alson/2267398/o_230131072410_wallhaven-r2yjg1.webp',
'https://images.cnblogs.com/cnblogs_com/alson/2267398/o_230131072423_wallhaven-wymo2p.webp',
'https://images.cnblogs.com/cnblogs_com/alson/2267398/o_230131072439_wallhaven-wyomo6.webp',
'https://images.cnblogs.com/cnblogs_com/alson/2267398/o_230131072452_wallhaven-ym56zg.webp',
'https://images.cnblogs.com/cnblogs_com/alson/2267398/o_230131072505_wallhaven-ym62z7.webp',
'https://images.cnblogs.com/cnblogs_com/alson/2267398/o_230131072512_wallhaven-yml8wd.webp'
],
}
},
links: {},
articleSuffix: {
imgUrl: '',
},
footer: {
style: 2
},
rtMenu: {
downScrollDom: '#blog_post_info_block',
},
code: {
type: 'hljs',
options: {
hljs: {
theme: 'atom-one-dark-reasonable',
languages: ['Bash', 'CSS', 'Dockerfile', 'Go', 'HTML', 'XML', 'HTTP', 'Less', 'Lua', 'PHP', 'Python', 'Shell', 'SQL', 'Java', 'JSON']
},
maxHeight: '',
fontSize: 12,
line: true,
macStyle: true,
},
},
articleDirectory: {
position: 'right',
minBodyWeight: 900
},
progressBar: {
color: "#f87171"
},
animate: {
bannerImages: {
enable: false,
options: {
itemNum: 5,
current: -1,
sort: 1,
time: 30000
}
},
homeBanner: {
enable: true,
// 如果设置自定义homeBanner.animate动画脚本,替换默认动画配置项homeBanner.options
animate: {
script: [
'https://blog-static.cnblogs.com/files/alson/rocket.min.js',
'https://blog-static.cnblogs.com/files/alson/plane.umd.js',
'https://blog-static.cnblogs.com/files/alson/rabbit.min.js',
],
onload: (element) => {
__animation__.render({
element: element
})
}
},
options: {
radius: 15,
density: 0.2,
color: 'rgba(255,255,255, .2)',
clearOffset: 0.3
}
},
articleTitle: {
enable: true
},
articleBanner: {
enable: false
},
background: {
enable: false,
options: {
colorSaturation: "60%",
colorBrightness: "50%",
colorAlpha: 0.5,
colorCycleSpeed: 5,
verticalPosition: "random",
horizontalSpeed: 200,
ribbonCount: 3,
strokeSize: 0,
parallaxAmount: -0.2,
animateSections: true
}
},
backgroundMouse: {
enable: false
},
mouse: {
enable: false,
options: {
size: 8,
sizeF: 36
}
}
},
consoleList: [
['Hello', "Welcome to Alson's blog"],
],
}
window.cnblogsConfig.links.footer = [
["bndong", 'https://www.cnblogs.com/bndong/'],
]
window.cnblogsConfig.hooks = {
beforeCode: (_) => {
// console.log('code 渲染开始前');
},
afterCode: (_) => {
// console.log('code 渲染结束后');
},
beforeLoading: (_) => {
// console.log('loading 开始前');
},
afterLoading: (_) => {
// console.log('loading 结束后');
},
dayNightControl: (_, type) => {
// console.log(type);
// console.log('日/夜间模式');
},
}
</script>
<script src="//fzxiang.gitee.io/alson-cnblogs-theme/simpleMemory.js" defer></script>