给Pinghsu主题添加独立搜索页

in Tutorials with 59 comments

截止2017年03月26日,pinghsu主题已经更新到v1.5.2,🎉

添加和修改了很多,其中比较大的改进有两处,一个是pjax,另外一个是独立搜索页

pjax的优化改进主要是直接使用了instantclick的github最新版的js,同时也将Mathjax移到内容页下才去请求和加载

github最新版的instantclick有一个问题,就是会对锚点也进行预加载,会造成文章目录和底部的bar没法正常使用,只能先退回v3.1.0,所以首次访问文章的时候会有Mathjax的加载信息,同时浏览器也会报错,但经过测试是没有任何的影响。我已经向作者提了bug issue,会保持关注

补充:简单看了一下instantclick源码,是有对锚点作特殊处理的,但还是失效~ 同时测试的时候,出现了递增地对不同的链接发起多次请求的问题

回滚到原来那样了~

另外一个改进就是这篇文章的主人公,独立搜索页

这里就不废话,直接上设置教程吧~


更新主题

Github 下载最新版的 pinghsu 主题,文件夹重命名为“pinghsu”,丢到/usr/theme

如果你已经使用了 pinghsu 主题,则通过覆盖文件的方式更新即可

创建搜索页

创建搜索页有三个步骤

1、新建页面
2、选择模板Template Page of Search
3、添加自定义字段archive

注意事项:无论选择哪个模板都是需要添加自定义字段archive,才能保证你的模板页跟我的一样

设置菜单

创建完搜索页还有一道工序,那就是隐藏这个页面,隐藏后的这个页面将不再出现在菜单

设置方式:

1、在创建搜索页当页,右边的sidebar的“高级选项”,在“公开度”那,选择“隐藏”
2、复制你的搜索页的访问地址,不要有空格,记得带上http://https://
2、到外观设置那,在搜索页设置的输入框内,复制访问地址

一顿操作之后,点击菜单上的搜索图标,即可跳转到搜索页~

访问成功代表设置完成~ 😄

添加语句

如果你想跟我一样有一段这样的话:👇 The following tabs can help you!

则直接在当页的编辑器内输入你自己想要话,记得不要带有回车和空格,然后发布文章

当然你也可以不设置独立搜索页,那么菜单上的搜索图标将维持原有的外观和功能

补充

版本已经更新到了v1.5.3,如你所见增加了个文章底部的bar

bar的左边是分享按钮,右边是文章上下篇切换和返回顶部或尾部

以前我一直想如何优雅地去解决文章返回顶部和尾部的问题,如你所见,这个底部的bar算是个优雅的解决方法,虽然不怎么新鲜

关于分享按钮这部分,只有Facebook、Twitter和二维码,也没有做成模态窗。那为什么不做微博分享?因为微博分享接口对https不友好,虽然可以访问,但丢失了样式,如果用http的话,就不满足HSTS了,所以就干脆不弄。

所以,关于底部的bar,动手能力强的你,可以加强它,例如加一个喜欢❤️按钮等等

内容不多,至此~

Responses
  1. 使用缓存的话,独立搜索页是非常好的方案。

    Reply
  2. 淡定定定哥

    请问博主大大,你的独立搜索页似乎是pjax。可是我的设置好了也能用,但是点击搜索图标是浏览器跳转。是什么原因?

    Reply
  3. fgz

    大兄弟,为什么我一添加隐藏,搜索页就是404

    Reply
  4. 底部的单词改成汉字显示����������怎么解除?

    Reply
    1. Bruce
      @亿七

      乱码了那是

      Reply
      1. @Bruce

        感谢您的回复!现在已经解决了的!谢谢

        Reply
  5. 博主你好!我前边几天发的博文在首页没有缩略图展示,最新发的就有,这个如何解决呢?谢谢!

    Reply
  6. 底部出现的Nothing here如何解决?

    Reply