首页 > 其他分享 >GShang博客园主题高级版本适配教程详解

GShang博客园主题高级版本适配教程详解

时间:2023-01-16 17:03:38浏览次数:48  
标签:1489774 cnblogs 自定义 title GShang 适配 博客园 https com

GShang博客园主题高级版本适配教程详解_导航栏

主题预览

GShang博客园主题高级版本适配教程详解_自定义_02

博客Favicon自定义


GShang博客园主题高级版本适配教程详解_导航栏_03

导航栏扩展


GShang博客园主题高级版本适配教程详解_html_04

博客内部公告信息


GShang博客园主题高级版本适配教程详解_导航栏_05

首页轮播信息


GShang博客园主题高级版本适配教程详解_自定义_06

侧边栏公告信息整合


GShang博客园主题高级版本适配教程详解_html_07

博文发布信息位置调整


GShang博客园主题高级版本适配教程详解_自定义_08

博文侧边目录


GShang博客园主题高级版本适配教程详解_html_09

博文代码块复制


GShang博客园主题高级版本适配教程详解_导航栏_10

博文作者信息签名


GShang博客园主题高级版本适配教程详解_自定义_11

博客捷径应用(更多实用功能正在探索)


GShang博客园主题高级版本适配教程详解_导航栏_12

博客主题夜间模式


GShang博客园主题高级版本适配教程详解_导航栏_13

Matlab语法高亮


GShang博客园主题高级版本适配教程详解_html_14

移动底部功能栏


主题适配

清空主题配置,设置博客皮肤为Custom,确保自己已经开通了JS权限,按以下步骤完成适配:

页面定制CSS代码

页面定制CSS代码引用的是基础版的,为了不影响网页加载,建议直接将代码复制进页面定制CSS代码,而不是引用CSS文件。


页脚html代码

页脚一般用来引入js文件,并且在页脚的最先加载。内容见下面的代码。

<!--念两句诗-->
<script src="https://sdk.jinrishici.com/v2/browser/jinrishici.js" charset="utf-8"></script>
<!--代码复制-->
<script src="https://cdn.bootcss.com/clipboard.js/2.0.4/clipboard.min.js"></script>

<!--主题-->
<script src="javascript:void(0)"></script>

这里面主要涉及到念诗的脚本(捷径功能调用)、复制代码块的脚本、以及我制作的主题需要调用的各种函数脚本。



博客侧边栏公告

博客侧边栏公告,主要负责信息初始化、各种功能代码的调用。代码如下。

<script type="text/javascript">

// 设置公告
var news ='博客新增音乐播放器,点击打开捷径,切换或暂停音乐。' ;

// 设置博客信息
var myprofile = [{
blogName: "GShang",
blogAvatar: "https://pic.cnblogs.com/avatar/1489774/20190708183140.png",
blogSign: "Stay hungry,Stay foolish.",
blogFollow: "follow('30807ee3-3273-4cff-72df-08d619358b99')",
QQ: "1220949046",
Github: "https://github.com/GShang2018",
WeChat: "/i/l/?n=18&i=blog/1489774/201910/1489774-20191015183429352-318054137.jpg"
}];

// 设置首页轮播
var mybanner = [{
url: "https://www.cnblogs.com/gshang/category/1555205.html",
img: "/i/l/?n=18&i=blog/1489774/201910/1489774-20191019152510780-1400941252.png",
title: "2019年研究生数学建模比赛经验分享"
},

{
url: "https://www.cnblogs.com/gshang/p/11107946.html",
img: "https://www.kanjiantu.com/images/2019/07/05/post4242f1ce89576c2f3.png",
title: "动画电影分享"
},

{
url: "https://www.cnblogs.com/gshang/p/11185613.html",
img: "/i/l/?n=18&i=blog/1489774/201909/1489774-20190923190114426-2061049622.png",
title: "VIP视频解析"
},

{
url: "https://www.cnblogs.com/gshang/p/11135154.html",
img: "https://www.kanjiantu.com/images/2019/07/05/post2b40b83305f79d463.png",
title: "常用网站集合"
},

{
url: "https://www.cnblogs.com/gshang/p/10746751.html",
img: "https://www.kanjiantu.com/images/2019/07/05/post169393a677253c679.png",
title: "实用工具分享"
}


];

// 设置导航栏扩展

