给Pinghsu主题添加独立搜索页
in Tutorial with 49 comments
给Pinghsu主题添加独立搜索页
in Tutorial with 49 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. nan

    博主你好,你这个主题设计的很漂亮,因为这个我wp转typecho,现在使用主题有几个问题:
    1、按照你说的加独立搜索页,结果出现404,是不是没有找到搜索地址,试了好几个搜索地址还是不行。求赐教;
    2、文章目录已经开启,但是在电脑上没有显示,这个是怎么回事?
    使用的是虚拟主机。谢谢

    Reply
    1. @nan

      1、伪静态没做?
      2、文章目录是根据h1、h2、h3等标签去识别的。

      Reply
  2. Kay

    非常棒,自己想魔改,玩不来QAQ 先看看你的源码吧

    Reply
  3. lyp

    你好,我想请教一下,我想所有缩略图都用默认的,要怎么改啊

    Reply
  4. 独立页面设置后,如何改回原来的样式?

    Reply
  5. 你好,为什么我用的是最新版本,文章最后 没有 [ 文章上下篇切换 ] 箭头 ???

    Reply
  6. 听说

    你好请问您的文章底下的版权信息如何添加的

    Reply
    1. 听说
      @听说

      看到了谢谢

      Reply