关于本博客及主题说明最終更新日時：2024-10-18

本博客项目是基于 Hexo 引擎进行搭建的，并使用个人研发设计的主题进行显示，在主题的设计思路上也参考了一些如腾讯文档等公开资源。设计这个博客主题的原本目的时定制一个属于自己的 style，我自己的博客历史也是兜兜转转，既使用过 CSDN、博客园等公开博客，也使用过有道云笔记、语雀等笔记平台，甚至还使用 Java + Vue 开发过一个较为完整的博客系统，但辗转来去，最终还是回归了 Hexo，并在某种“返璞归真”的心态下，想开发一个美观又简洁的博客主题，因此有了 hexo-theme-tdoc。

因为这个主题目前仍有一小部分内容是直接嵌入在 ejs 模板中的，想来没法分享给他人直接使用，所以就暂时不推送出去，如果有小伙伴对我这个主题感兴趣的话，可以在本博客任意文章下留言。

主题说明

基本说明

关于 banner：为了突出文本阅读的体验，设计时去除了 banner 图的渲染，拒绝过多的无意义图片显示。
关于首页：封面页作为外观页，不展示内容，实际主页为 /series，并使用文章的分类层级作为探索路径。
关于搜索：本博客主题搜索功能基于 algolia 开发，暂未集成本地搜索功能。
关于评论：原计划集成 Gitalk，可以方便头像显示和源文件追溯，但考虑到一些网络环境下访问不到 Github，所以换用了 waline。
关于图片预览：集成 viewer.js。
关于代码渲染：代码渲染集成自 prism.js，并自定义部分样式。

自定义语法

卡片效果

您可以通过 JSON 定义卡片内容显示，其渲染效果如下：

Django 网站全栈开发教程
提供快速使用API Explorer、TCCLI 及SDK工具完成接口调用的指引，适于初次接触腾讯云产品的开发者。
Python 基础知识全通关
提供了在线调用、签名验证、SDK 代码生成和快速检索接口等能力，能显著降低使用云 API 3.0的难度。
Django 网站全栈开发教程
提供快速使用API Explorer、TCCLI 及SDK工具完成接口调用的指引，适于初次接触腾讯云产品的开发者。
Python 基础知识全通关
提供了在线调用、签名验证、SDK 代码生成和快速检索接口等能力，能显著降低使用云 API 3.0的难度。

源代码及语法请查看示例文件：/hexo-theme-tdoc/_source/series/index.md。
内容折叠

折叠内容基本语法为：以 +++(success|info|warning|danger) 开头，间隔空格之后书写标题，然后换行书写折叠内容，最后以 +++ 收尾，示例如下：

折叠内容的标题，点击显示内容

折叠内容（默认会折叠），点击标题可以切换折叠内容的显示和隐藏。

同时也需要注意换行，避免折叠内容与特殊语法紧贴导致无法渲染。
```
+++success 折叠内容的标题，点击显示内容

折叠内容（默认会折叠），点击标题可以切换折叠内容的显示和隐藏。

同时也需要注意换行，避免折叠内容与特殊语法紧贴导致无法渲染。

+++
```
高亮内容块

高亮内容块基本语法为：以 :::(success|info|warning|danger)( no-icon) 开头，并以 ::: 收尾，示例如下：

高亮内容块预定义了四种风格，并内容了默认的内容块图标，可以通过 no-icon 指定不显示图标。

同时也需要注意换行，避免折叠内容与特殊语法紧贴导致无法渲染。
```
:::danger no-icon

高亮内容块预定义了四种风格，并内容了默认的内容块图标，可以通过 `no-icon` 指定不显示图标。

同时也需要注意换行，避免折叠内容与特殊语法紧贴导致无法渲染。

:::
```

内容嵌入

文档中需要嵌入内容使，直接声明 iframe 即可，主题中为嵌入内容预设样式如下：

.markdown iframe {
    border: none;
    width: 100%;
    height: 550px;
    border-radius: 10px;
}

墨刀

在文档中嵌入墨刀需要先行获取嵌入连接，可以参考官方给出的这篇文章。
Codepen

如果需要在文档中嵌入 Codepen，您需要获取原预览地址，例如 https://codepen.io/afc163-1472555193/pen/oNXqWGP，将其中的 /pen/ 替换为 /embed/ 即可。
Bilibili

如果需要再文档中嵌入 B 站视频，例如嵌入 <iframe src="https://player.bilibili.com/player.html?aid=55895675&autoplay=0"></iframe>，其预览效果如下：
关于嵌入高度调整

由于 iframe 预设了通用网页的合适高度，对于部分嵌入内容，例如网易音乐等，可以自行调整 style 属性。

其他文本渲染效果，请直接预览示例文章。

关于本博客及主题说明最終更新日時：2024-10-18

主题说明

基本说明

自定义语法

内容嵌入

Press ESC to close