Typecho仿百度响应式主题Xaink

关于

因为想学习响应式布局练练手,所以萌生了写一个typecho主题的想法,而我正好在使用百度,何不就做个和百度一样的主题

Github:https://github.com/awinds/xaink

说明:https://xiaoa.me/archives/theme_xaink.html

Demo:https://www.xa.ink

screenshot2.png

特点

  • 仿百度。
  • 响应式设计,支持明亮和黑暗模式。
  • 文章列表支持缩略图(字定义thumbnail),右侧悬停。
  • 支持评论表情OwO
  • 文章和页面直接支持点赞和取消,不使用插件。
  • 支持配置作者个人社交账号显示。
  • 支持配置是否显示文章版权信息。
  • 支持归档页面、友链页面(Links插件支持)、时间线页面。

插件配合

  • Links插件,可直接生成友链页面
  • Sitemap插件,可生成网站地图
  • Stat插件,可显示文章浏览人数
  • CodeHighlighter插件,可高亮代码
  • Sticky插件,可置顶文章,需做以下修改配合(使用plugins下面带的插件已修改)
    //增加字段,外面可以自定义判断 
    $sticky_post['istop'] = 1;

安装

直接下载 zip 源码->解压后移动到 Typecho 主题目录->改名为xaink->启用。

设置

主题设置页面位置:Typecho 后台->控制台->外观->设置外观。

技术栈

License

Open sourced under the MIT license.

页脚带上Theme by Xaink,谢谢!

更新说明

1.5.2

  1. 修正page页面无法生成导读的问题。
  2. 友链的a标签rel=nofollow由插件控制。

1.5.1

  1. 优化正文内容表格中图片过宽问题和超链接问题。
  2. 优化评论回复和取消回复点击问题。
  3. 优化版权链接换行问题。

1.5.0

  1. 修改代码过长没自动换行的问题。
  2. 如果使用高亮插件,要解决换行问题,要改插件中样式pre[class*="language-"]white-space值为pre-wrap
  3. 修正暗样式问题。

1.4.9

  1. 增加友链的页面插件下载地址。
  2. 打包配套插件到github,目录plugins,可选择使用。

1.4.8

  1. 分类目录显示控制数量,增加更多下拉显示一级目录。
  2. 控制台->外观->设置外观->目录显示的分类数。
  3. 优化文章导读的高亮显示颜色。
  4. 优化评论提示显示效果。

1.4.7

  1. 分类目录增加自定义设置icon显示(svg)。
  2. 控制台->外观->设置外观->分类对应图标SVG。

1.4.6

  1. 评论表情使用Emoji问题修复(在非utf8mb4下不使用Emoji)。
  2. 修改小设备上按钮显示问题。
  3. 调整手机设备上回复评论显示效果。

1.4.5

  1. 替换icons的<i>直接使用svg,省掉字体的加载。

1.4.4

  1. 修改网站描述写太长,头像变形问题。
  2. 修改php8环境下,搜索界面500错误的bug。
  3. 修改文章中标签支持换行显示。

1.4.3

  1. 优化tabler字体预加载,用户信息图标直接使用svg。

1.4.2

  1. 优化评论锚点和图片懒加载。

1.4.1

  1. 优化评论显示效果。

1.4

  1. 文章和页面右侧减少了一栏目,增加了文章导读和相关推荐。
  2. 修复了首次点赞时不成功的问题。

1.3

  1. 修复QQ头像显示问题。
  2. 修改个人区域签名和简介显示问题。

1.2.1

  1. 修复移动浏览器上左侧菜单无法滚动的问题。

1.2

  1. 修改归档页面按年显示统计,不再显示文章,只显示按年再按月统计。
  2. 增加时间线页面,按年显示文章,当年显示,其它折叠。
  3. 修复一些小问题。

