给你的博客换个装-园子换装指南

  博客园有很多漂亮的皮肤,但总是有一些地方我不大喜欢,所以经过慎重考虑,我决定亲自动手换个装。本文将介绍博客园换装的一些基础(不涉及标准皮肤的做法),如果你想让你的博客更炫,可以参考本文入个门,然后自己慢慢摸索。相信你一定比我做的好。

一、准备工作

  1、申请js权限

  如果你像更加自由的操作,那么你必须拿到js权限。博客园开放js权限其实还是比较危险的,可以做各种“坏事”,但是鉴于博客园的同学都是善良可爱的人,应该不会有人做什么卑鄙无耻下流的事情。

  申请流程:进入博客管理后台-->进入设置标签-->下拉到博客侧边栏公告(支持HTML代码),这里没有申请的话会有一个js权限申请的链接-->填写一个申请理由-->等待审批通过。

  申请理由填写要点:第一要真诚,第二要有礼貌,第三要作出承诺不做坏事,第四要拍马屁。

  我的申请理由如下:近来看了博客园的许多文章,感觉收获颇丰,也希望将自己学习的一些东西分享给大家,虽我没有那些大牛那么牛,但是我相信自己分享的一些东西可以帮到一些人。本人保证不做广告,不做坏事!最后祝愿博客园越来越好!恳请善良的管理朋友通过此申请!!

  2、搞清楚你的东西被放在了哪里

  我们自己搞得js,html,css代码都是在设置里边提交的,为了自定义样式和功能,我们需要搞清楚我们自己的代码被放到了哪里。如何看呢?一个一个试,去检查html结构。

  (1)标题在哪里

  

  看到这里我们的标题为大~熊,子标题是...,直接打开你的园子检查元素。然后用搜索快速定位到你的元素。    

      

   (2)页面定制CSS在哪里

  

  注意这里有一条规则#header #blogLogo,这几搜索这个规则看看它被藏在哪里。

  

   看右边,发现我们的css被放在了一个345073.css的文件里。再来搜一下这个文件,看看是在哪里引进来的。

  

   发现是在head的第二个link引入的。这个对于CSS的优先级确定很有帮助。对了,那里有一个选项,直接勾上,免得它添乱。

  (3)博客侧边栏公告(支持HTML代码)(支持JS代码)在哪里

  

       

  结论是在#sidebar里边。

  (4)页首页脚html代码在哪里

   可以发现页首代码被放在body的第一个子元素的位置,没有任何包裹。

   又发现页脚html代码放在body的最后一个子元素的位置,同样没有任何包裹。

 二、一些实用技巧

  看完上面的介绍,自己动手写就没什么问题了,这里我想介绍一些使用技巧,也算不上技巧吧,都是一些我自己做的过程中的经验,这些东西应该可以帮助你少走一些弯路。

  1、必须每次都把代码传到服务器才能看效果吗?

  这不是必须的,你可以将html代码copy到本地ide调试好了在传上去看看有没有问题,在做一些微调。比如我做的时候先把首页的html源代码考到本地建立一个index.html文件,文章详情页建立另外一个文件。然后按照上面提到代码被插入的位置增加代码并调试。

  2、不想要的元素怎么办

  源html中有很多元素是你不想要的,但是他们确确实实在那里了,比如默认的文章详情也下面有一堆乱七八糟的东西。一种方法是用js把你不要的元素remove,但还有一种更好的方式,display:none,如果里面有图片等资源,那些个图片是不被下载的,所以,很棒!我一口气把那些不喜欢的元素都给消灭了。

  3、没有发起后端请求的API或者有些特殊参数不知道怎么办

  例如:你想增加一个关注按钮,但是需要向后端发起post请求。我们直接去查看原来那个关注按钮是怎么做的。

    

  ooo,原来是调了一个函数follow(),但是里边有个加密的参数(不得不说,这种写法一下就被人盗取了),显然我们可以很轻松的获取到这个参数,然后当单击我们自定义按钮时调用这个函数就可以实现关注了。本来想着做一件坏事的,你单击关注按钮就直接调这个函数,结果凡是访问的都自动关注了,但是我并没有做这样下流无耻之事,如果你真的想关注我才会调这个函数。有此方法,你可以轻松的调一些有用的函数实现你的功能,推荐、收藏等等都可以的。

  4、加个图或者其他资源可以吗

  显然可以,不过有些限制。

  

   上传后在你要用的地方把url给进去就好了,为啥不让png呢,我当时要做一个iphone添加到主屏的图标,结果不让上传png,我把图传到了这里http://www.tietuku.com/,都行,随便传到哪里都可以,然后在引进来的,可以用。

  5、可以用第三方库吗

  显然是可以的,你可以用cdn引进来,这样比较方便。比如我就用了animate.css,layer.js等等库。非常方便。

  6、兼容手机

  我的做法比较暴力,@media把那些乱七八糟的东西全部display:none,再做一些调整就好了。

  7、元素放在天涯海角都可以

  运用定位absolute,relative,fixed等,你可以把任意元素放到任意位置。

