博客园主题选址—搭建个人博客系列文章

记得点“推荐”或者“关注”哦！！！

1. 主题

Cnblogs-Theme-SimpleMemory 1.3.3 版本

2. 权限申请

先在博客园申请开通博客，这里就不做介绍了，然后在 “博客侧边栏公告” 申请 js 权限（博客侧边栏公告）

3. 博客园后台设置

3.1 用户设置

参数：

  1. 标题：主要影响后台的显示；

  2. 博客地址名：https://www.cnblog.com/博客地址名/，这个只会修改只能通过邮件申请，我申请过一次，申请完之后用了 js 的话，还会用旧的链接地址访问，需要把 css 和 js 的代码清掉保存，再重新填写再保存，才能快速清除；

  3. 登录用户名：这个影响不大，因为下面有个显示名称，就是替换这个的

  4. 密码：忽略

  5. 显示名称（作者名）：这里会替换掉登录用户名的显示规则，会影响浏览器标签那里的 title，还有显示作者的地方；

  6. 邮箱：评论那里可以选择发送邮箱

  7. 回复通知邮箱：默认楼上那个

  8. 时区：utc+8 即可，北京时间

  9. 语言与地区：简体中文

3.2 模板设置

参数：

  1. 博客皮肤：选择SimpleMemory

  2. 页面定制 CSS 代码：

    2.1 CSS代码位置：/src/style/base.min.css ，拷贝此文件代码至页面定制CSS代码文本框处即可。

    2.2 /src/style/base.min.css 的修改参考 /src/style/base.css。博客设置请使用压缩版本，直接使用 /src/style/base.css 会字符超限！

  3. 禁用模板默认 CSS：这里要记得 image-20200928112416329

  4. 博客侧边栏公告：

    4.1 JavaScript 对象是被命名值的容器。值以名称:值对的方式来书写（名称和值由冒号分隔）。

<script type="text/javascript">
    window.cnblogsConfig = {
        GhVersions    : 'v1.3.3',  //这里的版本要与最下面的 scripts 引用的 js 版本一致
        blogUser      : "欲戴王冠，必承其重...易波叶平",  //用户名，主要是首页打开的为孩子
        blogAvatar    : "https://cdn.jsdelivr.net/gh/ZhaoUncle/image@main/blog/avatar.png", //用户头像
        blogStartDate : "2017-11-17",  // 入园时间，年-月-日。入园时间查看方法：鼠标停留园龄时间上，会显示入园时间
        webpageTitleOnblur: '(o?v?)ノ Hi', //离开页面，title 显示的文字
        webpageTitleFocus: '(*′?｀*) 欢迎回来！',//点击页面，title 显示的文字
        webpageIcon: "https://cdn.jsdelivr.net/gh/BNDong/Cnblogs-Theme-SimpleMemory@master/img/webp/blog_logo.webp", //网站图标
        fontIconExtend: "//at.alicdn.com/t/font_2104671_57vkche3kz2.css",//字体图标配置，开个小章节单独讲
        menuNavList: [ // 菜单导航 ['导航名称', '链接', 'icon']
             ['Blog', 'https://zhaouncle.com/', 'icon-blog-solid'],
             ['CMS', 'https://link.zhaouncle.com/', 'icon-logo1'],
             ['k8sYaml 生成器', 'https://k8syaml.com/', 'iconkubernetes1'],//这里的iconkubernetes1就是用的我自己的图标库来配置的，默认不自带
        ],
        //homeBannerText: "好好学习，天天向上！",我这里不设置，用的主题的自动获取，默认获取诗词
        //homeBannerTextType: "jinrishici", //jinrishici：每次刷新随机获取一句古诗词;one：每日获取一句话
        homeTopImg: [ //首页轮播图，可以设置多个进行轮播
            "https://cdn.jsdelivr.net/gh/ZhaoUncle/image@main/blog/home_top_bg.webp",
            "https://cdn.jsdelivr.net/gh/BNDong/Cnblogs-Theme-SimpleMemory@master/img/webp/home_top_bg.webp"
        ],
        essayTopImg: [//文章页面最上面那个图片，每次刷新随机选择
            "https://cdn.jsdelivr.net/gh/ZhaoUncle/image@main/blog/nothome_top_bg.webp",
            "https://cdn.jsdelivr.net/gh/ZhaoUncle/image@main/blog/wallhaven-4o5zm9.webp"
        ],
        menuUserInfoBgImg: 'https://cdn.jsdelivr.net/gh/ZhaoUncle/image@main/blog/menu_bg.gif',//菜单栏个人信息背景图
        codeLineNumber: true, //代码行号渲染
        essayCodeHighlightingType: "prettify",//代码渲染高亮
        essayCodeHighlighting: "obsidian", // 代码渲染主题
        footerStyle: 2,// 页脚样式，默认有 1、2 两种
        bottomText: { //页脚标语
            left : "长风破浪会有时",
            right: "直挂云帆济沧海",
        },
        reward: { //文章打赏按钮，显示在页面右下角。
            enable: true,
            wechatpay: 'https://cdn.jsdelivr.net/gh/ZhaoUncle/image@main/blog/WechatPay.png',//我这里设置的赞赏码
            alipay: 'https://cdn.jsdelivr.net/gh/ZhaoUncle/image@main/blog/Alipay.png',//支付宝付款码
        },
        bottomBlogroll: [ // 友情链接，[[链接名,链接]....]
            ["易波叶平", 'https://zhaouncle.com/'],
        ],
        consoleList: [ //浏览器 console 输出
           ['Zhaouncle CNBlogs', 'https://www.cnblogs.com/UncleZhao/'],
        ],
        advertising: true, //博客园广告
    }
