暮光博客

小心你讨厌的东西,因为你很可能被它塑造成某种形状

apollo - Typecho极简主题

PHP 70 条评论

apollo 是一款移植自 Hexo-theme-apollo 的 Typecho 极简主题,原作者是 pinggod ,主题整体风格模仿 Vue.js 官网,比较适合用来做代码笔记和技术文章分享。

我已将其移植到Typecho平台,并相对应做了一些扩展与丰富,喜欢的话就用起来吧。

下载: typecho-theme-apollo.zip  GitHub: FaithPatrick/typecho-theme-apollo

screenshot.png

特性

  • 响应式设计
  • 简约轻量,不依赖多余的第三方js库
  • 支持 Typecho 原生评论
  • InstantClick 预加载
  • Prism.js 代码高亮、Pangu.js 中英文分词

使用帮助

一、主题安装

下载并解压,请将解压得到的目录重命名为apollo,然后将其上传至usr/themes目录中。
在 Typecho 后台「控制台 - 外观」中启用即可。

二、主题外观设置

在 Typecho 后台「外观-设置外观」中,可以设置本主题的 Favicon 和 Logo,也可以设置是否开启 InstantClick 预加载。

如果要开启 InstantClick 预加载,请先到 Typecho 后台「设置 - 评论」中关闭「反垃圾保护」,否则将会出现无法正常评论的情况。

三、善用摘要分割符

主题文章列表页会默认显示由摘要分隔符<!--more-->分割的摘要,如果文章不存在此摘要分割符,则会取文章前 255 个字符作为文章摘要(无格式)。

推荐使用<!--more-->摘要分割符为文章设置摘要。在 Typecho 的 Markdown 编辑器中,可以使用CTRL + M插入摘要分隔符,或直接点击编辑器上方的摘要分割小图标。

四、代码高亮的使用

主题集成了 Prism.js ,需要指定代码高亮的语言(此处用 Python 作为例子),Markdown 用法是:

```python
filename=open('sampleFile.txt')
filelines=filename.readlines()
filename.close()
```

高亮效果如下

filename=open('sampleFile.txt')
filelines=filename.readlines()
filename.close()

五、修改导航栏链接

header.php文件的39行到53行,相信聪明的你知道怎么更改,唯一要注意的是别忘了那条关于 active 类的判断语句。

六、归档页面与友情链接页面添加

在 Typecho 后台新建独立页面,在自定义模板中选择archives,正文留空,然后保存,即可添加归档页面。
同理,自定义模板选择links,即可添加友情链接页面,正文推荐使用「无序列表」来展示友情链接。

七、在主题中使用 APlayer

首先,下载 APlayer Typecho Plugin with HTTPS 插件并进行安装。
如果你没有开启 InstantClick 预加载,那一切工作到此就结束了,你已经可以正常的使用 APlayer。
如果你开启了 InstantClick 预加载,你还需要对主题的footer.php进行一些修改:
找到footer.php18行,将

<script data-no-instant>
        InstantClick.on('change', function (isInitialLoad) {
            if (isInitialLoad === false) {
                if (typeof Prism !== 'undefined') Prism.highlightAll(true, null);
            }
        });
        InstantClick.init();
</script>

改为

<script data-no-instant>
        if (!window.audios) {
            audios = [];
            for (var i = 0; i < APlayers.length; i++) {
                audios[i] = APlayers[i].audio;
            }
        }
        InstantClick.on('change', function (isInitialLoad) {
            for (var i = 0; i < APlayers.length; i++) {
                audios.push(APlayers[i].audio);
            }
            for(var i = 0; i < audios.length; i++) {if(audios[i]){audios[i].pause()}};
            if (isInitialLoad === false) {
                if (typeof Prism !== 'undefined') Prism.highlightAll(true, null);
            }
        });
        InstantClick.init();
</script>
<script>
        var APlayerOptions = [];
</script>

修改完毕后,APlayer 就可以与 InstantClick 完美兼容了。

更新历史

1.0.2 (2017-08-18)

  • 移动端h3样式修正
  • 归档页面bug修复

1.0.1 (2017-08-02)

  • 代码高亮、h3标题样式修改
九月近况
评论区
选择表情选择表情
  1. 刚学习怎么做网站,这个主题真舒服! icon_redface.gif

    回复
  2. mick

    请问 typecho 写的 md 在那个文件夹。还是直接 存在 数据库

    回复
    1. @mick

      typecho写的文章都是直存数据库的

      回复
      1. mick
        @大袋鼠

        请问 怎么 导入外部 文章 到数据库

        回复
        1. @mick

          外部文章是什么文章?md文件?那可能需要自己写脚本迁移。

          回复
  3. 感谢分享!主题用起来了,非常漂亮,顺便混个脸熟 icon_mrgreen.gif

    回复
    1. @胡家小子

      感谢支持,改得很漂亮~

      回复
  4. Ubz

    请问如何添加友情链接呢

    回复
    1. @Ubz

      友情链接页面里使用无序列表,里面放友链即可。

      回复
  5. 感谢博主的辛苦付出,这款单栏的主题足够简单,旦又不会乏味,看起来很舒服,阅读体验一流。 icon_redface.gif
    我写了篇文章来介绍这款主题:
    https://www.npc.ink/13137.html

    回复
    1. @Muze

      感谢推荐 icon_cool.gif

      回复
    2. @Muze

      https://www.npc.ink/13137.html

      回复
  6. 音乐很好

    回复
  7. 主题真简洁

    回复
  8. 以前typecho经常被吐槽,现在感觉用typecho的人挺多的。

    回复
  9. 新手1

    为什么我安装Theme后无法评论呢? icon_confused.gif

    回复
    1. @新手1

      如果要开启 InstantClick 预加载,请先到 Typecho 后台「设置 - 评论」中关闭「反垃圾保护」,否则将会出现无法正常评论的情况。

      回复
  10. 这个音乐插件是我喜欢的,不过呢,刚才把评论从第1页切换到第2页,音乐停止播放了。

    回复
    1. @林海草原

      因为评论分页并不是 ajax 哦,所以会停止。

      回复
  11. 为什么换上主题后,点击文章页是空白的? icon_biggrin.gif

    回复
    1. @老黄

      这个不清楚啊,可能是PHP版本问题?

      回复
      1. @大袋鼠

        我也遇到这个问题了,可以点击我的主页试试看。 icon_eek.gif

        回复
        1. @han大叔

          文章页空白的问题可能是因为主题内某个函数和PHP版本不兼容吧,回头我排查一下哦。
          排查到问题会进行修复并邮件通知你。

          回复
          1. @大袋鼠

            谢谢

            回复
            1. @han大叔

              可以提供一下你的环境吗?服务器什么系统?PHP什么版本?Typecho版本?

              回复
  12. 这主题不错,我喜欢简洁干净利落的!

    回复
  13. 7s7x

    你好,很喜欢你的主题,可是有些疑问,怎么加入“返回顶部”,还有“分类”“标签”怎么才能用起来? icon_cry.gif icon_cry.gif

    回复
    1. @7s7x

      当时都没有考虑过这个问题,以后版本可能会加吧… icon_confused.gif

      回复
  14. 哈哈 “偷了”一点评论样式

    回复
    1. ..0
      回复
    2. @Loekman

      啊哈对呀。

      回复
  15. 极简主题写作很有感觉噢 icon_redface.gif

    回复