var mynav = [{
id: "blog_nav_cnblogs",
url: "https://home.cnblogs.com",
title: "园子"
},
{
id: "blog_nav_maintain",
url: "https://www.cnblogs.com/gshang/p/11149316.html",
title: "维护"
},

{
id: "blog_nav_frieds",
url: "https://www.cnblogs.com/gshang/p/11149804.html",
title: "友链"
},
{
id: "blog_nav_theme",
url: "javascript:changeTheme()",
title: "切换主题"
},
{
id: "blog_nav_shortcut",
url: "javascript:narrow()",
title: "打开捷径"
}

];

setFavio(myprofile); // 网页tab图像
loadThemeColor(); //导入主题颜色
setHeader(); //导航栏
extendNav(mynav); // 导航栏扩展
loadNewsinfo(news);//导入公告
loadBanner(mybanner); //首页轮播
loadProfile(myprofile); // 公告栏个人信息
changePublishinfo(); //博文发布信息位置
setPostSideBar(); //侧边栏目录
setSignautre(myprofile); //博文签名
loadMobileContent(); //移动端目录功能栏
commentIcon(); //评论区头像
blankTarget(); //文章链接新窗口打开
copyCode(); //代码块复制
//setMobileHeader(); //移动端导航栏
tableScorll(); //表格滚动
mymd(); //自定义语法
runCode(); //文章内部运行代码
highlightMATLABCode(); //matlab自定义语法高亮
</script>

具体使用方法是这样的:

这里为了让自定义更加开放便捷,在调用时,可以自行定义基础信息,主要包括

  • 博客公告信息自定义
  • 博客侧边栏个人信息自定义
  • 首页轮播信息自定义
  • 顶部导航栏扩展信息自定义


博客公告信息自定义

// 设置公告
var news ='博客新增音乐播放器,点击打开捷径,切换或暂停音乐。' ;
loadNewsinfo(news);//导入公告

这两个是一起的,如果需要,则修改文本即可;如果不需要,把这两个一并删除(或者注释掉)。


博客侧边栏个人信息自定义

// 设置博客信息
var myprofile = [{
blogName: "GShang",
blogAvatar: "https://pic.cnblogs.com/avatar/1489774/20190708183140.png",
blogSign: "Stay hungry,Stay foolish.",
blogFollow: "follow('30807ee3-3273-4cff-72df-08d619358b99')",
QQ: "1220949046",
Github: "https://github.com/GShang2018",
WeChat: "/i/l/?n=18&i=blog/1489774/201910/1489774-20191015183429352-318054137.jpg"
}];
loadProfile(myprofile); // 公告栏个人信息

这两个是一起的,如果需要,则修改对应的资源链接或者文本信息;如果不需要,把这两个一并删除(或者注释掉)。

这里需要注意的是,​​blogName​​​是博客网站的最后一级,自己取的名字(如​​cnblogs.com/gshang​​​)。​​blogFollow​​这个调用的是博客园自带的函数,因为涉及到id,因此需要自己F12翻看关注按钮的函数,具体是这样的:

GShang博客园主题高级版本适配教程详解_自定义_15

其余的都是一些文本信息,自行更改即可。


首页轮播信息自定义

// 设置首页轮播
var mybanner = [{
url: "https://www.cnblogs.com/gshang/category/1555205.html",
img: "/i/l/?n=18&i=blog/1489774/201910/1489774-20191019152510780-1400941252.png",
title: "2019年研究生数学建模比赛经验分享"
},

...

];
loadBanner(mybanner); //首页轮播

这两个是一起的,如果需要,则修改对应的资源链接或者文本信息;如果不需要,把这两个一并删除(或者注释掉)。这里支持任意个数的banner,如果需要多个,则复制多份,修改内容即可。


顶部导航栏扩展信息自定义

// 设置导航栏扩展
var mynav = [{
id: "blog_nav_cnblogs",
url: "https://home.cnblogs.com",
title: "园子"
},

......

];
extendNav(mynav); // 导航栏扩展

这两个是一起的,如果需要,则修改对应的资源链接或者文本信息;如果不需要,把这两个一并删除(或者注释掉)。这里支持任意个数的banner,如果需要多个,则复制多份,修改内容即可。


其他自定义函数

其他自定义的函数,如果不需要,则删除或者注释掉即可。函数顺序最好不要改动,以免影响加载。


页首Html代码

<!--符号图标-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">

