博客园主题2
1、修改博客皮肤为 Custom
2、在页面定制 CSS 代码
中 ( 注意要勾选禁用模本默认CSS ) 添加以下地址中的css代码:
#loading{bottom:0;left:0;position:fixed;right:0;top:0;z-index:9999;background-color:#f4f5f5;pointer-events:none;}.loader-inner{will-change:transform;width:40px;height:40px;position:absolute;top:50%;left:50%;margin:-20px 0 0 -20px;background-color:#3742fa;border-radius:50%;animation:scaleout 0.6s infinite ease-in-out forwards;text-indent:-99999px;z-index:999991;}@keyframes scaleout{0%{transform:scale(0);opacity:0;}40%{opacity:1;}100%{transform:scale(1);opacity:0;}}
.cnblogs-markdown :not(pre,div,td)>code, .blogpost-body :not(pre,div,td)>code {
color:#d83b64!important;
background-color: #f9f2f4!important;
font-family: Menlo,Monaco,Consolas,"Courier New",monospace!important;
font-size: 100%!important;
}
.cnblogs-markdown mark {
border-radius:100px!important;
background-color:yellow!important;
}
.cnblogs-markdown .hljs {
white-space: pre;
word-break: normal;
font-family: "Consolas",sans-serif!important;
font-size:14px!important;
}
3、页首HTML代码
:
<div id="loading"><div class="loader-inner"></div></div>
4、博客侧边栏公告
代码(格式选择 html):
<!-- @format -->
<script src="https://guangzan.gitee.io/awescnb/index.js"></script>
<script>
const opts = {
// 基本配置
theme: {
name: 'geek',
color: '#69b6e4',
title: '',
avatar: 'https://fastly.jsdelivr.net/gh/Angelia-Wang/blogImage/img/me.jpg',
favicon: 'https://fastly.jsdelivr.net/gh/Angelia-Wang/blogImage/img/me2.png',
headerBackground: 'https://fastly.jsdelivr.net/gh/Angelia-Wang/blogImage/img/20221122142928.png',
},
// 代码高亮
highLight: {
enable: true,
},
// 代码行号
lineNumbers: {
enable: false,
},
// github图标
github: {
enable: true,
url: 'https://github.com/Angelia-Wang',
},
// 码云图标
gitee: {
enable: false,
url: '',
},
// 图片灯箱
imagebox: {
enable: true,
},
// 文章目录
catalog: {
enable: true,
position: 'right',
},
// 右下角按钮组
tools: {
enable: true,
initialOpen: false,
},
// live2d模型
live2d: {
enable: false,
model: 'haru-01',
},
// 点击特效
click: {
enable: true,
auto: false,
colors: ['#ffb3be', '#66ccff', '#cc99ff',],
size: 30,
maxCount: 50,
},
// 暗色模式
darkMode: {
enable: true,
autoDark: false,
autoLight: false,
},
// 音乐播放器
musicPlayer: {
enable: false,
page: 'all',
agent: 'pc',
autoplay: false,
volume: 0.4,
lrc: {
enable: false, // 启用歌词
type: 1, // 1 -> 字符串歌词 3 -> url 歌词
color: '', // 颜色
},
audio: [
{
name: '404 not found',
artist: 'REOL',
url: 'https://guangzan.gitee.io/imagehost/awescnb/music/demo4.mp3',
cover: 'https://guangzan.gitee.io/imagehost/awescnb/music/demo.jpg',
lrc: ``,
},
],
},
// 随笔头图
postTopimage: {
enable: false,
},
// 随笔尾图
postBottomimage: {
enable: false,
},
// 打赏二维码
donation: {
enable: false,
qrcodes: [],
},
// 个性签名
signature: {
enable: true,
contents: [
"<b style='color:#ff6b81;text-shadow:0 0 0px #151728'>曾经沧海难为水,除却巫山不是云。</b>",
"<b style='color:#ff6b81;text-shadow:0 0 0px #151728'>路漫漫其修远兮,吾将上下而求索。</b>"
],
},
// 侧边栏二维码
qrcode: {
enable: false,
img: '',
desc: '',
},
// 弹出公告
notice: {
enable: true,
text:['双击导航条锁屏🔐','欢迎访问我的博客🍺','点个赞再走吧👍','欢迎评论🙌'],
},
// 首页列表图
indexListImg: {
enable: false,
},
// 顶部加载进度条
topProgress: {
enable: true,
page: 'all',
agent: 'pc',
background: '#ff6b81',
height: '5px',
},
// 随笔页尾部签名
postSignature: {
enable: true,
content: [],
licenseName: '',
licenseLink: '',
},
// 背景图片或颜色
bodyBackground: {
enable: false,
value: '',
opacity: 0.9,
repeat: false,
},
// 弹幕
barrage: {
enable: false,
},
// 图表
charts: {
enable: false,
},
// 锁屏
lock: {
enable: false,
},
// 自定义链接链接
links: [
{
name: '',
link: '',
},
],
// 评论输入框表情
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>
本文作者:Joey-Wang
本文链接:https://www.cnblogs.com/joey-wang/p/16915960.html
版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步