</script>
<script src="https://cdn.jsdelivr.net/gh/BNDong/Cnblogs-Theme-SimpleMemory@v1.3.3/src/script/simpleMemory.min.js" defer></script>

3.3 开启公告控件

公告这里要选上image-20200928112416329，否则部分 js 文件会无法生效，其他的就自行参考自己的需要了。

到了这一步，基本上一个完整的博客主题就搭建完成了，保存即可自由玩耍写博客了。

4. 功能扩展

4.1 菜单栏图标

4.1.1 查看菜单栏

字体图标库 列举了部分内置的图标，但是还有一些需要自定义，比如 “k8sYmal 生成器” 这个图标就没有内置，需要我们自己去 iconfont ，阿里的图标库自定义。

4.1.2 登录 iconfont

我一开始选择“Github”登录的方式，但是直接报错了，所以我只能选择“新浪微博”的登录方式，主要是我不玩微博，我觉得很蛋疼

4.1.3 创建项目

我们先进到 “资源管理” -- “我发起的项目” ，创建一个 “博客园” 项目，如图所示

4.1.4 生成代码

然后生成代码，填入 3.2 的 “博客侧边栏公告” 的 js 对象 fontIconExtend 更换成你自己的就行了，这个要添加图标进去后才能生成。

image-20200928163806514

4.1.5 图标加入购物车

你可以直接搜索 “kubernetes”，也可以直接一个一个搜，不过一般不会这么傻吧？哈哈。重要的是选中图标，把鼠标移到图标上面，然后添加进购物车

image-20200928164246239

4.1.6 从购物车添加至项目

点击购物车图标，然后 “添加至项目” 即可，当然你也可以忽略前面创建项目的步骤，直接在这里的image-20200928164444244选中添加项目也行，随你自己喜欢了。

image-20200928164401982

4.1.7 添加成功

点击确定，就添加成功了，然后在“生成代码”就好啦，鼠标移动到图标上面，直接复制代码，

image-20200928164637400

4.1.8 配置 js 对象

然后直接生成代码，香气十足，再配置到 3.2 的 js 对象 “menuNavList”，完美添加图标了，当然你也可以自己制作图标然后上传使用。

    menuNavList: [ // 菜单导航 ['导航名称', '链接', 'icon']
         ['k8sYaml 生成器', 'https://k8syaml.com/', 'iconkubernetes1'],//这里的iconkubernetes1就是用的我自己的图标库来配置的，默认不自带
    ],

4.2 鼠标点击特效

4.2.1 鼠标特效

4.2.1.1 烟花特效，我自己在使用的

image-20200928164637400

4.2.1.2 文字特效

image-20200928164637400

4.2.2 添加鼠标图像

在博客园的设置那里，我们在 “页面定制 CSS 代码” 的“body” 代码块添加如下几句代码，这几句代码主要添加鼠标的展示图，至于点击效应在下面的 js 代码块里面。如下图所示

注意：至于如何快速找到 body，要么你直接浏览器 F12 搜，要么把 css 代码 copy 出来咯，改完再放进去不就好了吗

