使用的插件


  • APlayer for Typecho

介绍

  • 支持国内五大音乐平台(网易云、QQ、虾米、百度、酷狗)的单曲/专辑/歌单播放
  • 简单快捷,复制音乐详情页面网址,后台自动生成播放代码
  • 前端 APlayer,后端 Meting 及时更新,保证兼容性及 API 高可用性
  • 支持 MySql、SQLite 数据库
  • 支持自定义歌曲播放
  • 自定义 API 支持
    地址

  • UserAgent
    显示评论人使用的操作系统和浏览器 信息

使用方法:

  • 在你想显示的位置上加上这段代码:
  • 请根据自己的模板来判断是使用$this或$comments!(如果不清楚,可以都试下)
<?php UserAgent_Plugin::render($this->agent);?>

地址


<?php Like_Plugin::theLike(); ?>
#显示点赞按钮
<?php Like_Plugin::theLike($link = false); ?>
#仅显示点赞数量
<?php Like_Plugin::theMostLiked(10); ?>
#输出得到最多攒的带点赞按钮的前10条文章列表
<?php Like_Plugin::theMostLiked($limit = 10, $showlink = false, $before = '<br/> - ( 点赞: ', $after = ' 次 ) '); ?>
#输出得到最多攒的前10条文章列表,仅显示被赞次数并将文字描述前缀设置为XX,后缀设置为XX

  • CommentApprove
    给TYPECHO评论系统增加博主认证功能,根据评论人留的邮箱来进行认证身份

使用方法:

  • 在你想显示的位置上加上这段代码:
  • 请根据自己的模板来判断是使用$this或$comments!(如果不清楚,可以都试下)

在你想要实现的位置加上

<?php CommentApprove_Plugin::identify($this->mail);?>

地址


  • Comment2Wechat
    Typecho 评论微信提醒

使用方法:

  • 首先去 Server酱 首页,根据首页的说明一步步操作即可。然后将你获取的 SCKEY 粘贴到插件的设置中,保存设置。就这么简单

地址

增强代码

1、画廊图集

地址

2、音乐包

地址

3、联系我

地址

4、JS打字特效

地址

工具帮助

1、在线美图设计

https://www.fotor.com.cn/

2、Behance-hd图片站

https://www.behance.net/

3、图片压缩工具

https://tinypng.com/

4、各种工具

https://tool.lu/

5、css3查询手册

传送门

6、Chrome中文文档

传送门


响应式代码该如何去写?

举个例子:

 @media screen and (max-width: 980px) {CSS demo}

上面这行代码的意思是如果当前设备的最大分辨率宽度不超过980px时执行大括号内的CSS代码

再举个例子:

 @media screen and (min-width: 1600px) {CSS demo}

同理,这行代码的意思是如果当前设备的分辨率宽度不低于1600px时执行大括号内的CSS代码
上面代码这么看来确实是挺简单的,那么混合式应用该如何去写呢?
接着举个例子:

 @media screen and (min-width: 1366px) and (max-width: 1920px){CSS demo}

当分辨率大于1366px且小于1920px时执行大括号内的css样式

适用于PC/平板/手机设备的CSS

 /* 
   ##PC
   ##1281px或更高分辨率
 */

 @media (min-width: 1281px) {  
   //CSS  
 }

 /* 
   ##笔记本或PC
   ##1025px - 1280px
 */

 @media (min-width: 1025px) and (max-width: 1280px) {  
   //CSS  
 }

 /* 
   ##平板电脑/Ipad竖屏
   ##768px - 1024px
 */

 @media (min-width: 768px) and (max-width: 1024px) {  
   //CSS  
 }

 /* 
   ##平板电脑或Ipad横屏
   ##768px - 1024px
 */

 @media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
   //CSS
 }

 /* 
   ##低分辨率的平板电脑或横屏的手机
   ##481px - 767px
 */

 @media (min-width: 481px) and (max-width: 767px) {
   //CSS
 }

 /* 
   ##多数竖屏的智能手机
   ##320px - 479px
 */

 @media (min-width: 320px) and (max-width: 480px) {
   //CSS
 }

感谢

感谢大佬提供的帮助,还有一些小伙伴的帮助!