本博客主题搭建教程:SimpleMemory主题配置
一、需要的主题:SimpleMemory
1、主题下载地址:https://github.com/BNDong/Cnblogs-Theme-SimpleMemory
2、主题官方配置文档:https://bndong.github.io/Cnblogs-Theme-SimpleMemory/v2/#/
二、配置过程中的易错点
0、一定要先在博客园博客后台先申请开通js权限,这个审核需要一点时间的,我当时在线等了好久
1、主题文件不同的版本配置教程不一样,建议下载最新的主题,教程就参考官方配置教程
2、官方配置文档里的animate - 动效,建议配置,如果不配置,页面太不协调了
3、90%的代码添加都是在侧边栏里进行添加,不要添加错了
4、添加代码的时候,容易弄错格式的字符:逗号(,)
5、添加友情链接页面和书单页面的时候容易出错,它需要添加的代码 <input id="linkListFlg" type="hidden" />
是添加到我们的文章页面里的,需要我们新建一篇文章,将其标题命名为:友情链接,然后插入上面的代码,最后在修改侧边栏才会成功,我刚开始讲上面的代码插入到了侧边栏编辑的代码里,导致失败
6、修改图标(icon):我也是参考的它的官方教程,不过也折腾了半个小时了,需要记住一个核心:先在图标网站:https://www.iconfont.cn/?spm=a313x.7781069.1998910419.d4d0a486a 下载我们需要的各种svg图标,比如友情链接,公众号等图标,下载完后,在图标网站新建项目,然后将下载的图标上传到项目里,点击下图中的位置,复制网址,然后添加到侧边栏里
我的侧边栏代码:直接粘贴,就可以用上我的风格了。
注意点:可根据代码进行简单修改,改成你自己的内容即可,cnzz你要换成自己的,友情链接和书单的实现需要配合你创建2个对应的文章,然后在文章里插入步骤5里的代码即可
点击查看代码
<script type="text/javascript">
window.cnblogsConfig = {
info: {
// 用户名
name: 'painter',
// 入园时间,年-月-日
startDate: '2021-12-06',
// 用户头像
avatar: 'https://images.cnblogs.com/cnblogs_com/blogs/737239/galleries/2115043/o_220226051859_%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20220226131832.jpg',
// 博客图标
blogIcon: 'https://images.cnblogs.com/cnblogs_com/blogs/737239/galleries/2115043/o_220226052431_hacker.png',
},
fontIconExtend: "//at.alicdn.com/t/font_3206720_qcufvkud8ca.css",
sidebar: { // 列表数据 ['导航名称', '链接', 'icon']
navList: [
['B站', 'https://space.bilibili.com/248992912', 'icon-bilibili'],
['公众号', 'https://www.cnblogs.com/painter-sec', 'icon-weixingongzhonghao'],
['Github', 'https://github.com/lishang520', 'icon-github'],
['书单', 'https://www.cnblogs.com/painter-sec/articles/15938837.html', 'icon-shu'],
['友情链接', 'https://www.cnblogs.com/painter-sec/articles/15938598.html', 'icon-youqinglianjie'],
],
},
banner: {
home: {
titleSource: 'one',
},
article: {
background: [
"https://images.cnblogs.com/cnblogs_com/blogs/737239/galleries/2115043/o_220226072329_1.jpg",
"https://images.cnblogs.com/cnblogs_com/blogs/737239/galleries/2115043/o_220226072336_2.jpg",
"https://images.cnblogs.com/cnblogs_com/blogs/737239/galleries/2115043/o_220226072344_3.jpg",
"https://images.cnblogs.com/cnblogs_com/blogs/737239/galleries/2115043/o_220226072352_4.jpg",
"https://images.cnblogs.com/cnblogs_com/blogs/737239/galleries/2115043/o_220226072404_5.jpg",
"https://images.cnblogs.com/cnblogs_com/blogs/737239/galleries/2115043/o_220226072419_6.jpg",
"https://images.cnblogs.com/cnblogs_com/blogs/737239/galleries/2115043/o_220226072426_7.jpg",
],
},
},
animate: {
homeBanner: {
enable: true,
options: {
radius: 15,
},
},
background: {
enable: true,
},
bannerImages: {
enable: true,
},
},
progressBar: {
color : '#77b6ff',
},
links: {
page: [
{
name: '小迪渗透', // 昵称
introduction: 'IT技术类博客', // 简介
avatar: 'https://blog.dbnuo.com/images/avatar.gif', // 头像
url: 'http://www.xiaodi8.com/' // 友链地址
},
{
name: 'Beczou\'s Blog',
introduction: 'IT技术类博客',
avatar: 'https://blog.dbnuo.com/images/avatar.gif',
url: 'http://www.beczou.com/'
},
],
},
rtMenu: {
downScrollDom: '#blog_post_info_block',
},
switchDayNight: {
enable: true,
auto: {
enable: true
}
},
code: {
type: 'hljs',
options: {
maxHeight: '70vh',
},
},
cnzz: "这里换成你的cnzz id",
}
window.cnblogsConfig.bookList = [
{
title: '在读',
books: [
{
cover: 'https://images.cnblogs.com/cnblogs_com/blogs/737239/galleries/2115021/o_220226033600_29120617-1_b_10.jpg',
name: 'JavaScript高级程序设计 第4版',
formerName: '',
author: '马特·弗里斯比',
translator: '',
press: '人民邮电出版社',
year: '2020-09',
score: 4,
},
]
},
{
title: '待读',
books: [
{
cover: 'https://images.cnblogs.com/cnblogs_com/blogs/737239/galleries/2115021/o_220226041452_9265169-1_u_5.jpg',
name: 'Head First Java',
formerName: '',
author: '塞若',
translator: '',
press: '中国电力出版社',
year: '2007-02',
score: 4,
},
{
cover: 'https://images.cnblogs.com/cnblogs_com/blogs/737239/galleries/2115021/o_220226041716_1814476496-1_u_1.jpg',
name: 'Java编程思想(第4版)',
formerName: '',
author: 'Bruce Eckel',
translator: '',
press: '机械工业出版社',
year: '2007-06',
score: 4,
},
{
cover: 'https://images.cnblogs.com/cnblogs_com/blogs/737239/galleries/2115021/o_220226044159_%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_20220226124119.png',
name: '乌云代码审计1000个案例',
formerName: '',
author: '乌云',
translator: '',
press: '乌云',
year: '',
score: 4,
},
]
},
{
title: '已读',
books: [
{
cover: 'https://images.cnblogs.com/cnblogs_com/blogs/737239/galleries/2115021/o_220226043829_%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_20220226123747.png',
name: '京东src小课堂1-140',
formerName: '',
author: '京东SRC',
translator: '',
press: '电子版文章',
year: '2019-07',
score: 4,
},
{
cover: 'https://images.cnblogs.com/cnblogs_com/blogs/737239/galleries/2115021/o_220226040347_29298286-1_u_1.jpg',
name: 'Web安全漏洞及代码审计(微课版)',
formerName: '',
author: '郭锡泉',
translator: '',
press: '电子工业出版社',
year: '2021-08',
score: 1,
},
{
cover: 'https://images.cnblogs.com/cnblogs_com/blogs/737239/galleries/2115021/o_220226035922_11074789643-3_u_1.jpg',
name: '网络安全:攻防技术实战',
formerName: '',
author: '闵海钊',
translator: '',
press: '电子工业出版社',
year: '2020-09',
score: 4,
},
{
cover: 'https://images.cnblogs.com/cnblogs_com/blogs/737239/galleries/2115021/o_220226034450_23825947-1_u_1.jpg',
name: '代码审计:企业级Web代码安全架构',
formerName: '',
author: '尹毅',
translator: '',
press: '机械工业出版社',
year: '2015-12',
score: 4,
},
{
cover: 'https://images.cnblogs.com/cnblogs_com/blogs/737239/galleries/2115021/o_220226042102_29131665-1_u_3.jpg',
name: 'Python安全攻防:渗透测试实战指南',
formerName: '',
author: '吴涛',
translator: '',
press: '机械工业出版社',
year: '2020-09',
score: 1,
},
{
cover: 'https://images.cnblogs.com/cnblogs_com/blogs/737239/galleries/2115021/o_220226035535_1391103897-1_u_1.jpg',
name: '浴血荣光',
formerName: '',
author: '金一南',
translator: '',
press: '北京联合出版公司',
year: '2017-05',
score: 4,
},
{
cover: 'https://images.cnblogs.com/cnblogs_com/blogs/737239/galleries/2115021/o_220226035034_698771804-1_u_4.jpg',
name: '人类简史:从动物到上帝',
formerName: '',
author: '尤瓦尔·赫拉利',
translator: '',
press: '中信出版社',
year: '2017-01',
score: 4,
},
{
cover: 'https://images.cnblogs.com/cnblogs_com/blogs/737239/galleries/2115021/o_220226034158_615023425-1_u_4.jpg',
name: '刻意练习:如何从新手到大师',
formerName: '',
author: '安德斯·艾利克森',
translator: '',
press: '机械工业出版社',
year: '2021-04',
score: 3,
},
{
cover: 'https://images.cnblogs.com/cnblogs_com/blogs/737239/galleries/2115021/o_220226043205_23331717-1_u_2.jpg',
name: 'Metasploit渗透测试魔鬼训练营',
formerName: '',
author: '诸葛建伟',
translator: '',
press: '机械工业出版社',
year: '2013-09',
score: 4,
},
]
},
];
</script>
<script src="https://cdn.jsdelivr.net/gh/BNDong/Cnblogs-Theme-SimpleMemory@v2.1.0/dist/simpleMemory.js" defer></script>