给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. 🎉s是少时诵诗书

    Reply
    1. @Moxne

      请问博主这些特殊符号是通过什么插件实现的?

      Reply
      1. @Moxne

        修改数据库的编码格式就可以支持emoji了。教程如下
        https://blog.phpgao.com/typecho_with_emoji.html

        Reply
        1. @Chakhsu Lau

          感谢博主,成功😄😄😄😄😄

          Reply
          1. @Moxne

            你的归档页没加上字段,除了用到模板之外的其他页面,是不需要添加archive字段的

            Reply
            1. @Chakhsu

              感谢博主提醒,修改好了😁,对了,另外问一下博主,logo是多少*多少的,我发现设置的越大显示出来反而越小,好尴尬。。。。

              Reply
  2. 分享添加微博了啊😄

    Reply
    1. @Bakumon

      是啊,添加了~😁

      Reply
  3. 博主,建议首页加载文章可以开发多2个功能,一个是点击加载更多文章,继续在原来的12个文章下边再加载12个之类,或者开发一个滑动到底部自动加载,是否考虑呢?

    Reply
    1. @adomit

      其实有考虑过但未试过,主要是因为已经用上了pjax了,如果是ajax加载页面的话,反正我明年的主题应该是会用到的~

      Reply
  4. 你好,建议在底部添加个 返回顶部的按钮

    Reply
    1. @destined

      已经有啊~

      Reply
      1. @Chakhsu

        嗯,只是首页和独立页面没有

        Reply
        1. @destined

          其他地方感觉没必要,你试一下将这个这个bottom bar搬到 footer.php 最上面

          Reply
          1. @Chakhsu

            好的,不过搬过去后,不自动隐藏了,始终显示

            Reply
            1. @destined

              将footer.php的那段 postSharer.init(); 的判断去掉,试一下

              Reply
  5. qq

    博主,有个问题反馈?不知道是不是只有我出现:就是加密问题,输入正确答案,弹【对不起,您输入的密码错误】

    Reply
    1. @qq

      你换一个typecho,最好直接用github上那个

      Reply
  6. 感谢分享,不知道为什么,总感觉我的服务器应该不会比你的差,但是整体的速度却始终差那么一点点,好心酸

    Reply
    1. @viki

      你的归档页,忘了加字段 archive
      可能是因为 HTTP2 和 HTTPS 没配置好?

      Reply
      1. @Chakhsu

        请问您的openssl使用的是什么版本?我使用 openssl-1.1.0e 在编译过程中似乎出了一些问题

        Reply
        1. @viki

          这个,我好久没动openssl了,编译过程出错?应该是依赖的问题吧?你查看报错,将报错信息复制到Google上,一般情况下就能找到~

          Reply
          1. @Chakhsu

            是出了一些错误,原因是我忘记拷贝反向代理的配置文件,已经解决了,开启HTTP/2后速度上得到了明显的提升,还需要花点时间在SSL的优化上面,你的文章给了我很大的帮助,谢谢

            Reply
            1. @viki

              是不是访问的时候如丝滑般流畅~😁

              Reply