三、后面的话

  我的博客还是做的比较烂,配色比较随性,体验也不是很好,你一定可以有一个很棒的作品。我的代码写的比较混乱,如果你需要看的画可以直接查看源代码,代码没有压缩,真的很乱,不要吐槽啊。另,如果你发现我的博客存在什么问题或者有什么改进建议,请慷慨指出,感激不尽!再,如果觉得大~熊的文章对您有所帮助,不妨点一波关注,关注即可上钻石(见右上角)。

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/368603.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

表格过滤器_气缸选型其实并不复杂,知道这些再也不怕选错气缸(附计算表格)...

文/第e机械气动系统概述在介绍气缸之前我们先了解一下气动系统。气动控制技术在国民经济各个领域,最近这些年, 它与传感器技术、电子信息技术密切融合,发展成为包括控制、传动和检测等在内的自动化技术, 现在已发展成为自动化领域的重要组成部分。气动控…

java中equals()和==的区别

java中的数据类型 基础数据类型 基础数据类型有byte、short、char、int、long、float、double、bool、String。除了 String 会比较地址,其它的基础类型的比较,使用 和 equals() 两者都是比较值。 String类的equals()方法源码 1 public boolean equals(Object anObject) {2 …

乒乓球比赛赛程_10月5日至10月11日中央电视台直播录播乒乓球比赛安排

10月5日至10月11日这一周中央电视台居然没有播乒乓球比赛?全国乒乓球锦标赛从5日开始进行各单项比赛,7日进行混双决赛,9日进行男双决赛和女单决赛,10日进行女双决赛和男单决赛。场场都是精彩好看的比赛,中央电视台体育频道一场都…

集合实例(集合覆盖)

集合覆盖是一种优化求解问题,对很多组合数学和资源选择问题给出了很好的抽象模型。 问题如下:给定一个集合S,集合P由集合S的子集A1到An组成,集合C由集合P中的一个或多个子集组成。如果S中的每个成员都包含在C的至少一个子集中则称…

关闭运动轨迹_网球初学者如何正确入门网球运动,有哪些学习细节

网球是一个非常有趣的球类运动。 当您开始入门时,您会越来越喜欢它。 那么网球初学者应该如何正确入门呢? 有什么独特的入门经验?即使没有网球经验,只要您能正确正确地进行定期训练,仍然可以取得很大的进步。首先&…

phpstorm+wamp+xdebug配置php调试环境

本篇文章主要是:教大家如果搭建一套phpstormwampxdebug调试php的环境现在大多数的程序员使用的调试方式一般都是echo, var_dump, file_put_contents等其他方式,效率比较低下,因此我们有必要学习用工具调试,工具调试主要可以用来解…

计算机专用英语1500词带音标,带音标的计算机英语1500词

带音标的计算机英语1500词 (46页)本资源提供全文预览,点击全文预览即可全文预览,如果喜欢文档就下载吧,查找使用更方便哦!29.9 积分计算机专用英语词汇1500词《电脑专业英语》1. file [fail] n. 文件;v. 保存文件 2. …

需求改进与系统设计

第一部分 需求与原型改进 1.1改进的原型 1.1.1 改进说明 相较上一次的原型,这一次我们确定了主题颜色,并且使功能一眼就能看懂,让新用户能很快上手。 并且进一步完善了前期的调查问卷分析。得出结论同学们不去食堂吃饭的大部分原因是排队…

了解ADF Faces clientComponent属性

我相信大多数ADF开发人员都知道ADF Faces属性clientComponent 。 在这篇文章中&#xff0c;我将展示此属性实际上如何影响组件渲染以及它如何改变其行为。 让我们开始考虑一个非常简单的示例&#xff1a; <af:inputText label"Label 1" id"it1" /> …

谈谈一些有趣的CSS题目(十五)-- 谈谈 CSS 关键字 initial、inherit 和 unset

开本系列&#xff0c;谈谈一些有趣的 CSS 题目&#xff0c;题目类型天马行空&#xff0c;想到什么说什么&#xff0c;不仅为了拓宽一下解决问题的思路&#xff0c;更涉及一些容易忽视的 CSS 细节。解题不考虑兼容性&#xff0c;题目天马行空&#xff0c;想到什么说什么&#x…

小程序沉浸式_企业开发小程序:客户裂变式增长

最近几年&#xff0c;各行各业中都有不少企业、商家获客难窘境。因此&#xff0c;很多企业、商家想知道&#xff1a;"怎么做&#xff0c;才能获取到大量流量&#xff1f;"小编给大家推荐一种方式&#xff1a;开发一个微信小程序&#xff0c;然后利用小程序来获取大量…

[CSS] Scale on Hover with Transition

效果 源码 <!doctype html><html class"outline color"><head><meta charset"utf-8"><title>图片scale动画</title><style>.img-box {position: relative;width: 740px;height: 420px;overflow: hidden;}/* 彩色…

热敏电阻温度特性曲线_热敏电阻与体温计的应用关系

相信体温计大家都熟悉&#xff0c;热敏电阻与体温计的应用关系大家都知道吗&#xff1f;热敏电阻热敏电阻探头测量体温的原理又是什么呢&#xff0c;小编跟大家分析一下&#xff0c;希望以下详细的介绍能帮助到大家&#xff01;热敏电阻探头测量体温的原理分析如下&#xff1a;…

1.Strategy Pattern(策略模式)

策略模式&#xff08;Strategy Pattern&#xff09;&#xff1a; 我的理解&#xff0c;将代码中每个变化之处抽出&#xff0c;提炼成一个一个的接口或者抽象类&#xff0c;让这些变化实现接口或继承抽象类成为具体的变化类。再利用多态的功能&#xff0c;可将变化之处用接口或抽…

Spring MVC + Hibernate + Maven:CRUD操作示例

在本文中&#xff0c;我想研究一个Spring MVC Hibernate Maven用法的示例。 这套技术暗含领域领域的基础知识。 因此&#xff0c;我将尝试详细解释所有重要时刻。 其他没有主题的内容将提供指向更多详细信息源的链接。 在文章的结尾&#xff0c;我将发布GitHub的链接。 目标…

画出的点做交互_设计之下交互设计原型设计之概念设计

目录//交互设计//「设计之下」---交互设计&#xff1a;交互设计师是做什么的&#xff1f;上线的产品中那一块是交互设计师的产物呢&#xff1f;项目启动1.1「设计之下」---交互设计&#xff1a;项目启动之从想法到项目&#xff0c;什么是项目&#xff1f;1.2「设计之下」---交互…

Java集合之TreeMap源码解析上篇

上期回顾 上期我从树型结构谈到了红黑树的概念以及自平衡的各种变化&#xff08;指路上期←戳&#xff09;&#xff0c;本期我将会对TreeMap结合红黑树理论进行解读。 首先&#xff0c;我们先来回忆一下红黑树的5条基本规则。 1.结点是红色或者黑色&#xff0c; 2.根结点为黑色…

仪器和软件通讯测试软件,软件定义的仪器-测试测量-与非网

如同每个孩子所拥有的第一套LEGO玩具改变了他们对世界的认识一样&#xff0c;26年前&#xff0c;美国国家仪器通过NI LabVIEW系统设计软件&#xff0c;重新改变了人们对仪器的认知。今年&#xff0c;NI将再次重演历史&#xff0c;发布一款新型仪器&#xff0c;帮助测试工程师摆…

埃森哲杯第十六届上海大学程序设计联赛春季赛暨上海高校金马五校赛 C序列变换...

链接&#xff1a;https://www.nowcoder.com/acm/contest/91/C来源&#xff1a;牛客网没有账号的同学这样注册&#xff0c;支持博主 题目描述 给定两个长度为n的序列&#xff0c;ai, bi(1<i<n), 通过3种魔法使得序列a变换为序列b&#xff0c;也就是aibi(1<i<n). 魔…

Spring MVC,Ajax和JSON第1部分–设置场景

我一直在考虑在Spring&#xff0c;Ajax和JSON上写博客&#xff0c;但是我从来没有做过。 这主要是因为它非常复杂&#xff0c;并且所需的技术一直处于变化状态。 当我决定撰写此博客时&#xff0c;我在Internet上有一个侦察员&#xff0c;如果您查看诸如Stack Overflow之类的地…