Typecho1.1仿简书主题大小屏适配
时间:2022-07-24
本文章向大家介绍Typecho1.1仿简书主题大小屏适配,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
文:毛毛,首发自:maomao.ink,转载请保留此行。
前几天改主题,把我原来的区分大小屏功能给弄没了,今天找了一天才给找回来,赶紧抄笔记下来。
期望改动点有仨:
- 文章列表分类,大屏展示小屏不展示;
- 右侧分类列表,大屏默认打开小屏关闭;
- 列表内容显示字数,大屏100字小屏50字;
但是因为改导航栏,把判断功能实现部分代码删掉了,导致无法判断大小屏(大小屏展示都一样),弄得我很尴尬。今天把所有修改导航栏部分代码全部还原,接下来从最开始讲起。
为实现大小屏展示不同的分类和预览字数,我将index.php的代码修改如下:
<div class="post-wrap">
<div class="post-meta">
<a class="author-name" href="<?php $this->author->permalink();?>"><?php $this->author->screenName();?></a>
<span class="author-name" > | </span>
<span datetime="<?php $this->date('c'); ?>" itemprop="datePublished"><?php $this->dateword(); ?></span>
<span><?php _e('<i class="icon icon-write"></i> 字数 '); ?><?php echo art_count($this->cid); ?></span>
</div>
<a class="post-title" href="<?php $this->permalink() ?>" target="_blank"><?php $this->sticky(); ?><?php $this->title(); ?></a>
<a class="post-abstract" href="<?php $this->permalink() ?>" target="_blank">
<?php if('mini' == Typecho_Cookie::get('menuSize')){$this->excerpt(100,'...');}else{$this->excerpt(50,'...');}?>
</a>
<ul class="post-meta">
<li class="cat"><?php if('mini' == Typecho_Cookie::get('menuSize')){$this->category(',');}?></li>
<li><a href="<?php $this->permalink() ?>"><?php _e('<i class="icon icon-eye"></i> ');?> <?php $this->viewsNum(); ?></a></li>
<li><a href="<?php $this->permalink() ?>#comments"><?php _e('<i class="icon icon-comment"></i> ');?> <?php $this->commentsNum(); ?></a></li>
<li><?php _e('<i class="icon icon-like"></i> ');?> <?php $this->likesNum(); ?></li>
<li><?php if($this->isTop){_e('置顶');} ?></li>
</ul>
</div>
主要修改点是:
- <?php if('mini' == Typecho_Cookie::get('menuSize')){
-
<li class="cat"><?php if('mini' == Typecho_Cookie::get('menuSize')){$this->category(',');}?></li>
大屏展示文章所属分类,小屏不展示;
下面是分类列表的实现代码:
<div id="post-index-wrap" class="<?php if('mini' == Typecho_Cookie::get('menuSize')){_e('open');}else{_e('');}?>">
<div class="post-index-menu"><i class="icon icon-list btn-index-menu" title="<?php _e('我的文集'); ?>"></i> <?php _e('我的文集'); ?></div>
<div class="post-index-box">
<?php $this->widget('Widget_Metas_Category_List')->to($categories); ?>
<?php while($categories->next()): ?>
<li class="menu-item menu-item-home">
<a href="<?php $categories->permalink(); ?>" rel="section"><?php $categories->name(); ?></a>
</li>
<?php endwhile; ?>
</div>
</div>
大小屏区分代码如下:
-
class="<?php if('mini' == Typecho_Cookie::get('menuSize')){_e('open');}else{_e('');}?>"
大屏下设置class="open"
表示默认展开,小屏下默认不展示;
这里的大屏
是指电脑端
,小屏
是指手机端
这样就能在手机和电脑分别完成不一样的适配了。
原理剖析:
为什么判断if('mini' == Typecho_Cookie::get('menuSize'))
就能实现大小屏切换。
实际上,这依赖于导航栏上面有个伸缩导航栏的按钮:
<a href="#" class="btn btn-default btn-nav-size pull-left hidden-xs"><i class="icon icon-<?php if('mini' == Typecho_Cookie::get('menuSize')){_e('indent');}else{_e('outdent');}?>"></i></a>
这个按钮点击的时候会切换menuSize
的状态,在normal
与mini
之间切换;normal是表示导航栏展开状态,mini表示导航栏收起状态;
还有一个重要因素:上述按钮代码里有个hidden-xs
标记,这个标记表示在小屏情况下隐藏按钮,手机上是看不到这个按钮的。也就是说,手机上无法进行切换。切换的js代码如下:
menuSizeToggle:function(btn){
var wrap = $('#wrapper');
var size = '';
if(wrap.hasClass('mini-nav')){
btn.find('i').attr('class','icon icon-outdent');
wrap.removeClass('mini-nav');
size = 'normal';
}else{
btn.find('i').attr('class','icon icon-indent');
wrap.addClass('mini-nav');
size = 'mini';
}
if(size != jApp.getCookie('menuSize')){
jApp.setCookie('menuSize',size);
}
},
从代码看出,只有切换之后才会拥有mini
属性,默认状态既不是normal也不是mini。
而我判断的依据是if('mini' == Typecho_Cookie::get('menuSize'))
,小屏下只会走进else。
这就是判断的根源。
menuSize
这个字段是存在Cookie里面的,所以只要你打开过网页,并且收起过网页,以后都会保存这个值,直到下一次切换。
以上就是全部内容,祝你成功!!!
我是谁?
- 90后程序媛,写代码,也写软文
- 喜欢阅读,喜欢聆听,喜欢分享
- 热爱挑战各种稀奇古怪的事物(比如这个博客)
- 我是毛毛,感恩遇见你!
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 【一天一大 lee】 把二叉搜索树转换为累加树 (难度:简单)-Day20200921
- 【一天一大 lee】子集 (难度:中等)-Day20200920
- 用了这个jupyter插件,我已经半个月没打开过excel了
- Webpack学习笔记
- 正则表达式学习笔记
- R 可视化 | 华夫饼图
- 绝了!Python定时爬取微博热搜+pyecharts动态图展示
- 实战 | Python爬取B站柯南弹幕+Gephi梳理主线剧情
- 别再问我 Python 怎么识别数字验证码了!
- Python自动化办公 | 同事要我帮忙补写178份Word日报!别闹!
- Excel多区间判断,其实很简单
- 外观模式
- cp命令
- java基本数据类型及相互间的转换(转)
- 【java设计模式系列】1. 工厂方法模式(Factory Method)