Skip to content

Latest commit

 

History

History
502 lines (376 loc) · 12.6 KB

README.zh-CN.md

File metadata and controls

502 lines (376 loc) · 12.6 KB

🐱 VSCat Hexo 主题

一个优雅简约的 Hexo 主题，采用深色配色方案和代码风格设计美学。

⭐ 支持主题

如果您觉得这个主题有用，请考虑在 GitHub 上给它一颗星！您的支持有助于提高项目的可见度，并鼓励开发。

GitHub stars

每一颗星都很重要，非常感激！🙏

English Documentation GitHub license Hexo Node.js 版本 CodeFactor

演示截图
演示截图

🎥 演示视频

VSCat 主题安装演示视频

点击观看 VSCat 主题安装演示视频

📋 目录

✨ 特性

  • 🌙 深色模式优化 - 专为舒适阅读体验设计
  • ☀️ 明暗主题切换 - 可选择 VS Code Dark+ 和 Light+ 主题
  • 📱 完全响应式 - 在所有设备上完美显示
  • 🚀 快速加载 - 优化性能表现
  • 🎨 简洁设计 - 极简主义和优雅的界面
  • 🔍 VS Code风格搜索 - 熟悉且强大的搜索功能
  • 📊 代码高亮 - VS Code风格的美观代码语法高亮
  • 🔧 简易配置 - 简单直观的设置
  • 📂 资源管理器风格侧边栏 - 直观导航分类和标签
  • 🌐 多语言支持 - 内置12种语言
  • 🧜🏻‍♀️ Mermaid图表支持 - 集成支持Mermaid图表
  • 📌 文章置顶 - 将重要文章固定在博客顶部
  • 🎨 自定义网站图标支持 - 多格式网站图标配置
  • 💬 多评论系统支持 - 支持 Waline 和 Disqus，自动主题切换

📊 星标历史

星标历史图表

🚀 安装

  1. 导航到您的Hexo站点的themes目录：

    cd themes

  2. 克隆此仓库：

    git clone https://github.com/B143KC47/VSC4T.git

  3. 在站点配置中设置主题：

    theme: VSC4T

必需配置

启用相对链接

为了正确部署主题，请在您的Hexo站点的_config.yml中设置以下内容：

relative_link: true

如果不启用相对链接，主题可能无法正确部署和运行。

为了正确呈现代码块，请在您的Hexo站点的_config.yml中设置以下内容：

hljs: true

否则您可能会遇到代码块渲染出空行的问题。

创建必需的页面

此主题需要以下页面。请确保创建它们：

  1. 创建分类页面： 
    hexo new page categories
    然后编辑source/categories/index.md并添加 
    ---
title: categories
layout: categories
---
  2. 创建标签页面： 
    hexo new page tags
    然后编辑source/tags/index.md并添加type: "tags" 
    ---
title: tags
layout: tags
---
  3. 创建关于页面： 
    hexo new page about
    并将您的个人信息添加到source/about/index.md 
    ---
title: about
date: 2025-02-22 22:14:44
---

一个非常好的简洁主题
  4. 创建搜索页面： 
    hexo new page search
    然后编辑source/search/index.md并添加： 
    ---
title: search
layout: search
---

🔧 主题配置

修改主题目录中的_config.yml：

# 基本信息
name: BlackCat
description: 一个受代码启发的简约暗色Hexo主题。
author: 您的名字

# 基本网站配置
url: https://b143kc47.github.io/VSC4T 
root: /VSC4T/ 

# 菜单配置
url: https://B143KC47.github.io/xxxxx # 实际URL
root: /xxxxxx/  # 如果您的网站部署在子目录中，需要配置root属性


# _config.yml
syntax_highlighter: highlight.js
highlight:
  auto_detect: true
  line_number: true
  line_threshold: 0
  tab_replace: ""
  exclude_languages:
    - example
  wrap: true
  hljs: true
prismjs:
  preprocess: true
  line_number: true
  line_threshold: 0
  tab_replace: ""

🌍 语言支持

点击展开支持的语言
  • 🇺🇸 英语 (en)
  • 🇨🇳 简体中文 (zh-CN)
  • 🇯🇵 日语 (ja)
  • 🇰🇷 韩语 (ko)
  • 🇫🇷 法语 (fr)
  • 🇩🇪 德语 (de)
  • 🇪🇸 西班牙语 (es)
  • 🇮🇹 意大利语 (it)
  • 🇷🇺 俄语 (ru)
  • 🇵🇹 葡萄牙语 (pt)
  • 🇦🇪 阿拉伯语 (ar)
  • 🇻🇳 越南语 (vi)

语言配置示例

要使用不同的语言，请在您站点的_config.yml中设置language参数：

# 日语
language: ja

# 韩语
language: ko

# 法语
language: fr

📝 博客文章设置

创建新文章

hexo new post "您的文章标题"
点击查看示例文章格式 
---
title: VSC4T - 一个深色优雅的Hexo主题
date: 2023-06-15 10:30:00
tags: [hexo, 主题, 深色模式, 响应式]
categories: [网页设计, 主题]
---

您的文章内容在这里...
  1. 这将在 source/_posts/your-post-title.md 创建一个新的markdown文件

创建置顶文章

要使文章置顶在您的主页和归档页面：

---
title: 重要公告
date: 2024-01-01 10:00:00
sticky: true
tags: [公告]
categories: [新闻]
---

您的重要内容在这里...

