其他分享
首页 > 其他分享> > 关于本博客样式

关于本博客样式

作者:互联网

说明

本博客的样式来自开源项目
https://github.com/BNDong/Cnblogs-Theme-SimpleMemory
其使用文档如下
https://bndong.github.io/Cnblogs-Theme-SimpleMemory/v2
文档还是很清晰的,本文将样式设置的过程做详细说明,一些问题以为是bug其实是没有理解到位。

准备

访问开源项目下载最新版本

截止本博客发布前,最新版本为V2.1.0

image.png

下载Source code

image.png
由于GitHub访问不稳定,这里提供百度网盘下载
链接: https://pan.baidu.com/s/1csyYPuwJcjGU1SIDOMg5Sw?pwd=37d4
提取码: 37d4

解压后目录如下
image.png

开通博客园博客

开通博客就不说了呗,有手就行

打开博客后台管理页面

https://i.cnblogs.com/settings
如下
image.png

开通js执行权限

点击申请js权限

image.png

填写申请理由

博客园管理员你好,请帮我开通js权限,我要美化博客,谢谢您的帮助。
(文采好的请自由发挥,快的话1个小时,慢的话需要1天)

image.png

侧边栏组件勾选公告

博客管理-》选项-》侧边栏控件-》勾选“公告”-》保存
开通了js执行权限,还需要勾选公告才能执行js代码
image.png

配置

设置博客皮肤SimpleMemory

image.png

设置代码高亮

不要勾选显示行号!
image.png

设置页面定制CSS代码

勾选禁用模版默认CSS

拷贝自己的CSS

将准备阶段里下载得zip包解压后找到Cnblogs-Theme-SimpleMemory-2.1.0\dist\simpleMemory.css,将css文件里的内容全部拷贝粘贴到代码框里
image.png

配置博客侧边栏公告

image.png

<script type="text/javascript">
    window.cnblogsConfig = {
      info: {
        name: 'iminifly', // 用户名
        startDate: '2017-11-02', // 入园时间,年-月-日。入园时间查看方法:鼠标停留园龄时间上,会显示入园时间
        avatar: 'https://pic.cnblogs.com/avatar/1271234/20171102182052.png', // 用户头像
        blogIcon: 'https://blog-static.cnblogs.com/files/blogs/742048/logo.ico',
      }
    }
</script>
<script src="https://cdn.jsdelivr.net/gh/BNDong/Cnblogs-Theme-SimpleMemory@v2.1.0/dist/simpleMemory.js" defer></script>

里边需要修改自己的用户名入园时间,头像图标

点击保存

image.png
整个样式改造基本完成

编写博客

添加新随笔

image.png

自行添加内容

image.png

点击发布

image.png

访问自己的博客查看效果

image.png
image.png

注意

博客园的博客首页只展示随笔,不展示文章。我在设置完成后,发展首页没有内容,以为是样式没生效,最后发现是这个原因。
image.png

标签:入园,样式,博客,js,勾选,关于,https,com
来源: https://www.cnblogs.com/iminifly/p/16030629.html