草庐IT

博客园美化教程

Awiki Code 2023-03-28 原文

博客园美化教程

前言:

没啥时间写博客,不过最进将博客美化了一遍现在,选了好几款不错的主题,感觉都很喜欢,选择困难症犯了,决定写一个完整详细的教程,将几款博客都试一遍,现在先介绍这款SimpleMemory博客主题的效果美化教程吧,接下来开始我们的教程p

一、后台设置

点击“管理 > 设置 > 基本设置 > 代码高亮”

选择指定的模板主题,这里我们选择的是SimpleMemory主题,然后我们在开通js权限,申请很快的一天内就能申请成功,给一个合理的理由的就行了

将代码高亮度种的显示行不勾选

禁止模板定制css设置,把他勾上

二、主题部署

  • 安装主题

首先安装部署,选择主题的版本,这里提供的是最新版的,需要那个版本可以自己区作者GitHub上选一个版本

这里我提供的是最新版本的代码,将以下代码粘贴到“博客侧边栏公告”里面去;根据备注的信息将自己的信息修改进去

<script type="text/javascript">
    window.cnblogsConfig = {
      info: {
        name: 'userName', // 用户名
        startDate: '2021-01-01', // 入园时间,年-月-日。入园时间查看方法:鼠标停留园龄时间上,会显示入园时间
        avatar: 'http://xxxx.png', // 用户头像
      },
    }
</script>
<script src="https://cdn.jsdelivr.net/gh/BNDong/Cnblogs-Theme-SimpleMemory@v2.1.2/dist/simpleMemory.js" defer></script>

然后将css的代码复制粘贴到后台的“页面定制css代码”中

打开链接按住Ctrl+A全选然后Ctrl+C复制(也可以直接去作者GitHub上面复制):http://aw.nndx.ml/simpleMemory.css

这样就基本部署好了,作者的文档也写的很详细,也可以参考作者的文档去配置;

效果如图:

  • 版本更新切换

主题js文件切换版本,作者给出了两种方式:

    • 第一种,就是直接跟换文件链接的方式,使用的是这个文件,如下图:

    • 第二种,是直接修改链接随机码链接的形式,这个我们可以看作者的GitHub项目种,如下图;

这个文件就是随机码的主题文件,如果作者又更新主题,我们想在第一时间也更新主题的时候可以看更新后的主题文件的随机码,然后直接在本地的文件链接里修改就可以了;

三、主题配置

  • 基本配置

这里我们可以直接参考作者的文档来操作,如图:

这些配置,可以自定义配置,我就不多详细介绍了,添加的位置就是之前复制到侧边栏的那个代码里面,可以看我的代码示例:

window.cnblogsConfig = {
   info: {
     name: 'Awiki', // 用户名
     startDate: '2022-05-30', // 入园时间,年-月-日。入园时间查看方法:鼠标停留园龄时间上,会显示入园时间
     avatar: 'https://pic.imgdb.cn/item/6404d09ff144a0100724573d.jpg', // 用户头像
     blogIcon: 'https://pic.imgdb.cn/item/64046420f144a0100778705a.webp', //网站图标
   },
   progressBar: { //顶部进度条
     color: '#FF0000',
   },
   sidebar: {
     infoBackground: 'https://www.hlapi.cn/api/sjmm1', //侧边栏背景图
   },
   banner: { //背景图
     home: {
       background: [ //首页顶部背景图
         "https://www.hlapi.cn/api/ecy3",
       ],
       titleSource: 'jinrishici', //每日古诗词"one"每日一句
     },
     article: { //文章顶部背景图
       background: [
         "https://www.hlapi.cn/api/ecy3",
       ],
     },
   },
}

?友情提示:上面的代码是我自己的代码配置实例,仅供参考,我加了备注,不能直接复制去用哦,因为信息都跟我一样的?

我顶部背景图和侧边栏背景图用的都是随机壁纸,就是每刷新一次就换一张新图,有需要的也可以拿去用;

随机二次元壁纸(横屏PC):https://www.hlapi.cn/api/ecy3

随机美女壁纸(竖屏):https://www.hlapi.cn/api/sjmm1

如图:

  • Loading加载图标

在这里顺便讲一下loading图标的更换,项目地址:https://github.com/claudiocalautti/spring-loaders.git

