分类 前端 下的文章

Typecho的默认主题只在PC端显示，移动设备是不显示搜索框和侧边栏的

修改方法

打开header.php，将 37-53 行的

<div class="site-name col-mb-12 col-9">
<?php if ($this->options->logoUrl): ?>
    <a id="logo" href="<?php $this->options->siteUrl(); ?>">
        <img src="<?php $this->options->logoUrl() ?>" alt="<?php $this->options->title() ?>" />
    </a>
<?php else: ?>
    <a id="logo" href="<?php $this->options->siteUrl(); ?>"><?php $this->options->title() ?></a>
    <p class="description"><?php $this->options->description() ?></p>
<?php endif; ?>
</div>
<div class="site-search col-3 kit-hidden-tb">
    <form id="search" method="post" action="<?php $this->options->siteUrl(); ?>" role="search">
        <label for="s" class="sr-only"><?php _e('搜索关键字'); ?></label>
        <input type="text" id="s" name="s" class="text" placeholder="<?php _e('输入关键字搜索'); ?>" />
        <button type="submit" class="submit"><?php _e('搜索'); ?></button>
    </form>
</div>

修改为

- 阅读剩余部分 -

添加以下css代码

html {-webkit-filter: grayscale(100%);filter:progid:DXImageTransform.Microsoft.BasicImage(graysale=1);}

如果没有生效修改<!DOCTYPE HTML>标签与<html>标签即可

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

方法非常简单，首先引入 jquery.js 和 jquery.pjax.js

<script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script src="//cdn.bootcss.com/jquery.pjax/1.9.6/jquery.pjax.min.js"></script>

然后在body内放一个div作为容器，并设置一个id，我设置的id是pjax-container。

<div id="pjax-container">
  //在此处放置跳转页面时要更新的部分
</div>

然后在容器外添加以下代码

<script type="text/javascript">
  $(document).pjax('a[href^="<?php Helper::options()->siteUrl()?>"]:not(a[no-pjax])', {
    container: '#pjax-container',
    fragment: '#pjax-container',
    timeout: 8000
  }).on('pjax:send', function() { //Pjax加载中执行
    $("#pjax_loading").show(); //显示遮罩层与加载动画
  }).on('pjax:complete', function() { //Pjax加载完成执行
    $("#pjax_loading").hide();  //隐藏遮罩层与加载动画
  });;
</script>

参考文章：https://www.ihewro.com/archives/354/

正常应该绑定事件，试了会没成功，就换了定时检查当前位置的方法

//定时执行，更改按钮状态
setInterval(function(){
  //判断当前位置是否处于顶部，是则显示按钮，否则隐藏
  if($(window).scrollTop() == 0){
    $('#back-top').hide();
  }else{
    $('#back-top').show();
  }
}, 100);

//点击按钮返回顶部
$('#back-top-btn').click(function() {
  $('body,html').animate({
    scrollTop: 0
  },1000);
  return false;
});
  1. 1
  2. 2