Loading...

关于本博客及主题说明

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

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

主题说明

基本说明

  • 关于 banner:为了突出文本阅读的体验,设计时去除了 banner 图的渲染,拒绝过多的无意义图片显示。

  • 关于首页:封面页作为外观页,不展示内容,实际主页为 /series,并使用文章的分类层级作为探索路径。

  • 关于搜索:本博客主题搜索功能基于 algolia 开发,暂未集成本地搜索功能。

  • 关于评论:原计划集成 Gitalk,可以方便头像显示和源文件追溯,但考虑到一些网络环境下访问不到 Github,所以换用了 waline

  • 关于图片预览:集成 viewer.js

  • 关于代码渲染:代码渲染集成自 prism.js,并自定义部分样式。

自定义语法

  1. 卡片效果

    您可以通过 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

  2. 内容折叠

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

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

    折叠内容(默认会折叠),点击标题可以切换折叠内容的显示和隐藏。

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

    +++success 折叠内容的标题,点击显示内容
    
    折叠内容(默认会折叠),点击标题可以切换折叠内容的显示和隐藏。
    
    同时也需要注意换行,避免折叠内容与特殊语法紧贴导致无法渲染。
    
    +++
  3. 高亮内容块

    高亮内容块基本语法为:以 :::(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;
}
  1. 墨刀

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

  2. Codepen

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

  3. Bilibili

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

  4. 关于嵌入高度调整

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

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

Press ESC to close