QQ爹の博客 QQ爹の博客

换上了自己写的模板

in 闲言碎语 文章转载请注明来源!

模板名字为:Yodu
有毒,优读,有读,有毒是因为这是一个代码全是我自己弄的模板,可能会有很大的问题;优读是想让自己能够更好的阅读别人的一些优秀文章;有读是希望更多的人能够阅读更多的书籍作品来积累内含。

这个模板样子和我之前用的模板几乎一致,之前的那个模板是基于http://www.75team.com/大幅度修改移植的,因为移植之前没有征求人家的意见,所以不会发出来。
总移植别人的,感受不到原作者的辛苦,也感受不到完善后的欣喜,于是乎,我就在想我能不能写个模板呢!然后就开始在我发布的《左雷姆右拉姆至顶至底源码》基础上开始写,使用工具是sublime,测试工具360浏览器,chrome浏览器,手机安卓端Yandex浏览器和chrome浏览器。

自适应很好玩:自适应就是用css判断屏幕尺寸,在什么尺寸之间,大于什么尺寸,小于什么尺寸,然后根据尺寸输出对应的css样式,比如说我的这个sidebar,屏幕width大于等于1024px时,sidebar宽度250px,当屏幕width小于1024px大于768px时,sidebar宽度75px,平且隐藏掉文字,同时头像设为40x40,当屏幕width小于768时,sidebar向左移动250px,这时就已经看不到sidebar了,这样设置主要是想在手机端时点击菜单按钮,在让sidebar向右移动250px。

Javascript设置: 因为加载了jquery所以这个最基本的配置很简单,一个手机端的菜单交互,一个搜索按钮的交互,还有个对于屏幕尺寸变化触发的代码

$(".sjcd").click(function(){//菜单按钮点击触发
 $('#menu').toggleClass('menu');
 $('#zhezhao').toggleClass('zhezhao');
});
$("#sousuo").click(function(){//搜索按钮点击触发
 $('#soso').toggleClass('openso');
$("html,body").animate({scrollTop :0}, 800);return false;
});
window.onresize = function(){//屏幕尺寸变化触发
 $('#menu').prop('class', '');
  $('#zhezhao').prop('class', '');
}

曾遇到的一个问题:电脑端测试的自适应效果已经很好了,但是用手机测试时,一直显示的是平板效果模式,文字很小,就像是用手机浏览电脑端网页一样,由于寝室半夜会断网,我纠结了一个晚上,第二天上课时才想到问题出在哪里。因为我没有在head内增加这个代码

 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">

一些配色:
主体背景色与文字色搭配:白#ffffff + 漆黒#0d0015
通知处背景色与文字色搭配:空色#a0d8ef + 白色fff
blockquote左侧border-left与背景色:勿忘草色#89c3eb + 白花色#e8ecef

今天心惊胆战:因为这个模板是在我的一个实验博客上在线调试的,今天删东西时把它删掉了,当时我就傻掉了,还好后来找到了虚拟主机的回收站把ta还原了。

暂时就这样了,边用边修模板吧,这样问题能发现的全面些

jrotty WeChat Pay

微信打赏

jrotty Alipay

支付宝打赏

文章二维码

扫描二维码,在手机上阅读!

版权声明:本文基于《知识共享署名-相同方式共享 3.0 中国大陆许可协议》发布,转载请遵循本协议
文章链接:https://qqdie.com/archives/changed-to-write-their-own-templates.html (转载时请注明本文出处及文章链接)

模板
发表新评论
已有 49 条评论
  1. dodie.
    dodie.Windows 10搜狗浏览器
    回复

    擦,被缩略图骗进来了。

  2. Licoy
    LicoyWindows 10谷歌浏览器
    回复

    博主分享一些关于Pjax全站的教程吧#[狗]

    1. Jrotty
      JrottyWindows 10谷歌浏览器
      回复

      @Licoy 我写的这个模板没那么多事件哈(⁄ ⁄•⁄ω⁄•⁄ ⁄)⁄

    2. Licoy
      LicoyWindows 10谷歌浏览器
      回复

      @Licoy 但是都是事件,都是要进行绑定的,不知道怎么做。

    3. Jrotty
      JrottyWindows 10谷歌浏览器
      回复

      @Licoy instantclick_js有黑名单白名单机制,而且也可以像pjax一样添加重载函数

    4. Licoy
      LicoyWindows 10谷歌浏览器
      回复

      @Licoy 不过每次加载之后就相当于实现了Pjax的功能,然后页面的JS全部都失效了

    5. Jrotty
      JrottyWindows 10谷歌浏览器
      回复

      @Licoy 我现在这个吗,这个是用预加载实现的,详细方法可以看下这个http://www.iyanlei.com/instantclick_js.html

  3. 某宅
    某宅Windows 10谷歌浏览器
    回复

    巨鞠啊,膜拜

    1. Jrotty
      JrottyWindows 10谷歌浏览器
      回复

      @某宅 跪拜比较有诚意#[狗]

  4. 疯狂减肥带
    疯狂减肥带Windows 10谷歌浏览器
    回复

    看样子像TranquiPeak Hexo 主题

    1. Jrotty
      JrottyWindows 10谷歌浏览器
      回复

      @疯狂减肥带 原来的themia那个主题是基于TranquiPeak Hexo 主题的!现在这个只是参考了那个样式!代码没抄哈#[吐舌]

  5. 佛山影视
    佛山影视Windows 10谷歌浏览器
    回复

    哟,先看看再说。

  6. 整形对比
    整形对比Windows 10谷歌浏览器
    回复

    这博版不错啊

PREVIOUS NEXT
雷姆
拉姆
0:00