1.1

  1. 修改在响应式移动适配时的问题。
  2. 修改右侧栏标题和评论过长没有换行的问题。
  3. 增加了文章和页面新增和编辑直接支持缩略图和来源页的字段。
  4. 增加了可配置列表分类,类似专题或小说,菜单子分类不下拉,点击进去直接显示子分类的列表(专题名),再点子分类(专题名)进去直接显示标题目录(专题目录),可去看demo小说分类,不配置不影响正常使用。
  5. 修改了分页显示的一些问题。

1.0

  1. 手搓typecho主题
  2. CSS写的有问题,没有规划好,写到哪改到哪,没有做过明亮黑暗CSS,后续有时间再优化。
版权属于:小A 本文链接:https://xiaoa.me/archives/theme_xaink.html 转载申明:转载请保留本文转载地址,著作权归作者所有。

评论 26

  1. Jdeal

    好有趣,哈哈,不错不错~

    7 天前 - 中国江苏省无锡市电信
  2. 蜡客小生

    😀又成熟了一个版本。

    11 天前 - 中国广西玉林市移动
  3. 王航
    王航

    有点意思,进来突然懵了一下😂 好看

    12 天前 - 中国广东省广州市电信
  4. 蜡客小生

    😊😊我这边更新好啦。嘿嘿

    10-08 - 中国广西玉林市移动
  5. router

    感谢分享!

    10-07 - 中国香港电讯盈科有限公司
  6. 宝宝起名

    博主网站用的哪个程序啊,太喜欢了!

    08-28 - 中国移动
    1. 小A
      @宝宝起名

      typecho

      08-28 - 中国广东省深圳市电信
  7. 蜡客小生

    加载资源有点卡噢。。尽量资源本地化哇。。

    08-27 - 中国广西桂林市移动
    1. 小A
      @蜡客小生

      icon要加载字体有点慢,实际上也没用多少icon,可以考虑直接使用svg,不再引用更多的字体。

      08-27 - 中国广东省深圳市电信
      1. 蜡客小生
        @小A

        ╮(╯▽╰)╭ 每次浏览网站和切换浏览器标签都要“顿”一下,难受ING。。。

        08-27 - 中国广西桂林市移动
        1. 小A
          @蜡客小生

          升级了,升级到1.4.5直接去掉了icons使用,不用下载字体,等待图标加载。

          08-28 - 中国广东省深圳市电信
          1. 蜡客小生
            @小A

            😀没想到是utf8mb4引起的问题。一般用TYPECHO前期都会把UTF8改utf8mb4的说。

            08-30 - 中国广西桂林市移动
          2. 小A
            @小A

            😊可以emoji了!

            08-30 - 中国广东省深圳市电信
  8. 肖寒武

    被高仿百度吓到,提个建议,文章页面可以仿百度知道的样式,更吓人。

    04-25 - 美国Akamai科技公司CDN网络节点
    1. 小A
      @肖寒武

      文章页面都自己编辑的,不太好控制,慢慢来,有空再更新

      04-25 - 中国广东省深圳市电信
  9. 随风落叶

    很棒,支持支持

    04-23 - 中国山东省临沂市联通
  10. 湘铭呀!

    04-23 - 加拿大
  11. 蜡客小生

    哎呀。不错哇。威武!必须支持!

    04-22 - 中国广西桂林市移动
    1. 小A
      @蜡客小生

      欢迎试用发现问题

      04-22 - 中国广东省深圳市电信
  12. 泽泽

    这个有意思,收藏了改天汇总到我主题站

    04-22 - 中国辽宁省本溪市电信
    1. 小A
      @泽泽

      感谢,彩蛋插件也收藏了

      04-22 - 中国广东省深圳市电信
  13. 永恒末匕

    我来学习啦,Demo好像看不了

    04-22 - 中国广西南宁市移动
    1. 小A
      @永恒末匕

      可以用啊,我刚试了可以打开

      04-22 - 中国广东省深圳市电信
  14. 刘郎

    早啊

    04-22 - 中国贵州省黔南州惠水县移动
没有更多啦