草庐IT

博客园主题美化DIY教程

QianYuu 2023-03-28 原文

感想

因为受到友人启发，部署了个 静态页面，想着太单调了，要不连博客园的修一修，就去网上翻找了一下，果然给我发现了，
但是在DIY的中途，遇到一大堆问题，因为是几年前的源码了，很多链接已经噶了。

首先这个DIY页面的作者是这位小姐姐 ps.不知道怎么称呼
首先这个DIY-->启发来源于这位樱花庄的白猫<--
然后我是看三位前辈的教程来弄的，这位 齐木z前辈 以及这位 亮亮前辈在CSDN的帖子，还有前面的姐姐

页面效果的话，可以参考一下 我的博客园

我一开始是不打算写这个博客的，因为也不太会写，还弄不明白很多东西，比如文章啊随笔啊，什么区别，然后我在查看
源码的时候发现了这么一行注释

我当时很诧异，内心真的是百感交集，现在姐姐以及不更新DIY了，但是大学生每年都有，民间码农也遍地开花，看见很多人都出现了和我一样的问题，那我就写个解决办法，也顺便宣传一下这个主题吧，没办法，学生党嘛，等工作了我再来打赏作者吧，好了，开始教程吧

准备工作

1.点击账号设置跳转-->后继续点击博客设置

2.点击设置

3.进行如下设置
因为代码是基于Custom这个皮肤进行的二创

下载资源包

点我下载 一 都在里面了，文件对应为

  • 页面定制CSS代码 ——> page.css
  • 博客侧边栏公告 ——> sidebar.html
  • 页脚 ——> foot.html

开始教学

1.首先找到food.html文件，把里的代码复制到页脚HTML里面，这个不需要修改


2.然后找到page.css文件，把里面的代码复制到页面定制CSS代码里面，这个也基本上不需要修改，到现在为止，已经完成一半了


3.找到main.js文件，这个组件很多，我建议打开编译器，通过 Alt+左键 与 ctrl+左键 进行查看

其中这个地方是进行背景修改的

背景文字分别在main.js文件与sideber.html下
可以通过Ctrl+F查找关键字 Welcome进行修改
同理，左上角名字logo也可以通过同样的方式
在sideber.html文件下有一个纪念日的代码，将你的账号日期填进去可以有纪念日时间你可以点击此处查看你的入园时间


4.上传main.js

修改完毕以后摁下Ctrl+S，点击设置旁的文件，拖拽或选取上传

此时我们还没有main.js的链接，我们接着点击上传好的main.js文件，然后在网址栏复制链接


5.找到sideber.html文件，将链接复制到替换栏

最后把siderber.html文件内容复制到***博客侧边栏公告


摁下ctrl+s键，恭喜你，学会了如何DIY自己的博客主页

总结

  • 如果想详细了解原理的话点击跳转原作者
  • 最后希望大家能给予原作者一些标注，因为我发这个博客的原因是很多二次发表的都del掉了作者，虽然有时候嘴上说着面向Github的CV程序员，但也只是调侃，盗亦有道，更何况我们是借鉴前辈大佬们辛苦夜以继日写的代码，而非是盗，我不是站在道德的制高点上指指点点，我只是觉得，这应该是一种尊重，言尽于此，祝大家来年不出bug，新年快乐。Over


常见问题

1.上方工具栏堆叠一块，就像这样

那是因为你勾选了禁用默认css模板,取消勾选即可解决



2.如何修改网易云音乐or网易云音乐不显示

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10.0/dist/APlayer.min.css">
<script src="https://blog-static.cnblogs.com/files/zouwangblog/APlayer.min.js"></script>
<script src="https://unpkg.com/meting@1.2/dist/Meting.min.js"></script>
<div id="player" class="aplayer aplayer-withlist aplayer-fixed" data-id="填入id" data-server="netease" data-type="playlist" data-order="random" data-fixed="true" data-listfolded="true" data-theme="orange"></div>

修改此行内的data-id 即可,id获取方式为在网页端打开网易云音乐，跳转歌单，在链接末端就有

不显示的原因应该是配置的问题，有时候会显示，有时候不显示，我麻了

3.看板娘不显示

api 噶了，百度自己在git上部署一个看板娘就好了

DIY博客园strongblockquote2981114转载区

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

  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 - 在暂存环境中覆盖 ActionMailer 主题 - 2

    我希望从我们的登台服务器发送的所有电子邮件的主题中都带有“[STAGING]”字样。在Rails3.2中使用ActionMailer是否有一种优雅的方式来做到这一点？ 最佳答案 这是我使用ActionMailerInterceptor找到的一个优雅的解决方案基于anexistinganswer.#config/initializers/change_staging_email_subject.rbifRails.env.staging?classChangeStagingEmailSubjectdefself.delivering_

  7. 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:

  8. 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论坛上有人似乎遇到了完全相同的问

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

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

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

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

随机推荐