彰显个性│博客园的自定义主题「建议收藏」

彰显个性│博客园的自定义主题「建议收藏」博客园自定义主题,让你彰显个性

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

? 开放的博客园

  • 在国内,开源社区有很多,比如:掘金、CSDN、51CTO、开源中国、InfoQ等,但是可以自定义主题的却只有博客园一家

  • 对于技术社区而言,能够自定义主题,方能展现程序员们自己的个性。将自己的主页做的好看不仅能够吸引更多的人关注,也能在另一方面让人家认可自己的技术

  • 相对于其他平台每个用户点进去,单一乏味的主页界面,博客园可谓是百花齐放,涌现出来各种各样好看的界面,让人在学习知识的时候有更好的阅读体验

  • 经过自己的摸索,终于将自己的 博客园主页 设置成了自己满意的样式,如下图所示:

  • 该代码均已开源在Github上:极客飞兔的Github


彰显个性│博客园的自定义主题「建议收藏」

极客飞兔博客首页



彰显个性│博客园的自定义主题「建议收藏」

极客飞兔博客详情页

? 主题推荐

  • 主题项目 cnblogs-theme-silence 是 esofar 大神开源的,我的主页就是根据这个项目进行修改的,该项目内其实就是将博客园的网页的首页源码拷贝下来,在本地启动预览后,然后通过修改本地的代码样式,在本地的网站调试成自己想要的样式后,将其中的 JS、CSS 进行编译打包,在博客园后台中设置即可

  • 该大神怕大家不会部署,项目文档 中的部署指南写的一清二楚

  • 部署该主题前,博客皮肤必须选择 Custom 这一款,因为该项目是根据这款皮肤进行修改的,而且必须先要在博客园的设置中申请 JS权限 才可以使用

  • 因为在网页中写 JS 是一件很危险的事情,很容易造成 XSS 攻击,所以需要提交申请,才可以使用 JS权限,一般二十分钟内就可以通过申请


彰显个性│博客园的自定义主题「建议收藏」

申请JS权限



彰显个性│博客园的自定义主题「建议收藏」

权限申请理由

? 自定义主题配置CSS

  • 在JS权限申请通过后,我们就可以设置自定义主题了

  • 当项目编译后,会在 dist 目录下生成cssjs两个文件,我们只需要将这两个文件内容分别复制放到页面定制CSS代码和页脚HTML代码中即可

  • 在部署CSS代码时,一定要勾选模板默认的CSS,这样系统就只会使用你复制的这段样式了

  • 点击保存,刷新自己博客园首页,即可看到效果了

└─dist
  └─silence.min.css
  └─silence.min.js


彰显个性│博客园的自定义主题「建议收藏」

配置样式代码

? 自定义主题配置JS

  • 当然配置JS也可以跟CSS一样,在页脚HTML代码中使用 <script> 标签进行包裹即可

  • 当然也可以将生成的JS文件托管到博客园的文件系统中,然后获取外链,直接引入也是可以的

  • 其中 window.$silence 中可以进行页面的配置,包括配置主页头像、github跳转链接、主题模式、页面图标等,可以参考上面提到的大神文档


彰显个性│博客园的自定义主题「建议收藏」

文件托管



彰显个性│博客园的自定义主题「建议收藏」

配置JS代码

? 页面加载loading

  • 如果想要在页面中添加loading效果

  • 可以将以下代码粘贴到页首 HTML 代码中即可

<div class="loading">
  <div class="box">
    <h2>加载中...</h2>
    <span></span><span></span><span></span><span></span><span></span><span></span><span></span>
  </div>
</div>


彰显个性│博客园的自定义主题「建议收藏」

加载条显示

? 页面看板

  • 如果想要在页面的右下角添加页面看板功能的话

  • 可以在页脚HTML导航中添加以下代码

<!-- 设置页脚导航 -->
<link rel="stylesheet" href="//cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css">

<script src="//files.cnblogs.com/files/blogs/755049/autoload.js"></script>


彰显个性│博客园的自定义主题「建议收藏」

右下角看板功能

? 动态背景

  • 如果想要添加页面背景动画的话,这里的特效是线性粒子跟随鼠标

  • 可以在页脚HTML导航中添加以下代码

<!-- 设置动态背景 -->
<canvas id="autofelix" width="1920" height="990" style="position: fixed; top: 0px; left: 0px; z-index: -1; opacity: 0.5;"></canvas>

<script src="//files.cnblogs.com/files/blogs/755049/canvas-nest.min.js"></script>

? 标签动效

  • 如果想要a标签的下划线人性化的出现,可以引入以下样式文件
  • 项目中所有文件都已开源在Github上:极客飞兔的Github,可以直接下载引用
<!-- 设置样式,比如a标签的下划线人性化出现 -->
<link rel="stylesheet" href="//files.cnblogs.com/files/blogs/755049/custom.css">
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/170862.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • windows 格式化磁盘_磁盘0没有初始化

    windows 格式化磁盘_磁盘0没有初始化#include”stdafx.h”#include”CMDiskManager.h”CMDiskManager::CMDiskManager(){}/*获取磁盘分区信息vDiskNo:磁盘序号*/DWORDCMDiskManager::GetLayoutInfo(DWORDvDiskNo){ chardiskPath[256]; //磁盘内部路径 //生成

  • 跳表介绍和实现_真人二段跳教学

    跳表介绍和实现_真人二段跳教学想慢慢的给大家自然的引入跳表。想想,我们1)在有序数列里搜索一个数2)或者把一个数插入到正确的位置都怎么做?很简单吧对于第一个操作,我们可以一个一个比较,在数组中我们可以二分,这样比链表快对于第二个操作,二分也没什么用,因为找到位置还要在数组中一个一个挪位置,时间复杂度依旧是o(n)。那我们怎么发明一个查找插入都比较快的结构呢?可以打…

    2022年10月31日
  • Bash Export命令「建议收藏」

    Bash Export命令「建议收藏」一.shell和export《1》用户登录到Linux系统后,系统将启动一个用户shell。在这个shell中,可以使用shell命令或声明变量,也可以创建并运行shell脚本程序。运行shell脚本程序时,系统将创建一个子shell。此时,系统中将有两个shell,一个是登录时系统启动的shell,另一个是系统为运行脚本程序创建的shell。当一个脚本程序运行完毕,脚本shell将终止,返回…

  • debian源代码_debian10软件源

    debian源代码_debian10软件源debhttp://security.debian.org/squeeze/updatesmaindeb-srchttp://security.debian.org/squeeze/updatesmaindebhttp://mirrors.163.com

    2022年10月19日
  • C++ Primer笔记7_STL之关联容器

    C++ Primer笔记7_STL之关联容器

  • luajit性能优化[通俗易懂]

    luajit性能优化[通俗易懂]本文转载地址:(http://www.cnblogs.com/zwywilliam/p/5992737.html)luajit是目前最快的脚本语言之一,不过深入使用就很快会发现,要把这个语言用到像宣称那样高性能,并不是那么容易。实际使用的时候往往会发现,刚开始写的一些小testcase性能非常好,经常毫秒级就算完,可是代码复杂度一上去了,动辄几十上百毫秒的情况就会出现,性能表现非常飘忽。

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号