Apollo is a portable Hexo-theme-apollo The Typecho minimalist theme, originally written by pinggod The overall theme style imitates Vue.js official website, which is more suitable for making code notes and sharing technical articles.

I have migrated it to the Typecho platform and made some corresponding extensions and enrichment. Use it if you like.

Download: typecho-theme-apollo.zip 　 GitHub： FaithPatrick/typecho-theme-apollo

characteristic

• Responsive design
• Simple and lightweight, independent of redundant third-party js libraries
• Support Typecho native comments
• InstantClick preload
• Prism.js code highlighting, Pangu.js Chinese and English word segmentation

Using Help

1、 Theme installation

Download and unzip. Please rename the unzipped directory to apollo , and upload it to usr/themes Directory.
Just enable it in the Typecho background Console Appearance.

2、 Theme appearance settings

In the Typecho background "Appearance - Set Appearance", you can set the Favicon and Logo of this theme, or you can set whether to enable Instant Click preload.

3、 Make good use of summary separator

The topic article list page will display by default the summary separator <!-- more--> If the article does not have this abstract separator, the first 255 characters of the article will be taken as the article summary (unformatted).

Recommended <!-- more--> The summary separator sets the summary for the article. In the Markdown editor of Typecho, you can use CTRL + M Insert a summary separator, or directly click the small icon for summary segmentation above the editor.

4、 Use of code highlighting

Themes integrate Prism.js , you need to specify the code highlighted language (Python is used as an example here). Markdown usage is:

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

The highlight effect is as follows

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

5、 Modify navigation bar links

stay header.php Filed thirty-nine Line to fifty-three OK, I believe you know how to change it. The only thing you should pay attention to is that you should not forget the judgment statement about the active class.

6、 Add archive page and friendship link page

Create a new independent page in the background of Typecho, and select from the custom template archives , leave the body blank, and then save to add an archive page.
Similarly, user-defined template selection links , you can add a friendship link page. It is recommended to use the "unordered list" for the text to display friendship links.

7、 Using APlayer in themes

First, download APlayer Typecho Plugin with HTTPS Plug in and install it.
If you do not enable InstantClick preload, all work is over. You can use APlayer normally.
If you enable InstantClick preload, you also need to footer.php Make some modifications:
find footer.php Of eighteen Line, set

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

Change to

 <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>

After modification, APlayer can be perfectly compatible with InstantClick.

Update History

1.0.2 (2017-08-18)

• Mobile terminal h3 style correction
• Archive page bug repair

1.0.1 (2017-08-02)

• Code highlighting, h3 title style modification