博客园,博客页面设置

博客园 博客页面功能设置

此功能,需要申请 javascript 权限

代码块添加 复制按钮

文章页面, 代码块添加复制按钮

<!-- 加载公共js, 只需最上方添加一次 -->
<script src='//files.cnblogs.com/files/blogs/676295/common.js?v=1'></script>
<!--代码块添加复制按钮-->
<script src='//files.cnblogs.com/files/blogs/676295/loadCopyBtn.js?v=1'></script>

效果

鼠标进入代码块时, 右上角 显示一个 复制按钮

加载 MakerDwon 目录

文章页面 侧边栏, 添加文章目录

<!-- 加载公共js, 只需最上方添加一次 -->
<script src='//files.cnblogs.com/files/blogs/676295/common.js?v=1'></script>

<!--侧边栏 加载 Markdown 目录 -->
<link rel="stylesheet" href="https://files.cnblogs.com/files/blogs/676295/load_catalog.css?v=1" />
<script src="//files.cnblogs.com/files/blogs/676295/load_catalog.js?v=1"></script>

效果

侧边栏底部添加 【目录】模块, 并且, 窗口滚动至一定程度, 会置顶在上方

缺点:

1. 目录没有跟随当前浏览进度....
2. 目录顶部悬浮, 只适配了 "SimpleBlue" 模板, 其他模板需要自行修改配置

加载 返回顶部按钮

文章右侧底部, 添加 返回顶部按钮

<!-- 加载  返回顶部  按钮 -->
<script src="//files.cnblogs.com/files/blogs/676295/top_btn.js"></script>

效果

滚动条 滚动 100px 后, 右侧底部显示 返回顶部按钮, 点击后, 100毫秒内,返回顶部

...... 未完待续