Ankia-Theme is a blog theme based on the sharing feature of Trilium, which can help you create a basic and aesthetically pleasing blog website.
Ankia-Theme是一个基于Trilium分享功能的博客主题，通过此主题你能实现在Trilium中创建一个博客站点！
主题预览：东东的小黑盒
中文使用指南：点我跳转
Compared to the built-in sharing feature of Trilium, this theme has the following features:
- Having a complete blog system
- The blog interface is simple and elegant
- Perfectly adapted for mobile devices
- Optimized reading experience for the main content
- Added table of contents for the main content
- Supports one-click publishing of blogs
- Supports code highlighting
To import the theme into Trilium, follow these steps:
- Right-click below the note where you want to store your blog.
- Select "Import into note".
- In the pop-up window, select the zip package downloaded in step one and uncheck "Safe import" under the "Options" section.
- Click "Import".
If the import is successful, the notes with the following directory structure will appear in your notes:
- My blog
- Moments
- Article categories
- Recommended reading
- Timeline
- Friends' links
- About
- Unpublished
- Ankia Theme
Note: These notes form the basic structure of a blog. Please do not delete them.
Turn on the "Shared" switch of my blog notes to access the blog interface preview.
All configurations for the blog are stored as Trilium attributes. Modify the values of the following attributes in the "My Blog" note to configure your blog:
#siteName = xxx- The name of your blog, which will be displayed in browser tabs and navigation bars.#bloggerName = xxx- The nickname of the blogger, which will be displayed in the blogger information on the right side.#blogStartTime = xxx- The start time of your blog, which will be displayed as the running time in the footer.#motto = xxx- A motto or quote that will be displayed in the blogger information on the right side.
Replace the "Blogger Avatar" image under "My Blog → Ankia-Theme → imgs" with your own avatar.
Note: When replacing, please select "Upload new revision" and do not modify any titles or attributes. The same applies to other image configurations mentioned below.
Replace the "Blog Logo" image under "My Blog → Ankia-Theme → imgs" with your own logo.
This theme supports displaying several social information, which are disabled by default. Fill in the corresponding attributes and homepage links to automatically enable them:
#githubLink = xxx- GitHub#mailLink = xxx- Email#zhihuLink = xxx- Zhihu (a Chinese Q&A platform)#sspai = xxx- Sspai (a Chinese tech media platform)#doubanLink = xxx- Douban (a Chinese social networking service)#netEaseCloudLink = xxx- NetEase Cloud Music (a Chinese music streaming service)#bilibiliLink = xxx- Bilibili (a Chinese video sharing website)
This theme uses the Twikoo commenting system by default. Before configuring it, you need to deploy Twikoo. Refer to the Twikoo documentation for deployment instructions. After deployment, add the following attributes:
#enableTwikoo- Enable Twikoo comments.#envId = xxx- The environment ID of Twikoo.
#enableVisitors- Enable counting article views.
To enable the appreciation functionality, add the following attribute:
#enableReward
After enabling appreciation functionality, replace the "Alipay QR Code" and "WeChat Pay QR Code" images under "My Blog → Ankia-Theme → imgs" with your own payment QR codes.
#enableTravellings- Display a travel icon in the navigation bar.#enableForeverblog- Display a "Ten Years Pact" icon in the navigation bar.
Modify the myInfo variable in the "fLinks.js" file under the "Friends' Links" note with your own blog information:
const myInfo = {
"title": "<Blog Name>",
"link": "<Blog Link>",
"img": "<Blogger Avatar>",
"des": "<Blog Description>"
}
Similarly, in the "fLinks.js" file, add entries to the fLinks variable following the format:
"<Number>": {
"title": "<Blog Name>",
"link": "<Blog Link>",
"img": "<Blogger Avatar>",
"des": "<Blog Description>"
}
Creating blog categories is very simple. Just create sub-notes under the "Article categories" note, and then assign the following attributes to that note:
#categoryName = xxx- This attribute is used by the "blogStateChange" script to find the corresponding category. It is recommended to keep it consistent with the category title.#sorted=date #sortDirection=desc- (Optional but recommended) Sort blog posts by publication date in descending order.
You can write your blog post anywhere in your note repository. The only thing you need to do before writing a new blog post is to select the "Blog Post Template".
Here's how to create a new blog post:
- Right-click on any parent note where you want to store your blog post (e.g., Today's Diary).
- Move your mouse over "Insert child note".
- Select "Blog Post Template".
A blog post has four basic attributes:
- Category - The category to which the blog post belongs. It should match the value of
#categoryNamefor the corresponding category. - Tags - Tags for the blog post. Multiple tags can be added.
- Header Image - The preview image displayed on the homepage for the blog post. You need to provide a URL or image hosting link.
- Time - The publication time of the blog post.
Publishing a blog post is simple. Just click the "Publish" button, and it will be published automatically. If you want to unpublish a blog post, simply uncheck the "Publish" option.
To pin a blog post, add the following attribute to the desired blog post. This will make it appear at the top of the "Timeline" and its corresponding category.
#blogPostTop
Code highlighting
This theme comes with the PrismJS code highlighting plugin, which currently supports HTML, XML, SVG, MathML, SSML, Atom, RSS, CSS, JavaScript, EJS, Go, C, C++, Python, ini, Bash, Json, Shell, SQL, TypeScript and YAML.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent