首页 > 其他分享 >博客园主题美化DIY教程

博客园主题美化DIY教程

时间:2023-01-31 17:45:32浏览次数:54  
标签:文件 教程 博客园 js 点击 html DIY

感想

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

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

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

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

image

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

准备工作


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

image


2.点击设置

image


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

image


下载资源包

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

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

开始教学

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

image



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

image



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

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

image

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



4.上传main.js


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


image


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


image


image



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


image


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


image


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

写在最后

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


常见问题

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


image


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




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

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/APlayer.min.css">
<script src="https://blog-static.cnblogs.com/files/zouwangblog/APlayer.min.js"></script>
<script src="https://unpkg.com/[email protected]/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获取方式为在网页端打开网易云音乐,跳转歌单,在链接末端就有


image


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

3.看板娘不显示

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

标签:文件,教程,博客园,js,点击,html,DIY
From: https://www.cnblogs.com/QianYuu/p/17078780.html

相关文章

  • webpack教程
    安装webpack新建项目的目录,并将命令行切换到该目录下:mkdirwebpackdemo&&cdwebpackdemo初始化项目(我们自己开发的npm包,)npminit-y把webpack和webpack-cli安装到项目本地......
  • 博客园主题美化
    一般情况下,我是不太喜欢花里胡哨的界面的,但是博客园自带的主题实在是难看。。。我是用的是SimpleMemory主题,个人感觉部署起来很简单,而且界面也比较好看。一些代码的高......
  • Python3网络爬虫教程7——SSL数字证书
    Python全栈工程师核心面试300问深入解析(2020版)----全文预览Python全栈工程师核心面试300问深入解析(2020版)----欢迎订阅上接:Python3网络爬虫教程6——cookie......
  • Python3网络爬虫教程6——cookie & session(cookie的属性,保存及模块的使用)
    Python全栈工程师核心面试300问深入解析(2020版)----全文预览Python全栈工程师核心面试300问深入解析(2020版)----欢迎订阅上接:Python3网络爬虫教程5——ProxyHa......
  • Python3网络爬虫教程5——ProxyHandler处理(代理服务器和代理IP)
    上接:Python3网络爬虫教程4——UserAgent的使用(用户伪装)(附常用的UserAgent值清单[3.ProxyHandler处理(代理服务器)使用代理IP,是爬虫的常用手段服务器有反爬虫手段,使用代......
  • Linux下安装docker教程
    2023新一年啦,今年准备项目部署换成docker,所以现在开始上手在本地部署,本篇文章就是单纯的记录下docker的部署过程,希望能帮助下有需要的人 据了解,docker从17.03版......
  • 下载相关-CH32系列芯片下载方式汇总及教程
    一、CH32Fx系列芯片下载1、ISP下载;2、SWD下载3、脱机烧录器下载;二、CH32Vx系列芯片下载1、ISP下载;2、SWD下载;3、脱机烧录器下载;4、CH32V003下载注意事项;  ......
  • Windows10中macOS10.14虚拟机性能优化教程
    ​​Python全栈工程师核心面试300问深入解析(2020版)----全文预览​​Windows10中采用VMware15安装安装macOS10.14教程虚拟机中masOS运行并不是完美流畅,需要进行性能......
  • windows版redis安装教程
    ***windows版redis安装教程***​​redis安装地址​​下载好redis压缩包后我们将压缩包解压到本地硬盘中,这里我将压缩包解压到D盘中并创建了一个文件叫Redis解压好后打开......
  • Quartz.Net 官方教程 Tutorial 3/3
    Schedule相关属性设置扩展属性方式varhost=Host.CreateDefaultBuilder().ConfigureServices(services=>{services.AddQuartz(opt=>......