- -!我总觉得我不应该这个样子了,这是个不好的习惯,面对博客,我每周或者每个月都会有审美疲劳,然后又写一个皮肤模板,不停的循环,至今都写了好多好多了,都记不清了,汗...

下面是我这今天审美疲劳写的一个皮肤(注:此皮肤效果需js权限,仅用于加载图片用)

页面效果:

样式文件地址:http://files.cnblogs.com/files/cnsevennight/verdant.css

这里要说的比较在意的就是标题图片这个了,此皮肤里面标题图片是用js加载的,js代码

<script>
var posttitle = "";
if($(".entrylistPosttitle").length!=0)
posttitle = "entrylistPosttitle";
if($(".postTitle").length!=0)
posttitle = "postTitle";
//循环添加
$(".c_b_p_desc").each(function(i){
var ispictures = $("."+posttitle+" a:eq("+i+")").html();
var hrefStr = $("."+posttitle+" a:eq("+i+")").attr("href");
if(ispictures.substring(ispictures.length-1)=="."){//加载文章图片
var str =hrefStr.substring(hrefStr.lastIndexOf("/")+1,hrefStr.lastIndexOf("."));
var imgurl ="http://images.cnblogs.com/cnblogs_com/cnsevennight/654493/o_"+str+".png";/*需修改地方一*/
$(".c_b_p_desc:eq("+i+")").before('<a href="'+hrefStr+'"><img class="lazy desc_img" style="width:240px;height:160px;margin-right: 20px;" src="'+imgurl+'" ></a>');
}else{//加载默认图片
$(".c_b_p_desc:eq("+i+")").before('<a href="'+hrefStr+'"><img class="lazy desc_img" style="width:240px;height:160px;margin-right: 20px;" src="http://images.cnblogs.com/cnblogs_com/cnsevennight/654493/o_7yelogo.png" ></a>');/*需修改地方二*/
}
});
</script>

设置步骤:

1、准备一张你要设置当前写博客文章的一张png的图片

2、开始写博客,在写标题时,在末尾添一个 “.”,表示你这篇文章有你自己设置的图片,如下图:

3、写完文章,发布,然后查看这篇文章的url,复制.html之前,最后一个“/”之后,的几位数字来作为你要设置的图片的名称,如:

http://www.cnblogs.com/cnsevennight/p/4326181.html

  

4、然后上传你的图片到一个你所有博客图片存放在一起的地方,且要url路径不变,只是最后的文件名称变化,例如

http://www.xx.com/11111.png

http://www.xx.com/22222.png

http://www.xx.com/33333.png

最后到了最后设置js的步骤:

复制上面的js

需要修改的地方一处的地方:

var imgurl ="http://images.cnblogs.com/cnblogs_com/cnsevennight/654493/o_"+str+".png";/*需修改地方一*/

设置你图片存放的地址,比如我存放的图片就是存放在博客园相册(也可以找其他“七牛”,“又拍”,什么的免费cdn,加载速度快,还免费),我就改得是这一段

http://images.cnblogs.com/cnblogs_com/cnsevennight/654493/o_

需要修改的地方二处的地方:修改假如你其他文章没有设置图片的文章显示的默认图片是什么,这个路径随便填什么都行

最后,把你修改完成的代码,放入后台管理>设置>页脚Html代码,里面,然后保存就OK,打开博客就能看见效果

  

--------------------------------------------------要结果看上面的就行,这里是详细实现过程---------------------------------------------------------------

这里说一下怎么具体运用到文章中,拿发布一篇文章举例

我这里判断是根据文章标题后面加了一个英文的“ . ” 来判断的那篇文章需要加载指定的图片还是加载默认的图片,见下图

如果判断结果标题末尾是以“ . ”结束的,就取出这篇文章的url(用js取当前博客标题a标签的href,用substring截取到代表文章唯一性的一串数字)如

http://www.cnblogs.com/cnsevennight/p/4326181.html

向上面这个url取出来的就会是 “4326181”,这个就是博客文章图片的名称,所以在存图片的时候,名称就取你当前写的博客的这个url,.html之前的6位数字就行

http://images.cnblogs.com/cnblogs_com/cnsevennight/654493/o_"+图片名称+".png

js循环当前文章数量,然后根据“.”就添加了所以的博客文章图片

这里图片存放的地方,我存放的是博客园的相册,其他的太麻烦我就没弄了,有兴趣的倒还是可以去弄七牛,又拍什么的免费cdn

  

