给Pinghsu主题添加独立搜索页

in Tutorials with 65 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
    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
  2. 233,好烦,你的主题更新了好多东西,我自己添加和修改了很多,这样子就没办法更新了。。哎

    Reply
    1. @临时工阿k

      委屈大兄弟了~

      Reply
      1. @Chakhsu Lau

        大兄弟我表示不知道怎么办....想更新又嫌我改的东西太多不想更,但我看你修复的东西的东西也很多。啊啊啊啊,好纠结,好烦。让我狗带吧

        Reply
        1. @临时工阿k

          更新吧,别纠结了~😂

          Reply
          1. @Chakhsu Lau

            呜呜呜,我的修改谁来给改!

            Reply
            1. @临时工阿k

              安装Git,代码开发的时候做版本管理,那样后,无论改什么还是查什么都容易点~
              顺便安利一下我之前写的教程 https://www.linpx.com/p/git-tutorial.html

              Reply
              1. @Chakhsu

                te有办法实现子主题修改吗?这样可以实现自己修改的部分,不会因为主题版本更新,又得重新全部修改一次

                Reply
                1. @adomit

                  目前还未听过te的子主题~,可能需要直接修改~

                  Reply
              2. @Chakhsu

                我觉得我还是等哪天你修复比较多了我再更新主题吧

                Reply
  3. 继续支持~

    Reply
    1. @Wayne

      大兄弟,可以的👍

      Reply
  4. 资次资次😄

    Reply
    1. @Bakumon

      可以可以👍

      Reply
  5. 已同步更新

    Reply
    1. @韩小七

      可以可以。😄

      Reply
  6. 可以用到您另一个主题上吗?
    对了,反馈一个bug,现在点击右上角无法打开
    用了各种手机浏览器无反应,甚至更换ua模式也一样

    Reply
    1. @爱微语

      你看到的那个bug其实是用css写的,现在没感觉,有感觉了再去改
      然后另外一个主题,我看一下有没有时间抽空大改一下~
      谢谢,😚

      Reply