background-repeat: repeat;background-attachment: fixed;background-size:cover;cursor: url(https://cdn.jsdelivr.net/gh/ZhaoUncle/image@main/blog/cursor.ico),auto;
image-20200928170447277

4.2.3 添加 js 代码

注意：特效只需要添加一种即可

4.2.3.1 烟花特效

在 **“页首 HTML 代码” **那里添加以下代码


<script src="https://cdn.jsdelivr.net/gh/ZhaoUncle/image@main/static/mouse-click.js"></script>
image-20200928170753274

4.2.3.2 文字特效

在 **“页首 HTML 代码” **那里添加以下代码

<script type="text/javascript">
/* 鼠标特效，文字特效 */
var a_idx = 0;
jQuery(document).ready(function($) {
    $("body").click(function(e) {
        var a = new Array("?富强?","?民主?","?文明?","?和谐?","?自由?","?平等?","?公正?","?法治?","?爱国?","?敬业?","?诚信?","?友善?");
        var $i = $("").text(a[a_idx]);
        a_idx = (a_idx + 1) % a.length;
        var x = e.pageX,
        y = e.pageY;
        $i.css({
            "z-index": 999999999999999999999999999999999999999999999999999999999999999999999,
            "top": y - 20,
            "left": x,
            "position": "absolute",
            "font-weight": "bold",
            "color": "rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"
        });
        $("body").append($i);
        $i.animate({
            "top": y - 180,
            "opacity": 0
        },
        1500,
        function() {
            $i.remove();
        });
    });
});
</script>

4.2.4 结束语

如上就能完成鼠标的特效了，当然特效也不止这一种，剩下的等以后有兴趣再试了。

4.3 网站统计

CNZZ 也就是友盟的网站统计功能，主题整合 CNZZ 网站统计，并对样式进行了优化。如果需要本功能，请首先去 CNZZ 配置网站的统计，然后修改下面的代码，添加至页脚 Html 代码中。

image-20200928174817556

4.3.1 配置 CNZZ

网址：U-Web

image-20200928173853524

4.3.2 添加站点

image-20200928174154923

4.3.3 获取统计代码 ID

image-20200928174331794

4.3.4 开启详细数据

image-20200928174425996

4.3.4 配置页脚 HTML 代码

进入博客园后台设置，配置页脚 HTML 代码，将 4.3.3 的统计 ID 替换，然后 copy 进去
image-20200928174738903

4.4 天气预报

4.4.1 心知天气

注册登录，这就我无需多说啦！

4.4.2 天气插件

Weather Widget，我们这里直接点击 “立即免费试用” 就可以啦。

image-20200928232605509

4.4.3 天气插件配置

4.4.3.1 自定义配置

自动定位：这里不知为何我电脑定位到“福州”，所以我干脆关了算了，可能是免费版导致的。

image-20200928233502331

4.4.3.2 生成代码

将生成的 JS 代码复制到 “页脚 HTML 代码”中，放在 4.3 网站统计的下面就好。

image-20200928233706388 image-20200928234644921

4.4.4 效果如图所示

image-20200928235057890 image-20200928235137699

4.5 背景图片

4.5.1 原因

打开一篇博文，你是否因其空荡荡的背景而觉得索然无味呢？这个时候我没就要利用自己强大的 copy 能力，给自己找张好看的背景丢上去咯

4.5.2 配置到 CSS 的 body 代码段

background-image: url("https://img2018.cnblogs.com/blog/1358881/201909/1358881-20190910100015098-837598352.jpg");

如图所示：

image-20200929091203925

4.5.1 效果图如下

image-20200929092309224

4.6 网抑云音乐

4.6.0 效果图

image-20200929103039509

4.6.1 获取网抑云 ID

打开网页版网抑云，然后选择你想播放的歌单，歌单可以是你自己的也可以是别人的，只要歌曲能播放就行，然后把 uri 后面的 id 给 copy 出来

image-20200929100851791

4.6.2 代码添加

将一下代码添加至页脚Html代码中，更改 歌单 ID 为你自己的即可



<script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js"></script>

如图所示，代码存放位置，直接放在之前的代码后面就行

image-20200929102832380

4.7 去掉反对按钮

4.7.1 何谓反对按钮

看到这个按钮，下意识就想删了，大家可不要给我反对哦，否则就不更新了呢，不过我也不给你这个按钮，哈哈！

image-20200929134759718

image-20200929134740622

4.7.2 在配置 CSS

在 **页面定制 CSS 代码 ** 里面直接在最后一行添加一下代码即可，记得保存由

#rightBuryit{display: none !important;}.buryit{display: none;}

如图所示：

image-20200929232353044

4.7.3 效果图

这个时候我们再看就没有啦，我是不是很鸡贼呢？

image-20200929135145293

image-20200929232045242

4.8 复制文字加版权

当用户复制文中内容(ctrl+C或鼠标右击复制)时，会自动加上版权文字，csdn的代码复制以及知乎的内容复制都有此功能。

4.8.1 添加到**页首 HTML 代码 **


<script language="javascript" type="text/javascript">
jQuery(document).on('copy', function(e)
    {
      var selected = window.getSelection();
      var selectedText = selected.toString().replace(/\n/g, '
');  // Solve the line breaks conversion issue 处理换行转换的问题
      var copyFooter = '
---------------------
著作权归作者所有。
' 
                            + '商业转载请联系作者获得授权，非商业转载请注明出处。
'
                            + '作者：易波叶平
 源地址：' + document.location.href
                            + '
来源：博客园cnblogs
? 版权声明：本文为博主原创文章，转载请附上博文链接！';
      var copyHolder = $('
', {id: 'temp', html: selectedText + copyFooter, style: {position: 'absolute', left: '-99999px'}});
        
      $('body').append(copyHolder);
      selected.selectAllChildren( copyHolder[0] );
      window.setTimeout(function() {
          copyHolder.remove();
      },0);
    });
</script>

如图所示：直接在鼠标特效后面换行加上就好，然后及的保存

image-20200929140933762

4.9 看板娘

4.9.1 效果图

image-20200930132532566

4.9.2 所有文件

可以私聊博主要，博主没有藏私，也可以在下面的代码里面自己获取，如果合适，请给个推荐和关注，感谢博主的无私贡献，虽然博主也是从其他地方获取来着。

点击推荐和关注才会下载哦，不然会出错的呢 emmmm!!!

4.9.3 “博客侧边栏公告 ”设置




    

    
    

      
      
      
      
      
      
      
    
 


<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> 
<script src="https://cdn.jsdelivr.net/gh/ZhaoUncle/image@main/static/kanbanniang/live2d.js"></script>
<script src="https://cdn.jsdelivr.net/gh/ZhaoUncle/image@main/static/kanbanniang/waifu-tips.js"></script>
<script type="text/javascript">initModel()</script>

image-20200930141616463

4.9.4 “页首 HTML 代码”配置

image-20200930141533232

4.10 更改置顶图标

4.10.1 效果图

原本是 iconfont 的默认图标，我这里用个小火箭给替代了。

image-20201001153701615

image-20201001153954054

4.10.2 配置

在页面定制 CSS 代码那里最后直接追加即可，记得选择保存哦！

i.iconfont.icon-zhiding {background: url(https://cdn.jsdelivr.net/gh/ZhaoUncle/image@main/blog/o_rocket.png) no-repeat center center;}

image-20201001153846665

4.11 评论区优化

4.11.1效果图

image-20201002203505959

4.11.2 配置 “页面定制 CSS 代码 ”

#tbCommentBody {background: #fff url(https://gitee.com/dbnuo/Cnblogs-Theme-SimpleMemory/raw/master/img/comment_bg.jpg) right -65px;background-size: 250px;background-repeat: no-repeat;}

image-20201002203553522

4.12 放大图片（low）

4.12.1 配置 “页面定制 CSS 代码 ”

.post img {cursor: pointer;transition: all 0.5s;}.post img:hover {transform: scale(1.3);}

4.13 个人书单

image-20201014175117428

4.13.1 创建随笔

markdown 格式直接创建一个新“随笔”，然后 markdown 文档模式添加已下数据即可

4.13.2 配置书单数据

博客侧边栏公告设置，因为数据量很大，直接在最后一行新起，就不嵌套在原有的配置里面，不过我觉得后期应该直接加到 github管理引用才方便，期待中。


<script type="text/javascript">
window.cnblogsConfig.bookList = [
        {
            title: '在读',
            books: [
                {
                    cover: 'https://images.weserv.nl/?url=https://wfqqreader-1252317822.image.myqcloud.com/cover/71/25066071/t6_25066071.jpg&default=ssl:images.weserv.nl/?url=https://img3.doubanio.com/view/subject/l/public/s29962521.jpg',
                    name: '断舍离',
                    formerNname: '',
                    author: '[日]山下英子',
                    translator: '贾耀平',
                    press: '湖南文艺出版社',
                    year: '2019-01|2020-10-14',
                    score: 2,
                }
            ]
        },
        {
            title: '已读',
            books: [
                {
                    cover: 'https://images.weserv.nl/?url=https://wfqqreader-1252317822.image.myqcloud.com/cover/509/413509/t6_413509.jpg&default=ssl:images.weserv.nl/?url=https://img3.doubanio.com/view/subject/l/public/s27311101.jpg',
                    name: '知行合一王阳明',
                    formerNname: '',
                    author: '度阴山',
                    translator: '',
                    press: '北京联合出版公司',
                    year: '2014-07|2020-04',
                    score: 4,
                },
            ]
        },
    ];
</script>

如图所在位置所示：

image-20201014174943992

5. 参考资料

https://github.com/BNDong/Cnblogs-Theme-SimpleMemory

https://bndong.github.io/Cnblogs-Theme-SimpleMemory/v1.1/#/

https://github.com/metowolf/MetingJS

https://www.cnblogs.com/enjoy233/p/10328361.html#复制正文文字时自动加版权

https://live2d.fghrsh.net/demo/1.4.2/

https://github.com/fghrsh/live2d_demo

博客园主题

相关

博客园主题

博客园主题美化👻

自定义博客园主题样式

博客园主题——Bili2.0

自定义博客园主题

标签