Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/Haojen/hexo-theme-Claudia
📌 Concisely designed & easy to config, match dark mode
https://github.com/Haojen/hexo-theme-Claudia
blog claudia dark-mode dark-theme haojen hexo hexo-theme theme
Last synced: 16 days ago
JSON representation
📌 Concisely designed & easy to config, match dark mode
- Host: GitHub
- URL: https://github.com/Haojen/hexo-theme-Claudia
- Owner: Haojen
- License: mit
- Created: 2017-05-27T14:06:19.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2023-12-11T05:44:37.000Z (7 months ago)
- Last Synced: 2024-05-20T09:18:17.794Z (about 2 months ago)
- Topics: blog, claudia, dark-mode, dark-theme, haojen, hexo, hexo-theme, theme
- Language: JavaScript
- Homepage: https://haojen.github.io/Claudia-theme-blog/
- Size: 2.7 MB
- Stars: 818
- Watchers: 8
- Forks: 135
- Open Issues: 13
-
Metadata Files:
- Readme: README-CN.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Lists
- awesome-stars - hexo-theme-Claudia
- awesome-stars - hexo-theme-Claudia
- awesome-starred - Haojen/hexo-theme-Claudia - 📌 Concisely designed & easy to config, match device dark mode, 90+ Lighthouse scoring (others)
README
Claudia
设计简洁 & 轻松上手, 跟随系统外观自适应, 90+ Lighthouse 得分
简体中文 |
English
## 更新日志
[最近更新 11.06.2022](CHANGELOG.md)
## 使用
### 依赖下载
进入到博客项目根目录下运行：
```bash
#必要
npm install hexo-renderer-pug
npm install hexo-renderer-sass
npm install hexo-generator-search
#选择性安装
# 如果需要添加订阅功能
npm install hexo-generator-feed
# 流程图功能
npm install hexo-filter-flowchart --save
# Emoji
npm install hexo-filter-github-emojis --save
# 搜索功能
npm install hexo-generator-search --save
# 数学公式
npm install hexo-renderer-mathjax --save
```
## 用户信息配置
注意: 必须在主题的 `_config.yml` 中配置以下信息, 而非博客根目录下的 `_config.yml`
``` yaml
user:
name:
avatar: /images/avatar.jpg
location:
description:
footnotes:
# config you SNS
social:
zhihu:
twitter:
facebook:
linkedin:
instagram:
github: haojen
# 页面 icon
favicon: images/favicon.ico
# 友情链接
friend_links:
- title: Link1
link: https://www.link1.test.com/
```
### 配置导航栏右上角菜单项
```yaml
# main menu navigation
menu:
Home: /
About: /about
Archives: /archives
```
### 边栏部件配置
```yaml
widgets:
- tag
- archive
- category
- recent_posts
```
### 使用评论系统
#### 1. Utteranc
对应文档地址: https://utteranc.es/
对应项目地址: https://github.com/utterance/utterances
```yaml
comment_utteranc:
enable: true
repo: Haojen/myBlogRepo # change to your blog repo
```
#### 2. Valine
使用文档： https://valine.js.org/quickstart.html
```yaml
comment_valine:
enable: true
appId:
appKey:
```
### 夜间模式设置
```yaml
# 1.light
# 2.dark
# 3.auto (默认，跟随系统外观)
appearance: auto
```
## 配置代码高亮
Claudia 自带代码高亮，但在正常使用前，需要您在根目录下 `_config.yml`关闭hexo自带的高亮模块，关闭后记得 `hexo clean` 清理缓存
```yaml
highlight:
enable: false
```
## 统计
配置谷歌和百度统计
```yaml
#Baidu Analytics**
ba_track_id:
#Google Analytics
ga_track_id:
ga_domain:
```
## 创建 About 页面
在博客根目录下的 `source` 文件夹里创建一个 `about` 文件夹, 然后打开该文件夹, 新建一个 `index.md`, 打开, 将下面这段文本复制到 `index.md` 里保存
```yaml
---
title: about
date: 2017-05-31 10:05:56
layout: about
---
```
## 范例项目展示
https://github.com/Haojen/Claudia-theme-blog
## 最后
如果遇到任何问题或反馈建议，请发起 issue
## 支持我做的更好, 请我喝杯饮料 🥤️
## 其他我开发的项目
- [Hexo-theme-Anisina](https://github.com/Haojen/hexo-theme-Anisina)
- [Vimkey - 一个浏览器插件，让你用键盘控制浏览器](https://github.com/Haojen/vimkey)
- [PlanetTab - 一个非常酷的3D动态星球浏览器新标签页](https://github.com/Haojen/planet-tab)
## License
MIT © [HAOZHEN MA](http://haojen.github.io)