<script>
// 设置捷径
var myHtml =
'<h3>念两句诗</h3>' +
'<div class="poem"><p id="poem_sentence"></p><p id="poem_info"></p></div>' +
'<h3>博主推荐</h3>' +
'<embed frameborder="no" border="0" marginwidth="0" marginheight="0" width=100% height=auto src="//music.163.com/outchain/player?type=0&id=3046013012&auto=0&height=auto"></embed>' +
'<h3>音乐点播台</h3>' +
'<embed frameborder="no" border="0" style="border-radius:4px;" marginwidth="0" marginheight="0" width=100% height=426 src="//www.jikefan.com/music/"></embed>';
loadShortcut(myHtml); //导入捷径
</script>
<script type="text/javascript">
jinrishici.load(function(result) {
var sentence = document.querySelector("#poem_sentence");
var info = document.querySelector("#poem_info");
sentence.innerHTML = result.data.content;
info.innerHTML = '——【' + result.data.origin.dynasty + '】' + result.data.origin.author + '《' + result.data.origin.title + '》';
});
</script>

这里主要是捷径功能的配置,你可以自行往里面添加html代码,这一块目前处于探索阶段......。


后台配置预览图

GShang博客园主题高级版本适配教程详解_html_16


说明

主题不定期进行修改,适配主题请及时备份,最好存在自己的文件库里。


未经作者授权,禁止转载

THE END



标签:1489774,cnblogs,自定义,title,GShang,适配,博客园,https,com
From: https://blog.51cto.com/gshang/6010541

相关文章

  • 对在博客园中播放音乐及设置其自动播放的研究
    一.如何播放音乐首先打开设置博客后台设置页面,我们要先申请js权限,大概一个小时就会通过。对于播放音乐,我们可以使用Aplayer音乐播放器,在页脚HTML中添加如下代码:<l......
  • 博客园下拉小猫,看板娘,鼠标图标特效
    博客园下拉小猫特效样式效果点击小猫之后会回到网页顶部  使用方法1.在自己的博客园中找到管理->设置页面2.在页首HTML代码中插入<!--悬挂的喵--><script......
  • 玩转html5画图 - TimeLangoliers - 博客园
    导航​​前言​​​​基本知识​​​​绘制矩形​​​​清除矩形区域​​​​圆弧​​​​路径​​​​绘制线段​​​​绘制贝塞尔曲线​​​​线性渐变​​​​径向渐变......
  • 开发一个微信小程序(2):编写博客园随笔列表
    上一篇介绍了如何通过博客园官方api获取随笔列表,本篇来实现把文章展示到小程序中 先来看一下最终的效果1、调用获取access_token接口如果想在小程序中成功调用接口,需要在......
  • 学习记录-适配器模式
    适配器模式适配器模式(AdapterPattern)是作为两个不兼容的接口之间的桥梁,它不会改变原先的接口。这种类型的设计模式属于结构型模式,它结合了两个独立接口的功能。这种模式......
  • Hi,all。 博客园我回来了
    之后会更新工作中,学习中遇到的各种问题。涉及运维相关的朋友可以关注交流下。已经很久没有更新了,前期发布的东西也没有章法,很菜,刚入行,基本都是照搬和测试的一些文章。随......
  • 博客园主题修改分享 - 过年篇
    马上就要过年了,看着我这毫无生气的博客,感觉有点亏待它。博客过年,马上安排!本篇部分知识基于上两篇博客博客园主题修改分享和博客园主题修改分享-脚本篇。先上效果图......
  • Vmware中的centos7突然连接不上网络了,网络适配器采用的是NAT模式,解决办法?...
    进入Windows操作系统,然后右键点击我们的电脑,进入到管理界面 计算机->管理->服务和应用程序->服务,找到如下服务进程VMwareDHCPService,VMwareNATService。分别点击......
  • 使用博客园图床作为公众号中转
    使用博客园图床作为公众号中转前言在比较了飞书云文档、语雀、金山文档和Notion后,我决定使用Notion作为笔记软件,最大的原因就是可以用教育邮箱获得PersonalPro资格,不花......
  • 06.(结构型模式)java设计模式之适配器模式
    一、什么是适配器模式(AdapterPattern)作为两个不兼容的接口之间的桥梁,适配器模式使得原本由于接口不兼容而不能一起工作的两个类可以一起工作。适配器模式包括3种形式:......