置顶文章将：

  • 始终显示在文章列表顶部
  • 显示固定图标（📌）指示器
  • 在其他置顶文章中保持时间顺序

网站图标配置

主题支持自定义网站图标配置，支持多种格式和尺寸以适配不同设备：

  1. 将您的网站图标文件放在主题的 source/ 目录中
  2. 在主题的 _config.yml 中配置路径：
# 网站图标配置
favicon:
  ico: /favicon.ico                    # 传统网站图标格式
  small: /favicon-16x16.png           # 16x16 PNG
  medium: /favicon-32x32.png          # 32x32 PNG
  large: /favicon-192x192.png         # 192x192 PNG (Android)
  apple_touch_icon: /apple-touch-icon.png  # 180x180 (iOS)

推荐的网站图标尺寸：

  • favicon.ico：多分辨率 ICO 文件
  • favicon-16x16.png：用于浏览器标签
  • favicon-32x32.png：用于浏览器快捷方式
  • favicon-192x192.png：用于 Android 设备
  • apple-touch-icon.png：180x180 用于 iOS 设备

自定义样式

本主题支持自定义CSS和JS。在主题配置中：

custom_css:
  - /css/mobile.css
custom_js:
  - /js/code-copy.js
  - /js/mobile-menu.js

📱 移动端优化

本主题针对移动设备进行了全面优化：

  • 响应式设计
  • 触摸友好的导航
  • 优化的阅读体验

代码高亮

本主题默认使用内置代码高亮。您可以通过以下设置进行调整：

highlight:
  enable: true
  line_number: true
  auto_detect: true

Mermaid图表支持

本主题支持Mermaid图表，您需要安装以下插件来确保其正确渲染：

npm install hexo-filter-mermaid-diagrams

搜索配置

本主题包含一个强大的搜索功能，灵感来自VS Code的搜索界面。此搜索功能允许用户：

  • 搜索所有博客文章和页面
  • 按标题、内容、标签和分类进行筛选
  • 使用键盘导航（↑↓箭头和回车键）
  • 查看高亮的搜索匹配项
  • 获取上下文感知的搜索预览

启用搜索

搜索功能默认启用。搜索索引会在您构建网站时自动生成。您可以在站点的_config.yml中自定义搜索行为：

search:
  path: search.json        # 生成搜索索引文件的路径
  field: post             # 搜索字段，可选值：post, page, all
  content: true           # 是否包含文章/页面内容
  format: html            # 解析的内容格式，可选值：html, raw

搜索键盘快捷键

  • ↑ / ↓：在搜索结果中导航
  • Enter：打开所选结果
  • Esc：清除搜索输入

搜索过滤器

搜索界面包含以下过滤器：

  • 标题
  • 内容
  • 标签
  • 分类

用户可以切换这些过滤器来缩小搜索结果范围。

💬 评论系统配置

主题现在支持多种评论系统，并在深色和浅色模式之间自动切换主题。

支持的评论系统

  • Waline（推荐）- 隐私友好，无需登录
  • Disqus - 传统评论系统

配置 Waline（推荐）

Waline 是一个隐私友好的评论系统，允许匿名评论，无需登录。非常适合想要直接评论而不需要创建账号的读者。

  1. 部署 Waline 服务器（免费选项）：

  2. 更新主题的 _config.yml：

# 评论系统配置
comments:
  provider: waline  # 选项：'waline' | 'disqus' | false
  
  # Waline 配置
  waline:
    serverURL: https://your-domain.vercel.app  # 您的 Waline 服务器地址
    lang: zh-CN  # 或 en 英文
    locale: {}  # 自定义语言配置
    emoji:
      - https://unpkg.com/@waline/emojis@1.2.0/weibo
    requiredMeta: []  # 匿名评论不需要填写任何信息
    login: disable  # 禁用登录以允许匿名评论
    wordLimit: 0  # 评论字数限制，0 为不限制
    pageSize: 10  # 每页评论数
    imageUploader: false  # 禁用图片上传

配置 Disqus

comments:
  provider: disqus
  
  disqus:
    shortname: your-disqus-shortname

功能特点

  • 🎨 自动主题切换 - 评论适应 VS Code 深色/浅色主题
  • 📱 响应式设计 - 在所有设备上完美工作
  • 🌍 多语言支持 - 遵循您网站的语言设置
  • 🚀 懒加载 - 仅在需要时加载评论
  • 🔒 隐私友好 - Waline 允许匿名评论，不跟踪用户

禁用评论

在特定文章上禁用评论：

---
title: 我的文章
comments: false
---

要全局禁用评论，请在配置中设置 provider: false。

👨‍💻 贡献者

感谢所有帮助改进这个主题的贡献者！

贡献者

注意：如果贡献者没有正确显示，他们可能需要将其贡献与GitHub账户正确关联。请检查提交是否与GitHub电子邮件关联。

如何贡献

我们欢迎所有改进VSC4T主题的贡献！以下是您可以帮助的方式：

  1. Fork仓库
  2. 创建您的特性分支：git checkout -b feature/amazing-feature
  3. 提交您的更改：git commit -m '添加一些很棒的特性'
  4. 推送到分支：git push origin feature/amazing-feature
  5. 开启Pull Request

更多详情，请阅读我们的贡献指南。

📄 许可证

本主题基于MIT许可证发布。

💬 支持

如果您有任何问题或需要帮助，请在GitHub仓库中提交问题。