泽泽の博客 泽泽の博客

换上了自己写的模板

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

支付宝打赏

文章二维码

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

本文基于《 署名 - 非商业性使用 - 相同方式共享 4.0 国际 (CC BY-NC-SA 4.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
雷姆
拉姆