博客园SimpleMemory主题美化
SimpleMemory主题美化
先看下效果
一、开通博客园JS权限
注册账号后,进入管理>设置>勾选下面的JS权限,然后填写一下开通的理由等待管理员进行审核通过。
我这已经开通了,如下:
二、选择模板
在模板中选择初始的博客皮肤:(本博客搭建的主题,就需要使用SimpleMemory)
三、下载SimpleMemory主题资源
主题资源地址:https://github.com/BNDong/Cnblogs-Theme-SimpleMemory
四、开始美化
1. 把下载完的资源中dist文件夹中的simpleMemory.css中的内容复制到页面定制CSS代码
2. 设置主题侧边栏 —此处展示自用的侧边栏样式
把下载完的Cnblogs-Theme-SimpleMemory中的src>博客侧边栏.html
中的内容复制到博客侧边栏公告中
3. 不要勾选代码高亮中的行号
4. 点击保存
5. 最后在选项中勾选公告
到这里基本美化就完成了 ~~~///(^v^)\\\~~~
接下来就加上一个悬挂物件和看板娘
下面参考了ProsperousEnding这位博主的美化博客的文章
原文连接:
https://www.cnblogs.com/ProsperousEnding/articles/16595150.html
6.悬挂猫-在首页html添加
<!-- 悬挂的喵 -->
<script type="text/javascript" src="https://blog-static.cnblogs.com/files/fsh001/szgotop.js"></script>
<link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/fsh001/szgotop.css" />
<div class="back-to-top cd-top faa-float animated cd-is-visible" style="top: -999px;"></div>
7.看板娘
- 在css中添加
/* 看板娘 */
#live2dcanvas {border: 0 !important;
}
- 在侧边栏中添加
<script type="text/javascript">L2Dwidget.init({"model": {//模型为初音jsonPath: "https://unpkg.com/live2d-widget-model-hijiki@1.0.5/assets/hijiki.model.json","scale": 1},"display": {"superSample": 2,"width": 250,"height": 400,"position": "right","hOffset": 110,"vOffset": -30},"mobile": {"show": true,},"react": {"opacityDefault": 1,//不透明度,可调"opacityOnHover": 0.2}});
</script>
<!--
其他可选的模型:
初音未来:https://unpkg.com/live2d-widget-model-miku@1.0.5/assets/miku.model.json
黑猫:https://unpkg.com/live2d-widget-model-hijiki@1.0.5/assets/hijiki.model.json
萌娘:https://unpkg.com/live2d-widget-model-shizuku@1.0.5/assets/shizuku.model.json
白猫:https://unpkg.com/live2d-widget-model-tororo@1.0.5/assets/tororo.model.json
狗狗:https://unpkg.com/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json
小可爱:https://unpkg.com/live2d-widget-model-z16@1.0.5/assets/z16.model.json
小可爱:https://unpkg.com/live2d-widget-model-koharu@1.0.5/assets/koharu.model.json
-->
- 最后在页面首页html添加
<!-- 看板娘模型 -->
<script type="text/javascript" charset="utf-8" src="https://files.cnblogs.com/files/liuzhou1/L2Dwidget.0.min.js"></script>
<script type="text/javascript" charset="utf-8" src="https://files.cnblogs.com/files/liuzhou1/L2Dwidget.min.js"></script>
这样就有了蓝板娘和悬挂猫了
最后,这些都可以自己设置,本质还是html和js
博客园SimpleMemory主题美化相关推荐
- python博客主题_博客园SimpleMemary主题美化教程
修改cnblogs的主题为SimpleMemary 我的博客->设置->博客皮肤->SimpleMemary 编辑CSS 打开下面的地址,将样式代码粘贴到页面定制CSS框内 http ...
- 博客园SimpleMemory皮肤的页面美化--感谢BNDong大佬
1. 前言说明 本博客的博皮样式设计者是BNDong大神,在此表示衷心的感谢!为了让更多人的博客园更加的美观大方,本人特此参考设计者BNDong关于博客样式的文章,写了这更加通俗易懂的文章,让更多喜欢 ...
- 博客园美化(10)博客园 SimpleMemory 博客皮肤设置(简单简洁)
之前调整了两个样式的,好看是好看,用着不方便,把不需要的全都删掉了 样式效果就是现在的 使用方法 一.开通博客园的JS权限 管理>设置>勾选JS权限,等待审核通过. 二.选择模板 JS权限 ...
- html%3c arial%3e,【博客园】样式美化+网站统计访问+添加网易云背景音乐
该样式对应的皮肤:SimpleMemory,请记得更换. 还有目录生成代码默认是生成h2,h3的,需结合自己的需要替换为h1,h2的. 我参考别人的教程,对博客园样式做了修改.后来忽然被原创发消息:说 ...
- 个人博客园CSS样式美化
博客侧边栏公告 <!--公告栏时钟控件--> <embedwmode="transparent"src="https://files.cnblogs.c ...
- 博客园自定义主题样式
题记 对于有强迫症的童鞋来说,一个长得不美观或者不能满足我们日常的审美需求的页面,总会有想要改造它的冲动,好吧,让我们来调试下博客园提供的默认主题样式,让页面更加清爽宜人,简洁大气. Section ...
- 博客园kubrick主题
http://www.cnblogs.com/SkinUser.aspx?SkinName=kubrick [名称]kubrick [标题]kubrick [发布日期]2007/1/1 0:00:00 ...
- 博客园自定义主题 皮肤
https://www.cnblogs.com/jingmoxukong/p/7826982.html?utm_source=gold_browser_extension 我是参考的这个博主,取舍一些 ...
- 博客园自定义主题代码
发一下好看的 要开通js权限 , 皮肤用simple memory , 最好禁用模板 侧边栏: <!DOCTYPE html> <html> <style> /*最 ...
最新文章
- 使用Python查询国内 COVID-19 疫情
- SQL中删除重复的行(重复数据),只保留一行 转
- 20145313张雪纯《信息安全系统设计基础》第11周学习总结
- CStringArray 字符串数组的使用 以及调试时怎么Dump出其中的内容
- 宁德时代机器人编程开发_高通发布5G机器人开发平台,内置强大AI算力。各大厂商竞相发布机器人处理平台,万物互联的时代即将到来...
- matlab 0到正无穷求和,1/k!k从0到无穷求和是多少
- vue 第六天(条件判断)
- python 批量提取 mkv 视频文件内嵌 srt 字幕
- 传智播客黑马程序员_Hanselminutes播客48-适用于极客和程序员的入门棋盘游戏
- 基于 vue+JsPlumb 实现大数据流水线拓展流程工作台(vue-flow-topology)
- VMware Esxi 下载地址
- 有关微信小程序云数据库修改数据的坑
- Android 复制 粘贴 剪贴板的使用 ClipboardManager
- 解析淘口令获取商品id,包含有效时间
- STM32_SPI通信_与传感器芯片通信的SPI优化之路
- 疫情已经结束,快递行业现状如何
- python实现图像差异性分析(标记并记录差异点)
- 真爱如血第七季/全集True Blood迅雷下载
- PC 机与单片机通信(RS232 协议)
- layui提交成功之后刷新当前页、关闭当前页、刷新父页、重载父页数据表格