分享一款自己改进的皮肤“verdant”.的更多相关文章

  1. 分享20款移动开发中很有用的 jQuery 插件

    今天,很显然每个网站都需要有一个移动优化的界面以提高移动用户的使用体验.在开发任何移动项目时,要尽可能保持每一种资源尺寸都尽可能的小,以给最终用户提供一个好的体验是非常重要的.在这篇文章中我们已经编制 ...

  2. 分享15款很实用的 Sass 和 Compass 工具

    Sass 是 CSS 的扩展,增加了嵌套规则,变量,混入功能等很多更多.它简化了组织和维护 CSS 代码的成本.Compass 是一个开源的 CSS 框架,使得使用 CSS3 和流行的设计模式比以往任 ...

  3. 发布一款Github博客皮肤

    Major是一款基于jekyll的皮肤,没有用hexo,原因是换机器后无法更新博客,但是可以用U盘考环境.总之很麻烦!折腾纠结好久,还是用jekyll!不用发布直接push文章即可,方便快捷.用的放心 ...

  4. 唯美!分享8款响应式的 WordPress 餐厅主题

    您是否拥有一个餐厅,酒吧,咖啡馆,小酒馆,比萨饼店?如果答案是肯定的,请确保您在网上也提供服务.为了使您的工作更轻松,我们选择了一些新的和独特的餐厅主题,覆盖了范围很广的食品企业.这些主题提供了很多很 ...

  5. 分享50款 Android 移动应用程序图标【下篇】

    在这个移动程序流行的时代,持续增长的应用程序经济充满了商业机遇.任何对应用程序设计感兴趣的人,将会喜欢上这里的50个独特的 Android 应用程序图标.这些例子中的图标能够让应用程序的设计更具吸引力 ...

  6. 分享50款 Android 移动应用程序图标【上篇】

    在这个移动程序流行的时代,持续增长的应用程序经济充满了商业机遇.任何对应用程序设计感兴趣的人,将会喜欢上这里的50个独特的 Android 应用程序图标.这些例子中的图标能够让应用程序的设计更具吸引力 ...

  7. 分享7款非常实用的jQuery/CSS3插件演示和源码

    上次我们分享了15款效果很酷的最新jQuery/CSS3特效,非常不错,今天要分享7个非常实用的jQuery/CSS3插件演示和源码,一起来看看. 1.jQuery ajax点击地图显示商家网点分布 ...

  8. 分享27款最佳的复古风格 WordPress 主题

    WordPress 作为最流行的博客系统,插件众多,易于扩充功能.安装和使用都非常方便,而且有许多第三方开发的免费模板,安装方式简单易用. 复古风格可以应用于任何东西,从服装到室内设计,那么复古风格的 ...

  9. 分享8款绚丽的HTML5/jQuery特效插件

    有几天没有分享前端资源了,今天要向大家分享15款非常给力的HTML5/jQuery特效插件,废话少说,一起来看看. 1.CSS3图片重力感应特效 很酷的一款CSS3模拟重力感应特效,你可以拖动图片来甩 ...

随机推荐

  1. javascript中的this与函数讲解

    前言 javascript中没有块级作用域(es6以前),javascript中作用域分为函数作用域和全局作用域.并且,大家可以认为全局作用域其实就是Window函数的函数作用域,我们编写的js代码, ...

  2. Docker笔记一:基于Docker容器构建并运行 nginx + php + mysql ( mariadb ) 服务环境

    首先为什么要自己编写Dockerfile来构建 nginx.php.mariadb这三个镜像呢?一是希望更深入了解Dockerfile的使用,也就能初步了解docker镜像是如何被构建的:二是希望将来 ...

  3. ES6模块import细节

    写在前面,目前浏览器对ES6的import支持还不是很好,需要用bable转译. ES6引入外部模块分两种情况: 1.导入外部的变量或函数等: import {firstName, lastName, ...

  4. input[tyle="file"]样式修改及上传文件名显示

    默认的上传样式我们总觉得不太好看,根据需求总想改成和上下结构统一的风格…… 实现方法和思路: 1.在input元素外加a超链接标签 2.给a标签设置按钮样式 3.设置input[type='file' ...

  5. Android公共title的应用

    我们在开发Android应用中,写每一个页面的时候都会建一个title,不是写一个LinearLayout就是写一个RelativeLayout,久而久之就会觉得这样繁琐,尤其几个页面是只是标题不一样 ...

  6. Tableau未必最佳,国内BI也能突破重围!

    如今,百度一下商业智能或BI工具,总能看到Tableau的身影.并不是Tableau的营销做得好,而是国内对于商业智能工具的认知和选择似乎都落在了Tableau身上.导致不管业内业外都对商业智能的概念 ...

  7. ionic第一坑——ion-slide-box坑(ion-slide分两页的坑)

    ionic.views.Slider = ionic.views.View.inherit({ initialize: function (options) { . . . function setu ...

  8. TFS 2015 敏捷开发实践 – 在Kanban上运行一个Sprint

    前言:在 上一篇 TFS2015敏捷开发实践 中,我们给大家介绍了TFS2015中看板的基本使用和功能,这一篇中我们来看一个具体的场景,如何使用看板来运行一个sprint.Sprint是Scrum对迭 ...

  9. jsp

    -----------------

  10. Java泛型的历史

    为什么Java泛型会有当前的缺陷? 之前的章节里已经说明了Java泛型擦除会导致的问题,C++和C#的泛型都是在运行时存在的,难道Java天然不支持“真正的泛型”吗? 事实上,在Java1.5在200 ...