1、clone一下拉去项目,然后本地查看效果,打开文件

如图:可以直接打开index.html6文件直接查看9款样式,打开index.html可以查看6个样式的全屏加载效果

2、选择一个样式,打开代码,复制选框中这一部分的代码

3、复制到侧边栏

加入到loading中,记住:他们都是在window.cnblogsConfig = {}括号里面的

loading: { //加载动画
     rebound: {
					tension: 10,
					friction: 7
				},
				spinner: {
					id: 'spinner',
					radius: 160,
					sides: 8,
					depth: 6,
					colors: {
						background: '#181818',
						stroke: '#D23232',
						base: null,
						child: '#181818'
					},
					alwaysForward: true, // When false the spring will reverse normally.
					restAt: null, // A number from 0.1 to 0.9 || null for full rotation
					renderBase: false
				}
   },

四、最后的小问题

最后还有一个问题,我之前发现这个主题在移动端的屏幕自适应有问题,就是两端无法完全贴边,在这里给出我的解决方案,在css中加入

#home,#main{
    padding: 0 !important;
}

ok了,暂时就这些吧,后面有时间会在补充些样式整改的教程,有哪里不够详细不懂的也可以问我…

有关博客园美化教程的更多相关文章

  1. postman接口测试工具-基础使用教程 - 2

    1.postman介绍Postman一款非常流行的API调试工具。其实,开发人员用的更多。因为测试人员做接口测试会有更多选择,例如Jmeter、soapUI等。不过,对于开发过程中去调试接口,Postman确实足够的简单方便,而且功能强大。2.下载安装官网地址:https://www.postman.com/下载完成后双击安装吧,安装过程极其简单,无需任何操作3.使用教程这里以百度为例,工具使用简单,填写URL地址即可发送请求,在下方查看响应结果和响应状态码常用方法都有支持请求方法:getpostputdeleteGet、Post、Put与Delete的作用get:请求方法一般是用于数据查询,

  2. 在VMware16虚拟机安装Ubuntu详细教程 - 2

    在VMware16.2.4安装Ubuntu一、安装VMware1.打开VMwareWorkstationPro官网,点击即可进入。2.进入后向下滑动找到Workstation16ProforWindows,点击立即下载。3.下载完成,文件大小615MB,如下图:4.鼠标右击,以管理员身份运行。5.点击下一步6.勾选条款,点击下一步7.先勾选,再点击下一步8.去掉勾选,点击下一步9.点击下一步10.点击安装11.点击许可证12.在百度上搜索VM16许可证,复制填入,然后点击输入即可,亲测有效。13.点击完成14.重启系统,点击是15.双击VMwareWorkstationPro图标,进入虚拟机主

  3. hadoop安装之保姆级教程(二)之YARN的配置 - 2

    1.1.1 YARN的介绍 为克服Hadoop1.0中HDFS和MapReduce存在的各种问题⽽提出的,针对Hadoop1.0中的MapReduce在扩展性和多框架⽀持⽅⾯的不⾜,提出了全新的资源管理框架YARN. ApacheYARN(YetanotherResourceNegotiator的缩写)是Hadoop集群的资源管理系统,负责为计算程序提供服务器计算资源,相当于⼀个分布式的操作系统平台,⽽MapReduce等计算程序则相当于运⾏于操作系统之上的应⽤程序。 YARN被引⼊Hadoop2,最初是为了改善MapReduce的实现,但是因为具有⾜够的通⽤性,同样可以⽀持其他的分布式计算模

  4. ruby - 在 RUBY 上的 PADRINO 框架上使用 RSPEC 进行测试的教程 - 2

    我是Ruby新手,并被要求在我们的新项目中使用它。我们还被要求使用Padrino(Sinatra)作为后端/框架。我们被要求使用Rspec进行测试。我一直在寻找可以指导在Padrino上使用RspecforRuby的教程。我得到的主要是引用RoR。但是,我需要RubyonPadrino。请在任何入门/指南/引用/讨论等方面指导我。如有不妥之处请指正。可能是我没有针对我的问题搜索正确的词/短语组合。我正在使用Ruby1.9.3和Padrinov.0.10.6。注意:我还提到了SOquestion,但它没有帮助。 最佳答案 我没用过Pa

  5. 区块链入门教程(6)--WeBASE-Front节点前置服务安装 - 2

    文章目录1.任务背景2.任务目标3.相关知识点4.任务实操4.1安装配置JDK4.2启动FISCOBCOS4.3下载解压WeBASE-Front4.4拷贝sdk证书文件4.5启动节点4.6访问节点4.7检查运行状态5.任务总结1.任务背景FISCOBCOS其实是有控制台管理工具,用来对区块链系统进行各种管理操作。但是对于初学者来说,还是可视化界面更友好,本节就来介绍WeBASE管理平台,这是一款微众银行开源的自研区块链中间件平台,可以降低区块链使用的门槛,大幅提高区块链应用的开发效率。微众银行是腾讯牵头设立的民营银行,在国内民营银行里还是比较出名的。微众银行参与FISCOBCOS生态建设,一定

  6. ruby-on-rails - rails 教程 : Putting flash messages in partial yields error "undefined method ` each' for nil:NilClass"? - 2

    这个问题在这里已经有了答案:关闭10年前。PossibleDuplicate:FlashMessagesinPartials(Rails3)我正在做MichaelHartl的Railstutorial和listing7.26将flash消息添加到应用程序布局:...">...这很好用。但是,我试图通过在我的部分文件夹中创建一个_flash.html.erb来清理这段代码...">-->...并且比使用......在我的应用程序布局中,我的所有Rspec测试开始失败,每个测试都显示以下消息:Failure/Error:before{visitsignup_path}ActionView:

  7. ruby-on-rails - Ruby on Rails 教程 - 5.26 - Sublime Text "Unable to Save"新文件 "spec/support/utilities.rb" - 2

    我正在使用SublimeText2,同时遵循MichaelHartl的RubyonRails教程。可以在http://ruby.railstutorial.org/book/ruby-on-rails-tutorial找到我所指的教程的具体部分。(ctrl+F“list5.26”)。我能够创建规范/支持文件。但是,在尝试创建spec/support/utilities.rb文件时,我收到消息“无法保存~/rails_projects/sample_app/spec/support/utilities.rb”。有人知道为什么会这样吗?SublimeText论坛上有人似乎遇到了完全相同的问

  8. 华为ensp详细安装包、安装教程及所遇问题 - 2

    目录一、安装包链接二、安装详细步骤1.安装Wireshark和WinPcap2.安装OracleVMVirtualBox3.安装ensp三、安装后注册四、启动路由器出现40错误怎么解决一、安装包链接二、安装详细步骤链接:https://pan.baidu.com/s/1QbUUYMOMIV2oeIKHWP1SpA?pwd=xftx提取码:xftx1.安装Wireshark和WinPcap找到Wireshark安装包所在文件夹,双击它,按照以下步骤安装。2.安装OracleVMVirtualBox找到OracleVMVirtualBox安装包所在文件夹,双击它,按照以下步骤安装。注:可自定义安装

  9. 【云计算】私有云在VMware下虚拟机的创建与配置(图文教程) - 2

    【适用平台】私有云   说明:完成私有云部分是需要两台虚拟机的,分别为controller、compute两个节点,但我们只需配置一台,然后克隆就方便多啦!需要用到的映射文件:关于vm的安装我就不介绍的,毕竟挺简单的,下面让我们看看基于私有云模块中,虚拟机的搭建吧。1、创建新的虚拟机,这里一般我会选择自定义,毕竟后面的配置都要根据私有云相关来进行搭建,会比较复杂。(如果是基础的可以选择典型,典型的满足一般虚拟机的配置) 2、选择稍后安装操作系统会比较方便后续的选择,这里你也可以自己选择自己的映像文件(但不建议)  3、我们是基于Linux下操作的,所以选择Linux客户机操作系统,版本选择自己

  10. 关于如何为 PostgreSQL 编写存储过程的 Ruby 教程? - 2

    听说PostgreSQL的可以用Ruby写存储过程但我一直没能找到更多关于它的信息,教人们如何实际去做。有人可以为此推荐好的资源。谢谢 最佳答案 显然,您需要安装PL/Ruby。之后,你可以写:CREATEFUNCTIONruby_max(int4,int4)RETURNSint4AS'ifargs[0].to_i>args[1].to_ireturnargs[0]elsereturnargs[1]end'LANGUAGE'plruby';查看其GitHubrepository安装说明。

随机推荐