mirror of
https://github.com/hugo-fixit/FixIt.git
synced 2026-08-26 08:18:55 +00:00
Compare commits
285 Commits
v0.4.0-beta
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
| 57f98b48c5 | |||
| 1d07b40d08 | |||
| 47b7c969f1 | |||
| 152e7fa5a2 | |||
| df90a0eb96 | |||
| 5f1e79f49c | |||
| 8b6806bbf3 | |||
| c65852d882 | |||
| 224621b114 | |||
| e0940bd4d3 | |||
| 8782b46f53 | |||
| 9f378691f1 | |||
| 9f4d33a670 | |||
| 3c449a9017 | |||
| 65e9f2ff92 | |||
| 54fe7bdc83 | |||
| 0bc1862853 | |||
| b680d609a1 | |||
| a9c29b1641 | |||
| 7bdd0c5869 | |||
| 8d7703a418 | |||
| da2f085969 | |||
| e3acdb9732 | |||
| ece55d0d36 | |||
| a73416e2be | |||
| 9e2f388022 | |||
| 610fa1d561 | |||
| a5a7b98c95 | |||
| a5d24f395e | |||
| f5509e5b82 | |||
| d35dd6a120 | |||
| 5322a15ceb | |||
| a254e10136 | |||
| 15b415ff2e | |||
| 2c0b48370b | |||
| e07eefd506 | |||
| 7a28234de3 | |||
| 0d6af76f06 | |||
| 10da1f731f | |||
| bfee4041d6 | |||
| 78f1a8583a | |||
| 3e4cb8d699 | |||
| b274b1b33b | |||
| 06419f7968 | |||
| 3326ea4515 | |||
| 5811b21f02 | |||
| 54fb90388f | |||
| 3242dbf2fb | |||
| 966ace5a66 | |||
| 20c0997cc5 | |||
| 69920e0140 | |||
| d81d1a0ff4 | |||
| e6625fb118 | |||
| 405024989c | |||
| 874337f7d1 | |||
| b95a29e6e4 | |||
| 6188165504 | |||
| e4bd5731df | |||
| 391d2ecd56 | |||
| b5419ef704 | |||
| a2d756777f | |||
| 43c439eee0 | |||
| e58bdd4db5 | |||
| 5453d3d136 | |||
| c86566fa8e | |||
| ed451351d6 | |||
| 8efdce73d1 | |||
| c6b5c825ed | |||
| a96ba665ac | |||
| 52ab989c96 | |||
| 9da44f0885 | |||
| 0f35108699 | |||
| 658f03d1e5 | |||
| bfef6c5359 | |||
| 069ddd1c84 | |||
| daa075340e | |||
| 743ecd20d0 | |||
| 76530ceb16 | |||
| 5ee8272b57 | |||
| 994a5d45b5 | |||
| 575499d7db | |||
| 3c2fb3ec54 | |||
| 1012fdc240 | |||
| d076ebf2e1 | |||
| ea140e35f8 | |||
| fb0c00e274 | |||
| 279021d591 | |||
| 8af8e806d7 | |||
| e30b9db23b | |||
| a5f362f5ff | |||
| 5cad4d3df9 | |||
| 47247e01c5 | |||
| 4b3f33f35a | |||
| db85dcbaf1 | |||
| b7db52eb7e | |||
| 17d7bc1781 | |||
| 6f83bc6da5 | |||
| 01eadc4356 | |||
| 68d9a352c3 | |||
| a696f3b1bd | |||
| 6070061b6b | |||
| 47ebabd677 | |||
| 43dd1c72d9 | |||
| a7bae572a1 | |||
| c057a0d578 | |||
| 9ed063f32d | |||
| 53620404e4 | |||
| c7ed62c51e | |||
| f7ec3e374d | |||
| 5862699d46 | |||
| 031691a1e4 | |||
| b8ec5f16d7 | |||
| f5b030b4eb | |||
| 03ca90b49f | |||
| eeff00f8c7 | |||
| 17164f42d0 | |||
| 03d81f0785 | |||
| a4a0eb1f3b | |||
| 76f809794f | |||
| 20f59e0fe2 | |||
| bc3fb3a717 | |||
| ddbf47df7f | |||
| ba369aec14 | |||
| 0fe8e100df | |||
| 4a60d805fa | |||
| a7cf34367d | |||
| 5b43c2b6a3 | |||
| 038f602bc5 | |||
| 7cab906676 | |||
| 0c30f4c57d | |||
| f78e5b9e8f | |||
| aa3b591846 | |||
| 14a965f9c1 | |||
| f76b6a1f1c | |||
| 4ffd531d63 | |||
| 78778dad08 | |||
| a4fcc5ed59 | |||
| 47299db5d3 | |||
| a9b380cada | |||
| f764563358 | |||
| a7503c446c | |||
| 76de476b41 | |||
| 91d483a808 | |||
| cd7b1e70b8 | |||
| 819051eebf | |||
| ebcf22d2bc | |||
| ed8ec5c2c8 | |||
| caf2b08013 | |||
| a82d8c3b87 | |||
| d59bb2de6b | |||
| ebf1e7e109 | |||
| ee299ce372 | |||
| f544826d9d | |||
| 57206e5224 | |||
| 16e966095f | |||
| 97ddee080f | |||
| f91154744e | |||
| a2d4b465f7 | |||
| e68200a9e0 | |||
| 4e0c3d8fc4 | |||
| 12187b0856 | |||
| e4580190e9 | |||
| 26b0556b9e | |||
| e90a249375 | |||
| 55b80953a1 | |||
| 799618fd3e | |||
| dd6d320654 | |||
| de6894b817 | |||
| 9c04cfd47a | |||
| e68bdb374b | |||
| 502e427a0c | |||
| cedff8610b | |||
| 530bc6cef6 | |||
| 5e6e2904ff | |||
| e68d10d7d9 | |||
| 5fe681ccc5 | |||
| f9c7e1d991 | |||
| 95664509a0 | |||
| 4158ebffbd | |||
| 95644808a1 | |||
| 295717a52d | |||
| 1b3490ba3a | |||
| 77bb00ce5c | |||
| 09e08d0772 | |||
| b406a569f8 | |||
| 9ada69ed71 | |||
| 4982231d5f | |||
| 9e400518ad | |||
| 1e0d1affaf | |||
| 3dd16e691f | |||
| 557a59d7fd | |||
| b0a17196c1 | |||
| aef8eaf936 | |||
| 5f100a6cca | |||
| 75ee1624bd | |||
| d45f6b1550 | |||
| 673be1e8c0 | |||
| e527289140 | |||
| 66dc7bc5af | |||
| 29ece68332 | |||
| b172fd416d | |||
| 4cba468b4e | |||
| 741ef191bf | |||
| 164a699701 | |||
| e0a0086f03 | |||
| 11954d833f | |||
| cfa9bef6ac | |||
| 7338930c9f | |||
| 92b0a6b56e | |||
| 9132b408c6 | |||
| a53ef80035 | |||
| 0f2712f182 | |||
| d5aa013106 | |||
| d9e45154ff | |||
| b09555981b | |||
| 65ad407cd0 | |||
| 9e384b666f | |||
| 96b4b4512c | |||
| de38644d75 | |||
| c79badcf44 | |||
| ccf17c6444 | |||
| 9bac69b2ec | |||
| 0bf5d3a49b | |||
| 74b80bd94d | |||
| 789973da78 | |||
| d51dfd35e8 | |||
| 8534cddc7c | |||
| 02ac3f5259 | |||
| c8d028aa0e | |||
| f2c112e402 | |||
| 8bf2fea735 | |||
| fe7105a38a | |||
| fda650ad58 | |||
| d97e69ad0a | |||
| 98a82d845a | |||
| 423a7ddbf7 | |||
| da297a71f8 | |||
| ba63d67a3c | |||
| 69d8e67c24 | |||
| 6196cd5edf | |||
| 83a658ba25 | |||
| 78a994b92b | |||
| 8599d14976 | |||
| 0928c72452 | |||
| c3ac728f04 | |||
| 93d0b52cd7 | |||
| 2199c7f125 | |||
| 3926cc0220 | |||
| 175cf888d5 | |||
| 581d8373bf | |||
| 98f337a545 | |||
| 9e946c6316 | |||
| e23a50d755 | |||
| 2a5bd268a3 | |||
| 5036111d11 | |||
| 8367c13ebd | |||
| 536e0b171e | |||
| 03f3500c35 | |||
| b4008081d7 | |||
| fdfd772100 | |||
| 0c1d074890 | |||
| b29368c3e6 | |||
| 50d27e0e5b | |||
| 8b5315a141 | |||
| c257b9b10f | |||
| 12b7c65f80 | |||
| 4514affb78 | |||
| 6986044dbc | |||
| fb300f2b16 | |||
| 43ecb1bdd0 | |||
| dda0d1e3f5 | |||
| 4a3df3cbdb | |||
| 31e5b99f1f | |||
| 296e86ad56 | |||
| 572382b5ad | |||
| 84c1358ecb | |||
| a79213969f | |||
| 2c2b25d8fc | |||
| 5b8ea64d77 | |||
| d637c8b22f | |||
| 00870fda7e | |||
| 81f867d0cd | |||
| fcbd8938c2 | |||
| 44b1271229 | |||
| c1071077ae |
@@ -0,0 +1,21 @@
|
||||
FROM mcr.microsoft.com/devcontainers/javascript-node:24
|
||||
|
||||
# Install Hugo Extended
|
||||
ARG HUGO_VERSION
|
||||
RUN curl -sLJO "https://github.com/gohugoio/hugo/releases/download/v${HUGO_VERSION}/hugo_extended_${HUGO_VERSION}_linux-amd64.tar.gz" \
|
||||
&& tar -C /usr/local/bin -xf "hugo_extended_${HUGO_VERSION}_linux-amd64.tar.gz" hugo \
|
||||
&& rm "hugo_extended_${HUGO_VERSION}_linux-amd64.tar.gz"
|
||||
|
||||
# Install Dart Sass
|
||||
ARG DART_SASS_VERSION
|
||||
RUN curl -sLJO "https://github.com/sass/dart-sass/releases/download/${DART_SASS_VERSION}/dart-sass-${DART_SASS_VERSION}-linux-x64.tar.gz" \
|
||||
&& tar -C /usr/local -xf "dart-sass-${DART_SASS_VERSION}-linux-x64.tar.gz" \
|
||||
&& ln -s /usr/local/dart-sass/sass /usr/local/bin/sass \
|
||||
&& rm "dart-sass-${DART_SASS_VERSION}-linux-x64.tar.gz"
|
||||
|
||||
# Install Go
|
||||
ARG GO_VERSION
|
||||
RUN curl -sLJO "https://go.dev/dl/go${GO_VERSION}.linux-amd64.tar.gz" \
|
||||
&& tar -C /usr/local -xf "go${GO_VERSION}.linux-amd64.tar.gz" \
|
||||
&& rm "go${GO_VERSION}.linux-amd64.tar.gz"
|
||||
ENV PATH="/usr/local/go/bin:${PATH}"
|
||||
@@ -0,0 +1,27 @@
|
||||
{
|
||||
"name": "FixIt Theme",
|
||||
"build": {
|
||||
"dockerfile": "Dockerfile",
|
||||
"args": {
|
||||
"HUGO_VERSION": "0.161.0",
|
||||
"DART_SASS_VERSION": "1.99.0",
|
||||
"GO_VERSION": "1.24.4"
|
||||
}
|
||||
},
|
||||
"postCreateCommand": "pnpm install",
|
||||
"customizations": {
|
||||
"vscode": {
|
||||
"extensions": [
|
||||
"budparr.language-hugo-vscode",
|
||||
"kaellarkin.hugo-shortcode-syntax",
|
||||
"lruihao.hugo-partials-refs",
|
||||
"tamasfe.even-better-toml",
|
||||
"casualjim.gotemplate",
|
||||
"SomewhatStationery.some-sass",
|
||||
"gruntfuggly.todo-tree",
|
||||
"antfu.unocss",
|
||||
"antfu.iconify"
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
root = true
|
||||
|
||||
[*]
|
||||
charset = utf-8
|
||||
end_of_line = lf
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
insert_final_newline = true
|
||||
trim_trailing_whitespace = true
|
||||
@@ -1,14 +1,16 @@
|
||||
<!-- Thank you for contributing! -->
|
||||
<!--
|
||||
Thank you for contributing!
|
||||
|
||||
Before submitting the PR, please make sure you do the following:
|
||||
|
||||
- Read the [Contributing Guidelines](https://github.com/hugo-fixit/FixIt/blob/main/CONTRIBUTING.md).
|
||||
- Provide a description in this PR that addresses **what** the PR is solving. If this PR is going to solve an existing issue, please reference the issue (e.g. `close #123`).
|
||||
-->
|
||||
|
||||
### Description
|
||||
|
||||
<!-- Please insert your description here and provide especially info about the "what" this PR is solving -->
|
||||
|
||||
### Before submitting the PR, please make sure you do the following <!-- (put an "X" next to an item) -->
|
||||
|
||||
- [ ] Read the [Contributing Guidelines](https://github.com/hugo-fixit/FixIt/blob/main/CONTRIBUTING.md).
|
||||
- [ ] Provide a description in this PR that addresses **what** the PR is solving. If this PR is going to solve an existing issue, please reference the issue (e.g. `close #123`).
|
||||
|
||||
### What is the purpose of this pull request? <!-- (put an "X" next to an item) -->
|
||||
|
||||
- [ ] Bug fix
|
||||
|
||||
@@ -2,3 +2,4 @@ name: CodeQL config
|
||||
|
||||
paths-ignore:
|
||||
- assets/lib/**
|
||||
- assets/js/lib/mermaid.js
|
||||
|
||||
+65
-276
@@ -1,315 +1,104 @@
|
||||
# FixIt 编码标准和指导原则
|
||||
# FixIt Coding Standards and Guidelines
|
||||
|
||||
本文档定义了 FixIt 主题项目的编码标准、最佳实践和开发指导原则。所有贡献者和 AI 助手在参与项目开发时都应遵循这些规范。
|
||||
This document defines the detailed coding standards for the FixIt theme project. For project overview, architecture, and development commands, see [CLAUDE.md](../../CLAUDE.md).
|
||||
|
||||
## 项目概述
|
||||
## SCSS Coding Standards
|
||||
|
||||
FixIt 是一个面向 Hugo 静态网站生成器的现代化、响应式主题。项目基于以下技术栈:
|
||||
### Naming
|
||||
|
||||
- **Hugo**: 静态网站生成器(≥ 0.147.7)
|
||||
- **SCSS**: CSS 预处理器,用于样式开发
|
||||
- **JavaScript**: ES6+ 标准,用于前端交互功能
|
||||
- **Go Templates**: Hugo 模板引擎
|
||||
- **Node.js**: 开发环境和构建工具
|
||||
- **pnpm**: 包管理器
|
||||
- **CSS classes**: BEM or semantic naming (`header-desktop`, `menu-item`, `post-tag`)
|
||||
- **SCSS variables**: hyphen-separated, semantic (`$global-font-family`, `$code-background-color`)
|
||||
- **CSS custom properties**: prefixed with `fi-` / `--fi-`
|
||||
|
||||
## 目录结构约定
|
||||
### SCSS Guidelines
|
||||
|
||||
```
|
||||
FixIt/
|
||||
├── apps/ # 最小化站点
|
||||
│ ├── demo/ # 演示站点
|
||||
│ └── test/ # 测试站点
|
||||
├── archetypes/ # 内容模板
|
||||
├── assets/ # 主题资源文件
|
||||
│ ├── css/ # SCSS 样式文件
|
||||
│ ├── js/ # JavaScript 文件
|
||||
│ ├── images/ # 图像资源
|
||||
│ └── lib/ # 第三方库
|
||||
├── i18n/ # 国际化翻译文件
|
||||
├── layouts/ # Hugo 模板文件
|
||||
│ ├── _markup/ # Hugo 渲染钩子
|
||||
│ ├── _partials/ # 可复用模板组件
|
||||
│ └── _shortcodes/ # 自定义短代码
|
||||
├── packages/ # 主题相关包
|
||||
├── static/ # 静态文件
|
||||
├── hugo.toml # 主题默认配置
|
||||
└── package.json # npm 脚本和依赖
|
||||
```
|
||||
- Use 2-space indentation
|
||||
- Use CSS variables for theme switching support
|
||||
- Prefer relative units (rem, em, %) over absolute units
|
||||
- Use SCSS variables for colors — no hardcoded values
|
||||
- Keep selector nesting shallow
|
||||
|
||||
## SCSS/CSS 编码规范
|
||||
## UnoCSS Guidelines
|
||||
|
||||
### 文件组织结构
|
||||
- Use UnoCSS atomic classes for common utilities (`hidden`, `me-1`, `text-center`, etc.)
|
||||
- Theme colors: `bg-primary`, `text-success`, `text-danger`, etc. (mapped via `@theme` in `uno.config.ts`)
|
||||
- Responsive: `sm:` (>=680px), `md:` (>=960px), `lg:` (>=1200px), `xl:` (>=1440px). Use `max-sm:` for xs (<680px)
|
||||
- Wrap SVG elements with `<!-- @unocss-skip-start -->` / `<!-- @unocss-skip-end -->` to avoid false positives from `d` attribute values
|
||||
- Dynamically generated classes (e.g., `order-*`) must be added to `safelist` in `uno.config.ts`
|
||||
- Run `pnpm unocss` after modifying `uno.config.ts` or templates that use UnoCSS classes
|
||||
|
||||
1. **主入口文件**: `assets/css/style.scss`
|
||||
2. **变量文件**: `assets/css/_variables.scss` - 全局变量定义
|
||||
3. **覆写文件**: `assets/css/_override.scss` - 用户自定义覆写
|
||||
4. **组织结构**:
|
||||
- `_core/`: 核心样式(基础、布局、媒体查询等)
|
||||
- `_mixin/`: SCSS mixins 和函数
|
||||
- `_page/`: 页面特定样式
|
||||
- `_partials/`: 组件样式
|
||||
- `_shortcodes/`: 短代码样式
|
||||
## TypeScript Coding Standards
|
||||
|
||||
### 命名约定
|
||||
### Architecture
|
||||
|
||||
1. **CSS 类名**: 使用 BEM 方法论或语义化命名
|
||||
Service-class architecture with direct constructor calls:
|
||||
|
||||
```scss
|
||||
.header-desktop {}
|
||||
.menu-item {}
|
||||
.single-title {}
|
||||
.post-tag {}
|
||||
```
|
||||
- **`TypedEventBus`** (`core/event-bus.ts`) — Module-level singleton (`eventBus`) wrapping DOM `CustomEvents` with typed event map.
|
||||
- **Service interfaces** (`core/tokens.ts`) — Typed contracts for each module (`CoreService`, `ThemeService`, `CodeService`, etc.).
|
||||
- **Module classes** (`modules/*.ts`) — Each module implements its service interface. Dependencies are constructor-injected.
|
||||
|
||||
2. **SCSS 变量**: 使用连字符分隔,语义化命名
|
||||
### Module Pattern
|
||||
|
||||
```scss
|
||||
$global-font-family: system-ui, sans-serif;
|
||||
$code-background-color: #f6f8fa;
|
||||
$header-height: 3.5rem;
|
||||
```
|
||||
```typescript
|
||||
export class ExampleModule implements ExampleService {
|
||||
#privateState: any // ES6 # private fields, not _ prefix
|
||||
|
||||
3. **CSS 自定义属性**: 使用前缀约定
|
||||
constructor(private readonly core: CoreService) {}
|
||||
|
||||
```scss
|
||||
$prefix: fi-;
|
||||
$rootPrefix: --fi-;
|
||||
```
|
||||
|
||||
### 样式组织原则
|
||||
|
||||
1. **主题切换支持**: 使用 CSS 变量实现主题切换
|
||||
|
||||
```scss
|
||||
.element {
|
||||
color: var(#{$rootPrefix}global-font-color);
|
||||
}
|
||||
```
|
||||
|
||||
2. **Mixin 使用**: 提高代码复用性
|
||||
|
||||
```scss
|
||||
@include border-radius($global-border-radius);
|
||||
@include transition(all 0.2s ease);
|
||||
@include blur;
|
||||
```
|
||||
|
||||
### 代码质量要求
|
||||
|
||||
1. **缩进**: 使用 2 个空格
|
||||
2. **注释**: 为复杂逻辑添加注释
|
||||
3. **颜色**: 使用变量而非硬编码颜色值
|
||||
4. **单位**: 优先使用相对单位(rem、em、%)
|
||||
|
||||
## JavaScript 编码规范
|
||||
|
||||
### 代码风格
|
||||
|
||||
1. **ES6+ 标准**: 使用现代 JavaScript 语法
|
||||
2. **模块化**: 使用 ES6 模块系统
|
||||
|
||||
### 文件组织
|
||||
|
||||
1. **主题核心**: `assets/js/theme.js` - 主题核心逻辑
|
||||
2. **工具函数**: `assets/js/util.js` - 通用工具函数
|
||||
3. **特定功能**: 按功能划分独立模块
|
||||
|
||||
### 编码实例
|
||||
|
||||
```javascript
|
||||
// 使用 ES6 类
|
||||
export default class Util {
|
||||
copyText(text) {
|
||||
// ...
|
||||
}
|
||||
}
|
||||
|
||||
// 主题类组织
|
||||
class FixIt {
|
||||
constructor() {
|
||||
this.config = window.config
|
||||
this.util = new Util()
|
||||
}
|
||||
|
||||
init() {
|
||||
this.initTheme()
|
||||
this.initComponents()
|
||||
}
|
||||
publicMethod(): void { /* ... */ }
|
||||
#privateHelper(): void { /* ... */ }
|
||||
}
|
||||
```
|
||||
|
||||
### 最佳实践
|
||||
### Key Rules
|
||||
|
||||
1. **错误处理**: 使用 try-catch 处理异常
|
||||
2. **异步操作**: 优先使用 async/await
|
||||
3. **事件处理**: 合理使用事件委托
|
||||
4. **性能优化**: 避免不必要的 DOM 操作
|
||||
- Use ES6 `#` private fields — not TypeScript `private` with `_` prefix
|
||||
- Keep modules focused: one module per file, one service interface per module
|
||||
- Import the shared `eventBus` singleton from `core/event-bus` for cross-module communication
|
||||
- Constructor injection for dependencies — no global state access
|
||||
- `window.fixit` exposes a typed public API (`FixItPublicAPI`) for user custom scripts
|
||||
- Comment style: follow [TSDoc](https://tsdoc.org/) conventions
|
||||
|
||||
## Hugo 模板规范
|
||||
### Utilities
|
||||
|
||||
### 模板组织
|
||||
- Pure functions only in `utils/` — no side effects, no DOM state
|
||||
- Re-export everything through `utils/index.ts`
|
||||
|
||||
1. **布局模板**: `layouts/` 目录下的主要模板
|
||||
2. **局部模板**: `layouts/_partials/` 下的可复用组件
|
||||
3. **短代码**: `layouts/_shortcodes/` 下的内容短代码
|
||||
## Hugo Template Standards
|
||||
|
||||
### 编码约定
|
||||
### Conventions
|
||||
|
||||
1. **变量命名**: 使用驼峰命名法
|
||||
- **Variable naming**: camelCase (`$footerConfig`, `$fingerprint`)
|
||||
- **Comments**: Hugo syntax `{{- /* comment */ -}}`
|
||||
- **Translation**: Use `T` function for i18n (`{{ T "header.switchTheme" }}`)
|
||||
- **Whitespace**: Use `{{- -}}` trim markers to control whitespace output
|
||||
|
||||
```go-html-template
|
||||
{{- $footerConfig := .Site.Params.footer -}}
|
||||
{{- $fingerprint := .Site.Store.Get "fingerprint" -}}
|
||||
```
|
||||
### Hugo Template Guidelines
|
||||
|
||||
2. **注释规范**: 使用 Hugo 注释语法
|
||||
- Use `partialCached` for expensive partials that don't change per page
|
||||
- Use `.Site.Store` for shared computed values (e.g. fingerprint)
|
||||
- Check `hugo.IsProduction` before adding analytics or minification
|
||||
|
||||
```go-html-template
|
||||
{{- /* 这是模板注释 */ -}}
|
||||
{{- /*
|
||||
多行注释
|
||||
可以跨越多行
|
||||
*/ -}}
|
||||
```
|
||||
## Git Workflow
|
||||
|
||||
3. **条件判断**: 清晰的条件结构
|
||||
### Commit Convention
|
||||
|
||||
```go-html-template
|
||||
{{- if ne $config.enable false -}}
|
||||
<!-- 内容 -->
|
||||
{{- end -}}
|
||||
```
|
||||
|
||||
4. **循环遍历**: 合理使用 range
|
||||
|
||||
```go-html-template
|
||||
{{- range $index, $value := .Site.Languages -}}
|
||||
<!-- 处理逻辑 -->
|
||||
{{- end -}}
|
||||
```
|
||||
|
||||
### 国际化处理
|
||||
|
||||
1. **翻译函数**: 使用 `T` 函数
|
||||
|
||||
```go-html-template
|
||||
{{ T "header.switchTheme" }}
|
||||
```
|
||||
|
||||
2. **多语言支持**: 考虑多语言环境
|
||||
|
||||
```go-html-template
|
||||
{{- if hugo.IsMultilingual -}}
|
||||
<!-- 多语言逻辑 -->
|
||||
{{- end -}}
|
||||
```
|
||||
|
||||
## 开发工作流程
|
||||
|
||||
### 环境设置
|
||||
|
||||
1. **前置要求**:
|
||||
- Node.js (≥ 20.0.0)
|
||||
- Hugo Extended (≥ 0.147.7)
|
||||
- pnpm (包管理器)
|
||||
|
||||
2. **开发命令**:
|
||||
|
||||
```bash
|
||||
pnpm dev:demo # 启动 demo 站点开发服务器
|
||||
pnpm dev:test # 启动 test 站点开发服务器
|
||||
pnpm dev:docs # 启动文档开发服务器(需有 fixit-docs 作为同级目录)
|
||||
pnpm build:demo # 构建 demo 站点
|
||||
pnpm build:test # 构建 test 站点
|
||||
pnpm build # 一键构建所有站点
|
||||
pnpm preview # 预览构建后的站点(需先构建)
|
||||
```
|
||||
|
||||
### 代码质量
|
||||
|
||||
1. **代码审查**: 提交前进行自我审查
|
||||
2. **测试验证**: 在多个环境中测试功能
|
||||
3. **文档更新**: 必要时更新相关文档
|
||||
4. **向后兼容**: 确保更改不破坏现有功能
|
||||
|
||||
### Git 提交规范
|
||||
|
||||
遵循 [Conventional Commits](https://www.conventionalcommits.org/) 规范:
|
||||
Follows [Conventional Commits](https://www.conventionalcommits.org/):
|
||||
|
||||
```
|
||||
feat: 新增功能
|
||||
fix: 修复 bug
|
||||
docs: 文档更新
|
||||
style: 代码格式调整
|
||||
refactor: 代码重构
|
||||
test: 测试相关
|
||||
chore: 构建过程或工具相关
|
||||
<type>(<scope>): <subject>
|
||||
```
|
||||
|
||||
## 性能优化指导
|
||||
Types: `feat`, `fix`, `refactor`, `chore`, `docs`, `perf`, `style`, `test`, `ci`, `build`
|
||||
|
||||
### CSS 性能
|
||||
Scopes: `workflow`, `archetypes`, `assets`, `i18n`, `layouts`, `config`, or specific directories.
|
||||
|
||||
1. **选择器优化**: 避免过深的嵌套
|
||||
2. **媒体查询**: 合理组织响应式断点
|
||||
3. **动画优化**: 使用 transform 和 opacity
|
||||
4. **资源压缩**: 生产环境启用压缩
|
||||
### Pre-commit Hooks
|
||||
|
||||
### JavaScript 性能
|
||||
Pre-commit runs: versioning (dev mode), typecheck, lint-staged (eslint --fix on staged files).
|
||||
|
||||
1. **延迟加载**: 非关键脚本使用 defer
|
||||
2. **事件优化**: 合理使用防抖和节流
|
||||
3. **内存管理**: 及时清理事件监听器
|
||||
4. **模块化**: 按需加载功能模块
|
||||
## Browser Compatibility
|
||||
|
||||
### Hugo 模板性能
|
||||
|
||||
1. **缓存策略**: 合理使用 Hugo 缓存机制
|
||||
2. **资源处理**: 优化图片和静态资源
|
||||
3. **构建优化**: 减少不必要的模板处理
|
||||
|
||||
## 可访问性要求
|
||||
|
||||
1. **语义化 HTML**: 使用正确的 HTML 标签
|
||||
2. **ARIA 属性**: 为复杂组件添加 ARIA 支持
|
||||
3. **键盘导航**: 确保键盘可访问性
|
||||
4. **颜色对比**: 满足 WCAG 对比度要求
|
||||
5. **屏幕阅读器**: 提供适当的文本替代
|
||||
|
||||
## 浏览器兼容性
|
||||
|
||||
1. **目标浏览器**: 支持现代浏览器
|
||||
2. **渐进增强**: 基础功能向下兼容
|
||||
3. **特性检测**: 使用特性检测而非浏览器检测
|
||||
4. **Polyfill**: 必要时提供 polyfill 支持
|
||||
|
||||
## 安全考虑
|
||||
|
||||
1. **XSS 防护**: 正确处理用户输入
|
||||
2. **CSRF 保护**: 表单提交安全
|
||||
3. **内容安全**: 合理设置 CSP 策略
|
||||
4. **依赖安全**: 定期更新依赖包
|
||||
|
||||
## 文档要求
|
||||
|
||||
1. **代码注释**: 复杂逻辑必须注释
|
||||
2. **API 文档**: 公共方法需要文档
|
||||
3. **使用示例**: 提供清晰的使用示例
|
||||
4. **更新日志**: 重要更改记录在 CHANGELOG
|
||||
|
||||
## 第三方库管理
|
||||
|
||||
1. **依赖选择**: 优先选择轻量、维护活跃的库
|
||||
2. **版本管理**: 及时更新安全补丁
|
||||
3. **许可证**: 确保许可证兼容性
|
||||
4. **定制化**: 必要时进行本地化修改
|
||||
|
||||
## 贡献指导
|
||||
|
||||
1. **讨论优先**: 重大更改前先讨论
|
||||
2. **小步迭代**: 避免大规模重构
|
||||
3. **测试覆盖**: 新功能需要充分测试
|
||||
4. **文档同步**: 功能和文档同时更新
|
||||
|
||||
遵循这些编码标准将有助于维护代码质量,提高开发效率,并确保项目的长期可维护性。
|
||||
- Target modern browsers
|
||||
- Use progressive enhancement for advanced features
|
||||
- Prefer feature detection over browser detection
|
||||
|
||||
@@ -37,12 +37,3 @@ updates:
|
||||
- Lruihao
|
||||
labels:
|
||||
- dependencies
|
||||
- package-ecosystem: gitsubmodule
|
||||
directory: /
|
||||
schedule:
|
||||
interval: weekly
|
||||
open-pull-requests-limit: 1000
|
||||
assignees:
|
||||
- Lruihao
|
||||
labels:
|
||||
- dependencies
|
||||
|
||||
@@ -36,14 +36,14 @@ jobs:
|
||||
|
||||
steps:
|
||||
- name: Check out repository code
|
||||
uses: actions/checkout@v6
|
||||
uses: actions/checkout@v7
|
||||
with:
|
||||
submodules: true # Fetch Hugo themes (true OR recursive)
|
||||
fetch-depth: 0 # Fetch all history for .GitInfo and .Lastmod
|
||||
|
||||
# Initializes the CodeQL tools for scanning.
|
||||
- name: Initialize CodeQL
|
||||
uses: github/codeql-action/init@v4
|
||||
uses: github/codeql-action/init@v4.37.3
|
||||
with:
|
||||
languages: ${{ matrix.language }}
|
||||
config-file: ./.github/configs/codeql.yml
|
||||
@@ -55,7 +55,7 @@ jobs:
|
||||
# Autobuild attempts to build any compiled languages (C/C++, C#, or Java).
|
||||
# If this step fails, then you should remove it and run the build manually (see below)
|
||||
- name: Autobuild
|
||||
uses: github/codeql-action/autobuild@v4
|
||||
uses: github/codeql-action/autobuild@v4.37.3
|
||||
|
||||
# ℹ️ Command-line programs to run using the OS shell.
|
||||
# 📚 https://git.io/JvXDl
|
||||
@@ -69,4 +69,4 @@ jobs:
|
||||
# make release
|
||||
|
||||
- name: Perform CodeQL Analysis
|
||||
uses: github/codeql-action/analyze@v4
|
||||
uses: github/codeql-action/analyze@v4.37.3
|
||||
|
||||
@@ -14,7 +14,7 @@ jobs:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- name: Checkout
|
||||
uses: actions/checkout@v6
|
||||
uses: actions/checkout@v7
|
||||
- name: Generate hugo-fixit component list
|
||||
uses: hugo-fixit/action-component-list@v1
|
||||
env:
|
||||
@@ -23,13 +23,8 @@ jobs:
|
||||
comment_tag_name: HUGO_FIXIT_COMPONENTS
|
||||
readme_path: 'README.md,README.zh-cn.md'
|
||||
template: "- [{$repo.name}]({$repo.html_url})\\\n {$repo.description}"
|
||||
# - name: Commit changes
|
||||
# uses: stefanzweifel/git-auto-commit-action@v5
|
||||
# with:
|
||||
# commit_message: 'docs(readme): update hugo-fixit component list'
|
||||
# commit_author: 'github-actions[bot] <github-actions[bot]@users.noreply.github.com>'
|
||||
- name: Create Pull Request
|
||||
uses: peter-evans/create-pull-request@v7
|
||||
uses: peter-evans/create-pull-request@v8
|
||||
with:
|
||||
title: Update hugo-fixit component list
|
||||
commit-message: 'docs(readme): update hugo-fixit component list'
|
||||
|
||||
@@ -0,0 +1,39 @@
|
||||
name: Update Chroma lexer map
|
||||
on:
|
||||
schedule:
|
||||
# Run at 00:00, on day 1 of the month
|
||||
- cron: '0 0 1 * *'
|
||||
workflow_dispatch:
|
||||
permissions:
|
||||
contents: write
|
||||
pull-requests: write
|
||||
jobs:
|
||||
update:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- name: Checkout
|
||||
uses: actions/checkout@v7
|
||||
- uses: pnpm/action-setup@v6
|
||||
- name: Setup Node.js
|
||||
uses: actions/setup-node@v7
|
||||
with:
|
||||
node-version-file: .nvmrc
|
||||
cache: pnpm
|
||||
- name: Install dependencies
|
||||
run: pnpm install --frozen-lockfile
|
||||
- name: Generate lexer map
|
||||
run: pnpm gen:lexers
|
||||
env:
|
||||
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
|
||||
- name: Create Pull Request
|
||||
uses: peter-evans/create-pull-request@v8
|
||||
with:
|
||||
title: 'chore(assets): regenerate chroma lexer map'
|
||||
commit-message: 'chore(assets): regenerate chroma lexer map'
|
||||
body: |
|
||||
Auto-generated `assets/scss/core/maps/_chroma-lexers.scss` via `pnpm gen:lexers`.
|
||||
Data from: [alecthomas/chroma](https://github.com/alecthomas/chroma/tree/master/lexers) latest release.
|
||||
branch: auto/chroma-lexers
|
||||
base: main
|
||||
labels: dependencies
|
||||
reviewers: Lruihao
|
||||
@@ -0,0 +1,50 @@
|
||||
name: Update libraries from npm
|
||||
on:
|
||||
schedule:
|
||||
# Run at 00:00, on day 1 of the month
|
||||
- cron: '0 0 1 * *'
|
||||
workflow_dispatch:
|
||||
permissions:
|
||||
contents: write
|
||||
pull-requests: write
|
||||
jobs:
|
||||
prepare:
|
||||
runs-on: ubuntu-latest
|
||||
outputs:
|
||||
libraries: ${{ steps.list.outputs.libraries_json }}
|
||||
steps:
|
||||
- name: Checkout
|
||||
uses: actions/checkout@v7
|
||||
- name: List libraries
|
||||
id: list
|
||||
uses: hugo-fixit/librarybot@v1
|
||||
with:
|
||||
mode: list
|
||||
update:
|
||||
needs: prepare
|
||||
runs-on: ubuntu-latest
|
||||
strategy:
|
||||
fail-fast: false
|
||||
matrix:
|
||||
library: ${{ fromJson(needs.prepare.outputs.libraries) }}
|
||||
steps:
|
||||
- name: Checkout
|
||||
uses: actions/checkout@v7
|
||||
- name: Update library
|
||||
id: update
|
||||
uses: hugo-fixit/librarybot@v1
|
||||
with:
|
||||
mode: update
|
||||
library: ${{ matrix.library }}
|
||||
- name: Create Pull Request
|
||||
if: steps.update.outputs.changed == 'true'
|
||||
uses: peter-evans/create-pull-request@v8
|
||||
with:
|
||||
title: 'chore(deps): bump ${{ steps.update.outputs.package }} from `${{ steps.update.outputs.from_version }}` to `${{ steps.update.outputs.to_version }}`'
|
||||
commit-message: 'chore(deps): bump ${{ steps.update.outputs.package }} from `${{ steps.update.outputs.from_version }}` to `${{ steps.update.outputs.to_version }}`'
|
||||
body: |
|
||||
Automated update of `${{ steps.update.outputs.package }}` from `${{ steps.update.outputs.from_version }}` to `${{ steps.update.outputs.to_version }}`.
|
||||
branch: ${{ steps.update.outputs.pr_branch }}
|
||||
base: main
|
||||
labels: dependencies
|
||||
reviewers: Lruihao
|
||||
@@ -0,0 +1,43 @@
|
||||
name: Publish @hugo-fixit/encrypt
|
||||
|
||||
on:
|
||||
push:
|
||||
tags:
|
||||
- 'encrypt-v*.*.*'
|
||||
workflow_dispatch:
|
||||
|
||||
permissions:
|
||||
contents: read
|
||||
id-token: write
|
||||
|
||||
concurrency:
|
||||
group: publish-encrypt-${{ github.ref }}
|
||||
cancel-in-progress: false
|
||||
|
||||
jobs:
|
||||
publish:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- name: Checkout repository
|
||||
uses: actions/checkout@v7
|
||||
|
||||
- uses: pnpm/action-setup@v6
|
||||
- name: Setup Node.js
|
||||
uses: actions/setup-node@v7
|
||||
with:
|
||||
node-version-file: .nvmrc
|
||||
registry-url: 'https://registry.npmjs.org'
|
||||
cache: pnpm
|
||||
scope: '@hugo-fixit'
|
||||
|
||||
- name: Update npm
|
||||
run: npm install -g npm@latest
|
||||
- name: Install dependencies
|
||||
run: pnpm install --frozen-lockfile
|
||||
|
||||
- name: Build package
|
||||
run: pnpm -F encrypt build
|
||||
|
||||
- name: Publish package to npm
|
||||
working-directory: packages/encrypt
|
||||
run: npm publish --access public --provenance
|
||||
@@ -11,22 +11,27 @@ jobs:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- name: Checkout repository
|
||||
uses: actions/checkout@v6
|
||||
uses: actions/checkout@v7
|
||||
with:
|
||||
fetch-depth: 0 # Fetch all history for generating release notes
|
||||
|
||||
- uses: pnpm/action-setup@v4
|
||||
- uses: pnpm/action-setup@v6
|
||||
- name: Setup Node.js
|
||||
uses: actions/setup-node@v6
|
||||
uses: actions/setup-node@v7
|
||||
with:
|
||||
node-version-file: .nvmrc
|
||||
cache: pnpm
|
||||
|
||||
- name: Install fixit-cli
|
||||
run: pnpm install -g fixit-cli
|
||||
- name: Split theme configuration
|
||||
run: |
|
||||
pnpx fixit-cli split hugo.toml
|
||||
tar -zcvf config.tar.gz config
|
||||
tree config
|
||||
fixit split
|
||||
tar -zcvf config_toml.tar.gz config
|
||||
rm -rf config
|
||||
fixit split -y
|
||||
tar -zcvf config_yaml.tar.gz config
|
||||
rm -rf config
|
||||
|
||||
- name: Generate release notes
|
||||
run: |
|
||||
@@ -35,9 +40,10 @@ jobs:
|
||||
sed -i '1,4d' CHANGELOG.md
|
||||
|
||||
- name: GitHub Release
|
||||
uses: softprops/action-gh-release@v2
|
||||
uses: softprops/action-gh-release@v3
|
||||
with:
|
||||
draft: true
|
||||
body_path: CHANGELOG.md
|
||||
files: |
|
||||
config.tar.gz
|
||||
config_toml.tar.gz
|
||||
config_yaml.tar.gz
|
||||
|
||||
+25
-6
@@ -1,10 +1,12 @@
|
||||
# Hugo default output directory
|
||||
public/
|
||||
resources/
|
||||
|
||||
# Hugo
|
||||
.hugo_build.lock
|
||||
jsconfig.json
|
||||
.hugo_cache
|
||||
public/
|
||||
resources/
|
||||
|
||||
# packages
|
||||
dist/
|
||||
|
||||
# NPM
|
||||
node_modules/
|
||||
@@ -15,6 +17,25 @@ node_modules/
|
||||
!.vscode/extensions.json
|
||||
!.vscode/settings.json
|
||||
|
||||
# Trae
|
||||
.trae/
|
||||
|
||||
# Claude
|
||||
.claude/
|
||||
CLAUDE.local.md
|
||||
.codegraph/
|
||||
|
||||
# Vercel
|
||||
.vercel/
|
||||
|
||||
# Environment Variables
|
||||
.env*.local
|
||||
|
||||
# Documentation
|
||||
docs/
|
||||
CHANGELOG.md
|
||||
TODO.md
|
||||
|
||||
# OS Files
|
||||
## Windows
|
||||
Thumbs.db
|
||||
@@ -27,5 +48,3 @@ $RECYCLE.BIN/
|
||||
|
||||
## Linux
|
||||
.directory
|
||||
|
||||
CHANGELOG.md
|
||||
|
||||
@@ -1,3 +1,2 @@
|
||||
tag-version-prefix="v"
|
||||
ignore-workspace-root-check=true
|
||||
message="chore(release): %s"
|
||||
tag-version-prefix=v
|
||||
message=chore(release): %s
|
||||
|
||||
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"display": {
|
||||
"access": ["public"],
|
||||
"alias": false
|
||||
},
|
||||
"sort": ["group"]
|
||||
}
|
||||
Vendored
+7
-1
@@ -2,6 +2,12 @@
|
||||
"recommendations": [
|
||||
"budparr.language-hugo-vscode",
|
||||
"kaellarkin.hugo-shortcode-syntax",
|
||||
"eliostruyf.vscode-hugo-themer"
|
||||
"lruihao.hugo-partials-refs",
|
||||
"tamasfe.even-better-toml",
|
||||
"casualjim.gotemplate",
|
||||
"SomewhatStationery.some-sass",
|
||||
"gruntfuggly.todo-tree",
|
||||
"antfu.unocss",
|
||||
"antfu.iconify"
|
||||
]
|
||||
}
|
||||
|
||||
Vendored
+13
-5
@@ -1,11 +1,16 @@
|
||||
{
|
||||
"todo-tree.tree.scanMode": "workspace only",
|
||||
"explorer.fileNesting.enabled": true,
|
||||
"explorer.fileNesting.patterns": {
|
||||
"tsconfig.json": "tsconfig.*.json, env.d.ts",
|
||||
"package.json": "package-lock.json, pnpm*, .yarnrc*, yarn*, .eslint*, eslint*, .oxlint*, oxlint*, .prettier*, prettier*, .editorconfig"
|
||||
"files.associations": {
|
||||
"*.template.ts": "gots",
|
||||
"*.template.js": "gojs",
|
||||
"*.template.scss": "gocss",
|
||||
"*.template.svg": "html",
|
||||
"**/plugin/script.html": "gohtml",
|
||||
"**/layouts/**/*.json": "gojson",
|
||||
"**/layouts/**/*.xml": "gohtml",
|
||||
"**/layouts/**/*.md": "gotemplate"
|
||||
},
|
||||
// Disable the default formatter, use eslint instead
|
||||
// Disable the default formatter, use ESLint instead
|
||||
"prettier.enable": false,
|
||||
"editor.formatOnSave": false,
|
||||
// Auto fix
|
||||
@@ -66,6 +71,9 @@
|
||||
"fixable": true
|
||||
}
|
||||
],
|
||||
// SCSS path resolution (Some Sass extension)
|
||||
"somesass.workspace.loadPaths": ["assets/scss"],
|
||||
"somesass.scss.links.enabled": true,
|
||||
// Enable eslint for all supported languages
|
||||
"eslint.validate": [
|
||||
"go-html-template",
|
||||
|
||||
@@ -0,0 +1,160 @@
|
||||
# CLAUDE.md
|
||||
|
||||
This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
|
||||
|
||||
## Project Overview
|
||||
|
||||
FixIt is a modern, responsive theme for the Hugo static site generator. Built with Hugo templates, SCSS, UnoCSS, and TypeScript.
|
||||
|
||||
## Development Commands
|
||||
|
||||
### Prerequisites
|
||||
|
||||
- Node.js >= 20
|
||||
- Hugo Extended >= 0.161.0 (Dart Sass required)
|
||||
- pnpm
|
||||
|
||||
### Development
|
||||
|
||||
```bash
|
||||
pnpm install # Install dependencies
|
||||
pnpm dev:demo # Start demo site dev server
|
||||
pnpm dev:test # Start test site dev server
|
||||
pnpm dev:docs # Start docs dev server (requires fixit-docs as sibling directory)
|
||||
```
|
||||
|
||||
### Build
|
||||
|
||||
```bash
|
||||
pnpm build:demo # Build demo site
|
||||
pnpm build:test # Build test site
|
||||
pnpm build # Build all sites (demo + test, merged into public/)
|
||||
pnpm preview # Preview built site (requires build first)
|
||||
```
|
||||
|
||||
### Code Generation
|
||||
|
||||
```bash
|
||||
pnpm gen:lexers # Regenerate assets/scss/core/maps/_chroma-lexers.scss from Chroma source
|
||||
```
|
||||
|
||||
### Code Quality
|
||||
|
||||
```bash
|
||||
pnpm lint # Run ESLint
|
||||
pnpm typecheck # Run TypeScript type checking
|
||||
```
|
||||
|
||||
There are no unit tests. Verify changes by building `pnpm build:demo` or `pnpm build:test` and inspecting the output.
|
||||
|
||||
## Architecture
|
||||
|
||||
### Monorepo Structure
|
||||
|
||||
Root `package.json` is `@hugo-fixit/core`. pnpm workspaces include `apps/*` and `packages/*`:
|
||||
|
||||
- `apps/demo/` — Demo site (deployed to `demo.fixit.lruihao.cn`)
|
||||
- `apps/test/` — Test site for exercising theme features
|
||||
- `packages/shared` — Shared utilities (exports `workspaceRoot`, `fromRoot`, `runCommand`, `capitalize`, `consola`)
|
||||
- `packages/versioning` — Version management (auto-updates version in `layouts/_partials/init/index.html` during pre-commit)
|
||||
- `packages/integration` — Post-build: merges demo/test output into `public/`
|
||||
- `packages/chroma-lexers` — Generates Chroma lexer SCSS map from GitHub
|
||||
|
||||
### JavaScript Module System (`assets/js/`)
|
||||
|
||||
Service-class architecture with direct constructor calls:
|
||||
|
||||
- **`main.ts`** — Entry point. Instantiates all modules with direct constructor calls, builds the typed `window.fixit` public API facade, and runs the init sequence on `DOMContentLoaded`.
|
||||
- **`types/`** — TypeScript type definitions:
|
||||
- `config.ts` — `FixItConfig` and all config sub-types.
|
||||
- `ui.ts` — `FixItPublicAPI`, global `window` augmentation for third-party libs.
|
||||
- `third-party.ts` — Types for vendored libraries.
|
||||
- **`core/`** — Infrastructure layer:
|
||||
- `event-bus.ts` — Typed event bus singleton wrapping DOM `CustomEvents`. Exports `eventBus` (module-level singleton) and `FixItEventMap` type.
|
||||
- `tokens.ts` — Service interfaces (`CoreService`, `ThemeService`, `CodeService`, etc.) used for module constructor typing.
|
||||
- **`modules/`** — Feature modules. Each is a class implementing its service interface. Dependencies are constructor-injected. Private state uses ES6 `#` fields. Modules: charts, code, content, core, encryption, events, menu, misc, search, theme, toc. `pagefind.ts` is a standalone factory consumed by `SearchModule`.
|
||||
- **`utils/`** — Pure utility functions (no side effects, no DOM state). Re-exported from `utils/index.ts`.
|
||||
- **`lib/`** — Third-party library wrappers (aplayer, echarts, file-tree, fixit-decryptor, lightgallery, mapbox, mathjax, mermaid, etc.). All import the shared `eventBus` singleton.
|
||||
- **`head/`** — `color-scheme.ts` runs synchronously in `<head>` before body render to prevent flash of wrong theme.
|
||||
- **`pages/`** — Page-specific scripts (e.g. `link.ts` for the link guard redirection page).
|
||||
|
||||
Cross-module communication uses the shared `eventBus` singleton, not direct module imports. The `window.fixit` facade exposes a typed public API for user custom scripts (`custom.ts`): theme control, scroll state, mask overlay management, content re-initialization, and the event bus.
|
||||
|
||||
### Hugo Templates (`layouts/`)
|
||||
|
||||
- **`_partials/`** — Reusable template components (organized into `init/`, `base/`, `function/`, `plugin/`, `single/`, `store/`)
|
||||
- **`_shortcodes/`** — 31 custom shortcodes (admonition, aplayer, echarts, file-tree, mermaid, tabs, timeline, etc.)
|
||||
- **`_markup/`** — 15 render hooks (code blocks, headings, images, links, tables, blockquote alerts, passthrough for math)
|
||||
|
||||
### Asset Pipeline
|
||||
|
||||
Hugo Pipes processes all assets. The key orchestration is in `_partials/base/assets.html`:
|
||||
|
||||
- **CSS**: `scss/main.scss` is the entry point importing `core/`, `pages/`, `widgets/`, `custom`. SCSS variables are configured via `hugo:vars` (user-configurable from `[params.appearance]`) and `hugo:vars/internal` (theme system config). UnoCSS utility classes are pre-built to `assets/css/unocss.css` (via `pnpm unocss`), loaded before the main SCSS bundle.
|
||||
- **JS**: `_partials/function/js-build.html` wraps `js.Build` with minify-in-production defaults. Hugo's `@params` injection passes config values into TypeScript at build time.
|
||||
- **Third-party libraries**: Stored in `assets/lib/` (vendored, not npm-managed). Tracked by `librarybot.yml` and updated weekly by the `hugo-fixit/librarybot` GitHub Action. Can be overridden via CDN config in `assets/data/cdn/jsdelivr.yml` or `unpkg.yml`.
|
||||
|
||||
### Theme Configuration
|
||||
|
||||
- **`hugo.toml`** — Default theme configuration (1700+ lines). Uses `_merge = "shallow"` to let user configs override without deep merging.
|
||||
- **`theme.toml`** — Theme metadata
|
||||
|
||||
## Coding Standards
|
||||
|
||||
### SCSS (`assets/scss/`)
|
||||
|
||||
- CSS classes: BEM or semantic naming (`header-desktop`, `menu-item`)
|
||||
- SCSS variables: hyphen-separated, semantic (`$global-font-family`)
|
||||
- CSS custom properties: prefixed with `fi-` / `--fi-`
|
||||
- Use `fi-var()` function to reference CSS custom properties (auto-adds `--fi-` prefix), never use `var(--fi-...)` directly
|
||||
- Use CSS variables for theme switching; SCSS variables for colors (no hardcoded values)
|
||||
- Prefer relative units (rem, em, %) over absolute units
|
||||
- Keep selector nesting shallow
|
||||
|
||||
### UnoCSS (`assets/css/unocss.css`)
|
||||
|
||||
- Pre-built utility classes generated by `pnpm unocss` (config: `uno.config.ts`)
|
||||
- Use atomic classes for common utilities (`hidden`, `me-1`, `text-center`, etc.)
|
||||
- Theme colors mapped via `@theme`: `bg-primary`, `text-success`, `text-danger`, etc.
|
||||
- Responsive breakpoints: `sm:` (>=680px), `md:` (>=960px), `lg:` (>=1200px), `xl:` (>=1440px). Use `max-sm:` for xs (<680px)
|
||||
- Wrap SVG elements with `<!-- @unocss-skip-start -->` / `<!-- @unocss-skip-end -->` to avoid false positives from `d` attribute values
|
||||
- `safelist` in `uno.config.ts` for dynamically generated classes (e.g., `order-*`, `sm:hidden`)
|
||||
|
||||
### TypeScript
|
||||
|
||||
- Use ES6 `#` private fields — not TypeScript `private` with `_` prefix
|
||||
- One module per file, one service interface per module
|
||||
- Constructor injection for dependencies — no global state access
|
||||
- Import the shared `eventBus` singleton from `core/event-bus` — do not create new instances
|
||||
- Pure functions only in `utils/` — no side effects, no DOM state
|
||||
- Comment style: follow [TSDoc](https://tsdoc.org/) conventions
|
||||
|
||||
### Hugo Templates
|
||||
|
||||
- Variable naming: camelCase (`$footerConfig`, `$fingerprint`)
|
||||
- Translation: use `T` function (`{{ T "header.switchTheme" }}`)
|
||||
- Whitespace: use `{{- -}}` trim markers
|
||||
- Use `partialCached` for expensive partials that don't change per page
|
||||
- Use `.Site.Store` for shared computed values (e.g. fingerprint)
|
||||
- Check `hugo.IsProduction` before adding analytics or minification
|
||||
- Minimize `id` attribute usage — prefer class selectors for styling and JS queries. Reserve `id` for: `<label for>`, `aria-controls`/`aria-labelledby`, fragment anchors, or third-party library requirements
|
||||
|
||||
## Commit Convention
|
||||
|
||||
Follows [Conventional Commits](https://www.conventionalcommits.org/):
|
||||
|
||||
```
|
||||
<type>(<scope>): <subject>
|
||||
```
|
||||
|
||||
Types: `feat`, `fix`, `refactor`, `chore`, `docs`, `perf`, `style`, `test`, `ci`, `build`
|
||||
|
||||
Scopes: `workflow`, `archetypes`, `assets`, `i18n`, `layouts`, `config`, or specific directories.
|
||||
|
||||
## Pre-commit Hooks
|
||||
|
||||
Pre-commit runs: versioning (dev mode), typecheck, lint-staged (eslint --fix on staged files).
|
||||
|
||||
## ESLint
|
||||
|
||||
Uses `@antfu/eslint-config` with TypeScript support. Config at `eslint.config.ts`.
|
||||
+10
-10
@@ -17,23 +17,23 @@ diverse, inclusive, and healthy community.
|
||||
Examples of behavior that contributes to a positive environment for our
|
||||
community include:
|
||||
|
||||
* Demonstrating empathy and kindness toward other people
|
||||
* Being respectful of differing opinions, viewpoints, and experiences
|
||||
* Giving and gracefully accepting constructive feedback
|
||||
* Accepting responsibility and apologizing to those affected by our mistakes,
|
||||
- Demonstrating empathy and kindness toward other people
|
||||
- Being respectful of differing opinions, viewpoints, and experiences
|
||||
- Giving and gracefully accepting constructive feedback
|
||||
- Accepting responsibility and apologizing to those affected by our mistakes,
|
||||
and learning from the experience
|
||||
* Focusing on what is best not just for us as individuals, but for the
|
||||
- Focusing on what is best not just for us as individuals, but for the
|
||||
overall community
|
||||
|
||||
Examples of unacceptable behavior include:
|
||||
|
||||
* The use of sexualized language or imagery, and sexual attention or
|
||||
- The use of sexualized language or imagery, and sexual attention or
|
||||
advances of any kind
|
||||
* Trolling, insulting or derogatory comments, and personal or political attacks
|
||||
* Public or private harassment
|
||||
* Publishing others' private information, such as a physical or email
|
||||
- Trolling, insulting or derogatory comments, and personal or political attacks
|
||||
- Public or private harassment
|
||||
- Publishing others' private information, such as a physical or email
|
||||
address, without their explicit permission
|
||||
* Other conduct which could reasonably be considered inappropriate in a
|
||||
- Other conduct which could reasonably be considered inappropriate in a
|
||||
professional setting
|
||||
|
||||
## Enforcement Responsibilities
|
||||
|
||||
+111
-41
@@ -6,19 +6,27 @@ Make sure that you follow [CODE_OF_CONDUCT.md](CODE_OF_CONDUCT.md) while contrib
|
||||
|
||||
Before you start contributing, make sure you have the following tools installed:
|
||||
|
||||
- **Node.js** (>= 20.0.0) - Required for package management and build tools
|
||||
- **Hugo Extended** (>= 0.147.7) - The static site generator
|
||||
- **pnpm** - Package manager (recommended)
|
||||
- **Hugo Extended** (>= 0.161.0) - The static site generator
|
||||
- **Dart Sass** - Required for SCSS compilation
|
||||
- **Node.js** (>= 22) - Required for package management and build tools
|
||||
- **pnpm** - Package manager
|
||||
|
||||
You can check your installed versions:
|
||||
|
||||
```bash
|
||||
node --version
|
||||
hugo version
|
||||
sass --version
|
||||
node --version
|
||||
pnpm --version
|
||||
```
|
||||
|
||||
## How to contribute to this project
|
||||
Check the Hugo environment information:
|
||||
|
||||
```bash
|
||||
hugo env
|
||||
```
|
||||
|
||||
## How to Contribute
|
||||
|
||||
First, fork this repository by clicking the fork button.
|
||||
|
||||
@@ -36,9 +44,16 @@ pnpm install
|
||||
|
||||
And now you are ready to go!
|
||||
|
||||
Here are some useful commands for development:
|
||||
### Workflow
|
||||
|
||||
### Development
|
||||
1. **Make your changes** in the appropriate directories
|
||||
2. **Test locally** using `pnpm dev:demo` or `pnpm dev:test`
|
||||
3. **Check code quality** with `pnpm lint` and `pnpm typecheck`
|
||||
4. **Check different environments** with production builds (`pnpm build:demo` or `pnpm build:test`)
|
||||
5. **Verify documentation** changes with `pnpm dev:docs` (if applicable)
|
||||
6. **Commit your changes** following the commit message format below
|
||||
|
||||
### Commands
|
||||
|
||||
```bash
|
||||
# Start demo site development server
|
||||
@@ -47,31 +62,49 @@ pnpm dev:demo
|
||||
pnpm dev:test
|
||||
# Start documentation development server (requires fixit-docs as sibling directory)
|
||||
pnpm dev:docs
|
||||
```
|
||||
|
||||
> [!TIP]
|
||||
>
|
||||
> - Add `-e production` to the development command to check the production environment, e.g. `pnpm dev:test -e production`.
|
||||
> - For documentation-related theme changes, it is recommended to clone both `FixIt` and `fixit-docs` as sibling directories.
|
||||
|
||||
### Building
|
||||
|
||||
```bash
|
||||
# Build demo site
|
||||
pnpm build:demo
|
||||
# Build test site
|
||||
pnpm build:test
|
||||
# Build all sites
|
||||
pnpm build
|
||||
```
|
||||
|
||||
### Preview
|
||||
# Lint with ESLint
|
||||
pnpm lint
|
||||
# TypeScript type checking
|
||||
pnpm typecheck
|
||||
|
||||
# Regenerate Chroma lexer map (assets/scss/core/maps/_chroma-lexers.scss)
|
||||
pnpm gen:lexers
|
||||
|
||||
```bash
|
||||
# Preview the built site locally (requires build first)
|
||||
pnpm preview
|
||||
|
||||
# Build UnoCSS utility classes (pre-built, committed to repo)
|
||||
pnpm unocss
|
||||
# Watch mode for UnoCSS (for theme developers)
|
||||
pnpm unocss:watch
|
||||
```
|
||||
|
||||
> [!TIP]
|
||||
>
|
||||
> - Add `-e production` to the development command to check the production environment, e.g. `pnpm dev:test -e production`.
|
||||
> - Add `-e debug` to enable debug mode (if applicable), e.g. `pnpm dev:test -e debug`.
|
||||
> - For documentation-related theme changes, it is recommended to clone both `FixIt` and `fixit-docs` as sibling directories.
|
||||
|
||||
### Pull Request
|
||||
|
||||
- Create a feature branch from `main`
|
||||
- Make your changes with clear, focused commits
|
||||
- Test your changes thoroughly
|
||||
- Update documentation if needed
|
||||
- Submit a pull request with a clear description
|
||||
|
||||
Finally, create a new pull request at <https://github.com/hugo-fixit/FixIt/pulls> to submit your contribution.
|
||||
|
||||
---
|
||||
|
||||
## Project Structure
|
||||
|
||||
Understanding the project structure will help you contribute more effectively:
|
||||
@@ -83,39 +116,76 @@ FixIt/
|
||||
│ └── test/ # Test site
|
||||
├── archetypes/ # Content templates
|
||||
├── assets/ # Theme assets
|
||||
│ ├── css/ # SCSS stylesheets
|
||||
│ ├── js/ # JavaScript files
|
||||
│ ├── css/ # UnoCSS pre-built output (unocss.css)
|
||||
│ ├── images/ # Image assets
|
||||
│ └── lib/ # Third-party libraries
|
||||
│ ├── js/ # JavaScript files
|
||||
│ ├── lib/ # Third-party libraries
|
||||
│ └── scss/ # SCSS stylesheets
|
||||
├── i18n/ # Internationalization files
|
||||
├── layouts/ # Hugo template files
|
||||
│ ├── _markup/ # Hugo render hooks
|
||||
│ ├── _partials/ # Reusable template components
|
||||
│ └── _shortcodes/ # Custom shortcodes
|
||||
├── packages/ # Theme-related packages
|
||||
├── packages/ # Theme-related packages (pnpm workspaces)
|
||||
│ ├── chroma-lexers/ # Chroma lexer SCSS map generator
|
||||
│ ├── integration/ # Post-build site merging
|
||||
│ ├── shared/ # Shared utilities
|
||||
│ └── versioning/ # Version management (pre-commit)
|
||||
├── static/ # Static files
|
||||
├── hugo.toml # Default theme configuration
|
||||
├── uno.config.ts # UnoCSS configuration
|
||||
└── package.json # npm scripts and dependencies
|
||||
```
|
||||
|
||||
## Development Workflow
|
||||
|
||||
1. **Make your changes** in the appropriate directories
|
||||
2. **Test locally** using `pnpm dev` or `pnpm test`
|
||||
3. **Check different environments** with production builds
|
||||
4. **Verify documentation** changes with `pnpm dev:docs` (if applicable)
|
||||
5. **Commit your changes** following the commit message format below
|
||||
|
||||
## Pull Request Guidelines
|
||||
|
||||
- Create a feature branch from `main`
|
||||
- Make your changes with clear, focused commits
|
||||
- Test your changes thoroughly
|
||||
- Update documentation if needed
|
||||
- Submit a pull request with a clear description
|
||||
|
||||
Finally, create a new pull request at <https://github.com/hugo-fixit/FixIt/pulls> to submit your contribution 🎉
|
||||
|
||||
## Git Commit Guidelines
|
||||
|
||||
We follow the [Conventional Commits](https://www.conventionalcommits.org/) specification for commit messages. This enables automatic changelog generation using our custom template: [conventional.hbs](https://github.com/Lruihao/auto-changelog-plus/blob/main/settings/conventional.hbs).
|
||||
|
||||
> [!NOTE]
|
||||
>
|
||||
> Commits in a PR will normally be squashed into one commit, so you don't need to rebase locally.
|
||||
|
||||
### Commit Message Format
|
||||
|
||||
```
|
||||
<type>(<scope>): <subject>
|
||||
^ ^ ^
|
||||
| | |__ Subject: Concise description of the change (imperative mood, lowercase).
|
||||
| |____________ Scope: The specific part of the codebase affected (optional but recommended).
|
||||
|___________________ Type: Indicates the kind of change.
|
||||
```
|
||||
|
||||
> [!NOTE]
|
||||
>
|
||||
> - Keep the subject line concise and ideally within 72 characters.
|
||||
> - If the change is more than a sentence, add a body.
|
||||
> - Do not include secrets (tokens/keys) or personal data in commit messages.
|
||||
> - Do not invent issue/PR numbers or facts that are not present in the diff.
|
||||
|
||||
### Allowed Types
|
||||
|
||||
- `feat`: A new feature.
|
||||
- `fix`: A bug fix.
|
||||
- `refactor`: Code changes that neither fix a bug nor add a feature.
|
||||
- `chore`: Changes to the build process, auxiliary tools, libraries, documentation generation etc.
|
||||
- `docs`: Documentation only changes.
|
||||
- Other conventional types like `perf`, `style`, `test`, `ci`, `build` are also acceptable.
|
||||
|
||||
### Allowed Scopes
|
||||
|
||||
- `workflow`: CI/CD workflow changes (`.github/workflows/`)
|
||||
- `archetypes`: Content templates (`archetypes/`)
|
||||
- `assets`: Changes to theme assets like CSS, JS (`assets/`)
|
||||
- `i18n`: Internationalization and translation files (`i18n/`)
|
||||
- `layouts`: Root-level Hugo template files (`layouts/*.html`)
|
||||
- `config`: Theme configuration (`hugo.toml`, `theme.toml`)
|
||||
- _(All top-level directories in the layouts and packages directories)_
|
||||
- _(Consider adding other scopes as needed for better granularity)_
|
||||
|
||||
### Examples
|
||||
|
||||
- `feat(_shortcodes): add mapbox zoom control options`
|
||||
- `fix(_partials): avoid duplicate canonical link tags`
|
||||
- `docs(i18n): update translation key naming guidelines`
|
||||
- `ci(workflow): optimize preview deployment cache`
|
||||
- `refactor(assets): split theme initialization into smaller modules`
|
||||
|
||||
@@ -13,9 +13,9 @@
|
||||
<a href="https://fixit.lruihao.cn/ecosystem/hugo-fixit/fixit/?lang=russian">Русский язык</a> |
|
||||
<a href="https://fixit.lruihao.cn/ecosystem/hugo-fixit/fixit/?lang=spanish">Español</a> |
|
||||
<a href="https://fixit.lruihao.cn/ecosystem/hugo-fixit/fixit/?lang=hindi">हिन्दी</a> |
|
||||
<a href="https://fixit.lruihao.cn/ecosystem/hugo-fixit/fixit/?lang=deutsch">deutsch</a> |
|
||||
<a href="https://fixit.lruihao.cn/ecosystem/hugo-fixit/fixit/?lang=deutsch">Deutsch</a> |
|
||||
<a href="https://fixit.lruihao.cn/ecosystem/hugo-fixit/fixit/?lang=korean">한국어</a> |
|
||||
<a href="https://fixit.lruihao.cn/ecosystem/hugo-fixit/fixit/?lang=japanese">しろうと</a>
|
||||
<a href="https://fixit.lruihao.cn/ecosystem/hugo-fixit/fixit/?lang=japanese">日本語</a>
|
||||
</div>
|
||||
|
||||
<a title="FixIt website" href="https://fixit.lruihao.cn"><img align="right" alt="FixIt logo" width="70" height="70" src="https://avatars.githubusercontent.com/u/110414864?s=200&v=4"></a>
|
||||
@@ -26,11 +26,15 @@
|
||||
|
||||
[](https://demo.fixit.lruihao.cn/)
|
||||
[](https://github.com/hugo-fixit/FixIt/releases)
|
||||
[](https://gohugo.io/)
|
||||
[](https://gohugo.io/)
|
||||
[](/LICENSE)
|
||||
[](https://github.com/hugo-fixit/FixIt)
|
||||
[](https://gitee.com/lruihao/FixIt/stargazers)
|
||||
|
||||
> [!WARNING]
|
||||
> **The `main` branch contains the v1 code. For upgrade instructions, see the [v1 migration guide](https://fixit.lruihao.cn/guides/upgrade-to-v1/).**\
|
||||
> Version 1.0.0 is planned for release in **the first half of 2027**. Welcome to join the development and [discussion](https://github.com/orgs/hugo-fixit/discussions/723)!
|
||||
|
||||
## Live Preview
|
||||
|
||||
<p align="center">
|
||||
@@ -44,9 +48,9 @@
|
||||
|
||||
### Documentation
|
||||
|
||||
Head to the [Quick Start](https://fixit.lruihao.cn/documentation/getting-started/quick-start/) page for a step-by-step guide on how to create a new website with FixIt.
|
||||
Head to the [Quick Start](https://fixit.lruihao.cn/docs/getting-started/quick-start/) page for a step-by-step guide on how to create a new website with FixIt.
|
||||
|
||||
Outline: [Installation](https://fixit.lruihao.cn/documentation/installation/) ➜ [Getting Started](https://fixit.lruihao.cn/documentation/getting-started/) ➜ [Content Management](https://fixit.lruihao.cn/documentation/content-management/) ➜ [Advanced Usage](https://fixit.lruihao.cn/documentation/advanced/)
|
||||
Outline: [Installation](https://fixit.lruihao.cn/docs/installation/) ➜ [Getting Started](https://fixit.lruihao.cn/docs/getting-started/) ➜ [Content Management](https://fixit.lruihao.cn/docs/content-management/) ➜ [Advanced Usage](https://fixit.lruihao.cn/docs/advanced/)
|
||||
|
||||
### Starter Wizard
|
||||
|
||||
@@ -101,10 +105,11 @@ Click the following links to generate a new repository with template:
|
||||
|
||||
- **Responsive** layout
|
||||
- **Light/Dark** mode
|
||||
- **RTL (Right-to-Left)** layout supported
|
||||
- Globally consistent **design language**
|
||||
- **Pagination** supported
|
||||
- Easy-to-use and self-expanding **table of contents**
|
||||
- **Multilanguage** supported and i18n ready
|
||||
- **Multilanguage** supported and I18n ready
|
||||
- Beautiful **CSS animation**
|
||||
|
||||
### Social and Comment Systems
|
||||
@@ -132,7 +137,7 @@ Click the following links to generate a new repository with template:
|
||||
- **Sub Menu** supported
|
||||
- **Content Encryption** supported (Pages, Partial)
|
||||
- **Friends** page embedded template
|
||||
- **Search** supported by [algolia](https://www.algolia.com/), [Fuse.js](https://fusejs.io/), CSE or [PostChat](https://ai.zhheo.com/console/login?InviteID=85041330)
|
||||
- **Search** supported by [algolia](https://www.algolia.com/), [Fuse.js](https://fusejs.io/), [Pagefind](https://pagefind.app), CSE or [PostChat](https://ai.zhheo.com/console/login?InviteID=85041330)
|
||||
- **Custom Search Engine (CSE)** supported by [Google](https://programmablesearchengine.google.com/)
|
||||
- **Twemoji** supported
|
||||
- Automatically **highlighting** code
|
||||
@@ -147,6 +152,7 @@ Click the following links to generate a new repository with template:
|
||||
- **Diagrams** code fences extended and shortcode supported by [mermaid](https://github.com/knsv/mermaid)
|
||||
- **Interactive data visualization** shortcode and code fences extended supported by [ECharts](https://echarts.apache.org/)
|
||||
- **Timeline** code fences extended and shortcode supported
|
||||
- **File tree** code fences extended and shortcode supported
|
||||
- **Mapbox** shortcode supported by [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js)
|
||||
- **Music player** shortcode supported by [APlayer](https://github.com/MoePlayer/APlayer) and [MetingJS](https://github.com/metowolf/MetingJS)
|
||||
- **Bilibili player** and **Douyin player** shortcode
|
||||
@@ -162,9 +168,9 @@ Click the following links to generate a new repository with template:
|
||||
|
||||
</details>
|
||||
|
||||
## Multilingual and i18n
|
||||
## Multilingual and I18n
|
||||
|
||||
FixIt supports multilingual and i18n. For more information, see the [Content Management](https://fixit.lruihao.cn/documentation/content-management/introduction#multilingual) documentation. You are welcome to [contribute with a new language](https://github.com/hugo-fixit/FixIt/pulls).
|
||||
FixIt supports multilingual and i18n. For more information, see the [Content Management](https://fixit.lruihao.cn/docs/content-management/introduction#multilingual) documentation. You are welcome to [contribute with a new language](https://github.com/hugo-fixit/FixIt/pulls).
|
||||
|
||||
<details>
|
||||
<summary>FixIt supports the following languages.</summary>
|
||||
@@ -185,12 +191,24 @@ FixIt supports multilingual and i18n. For more information, see the [Content Man
|
||||
- Hindi
|
||||
- Japanese
|
||||
- Korean
|
||||
- Arabic
|
||||
- Persian
|
||||
- Urdu
|
||||
|
||||
</details>
|
||||
|
||||
## Browsers Support
|
||||
|
||||
The FixIt theme supports the last two versions of all major browsers.
|
||||
|
||||

|
||||

|
||||

|
||||

|
||||
|
||||
## Theme Components
|
||||
|
||||
The FixIt theme balances **simplicity** and **extensibility** with extra [Hugo theme components](https://fixit.lruihao.cn/ecosystem/#-components) for customization.
|
||||
To balance **simplicity** and **extensibility**, FixIt theme provides extra [Hugo theme components](https://fixit.lruihao.cn/ecosystem/#-components) for customization.
|
||||
|
||||
<details>
|
||||
<summary>Click to view.</summary>
|
||||
@@ -232,19 +250,23 @@ The FixIt theme balances **simplicity** and **extensibility** with extra [Hugo t
|
||||
|
||||
All feedback is welcome! Head over to the [discussions][discussions], [Pull requests][pulls] and [issues][issues] tracker.
|
||||
|
||||
| Official Community | Description |
|
||||
| :-------------------------- | :------------------------------ |
|
||||
| [Discussions][discussions] | GitHub discussion forum |
|
||||
| [FixIt WeChat group][wx-mp] | Follow and reply "FixIt" to get |
|
||||
| [FixIt QQ group][qq-group] | QQ group: `814031017` |
|
||||
| [Hugo FixIt Planet][zsxq] | Paid knowledge Planet |
|
||||
| Official Community | Description |
|
||||
| :--------------------------- | :------------------------------ |
|
||||
| [Discussions][discussions] | GitHub discussion forum |
|
||||
| [FixIt WeChat group][wx-mp] | Follow and reply "FixIt" to get |
|
||||
| [FixIt QQ group][qq-group] | QQ group: `814031017` |
|
||||
| [FixIt Dev group][dev-group] | QQ group: `770835493` |
|
||||
|
||||
[discussions]: https://github.com/hugo-fixit/FixIt/discussions
|
||||
[pulls]: https://github.com/hugo-fixit/FixIt/pulls
|
||||
[issues]: https://github.com/hugo-fixit/FixIt/issues
|
||||
[qq-group]: https://qm.qq.com/cgi-bin/qm/qr?k=awbwdTtSQ_-H5QGzeJxdWgv6JMbNehNM&jump_from=webapi
|
||||
[zsxq]: https://t.zsxq.com/GgKEW
|
||||
[wx-mp]: https://lruihao.cn/images/qr-wx-mp.webp
|
||||
[qq-group]: https://qm.qq.com/q/Mn1I7ljqsS
|
||||
[dev-group]: https://qm.qq.com/q/ky3uru0mbu
|
||||
|
||||
## China Mirror
|
||||
|
||||
A mirror is available on Gitee for users in mainland China: [gitee.com/lruihao/FixIt](https://gitee.com/lruihao/FixIt)
|
||||
|
||||
## Contributing
|
||||
|
||||
@@ -264,11 +286,12 @@ Thanks to the [Hugo DoIt](https://github.com/HEIGE-PCloud/DoIt) theme and [Hexo
|
||||
<details>
|
||||
<summary>Thanks to all the open source projects used in the FixIt theme.</summary>
|
||||
|
||||
- [UnoCSS](https://github.com/unocss/unocss)
|
||||
- [normalize.css](https://github.com/necolas/normalize.css)
|
||||
- [Font Awesome](https://fontawesome.com/)
|
||||
- [Font Awesome](https://github.com/FortAwesome/Font-Awesome)
|
||||
- [Simple Icons](https://github.com/simple-icons/simple-icons)
|
||||
- [Animate.css](https://daneden.github.io/animate.css/)
|
||||
- [autocomplete-js](https://github.com/algolia/autocomplete)
|
||||
- [Animate.css](https://github.com/animate-css/animate.css)
|
||||
- [autocomplete](https://github.com/algolia/autocomplete)
|
||||
- [algoliasearch](https://github.com/algolia/algoliasearch-client-javascript)
|
||||
- [Fuse.js](https://fusejs.io/)
|
||||
- [object-fit-images](https://github.com/fregante/object-fit-images)
|
||||
@@ -296,9 +319,7 @@ Thanks to the [Hugo DoIt](https://github.com/HEIGE-PCloud/DoIt) theme and [Hexo
|
||||
- [Twikoo](https://twikoo.js.org/)
|
||||
- [github-corners](https://github.com/tholman/github-corners)
|
||||
- [giscus](https://giscus.app/zh-CN)
|
||||
- [crypto-js](https://github.com/brix/crypto-js)
|
||||
- [pace](https://github.com/CodeByZach/pace)
|
||||
- [xxhash-wasm](https://github.com/jungomi/xxhash-wasm)
|
||||
- [`<tab-container>` element](https://github.com/github/tab-container-element)
|
||||
- [`<json-viewer>` element](https://github.com/Lruihao/json-viewer-element)
|
||||
|
||||
@@ -314,7 +335,7 @@ If you enjoy the theme, please consider buying me a cup of coffee ☕️. Thanks
|
||||
|
||||
- [WeChat Pay](/images/wechatpay.jpg)
|
||||
- [Alipay](/images/alipay.jpg)
|
||||
- [PayPal](https://paypal.me/Lruihao)
|
||||
<!-- - [PayPal](https://paypal.me/Lruihao) -->
|
||||
|
||||
Thanks to the following sponsors for their great support:
|
||||
|
||||
|
||||
+70
-49
@@ -13,9 +13,9 @@
|
||||
<a href="https://fixit.lruihao.cn/ecosystem/hugo-fixit/fixit/?lang=russian">Русский язык</a> |
|
||||
<a href="https://fixit.lruihao.cn/ecosystem/hugo-fixit/fixit/?lang=spanish">Español</a> |
|
||||
<a href="https://fixit.lruihao.cn/ecosystem/hugo-fixit/fixit/?lang=hindi">हिन्दी</a> |
|
||||
<a href="https://fixit.lruihao.cn/ecosystem/hugo-fixit/fixit/?lang=deutsch">deutsch</a> |
|
||||
<a href="https://fixit.lruihao.cn/ecosystem/hugo-fixit/fixit/?lang=deutsch">Deutsch</a> |
|
||||
<a href="https://fixit.lruihao.cn/ecosystem/hugo-fixit/fixit/?lang=korean">한국어</a> |
|
||||
<a href="https://fixit.lruihao.cn/ecosystem/hugo-fixit/fixit/?lang=japanese">しろうと</a>
|
||||
<a href="https://fixit.lruihao.cn/ecosystem/hugo-fixit/fixit/?lang=japanese">日本語</a>
|
||||
</div>
|
||||
|
||||
<a title="FixIt 官网" href="https://fixit.lruihao.cn/zh-cn/"><img align="right" alt="FixIt logo" width="70" height="70" src="https://avatars.githubusercontent.com/u/110414864?s=200&v=4"></a>
|
||||
@@ -26,11 +26,15 @@
|
||||
|
||||
[](https://demo.fixit.lruihao.cn/)
|
||||
[](https://github.com/hugo-fixit/FixIt/releases)
|
||||
[](https://gohugo.io/)
|
||||
[](https://gohugo.io/)
|
||||
[](/LICENSE)
|
||||
[](https://github.com/hugo-fixit/FixIt)
|
||||
[](https://gitee.com/lruihao/FixIt/stargazers)
|
||||
|
||||
> [!WARNING]
|
||||
> **当前 `main` 分支包含 v1 代码,升级详见 [v1 升级指南](https://fixit.lruihao.cn/guides/upgrade-to-v1/)**。\
|
||||
> 1.0 版本计划在 **2027 年上半年** 发布,欢迎加入开发和 [讨论](https://github.com/orgs/hugo-fixit/discussions/723)!
|
||||
|
||||
## 即时预览
|
||||
|
||||
<p align="center">
|
||||
@@ -44,9 +48,9 @@
|
||||
|
||||
### 主题文档
|
||||
|
||||
前往 [快速上手](https://fixit.lruihao.cn/zh-cn/documentation/getting-started/quick-start/) 页面,了解如何使用 FixIt 主题创建一个新网站的详细步骤。
|
||||
前往 [快速上手](https://fixit.lruihao.cn/zh-cn/docs/getting-started/quick-start/) 页面,了解如何使用 FixIt 主题创建一个新网站的详细步骤。
|
||||
|
||||
大纲:[安装篇](https://fixit.lruihao.cn/zh-cn/documentation/installation/) ➜ [入门篇](https://fixit.lruihao.cn/zh-cn/documentation/getting-started/) ➜ [内容管理](https://fixit.lruihao.cn/zh-cn/documentation/content-management/) ➜ [进阶篇](https://fixit.lruihao.cn/zh-cn/documentation/advanced/)
|
||||
大纲:[安装篇](https://fixit.lruihao.cn/zh-cn/docs/installation/) ➜ [入门篇](https://fixit.lruihao.cn/zh-cn/docs/getting-started/) ➜ [内容管理](https://fixit.lruihao.cn/zh-cn/docs/content-management/) ➜ [进阶篇](https://fixit.lruihao.cn/zh-cn/docs/advanced/)
|
||||
|
||||
### 快速开始
|
||||
|
||||
@@ -85,8 +89,8 @@ pnpx fixit-cli create my-blog
|
||||
|
||||
### 性能和 SEO
|
||||
|
||||
- **性能**优化:在 [Google PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights) 中,99/100 的移动设备得分和 100/100 的桌面设备得分
|
||||
- 使用基于 JSON-LD 格式 的 **SEO SCHEMA** 文件进行 SEO 优化
|
||||
- **性能优化**:在 [Google PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights) 中,99/100 的移动设备得分和 100/100 的桌面设备得分
|
||||
- 使用基于 JSON-LD 格式的 **SEO SCHEMA** 文件进行 SEO 优化
|
||||
- 支持 **[Google Analytics](https://analytics.google.com/analytics)**
|
||||
- 支持 **[Fathom Analytics](https://usefathom.com/)**
|
||||
- 支持 **[百度统计](https://tongji.baidu.com/)**
|
||||
@@ -94,23 +98,24 @@ pnpx fixit-cli create my-blog
|
||||
- 支持 **[Plausible Analytics](https://plausible.io/)**
|
||||
- 支持 **[Cloudflare Web Analytics](https://www.cloudflare.com/web-analytics)**
|
||||
- 支持 **[Splitbee Analytics](https://splitbee.io)**
|
||||
- 支持搜索引擎的**网站验证** (Google, Bing, Yandex, Pinterest, Baidu, 360 and Sogou)
|
||||
- 支持搜索引擎的 **网站验证** (Google, Bing, Yandex, Pinterest, Baidu, 360 and Sogou)
|
||||
- 支持所有第三方库的 **CDN**
|
||||
|
||||
### 外观和布局
|
||||
|
||||
- **响应式**布局
|
||||
- **响应式** 布局
|
||||
- **浅色/深色** 主题模式
|
||||
- 全局一致的**设计语言**
|
||||
- 支持**分页**
|
||||
- 易用和自动展开的**文章目录**
|
||||
- 支持**多语言**和国际化
|
||||
- 支持 **RTL(从右到左)** 布局
|
||||
- 全局一致的 **设计语言**
|
||||
- 支持 **分页**
|
||||
- 易用和自动展开的 **文章目录**
|
||||
- 支持 **多语言** 和国际化
|
||||
- 美观的 **CSS 动画**
|
||||
|
||||
### 社交和评论系统
|
||||
|
||||
- 支持 **[Gravatar](https://gravatar.com)** 头像
|
||||
- 支持本地**头像**
|
||||
- 支持本地 **头像**
|
||||
- 支持多达 **87** 种社交链接
|
||||
- 支持多达 **28** 种网站分享
|
||||
- 支持 **[Disqus](https://disqus.com)** 评论系统
|
||||
@@ -128,43 +133,44 @@ pnpx fixit-cli create my-blog
|
||||
### 扩展功能
|
||||
|
||||
- 支持基于 [PostChat](https://ai.zhheo.com/console/login?InviteID=85041330) 的 **AI 摘要**、**AI 搜索** 和 **AI 智能客服**
|
||||
- 支持**渐进式网页应用**
|
||||
- 支持**二级菜单**
|
||||
- 支持**内容加密**(页面、局部)
|
||||
- 支持**友情链接**的页面模板
|
||||
- 支持基于 [algolia](https://www.algolia.com/)、[Fuse.js](https://fusejs.io/)、 **CSE** 或 [PostChat](https://ai.zhheo.com/console/login?InviteID=85041330) 的**搜索**
|
||||
- 支持基于 [Google](https://programmablesearchengine.google.com/) 的**自定义搜索引擎 (CSE)**
|
||||
- 支持 **渐进式网页应用**
|
||||
- 支持 **二级菜单**
|
||||
- 支持 **内容加密**(页面、局部)
|
||||
- 支持 **友情链接** 的页面模板
|
||||
- 支持基于 [algolia](https://www.algolia.com/)、[Fuse.js](https://fusejs.io/)、[Pagefind](https://pagefind.app)、CSE 或 [PostChat](https://ai.zhheo.com/console/login?InviteID=85041330) 的 **搜索**
|
||||
- 支持基于 [Google](https://programmablesearchengine.google.com/) 的 **自定义搜索引擎 (CSE)**
|
||||
- 支持 **Twemoji**
|
||||
- 支持**代码高亮**
|
||||
- 一键**复制代码**到剪贴板
|
||||
- 支持基于 [lightgallery](https://github.com/sachinchoolur/lightgallery) 的**图片画廊**
|
||||
- 支持 **[Font Awesome](https://fontawesome.com/) 图标**的 Markdown 扩展语法
|
||||
- 支持**上标注释**的 Markdown 扩展语法
|
||||
- 支持**分数**的 Markdown 扩展语法
|
||||
- 支持 **代码高亮**
|
||||
- 一键 **复制代码** 到剪贴板
|
||||
- 支持基于 [lightgallery](https://github.com/sachinchoolur/lightgallery) 的 **图片画廊**
|
||||
- 支持 **[Font Awesome](https://fontawesome.com/) 图标** 的 Markdown 扩展语法
|
||||
- 支持 **上标注释** 的 Markdown 扩展语法
|
||||
- 支持 **分数** 的 Markdown 扩展语法
|
||||
- 支持多种 **admonitions** shortcode 或 **alerts** 的 Markdown 扩展语法
|
||||
- 支持**标签页**的 shortcode,提供多种设计样式
|
||||
- 支持基于 [KaTeX](https://katex.org/) 或 [MathJax](https://www.mathjax.org) 的**数学公式**
|
||||
- 支持基于 [mermaid](https://github.com/knsv/mermaid) 的**图表** 代码块扩展语法和 shortcode
|
||||
- 支持基于 [ECharts](https://echarts.apache.org/) 的**交互式数据可视化** 代码块扩展语法和 shortcode
|
||||
- 支持 **标签页** 的 shortcode,提供多种设计样式
|
||||
- 支持基于 [KaTeX](https://katex.org/) 或 [MathJax](https://www.mathjax.org) 的 **数学公式**
|
||||
- 支持基于 [mermaid](https://github.com/knsv/mermaid) 的 **图表** 代码块扩展语法和 shortcode
|
||||
- 支持基于 [ECharts](https://echarts.apache.org/) 的 **交互式数据可视化** 代码块扩展语法和 shortcode
|
||||
- 支持 **Timeline** 的代码块扩展语法和 shortcode
|
||||
- 支持 **文件树** 的代码块扩展语法和 shortcode
|
||||
- 支持基于 [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js) 的 **Mapbox** shortcode
|
||||
- 支持基于 [APlayer](https://github.com/MoePlayer/APlayer) 和 [MetingJS](https://github.com/metowolf/MetingJS) 的**音乐播放器** shortcode
|
||||
- 支持基于 [APlayer](https://github.com/MoePlayer/APlayer) 和 [MetingJS](https://github.com/metowolf/MetingJS) 的 **音乐播放器** shortcode
|
||||
- 支持 **Bilibili 视频** 和 **抖音视频** shortcode
|
||||
- 支持**自定义样式**的 shortcode
|
||||
- 支持**自定义脚本**的 shortcode
|
||||
- 支持**自定义模板块**
|
||||
- 支持 **自定义样式** 的 shortcode
|
||||
- 支持 **自定义脚本** 的 shortcode
|
||||
- 支持 **自定义模板块**
|
||||
- 支持基于 [TypeIt](https://typeitjs.com/) 的**打字动画** shortcode
|
||||
- 支持基于 [cookieconsent](https://github.com/osano/cookieconsent) 的 **Cookie 许可横幅**
|
||||
- 支持基于 [cell-watermark](https://github.com/Lruihao/watermark) 的**网页水印**
|
||||
- 支持基于 [pangu.js](https://github.com/vinta/pangu.js) 的**中文排版**
|
||||
- 支持本地**缓存远程图床图片**
|
||||
- 支持基于 [cell-watermark](https://github.com/Lruihao/watermark) 的 **网页水印**
|
||||
- 支持基于 [pangu.js](https://github.com/vinta/pangu.js) 的 **中文排版**
|
||||
- 支持本地 **缓存远程图床图片**
|
||||
- ……
|
||||
|
||||
</details>
|
||||
|
||||
## 多语言和国际化
|
||||
|
||||
FixIt 主题多语言基本配置及自动翻译等详见 [内容管理](https://fixit.lruihao.cn/zh-cn/documentation/content-management/introduction#multilingual) 文档,欢迎 [贡献一种新的语言](https://github.com/hugo-fixit/FixIt/pulls)。
|
||||
FixIt 主题多语言基本配置及自动翻译等详见 [内容管理](https://fixit.lruihao.cn/zh-cn/docs/content-management/introduction#multilingual) 文档,欢迎 [贡献一种新的语言](https://github.com/hugo-fixit/FixIt/pulls)。
|
||||
|
||||
<details>
|
||||
<summary>FixIt 支持下列语言。</summary>
|
||||
@@ -185,12 +191,24 @@ FixIt 主题多语言基本配置及自动翻译等详见 [内容管理](https:/
|
||||
- 印地语
|
||||
- 日语
|
||||
- 韩语
|
||||
- 阿拉伯语
|
||||
- 波斯语
|
||||
- 乌尔都语
|
||||
|
||||
</details>
|
||||
|
||||
## 浏览器支持
|
||||
|
||||
FixIt 主题支持所有主流浏览器的最近两个版本。
|
||||
|
||||

|
||||

|
||||

|
||||

|
||||
|
||||
## 主题组件
|
||||
|
||||
FixIt 主题旨在在**简洁性**和**可扩展性**之间取得平衡。为此,我们开发了一系列额外的 [Hugo 主题组件](https://fixit.lruihao.cn/zh-cn/ecosystem/#-组件) 供用户选择。
|
||||
为了平衡 FixIt 主题的 **简洁性** 和 **可扩展性**,我们额外开发了一系列 [Hugo 主题组件](https://fixit.lruihao.cn/zh-cn/ecosystem/#-组件) 供用户选择。
|
||||
|
||||
<details>
|
||||
<summary>点击展开</summary>
|
||||
@@ -237,14 +255,18 @@ FixIt 主题旨在在**简洁性**和**可扩展性**之间取得平衡。为此
|
||||
| [Discussions][discussions] | GitHub 讨论区 |
|
||||
| [FixIt 主题交流群(微信)][wx-mp] | 关注「菠菜眾長」回复“FixIt”获取 |
|
||||
| [FixIt 主题交流群(QQ)][qq-group] | QQ 群:`814031017` |
|
||||
| [Hugo FixIt 星球][zsxq] | 付费知识星球 |
|
||||
| [FixIt 开发交流群][dev-group] | QQ 群:`770835493` |
|
||||
|
||||
[discussions]: https://github.com/hugo-fixit/FixIt/discussions
|
||||
[pulls]: https://github.com/hugo-fixit/FixIt/pulls
|
||||
[issues]: https://github.com/hugo-fixit/FixIt/issues
|
||||
[qq-group]: https://qm.qq.com/cgi-bin/qm/qr?k=awbwdTtSQ_-H5QGzeJxdWgv6JMbNehNM&jump_from=webapi
|
||||
[zsxq]: https://t.zsxq.com/GgKEW
|
||||
[wx-mp]: https://lruihao.cn/images/qr-wx-mp.webp
|
||||
[qq-group]: https://qm.qq.com/q/Mn1I7ljqsS
|
||||
[dev-group]: https://qm.qq.com/q/ky3uru0mbu
|
||||
|
||||
## 中国区镜像
|
||||
|
||||
为方便中国大陆用户访问,FixIt 在 Gitee 上提供了镜像仓库:[gitee.com/lruihao/FixIt](https://gitee.com/lruihao/FixIt)
|
||||
|
||||
## 参与贡献
|
||||
|
||||
@@ -264,11 +286,12 @@ FixIt 主题旨在在**简洁性**和**可扩展性**之间取得平衡。为此
|
||||
<details>
|
||||
<summary>感谢 FixIt 主题中使用的所有开源项目。</summary>
|
||||
|
||||
- [UnoCSS](https://github.com/unocss/unocss)
|
||||
- [normalize.css](https://github.com/necolas/normalize.css)
|
||||
- [Font Awesome](https://fontawesome.com/)
|
||||
- [Font Awesome](https://github.com/FortAwesome/Font-Awesome)
|
||||
- [Simple Icons](https://github.com/simple-icons/simple-icons)
|
||||
- [Animate.css](https://daneden.github.io/animate.css/)
|
||||
- [autocomplete-js](https://github.com/algolia/autocomplete)
|
||||
- [Animate.css](https://github.com/animate-css/animate.css)
|
||||
- [autocomplete](https://github.com/algolia/autocomplete)
|
||||
- [algoliasearch](https://github.com/algolia/algoliasearch-client-javascript)
|
||||
- [Fuse.js](https://fusejs.io/)
|
||||
- [object-fit-images](https://github.com/fregante/object-fit-images)
|
||||
@@ -296,9 +319,7 @@ FixIt 主题旨在在**简洁性**和**可扩展性**之间取得平衡。为此
|
||||
- [Twikoo](https://twikoo.js.org/)
|
||||
- [github-corners](https://github.com/tholman/github-corners)
|
||||
- [giscus](https://giscus.app/zh-CN)
|
||||
- [crypto-js](https://github.com/brix/crypto-js)
|
||||
- [pace](https://github.com/CodeByZach/pace)
|
||||
- [xxhash-wasm](https://github.com/jungomi/xxhash-wasm)
|
||||
- [`<tab-container>` element](https://github.com/github/tab-container-element)
|
||||
- [`<json-viewer>` element](https://github.com/Lruihao/json-viewer-element)
|
||||
|
||||
@@ -314,11 +335,11 @@ FixIt 根据 **MIT** 许可协议授权。更多信息请查看 [LICENSE 文件]
|
||||
|
||||
- [微信支付](/images/wechatpay.jpg)
|
||||
- [支付宝](/images/alipay.jpg)
|
||||
- [PayPal](https://paypal.me/Lruihao)
|
||||
<!-- - [PayPal](https://paypal.me/Lruihao) -->
|
||||
|
||||
感谢以下赞助商提供大力支持:
|
||||
|
||||
- [translate.js](https://github.com/xnx3/translate) 赞助[企业级翻译通道](https://translate.zvo.cn/4087.html)。
|
||||
- [translate.js](https://github.com/xnx3/translate) 赞助 [企业级翻译通道](https://translate.zvo.cn/4087.html)。
|
||||
|
||||
## 作者
|
||||
|
||||
|
||||
+8
-14
@@ -2,21 +2,15 @@
|
||||
|
||||
## Supported Versions
|
||||
|
||||
We actively maintain and provide security updates for the following versions:
|
||||
Only the latest version receives active maintenance and security updates:
|
||||
|
||||
### Current Versions
|
||||
|
||||
| Version | Hugo Version | Supported | Status |
|
||||
| :-----: | :---------------: | :----------------: | :------------: |
|
||||
| 0.4.x | >= 0.147.7 | :white_check_mark: | Latest (Alpha) |
|
||||
| 0.3.x | 0.112.0 ~ 0.146.0 | :white_check_mark: | Stable |
|
||||
|
||||
### Legacy and Transitional Versions
|
||||
|
||||
| Version | Hugo Version | LoveIt Compatibility | Supported |
|
||||
| :-----: | :--------------: | :------------------: | :-------: |
|
||||
| 0.1.x | Unknown | :white_check_mark: | :x: |
|
||||
| 0.2.x | 0.62.0 ~ 0.110.0 | :white_check_mark: | :x: |
|
||||
| Version | Hugo Version | LoveIt Compat | Supported |
|
||||
| :-----: | :---------------: | :----------------: | :----------------: |
|
||||
| 1.x | 0.159.0 ~ latest | N/A | :white_check_mark: |
|
||||
| 0.4.x | 0.147.7 ~ 0.157.0 | N/A | :white_check_mark: |
|
||||
| 0.3.x | 0.112.0 ~ 0.146.0 | N/A | :x: |
|
||||
| 0.2.x | 0.62.0 ~ 0.110.0 | :white_check_mark: | :x: |
|
||||
| 0.1.x | Unknown | :white_check_mark: | :x: |
|
||||
|
||||
## Security Considerations
|
||||
|
||||
|
||||
@@ -0,0 +1,25 @@
|
||||
# Apps
|
||||
|
||||
This directory contains the Hugo sites used for development, testing, and demonstration of the [FixIt](https://fixit.lruihao.cn) theme.
|
||||
|
||||
## Overview
|
||||
|
||||
| App | Description | Live |
|
||||
| -------------- | ----------------------------------------------------- | ----------------------------------------------------------------- |
|
||||
| [demo](./demo) | Demo site showcasing FixIt theme features | [demo.fixit.lruihao.cn](https://demo.fixit.lruihao.cn) |
|
||||
| [test](./test) | Test site for exercising and verifying theme features | [demo.fixit.lruihao.cn/test](https://demo.fixit.lruihao.cn/test/) |
|
||||
|
||||
> [!NOTE]
|
||||
> The documentation site (`fixit-docs`) lives in a separate repository: [hugo-fixit/fixit-docs](https://github.com/hugo-fixit/fixit-docs).
|
||||
|
||||
## Development
|
||||
|
||||
From the repository root:
|
||||
|
||||
```bash
|
||||
pnpm dev:demo # Start demo site dev server
|
||||
pnpm dev:test # Start test site dev server
|
||||
pnpm build:demo # Build demo site
|
||||
pnpm build:test # Build test site
|
||||
pnpm build # Build all sites (merged into public/)
|
||||
```
|
||||
+3
-8
@@ -7,7 +7,7 @@
|
||||
# See: https://gohugo.io/getting-started/configuration/
|
||||
# -------------------------------------------------------------------------------------
|
||||
|
||||
title = "Hugo FixIt Demo"
|
||||
title = "FixIt Demo"
|
||||
baseURL = "https://demo.fixit.lruihao.cn/"
|
||||
# theme = "FixIt"
|
||||
|
||||
@@ -17,20 +17,15 @@ _merge = "shallow"
|
||||
[outputs]
|
||||
_merge = "shallow"
|
||||
|
||||
# -------------------------------------------------------------------------------------
|
||||
# Taxonomies Configuration
|
||||
# See: https://gohugo.io/content-management/taxonomies/#configure-taxonomies
|
||||
# -------------------------------------------------------------------------------------
|
||||
|
||||
[taxonomies]
|
||||
_merge = "shallow"
|
||||
|
||||
# -------------------------------------------------------------------------------------
|
||||
# Theme Core Configuration
|
||||
# See: https://fixit.lruihao.cn/documentation/basics/#theme-configuration
|
||||
# See: https://fixit.lruihao.cn/docs/getting-started/configuration/params/
|
||||
# -------------------------------------------------------------------------------------
|
||||
|
||||
[params]
|
||||
# FixIt theme version
|
||||
version = "0.3.X" # e.g. "0.2.X", "0.2.15", "v0.2.15" etc.
|
||||
version = "1.0.X"
|
||||
# ...
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
"name": "@hugo-fixit/demo",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build": "hugo --themesDir ../../.. --theme $PWD/../.. --gc --minify --logLevel info",
|
||||
"dev": "hugo server --themesDir ../../.. --theme $PWD/../.. -D --disableFastRender --navigateToChanged --ignoreCache -O"
|
||||
"build": "hugo --themesDir ../.. --theme . --gc --minify --logLevel info",
|
||||
"dev": "hugo server --themesDir ../.. --theme . -D --disableFastRender --navigateToChanged --ignoreCache -O"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,72 @@
|
||||
[
|
||||
{
|
||||
"name": "src-json",
|
||||
"type": "dir",
|
||||
"children": [
|
||||
{
|
||||
"name": "index.ts",
|
||||
"type": "file"
|
||||
},
|
||||
{
|
||||
"name": "components",
|
||||
"type": "dir",
|
||||
"children": [
|
||||
{
|
||||
"name": "Header.tsx",
|
||||
"type": "file"
|
||||
},
|
||||
{
|
||||
"name": "Footer.tsx",
|
||||
"type": "file"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "utils",
|
||||
"type": "dir",
|
||||
"children": [
|
||||
{
|
||||
"name": "helper.ts",
|
||||
"type": "file"
|
||||
},
|
||||
{
|
||||
"name": "validator.ts",
|
||||
"type": "file"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "public",
|
||||
"type": "dir",
|
||||
"children": [
|
||||
{
|
||||
"name": "favicon.ico",
|
||||
"type": "file"
|
||||
},
|
||||
{
|
||||
"name": "images",
|
||||
"type": "dir",
|
||||
"children": [
|
||||
{
|
||||
"name": "logo.png",
|
||||
"type": "file"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "package.json",
|
||||
"type": "file"
|
||||
},
|
||||
{
|
||||
"name": "README.md",
|
||||
"type": "file"
|
||||
},
|
||||
{
|
||||
"name": "tsconfig.json",
|
||||
"type": "file"
|
||||
}
|
||||
]
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
@@ -39,7 +39,7 @@ This article comprehensively tests the **Alerts** Markdown syntax extension and
|
||||
> [!NOTE] FixIt
|
||||
> A clean, elegant but advanced Hugo theme.
|
||||
|
||||
> [!TIP] This is a title-only alert
|
||||
> [!TIP] This is a title-only alert.
|
||||
|
||||
### Foldable Alerts
|
||||
|
||||
@@ -59,6 +59,11 @@ Alerts can be nested in multiple levels:
|
||||
> > [!todo] Yes! They can be nested.
|
||||
> > > [!example] You can even use multiple layers of nesting.
|
||||
|
||||
### Content-only Alerts
|
||||
|
||||
> [!TIP]~
|
||||
> This is a content-only alert without a title.
|
||||
|
||||
### Supported types
|
||||
|
||||
> [!note]+
|
||||
|
||||
@@ -26,3 +26,9 @@ Testing APlayer shortcode in FixIt theme.
|
||||
[00:08.02]amazing
|
||||
{{< /audio >}}
|
||||
{{< /aplayer >}}
|
||||
|
||||
{{% fixit-encryptor "1212" %}}
|
||||
{{< aplayer fixed=false mini=false autoplay=false theme="#b7daff" loop="all" order="list" preload="auto" volume=0.7 mutex=true lrcType=3 listFolded=false listMaxHeight="" storageName="aplayer-setting" >}}
|
||||
{{< audio name="Wavelength" artist="oldmanyoung" url="Wavelength.mp3" cover="Wavelength.webp" lrc="Wavelength.lrc" />}}
|
||||
{{< /aplayer >}}
|
||||
{{% /fixit-encryptor %}}
|
||||
|
||||
@@ -0,0 +1,166 @@
|
||||
---
|
||||
title: Code Tabs Test
|
||||
date: 2026-01-25T07:50:22+08:00
|
||||
collections:
|
||||
- Tests
|
||||
categories:
|
||||
- Markdown
|
||||
tags:
|
||||
- Code Tabs
|
||||
---
|
||||
|
||||
Code tabs test cases for grouped code blocks.
|
||||
|
||||
<!--more-->
|
||||
|
||||
## Default Name
|
||||
|
||||
```python {group=tab2}
|
||||
print("Python")
|
||||
```
|
||||
|
||||
```go {group=tab2}
|
||||
fmt.Println("Go")
|
||||
```
|
||||
|
||||
## Custom Name
|
||||
|
||||
```js {group=tab-actions name="[JavaScript]"}
|
||||
function sum(a, b) {
|
||||
return a + b
|
||||
}
|
||||
|
||||
console.log(sum(1, 2))
|
||||
```
|
||||
|
||||
```python {group=tab-actions name="[Python]"}
|
||||
def sum(a, b):
|
||||
return a + b
|
||||
|
||||
print(sum(1, 2))
|
||||
```
|
||||
|
||||
## Active Tab
|
||||
|
||||
```js {group=tab-active name="Inactive Tab"}
|
||||
function greet(name) {
|
||||
return `Hello, ${name}!`
|
||||
}
|
||||
```
|
||||
|
||||
```python {group=tab-active name="Active Tab" .active}
|
||||
def greet(name):
|
||||
return f"Hello, {name}!"
|
||||
```
|
||||
|
||||
## Shadow
|
||||
|
||||
```js {group=tab-shadow name="Always" shadow="always"}
|
||||
function greet(name) {
|
||||
return `Hello, ${name}!`
|
||||
}
|
||||
```
|
||||
|
||||
```python {group=tab-shadow name="Hover" shadow="hover"}
|
||||
def greet(name):
|
||||
return f"Hello, {name}!"
|
||||
```
|
||||
|
||||
```go {group=tab-shadow name="Never" shadow="never"}
|
||||
func greet(name string) string {
|
||||
return fmt.Sprintf("Hello, %s!", name)
|
||||
}
|
||||
```
|
||||
|
||||
## Mode
|
||||
|
||||
```ts {group=tab-mode name="Classic"}
|
||||
interface User {
|
||||
id: number
|
||||
name: string
|
||||
}
|
||||
```
|
||||
|
||||
```ts {group=tab-mode name="Mac" mode="mac"}
|
||||
interface User {
|
||||
id: number
|
||||
name: string
|
||||
}
|
||||
```
|
||||
|
||||
```ts {group=tab-mode name="Simple" mode="simple"}
|
||||
interface User {
|
||||
id: number
|
||||
name: string
|
||||
}
|
||||
```
|
||||
|
||||
## Actions
|
||||
|
||||
```bash {group=tab-actions name="lineNos=true" lineNos=true}
|
||||
echo "line 1"
|
||||
echo "line 2"
|
||||
echo "line 3"
|
||||
```
|
||||
|
||||
```bash {group=tab-actions name="lineNos=false" lineNos=false}
|
||||
echo "line 1"
|
||||
echo "line 2"
|
||||
echo "line 3"
|
||||
```
|
||||
|
||||
```bash {group=tab-actions name="wrapping" .line-wrapping}
|
||||
printf "this is a very very very very very very very very very very very very very very very very long line"
|
||||
```
|
||||
|
||||
```js {group=tab-actions name="editable" editable=true}
|
||||
function greet(name) {
|
||||
return `Hello, ${name}!`
|
||||
}
|
||||
```
|
||||
|
||||
## Expanded/Collapsed
|
||||
|
||||
```js {group=tab-expand name="Expanded"}
|
||||
function longFunction() {
|
||||
console.log('This is a long function.')
|
||||
console.log('It has many lines of code.')
|
||||
console.log('The code block should be expanded by default.')
|
||||
console.log('Lorem ipsum dolor sit amet, consectetur adipiscing elit.')
|
||||
console.log('Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.')
|
||||
console.log('Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.')
|
||||
console.log('Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.')
|
||||
console.log('Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.')
|
||||
console.log('The end of the long function.')
|
||||
}
|
||||
```
|
||||
|
||||
```js {group=tab-expand name="Collapsed" .is-collapsed}
|
||||
function shortFunction() {
|
||||
console.log('This is a short function.')
|
||||
}
|
||||
```
|
||||
|
||||
## Code tabs inside other blocks
|
||||
|
||||
> [!NOTE]+
|
||||
>
|
||||
> ```python {group=tab-nested}
|
||||
> print("Python")
|
||||
> ```
|
||||
>
|
||||
> ```go {group=tab-nested}
|
||||
> fmt.Println("Go")
|
||||
> ```
|
||||
|
||||
{{< details open=true >}}
|
||||
|
||||
```python {group=tab2}
|
||||
print("Python")
|
||||
```
|
||||
|
||||
```go {group=tab2}
|
||||
fmt.Println("Go")
|
||||
```
|
||||
|
||||
{{< /details >}}
|
||||
@@ -18,7 +18,7 @@ Testing code block in FixIt theme.
|
||||
🎉🥚 in development mode!
|
||||
```
|
||||
|
||||
## Multiple modes
|
||||
## Multiple `modes`
|
||||
|
||||
```js {mode="classic"}
|
||||
// Classic mode
|
||||
@@ -64,6 +64,38 @@ hello('FixIt')
|
||||
// Hello, FixIt!
|
||||
```
|
||||
|
||||
## Shadow
|
||||
|
||||
{{< tabs >}}
|
||||
{{% tab title="Always" %}}
|
||||
|
||||
```js {shadow="always"}
|
||||
function hello(x = 'world') {
|
||||
console.log(`Hello, ${x}!`)
|
||||
}
|
||||
```
|
||||
|
||||
{{% /tab %}}
|
||||
{{% tab title="Hover" %}}
|
||||
|
||||
```js {shadow="hover"}
|
||||
function hello(x = 'world') {
|
||||
console.log(`Hello, ${x}!`)
|
||||
}
|
||||
```
|
||||
|
||||
{{% /tab %}}
|
||||
{{% tab title="Never" %}}
|
||||
|
||||
```js {shadow="never"}
|
||||
function hello(x = 'world') {
|
||||
console.log(`Hello, ${x}!`)
|
||||
}
|
||||
```
|
||||
|
||||
{{% /tab %}}
|
||||
{{< /tabs >}}
|
||||
|
||||
## Collapsed/Expanded
|
||||
|
||||
```
|
||||
@@ -148,6 +180,215 @@ function add(a, b) {
|
||||
|
||||
<p>Lorem ipsum dolor sit amet, graecis denique ei vel, at duo primis mandamus. Et legere ocurreret pri, animal tacimates complectitur ad cum. Cu eum inermis inimicus efficiendi. Labore officiis his ex, soluta officiis concludaturque ei qui, vide sensibus vim ad.</p>
|
||||
|
||||
## Code Toggle
|
||||
|
||||
```toggle {before_tabs="hugo."}
|
||||
[params]
|
||||
description = ''
|
||||
keywords = []
|
||||
|
||||
[params.codeblock]
|
||||
mode = 'classic'
|
||||
wrapper = true
|
||||
```
|
||||
|
||||
## Mermaid
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
A[Start] --> B{Is it?}
|
||||
B -->|Yes| C[OK]
|
||||
C --> D[Rethink]
|
||||
D --> B
|
||||
B ---->|No| E[End]
|
||||
```
|
||||
|
||||
## ECharts
|
||||
|
||||
```echarts
|
||||
[title]
|
||||
text = "Summary Line Chart"
|
||||
top = "2%"
|
||||
left = "center"
|
||||
|
||||
[tooltip]
|
||||
trigger = "axis"
|
||||
|
||||
[legend]
|
||||
data = [
|
||||
"Email Marketing",
|
||||
"Affiliate Advertising",
|
||||
"Video Advertising",
|
||||
"Direct View",
|
||||
"Search Engine"
|
||||
]
|
||||
top = "10%"
|
||||
|
||||
[grid]
|
||||
left = "5%"
|
||||
right = "5%"
|
||||
bottom = "5%"
|
||||
top = "20%"
|
||||
containLabel = true
|
||||
|
||||
[toolbox]
|
||||
left = "left"
|
||||
[toolbox.feature]
|
||||
[toolbox.feature.saveAsImage]
|
||||
title = "Save as Image"
|
||||
|
||||
[xAxis]
|
||||
type = "category"
|
||||
boundaryGap = false
|
||||
data = [
|
||||
"Monday",
|
||||
"Tuesday",
|
||||
"Wednesday",
|
||||
"Thursday",
|
||||
"Friday",
|
||||
"Saturday",
|
||||
"Sunday"
|
||||
]
|
||||
|
||||
[yAxis]
|
||||
type = "value"
|
||||
|
||||
[[series]]
|
||||
name = "Email Marketing"
|
||||
type = "line"
|
||||
stack = "Total"
|
||||
data = [
|
||||
120.0,
|
||||
132.0,
|
||||
101.0,
|
||||
134.0,
|
||||
90.0,
|
||||
230.0,
|
||||
210.0
|
||||
]
|
||||
|
||||
[[series]]
|
||||
name = "Affiliate Advertising"
|
||||
type = "line"
|
||||
stack = "Total"
|
||||
data = [
|
||||
220.0,
|
||||
182.0,
|
||||
191.0,
|
||||
234.0,
|
||||
290.0,
|
||||
330.0,
|
||||
310.0
|
||||
]
|
||||
|
||||
[[series]]
|
||||
name = "Video Advertising"
|
||||
type = "line"
|
||||
stack = "Total"
|
||||
data = [
|
||||
150.0,
|
||||
232.0,
|
||||
201.0,
|
||||
154.0,
|
||||
190.0,
|
||||
330.0,
|
||||
410.0
|
||||
]
|
||||
|
||||
[[series]]
|
||||
name = "Direct View"
|
||||
type = "line"
|
||||
stack = "Total"
|
||||
data = [
|
||||
320.0,
|
||||
332.0,
|
||||
301.0,
|
||||
334.0,
|
||||
390.0,
|
||||
330.0,
|
||||
320.0
|
||||
]
|
||||
|
||||
[[series]]
|
||||
name = "Search Engine"
|
||||
type = "line"
|
||||
stack = "Total"
|
||||
data = [
|
||||
820.0,
|
||||
932.0,
|
||||
901.0,
|
||||
934.0,
|
||||
1290.0,
|
||||
1330.0,
|
||||
1320.0
|
||||
]
|
||||
```
|
||||
|
||||
## Timeline
|
||||
|
||||
```timeline
|
||||
events:
|
||||
- timestamp: 2024-07-11
|
||||
content: Success
|
||||
- timestamp: 2024-07-13
|
||||
content: Approved
|
||||
- timestamp: 2024-07-15
|
||||
content: Event start
|
||||
```
|
||||
|
||||
## JSON
|
||||
|
||||
```json
|
||||
{
|
||||
"name": "FixIt",
|
||||
"version": "0.4.0",
|
||||
"description": "A clean, elegant but advanced blog theme for Hugo",
|
||||
"keywords": ["Hugo", "theme", "FixIt"]
|
||||
}
|
||||
```
|
||||
|
||||
## File Tree
|
||||
|
||||
{{< file-tree >}}
|
||||
- name: src
|
||||
type: dir
|
||||
children:
|
||||
- name: index.ts
|
||||
type: file
|
||||
- name: app.ts
|
||||
type: file
|
||||
- name: package.json
|
||||
type: file
|
||||
{{< /file-tree >}}
|
||||
|
||||
## Code block inside other blocks
|
||||
|
||||
> [!NOTE]+
|
||||
>
|
||||
> ```js {mode="classic"}
|
||||
> function add(a, b) {
|
||||
> return a + b
|
||||
> }
|
||||
> ```
|
||||
|
||||
{{< typeit code=java >}}
|
||||
public class HelloWorld {
|
||||
public static void main(String []args) {
|
||||
System.out.println("Hello World");
|
||||
}
|
||||
}
|
||||
{{< /typeit >}}
|
||||
|
||||
{{< details "Code Block inside Details" >}}
|
||||
|
||||
```js {mode="classic"}
|
||||
function add(a, b) {
|
||||
return a + b
|
||||
}
|
||||
```
|
||||
|
||||
{{< /details >}}
|
||||
|
||||
## Highlighting
|
||||
|
||||
Highlighting in code fences is enabled by default.
|
||||
|
||||
+16
-1
@@ -1,5 +1,5 @@
|
||||
---
|
||||
title: Exact Color Match Test
|
||||
title: Color Preview Test
|
||||
date: 2025-08-17T17:20:00+08:00
|
||||
collections:
|
||||
- Tests
|
||||
@@ -9,6 +9,10 @@ tags:
|
||||
- Color Preview
|
||||
---
|
||||
|
||||
This post is a test post to preview the color syntax in Markdown.
|
||||
|
||||
<!--more-->
|
||||
|
||||
## 📝 Syntax
|
||||
|
||||
| Color | Syntax | Example | Output |
|
||||
@@ -32,6 +36,17 @@ Pure color values (no leading/trailing characters):
|
||||
- `hsl(240, 100%, 50%)`
|
||||
- `hsl(120, 100%, 50%)`
|
||||
|
||||
Theme colors:
|
||||
|
||||
| Type | Light | Dark |
|
||||
| :-------: | :-------: | :-------: |
|
||||
| Primary | `#1677ff` | `#0069fc` |
|
||||
| Secondary | `#8b949e` | `#7d8792` |
|
||||
| Success | `#52c41a` | `#49ad17` |
|
||||
| Info | `#13c2c2` | `#11abab` |
|
||||
| Warning | `#faad14` | `#efa105` |
|
||||
| Danger | `#ff4d4f` | `#ff3436` |
|
||||
|
||||
## ❌ Regular Code
|
||||
|
||||
With leading or trailing characters:
|
||||
@@ -26,6 +26,17 @@ $$ \ce{CO2 + C -> 2 CO} $$
|
||||
|
||||
$$ \ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-} $$
|
||||
|
||||
## JSON
|
||||
|
||||
```json
|
||||
{
|
||||
"name": "fixit",
|
||||
"version": "1.0.0",
|
||||
"description": "A Hugo theme for creating encrypted content.",
|
||||
"author": "Lruihao"
|
||||
}
|
||||
```
|
||||
|
||||
## style
|
||||
|
||||
{{< style "text-align:right; strong{color:#00b1ff;}" >}}
|
||||
@@ -37,10 +48,8 @@ This is a **right-aligned** paragraph.
|
||||
{{< script >}}
|
||||
console.log('before decrypting');
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
fixit.decryptor.addEventListener('decrypted', function() {
|
||||
console.log('after decrypting')
|
||||
})
|
||||
document.addEventListener('fixit:decrypted', () => {
|
||||
console.log('after decrypting')
|
||||
});
|
||||
{{< /script >}}
|
||||
|
||||
@@ -157,10 +166,8 @@ series:
|
||||
{{< typeit code=javascript >}}
|
||||
console.log('before decrypting');
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
fixit.decryptor.addEventListener('decrypted', function() {
|
||||
console.log('after decrypting')
|
||||
})
|
||||
document.addEventListener('fixit:decrypted', () => {
|
||||
console.log('after decrypting')
|
||||
});
|
||||
{{< /typeit >}}
|
||||
|
||||
|
||||
@@ -0,0 +1,59 @@
|
||||
[[filetree]]
|
||||
name = "src-toml"
|
||||
type = "dir"
|
||||
|
||||
[[filetree.children]]
|
||||
name = "index.ts"
|
||||
type = "file"
|
||||
|
||||
[[filetree.children]]
|
||||
name = "components"
|
||||
type = "dir"
|
||||
|
||||
[[filetree.children.children]]
|
||||
name = "Header.tsx"
|
||||
type = "file"
|
||||
|
||||
[[filetree.children.children]]
|
||||
name = "Footer.tsx"
|
||||
type = "file"
|
||||
|
||||
[[filetree.children]]
|
||||
name = "utils"
|
||||
type = "dir"
|
||||
|
||||
[[filetree.children.children]]
|
||||
name = "helper.ts"
|
||||
type = "file"
|
||||
|
||||
[[filetree.children.children]]
|
||||
name = "validator.ts"
|
||||
type = "file"
|
||||
|
||||
[[filetree]]
|
||||
name = "public"
|
||||
type = "dir"
|
||||
|
||||
[[filetree.children]]
|
||||
name = "favicon.ico"
|
||||
type = "file"
|
||||
|
||||
[[filetree.children]]
|
||||
name = "images"
|
||||
type = "dir"
|
||||
|
||||
[[filetree.children.children]]
|
||||
name = "logo.png"
|
||||
type = "file"
|
||||
|
||||
[[filetree]]
|
||||
name = "package.json"
|
||||
type = "file"
|
||||
|
||||
[[filetree]]
|
||||
name = "README.md"
|
||||
type = "file"
|
||||
|
||||
[[filetree]]
|
||||
name = "tsconfig.json"
|
||||
type = "file"
|
||||
@@ -0,0 +1,273 @@
|
||||
---
|
||||
title: File Tree Test
|
||||
date: 2026-01-10T03:00:48+08:00
|
||||
collections:
|
||||
- Tests
|
||||
categories:
|
||||
- Shortcodes
|
||||
tags:
|
||||
- file-tree
|
||||
---
|
||||
|
||||
This article tests the **File Tree** shortcode functionality in the FixIt theme.
|
||||
|
||||
<!--more-->
|
||||
<!-- markdownlint-disable-file MD007 MD024 MD032 -->
|
||||
|
||||
## Content Modes
|
||||
|
||||
### Shortcode body
|
||||
|
||||
#### JSON format
|
||||
|
||||
{{< file-tree >}}
|
||||
[
|
||||
{
|
||||
"name": "src",
|
||||
"type": "dir",
|
||||
"children": [
|
||||
{
|
||||
"name": "index.ts",
|
||||
"type": "file"
|
||||
},
|
||||
{
|
||||
"name": "app.ts",
|
||||
"type": "file"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "README.md",
|
||||
"type": "file"
|
||||
},
|
||||
{
|
||||
"name": ".gitignore",
|
||||
"type": "file"
|
||||
}
|
||||
]
|
||||
{{< /file-tree >}}
|
||||
|
||||
#### YAML format
|
||||
|
||||
{{< file-tree folder_slash=true >}}
|
||||
- name: project-root
|
||||
type: dir
|
||||
children:
|
||||
- name: src
|
||||
type: dir
|
||||
children:
|
||||
- name: index.ts
|
||||
type: file
|
||||
- name: config.ts
|
||||
type: file
|
||||
- name: tests
|
||||
type: dir
|
||||
children:
|
||||
- name: unit.test.ts
|
||||
type: file
|
||||
- name: package.json
|
||||
type: file
|
||||
- name: tsconfig.json
|
||||
type: file
|
||||
{{< /file-tree >}}
|
||||
|
||||
#### TOML format
|
||||
|
||||
{{< file-tree >}}
|
||||
[[filetree]]
|
||||
name = "src"
|
||||
type = "dir"
|
||||
|
||||
[[filetree.children]]
|
||||
name = "index.ts"
|
||||
type = "file"
|
||||
|
||||
[[filetree.children]]
|
||||
name = "app.ts"
|
||||
type = "file"
|
||||
|
||||
[[filetree]]
|
||||
name = "README.md"
|
||||
type = "file"
|
||||
{{< /file-tree >}}
|
||||
|
||||
### File data
|
||||
|
||||
#### TOML format
|
||||
|
||||
{{< file-tree file="data/example.toml" />}}
|
||||
|
||||
TOML with folder slash and level 3:
|
||||
|
||||
{{< file-tree file="data/example.toml" level=3 folder_slash=true />}}
|
||||
|
||||
#### JSON format
|
||||
|
||||
{{< file-tree file="filetree/example.json" />}}
|
||||
|
||||
JSON with folder slash and level 2:
|
||||
|
||||
{{< file-tree file="filetree/example.json" level=2 folder_slash=true />}}
|
||||
|
||||
#### YAML format
|
||||
|
||||
Trying the file not found case (should fallback to next mode):
|
||||
|
||||
{{< file-tree file="data/nonexistent.yaml" data="example" />}}
|
||||
|
||||
### Hugo data
|
||||
|
||||
#### Basic usage
|
||||
|
||||
{{< file-tree data="example" />}}
|
||||
|
||||
#### Fully expanded
|
||||
|
||||
{{< file-tree data="example" level=-1 />}}
|
||||
|
||||
#### Limited expansion
|
||||
|
||||
{{< file-tree data="example" level=1 />}}
|
||||
|
||||
#### With folder slash
|
||||
|
||||
{{< file-tree data="example" folder_slash=true />}}
|
||||
|
||||
#### With level and folder slash
|
||||
|
||||
{{< file-tree data="example" level=2 folder_slash=true />}}
|
||||
|
||||
#### Collapsed with ignore
|
||||
|
||||
{{< file-tree data="example" level=0 ignore_list="README.md" />}}
|
||||
|
||||
## Filesystem Mode
|
||||
|
||||
### Basic paths
|
||||
|
||||
{{< file-tree />}}
|
||||
|
||||
{{< file-tree "." />}}
|
||||
|
||||
{{< file-tree "content" />}}
|
||||
|
||||
{{< file-tree name="{path}" />}}
|
||||
|
||||
{{< file-tree name="FixIt/apps/test" />}}
|
||||
|
||||
{{< file-tree path="posts" name="{path}" />}}
|
||||
|
||||
### Named parameters
|
||||
|
||||
{{< file-tree path="data" level=2 />}}
|
||||
|
||||
### Expansion levels
|
||||
|
||||
{{< file-tree "assets" 0 />}}
|
||||
|
||||
{{< file-tree path="assets" level=2 folder_slash=true />}}
|
||||
|
||||
{{< file-tree "assets" -1 />}}
|
||||
|
||||
### With ignore lists
|
||||
|
||||
{{< file-tree ignore_list=".hugo_build.lock, public, resources, node_modules" level=2 folder_slash=true />}}
|
||||
|
||||
### root not exist
|
||||
|
||||
path="nonexistent/path"
|
||||
|
||||
{{< file-tree "nonexistent/path" />}}
|
||||
|
||||
## Code Block Rendering
|
||||
|
||||
### Basic code block
|
||||
|
||||
YAML format:
|
||||
|
||||
```file-tree
|
||||
- name: my-project
|
||||
type: dir
|
||||
children:
|
||||
- name: src
|
||||
type: dir
|
||||
children:
|
||||
- name: main.js
|
||||
type: file
|
||||
- name: utils.js
|
||||
type: file
|
||||
- name: package.json
|
||||
type: file
|
||||
- name: README.md
|
||||
type: file
|
||||
```
|
||||
|
||||
### TOML format
|
||||
|
||||
```file-tree
|
||||
[[filetree]]
|
||||
name = "src"
|
||||
type = "dir"
|
||||
|
||||
[[filetree.children]]
|
||||
name = "index.ts"
|
||||
type = "file"
|
||||
|
||||
[[filetree]]
|
||||
name = "README.md"
|
||||
type = "file"
|
||||
```
|
||||
|
||||
### With parameters
|
||||
|
||||
```file-tree {level=2 folder_slash=true ignore_list="config.local.js"}
|
||||
- name: project
|
||||
type: dir
|
||||
children:
|
||||
- name: config
|
||||
type: dir
|
||||
children:
|
||||
- name: config.js
|
||||
type: file
|
||||
- name: config.local.js
|
||||
type: file
|
||||
- name: src
|
||||
type: dir
|
||||
children:
|
||||
- name: index.js
|
||||
type: file
|
||||
- name: .gitignore
|
||||
type: file
|
||||
```
|
||||
|
||||
### Fully expanded
|
||||
|
||||
```file-tree {level=-1 folder_slash=true}
|
||||
- name: backend
|
||||
type: dir
|
||||
children:
|
||||
- name: api
|
||||
type: dir
|
||||
children:
|
||||
- name: routes
|
||||
type: dir
|
||||
children:
|
||||
- name: users.js
|
||||
type: file
|
||||
- name: posts.js
|
||||
type: file
|
||||
- name: controllers
|
||||
type: dir
|
||||
children:
|
||||
- name: userController.js
|
||||
type: file
|
||||
- name: database
|
||||
type: dir
|
||||
children:
|
||||
- name: models
|
||||
type: dir
|
||||
- name: migrations
|
||||
type: dir
|
||||
- name: app.js
|
||||
type: file
|
||||
```
|
||||
@@ -15,9 +15,13 @@ Test for rendering Font Awesome icons.
|
||||
|
||||
## Size
|
||||
|
||||
:(fa-solid fa-camera fa-2xs):
|
||||
:(fa-solid fa-camera fa-xs):
|
||||
:(fa-solid fa-camera fa-sm):
|
||||
:(fa-solid fa-camera fa-lg):
|
||||
:(fa-solid fa-camera fa-xl):
|
||||
:(fa-solid fa-camera fa-2xl):
|
||||
:(fa-solid fa-camera fa-1x):
|
||||
:(fa-solid fa-camera fa-2x):
|
||||
:(fa-solid fa-camera fa-3x):
|
||||
:(fa-solid fa-camera fa-5x):
|
||||
@@ -26,9 +30,9 @@ Test for rendering Font Awesome icons.
|
||||
|
||||
## Fixed width
|
||||
|
||||
:(fa-solid fa-skating fa-fw fa-2x): Skating\
|
||||
:(fa-solid fa-skiing fa-fw fa-2x): Skiing\
|
||||
:(fa-solid fa-skiing-nordic fa-fw fa-2x): Nordic Skiing
|
||||
:(fa-solid fa-skating fa-2x): Skating\
|
||||
:(fa-solid fa-skiing fa-2x): Skiing\
|
||||
:(fa-solid fa-skiing-nordic fa-2x): Nordic Skiing
|
||||
|
||||
## List icon
|
||||
|
||||
@@ -75,4 +79,4 @@ hey guys!
|
||||
|
||||
## Border
|
||||
|
||||
:(fa-brands fa-apple fa-border fa-fw fa-10x):
|
||||
:(fa-brands fa-apple fa-border fa-10x):
|
||||
|
||||
@@ -71,3 +71,11 @@ $$ \ce{CO2 + C -> 2 CO} $$
|
||||
$$ \ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-} $$
|
||||
|
||||
$$C_p[\ce{H2O(l)}] = \pu{75.3 J // mol K}$$
|
||||
|
||||
## $\KaTeX$ in headings
|
||||
|
||||
This is a bug:
|
||||
|
||||
```latex
|
||||
## $\KaTeX$ in headings
|
||||
```
|
||||
|
||||
@@ -0,0 +1,93 @@
|
||||
---
|
||||
title: Link Rendering Test
|
||||
date: 2026-04-10T11:40:06+08:00
|
||||
collections:
|
||||
- Tests
|
||||
categories:
|
||||
- Markdown
|
||||
tags:
|
||||
- Link
|
||||
link:
|
||||
guard:
|
||||
enable: true
|
||||
# mode: redirect
|
||||
allow_domains:
|
||||
- demo.fixit.lruihao.cn
|
||||
---
|
||||
|
||||
This post validates link rendering paths in FixIt, including Markdown render hook and link shortcode modes.
|
||||
|
||||
<!--more-->
|
||||
|
||||
## Markdown Render Hook (Regular Link)
|
||||
|
||||
These links are rendered by `layouts/_markup/render-link.html` and should always produce regular links.
|
||||
|
||||
- Internal relative link: [Task list test](/test/units/task-list-test/)
|
||||
- Internal anchor link: [Jump to Card Link section](#card-link-shortcode)
|
||||
- Absolute same-site link: [Test site home](http://demo.fixit.lruihao.cn/test/)
|
||||
- External HTTP link: [FixIt Repository](https://github.com/hugo-fixit/FixIt)
|
||||
- Mail link: [Email test](mailto:test@gmail.com)
|
||||
- JavaScript link: [JavaScript test](javascript:void(0))
|
||||
- Tel link: [Phone test](tel:+1234567890)
|
||||
- File link: [File test](file:///path/to/file.txt)
|
||||
- Data link: [Data URI test](data:text/plain;base64,SGVsbG8sIFdvcmxkIQ==)
|
||||
|
||||
### Title Attribute (Markdown)
|
||||
|
||||
[External link with title](https://google.com "Example Title")
|
||||
|
||||
## Link Shortcode (Regular)
|
||||
|
||||
### Named parameters
|
||||
|
||||
{{< link href="https://github.com/hugo-fixit/FixIt" content="GitHub via shortcode" title="GitHub title" >}}
|
||||
|
||||
{{< link href="/test/units/codeblock-test/" content="Internal shortcode link" class="shortcode-link-test" >}}
|
||||
|
||||
{{< link href="https://google.com" content="Custom rel + no noreferrer" rel="ugc" noreferrer=false >}}
|
||||
|
||||
{{< link href="/images/fixit.svg" content="Download local file" download="fixit.svg" >}}
|
||||
|
||||
### Positional parameters
|
||||
|
||||
{{< link "https://mozilla.org" "Positional regular link" "Positional title" >}}
|
||||
|
||||
## Card Link Shortcode
|
||||
|
||||
### Basic card
|
||||
|
||||
{{< link href="https://fixit.lruihao.cn" content="FixIt Documentation" card=true >}}
|
||||
|
||||
### Card with custom icon class
|
||||
|
||||
{{< link href="https://github.com/hugo-fixit/FixIt" content="FixIt on GitHub" card=true card-icon="fa-brands fa-github" >}}
|
||||
|
||||
### Card with custom image icon
|
||||
|
||||
{{< link href="https://gohugo.io" content="Hugo Official Site" card=true card-icon="/images/hugo.svg" >}}
|
||||
|
||||
### Card with download state
|
||||
|
||||
{{< link href="/images/fixit.svg" content="Download as card" card=true download="fixit.svg" >}}
|
||||
|
||||
### Positional card parameters
|
||||
|
||||
{{< link "https://google.com" "Positional card link" "" true "fa-solid fa-link" >}}
|
||||
|
||||
## Edge Cases
|
||||
|
||||
- URL with query string:
|
||||
[Search query test](https://google.com/search?q=fixit&lang=en)
|
||||
- URL with fragment:
|
||||
[Fragment test](https://google.com/docs#installation)
|
||||
- Long URL display (card meta should trim protocol automatically):
|
||||
{{< link href="https://google.com/a/very/long/path/for/testing/card/url/display?foo=bar&baz=qux" content="Long URL card" card=true >}}
|
||||
|
||||
## Manual Verification Checklist
|
||||
|
||||
- Regular Markdown external links include external behavior and icon policy.
|
||||
- Internal links are not treated as external.
|
||||
- Shortcode card links render `.card-link` structure and card meta URL.
|
||||
- `download` shows download icon/state in both regular and card modes.
|
||||
- `noreferrer=false` removes `noopener noreferrer` from generated rel values.
|
||||
@@ -117,3 +117,34 @@ U \ar@/_/[ddr]_y \ar@{.>}[dr]|{\langle x,y \rangle} \ar@/^/[drr]^x \\
|
||||
}
|
||||
\end{xy}
|
||||
$$
|
||||
|
||||
## \$\\text{MathJax}\$ in headings
|
||||
|
||||
```latex
|
||||
## \$\\text{MathJax}\$ in headings
|
||||
```
|
||||
|
||||
## More
|
||||
|
||||
### Dark Mode Adaptation
|
||||
|
||||
Use `.auto-dark-mode` class or `auto-dark` shortcode to automatically adapt to dark mode by inverting the color and hue:
|
||||
|
||||
For inline formula:
|
||||
|
||||
$\bbox[border: solid .4pt magenta, pink]{x^2=4}$
|
||||
{.auto-dark-mode}
|
||||
|
||||
For formula blocks:
|
||||
|
||||
{{< auto-dark >}}
|
||||
$$
|
||||
\bbox[border: solid .4pt magenta, pink]{x^2=4}
|
||||
$$
|
||||
{{< /auto-dark >}}
|
||||
|
||||
### In Encrypted Content
|
||||
|
||||
{{% fixit-encryptor "1212" %}}
|
||||
$c = \pm\sqrt{a^2 + b^2}$ and \(f(x)=\int_{-\infty}^{\infty} \hat{f}(\xi) e^{2 \pi i \xi x} d \xi\)
|
||||
{{% /fixit-encryptor %}}
|
||||
|
||||
@@ -9,10 +9,23 @@ categories:
|
||||
tags:
|
||||
- Mermaid
|
||||
- Diagrams
|
||||
mermaid:
|
||||
zenuml: https://cdn.jsdelivr.net/npm/@mermaid-js/mermaid-zenuml/dist/mermaid-zenuml.esm.min.mjs
|
||||
---
|
||||
|
||||
The FixIt theme supports two ways to use Mermaid: code block syntax and shortcode syntax.
|
||||
|
||||
```mermaid {wrapper=false}
|
||||
---
|
||||
config:
|
||||
theme: 'forest'
|
||||
---
|
||||
graph TD
|
||||
a --> b
|
||||
```
|
||||
|
||||
<!--more-->
|
||||
|
||||
## Flowchart
|
||||
|
||||
```mermaid
|
||||
@@ -24,8 +37,6 @@ flowchart TD
|
||||
B ---->|No| E[End]
|
||||
```
|
||||
|
||||
<!--more-->
|
||||
|
||||
## Sequence Diagram
|
||||
|
||||
```mermaid
|
||||
|
||||
@@ -0,0 +1,189 @@
|
||||
---
|
||||
title: اختبار دعم اللغة العربية والكتابة من اليمين إلى اليسار
|
||||
date: 2026-08-23T10:00:00+08:00
|
||||
collections:
|
||||
- اختبارات
|
||||
categories:
|
||||
- ميزات
|
||||
tags:
|
||||
- RTL
|
||||
- عربي
|
||||
- اختبار
|
||||
---
|
||||
|
||||
هذا مقال اختباري شامل لدعم اللغة العربية والكتابة من اليمين إلى اليسار في سمة [FixIt](https://github.com/hugo-fixit/FixIt/). يهدف هذا المقال إلى اختبار جميع عناصر الويب المختلفة مع المحتوى العربي.
|
||||
|
||||
<!--more-->
|
||||
|
||||
## المقدمة
|
||||
|
||||
مرحباً بكم في هذا المقال الاختباري الشامل. اللغة العربية هي واحدة من أكثر اللغات انتشاراً في العالم، وتتميز بكتابتها من اليمين إلى اليسار. يتطلب دعم هذه اللغة في تصميمات الويب اهتماماً خاصاً بالعديد من الجوانب التقنية.
|
||||
|
||||
### لماذا RTL مهم؟
|
||||
|
||||
عندما نصمم مواقع ويب تدعم اللغات التي تُكتب من اليمين إلى اليسار، يجب علينا مراعاة عدة عوامل:
|
||||
|
||||
- **اتجاه النص**: يجب أن يتدفق النص بشكل طبيعي من اليمين إلى اليسار
|
||||
- **تخطيط الصفحة**: يجب أن تكون العناصر مرتبة بشكل منطقي
|
||||
- **الرموز والأيقونات**: قد تحتاج بعضها إلى انعكاس
|
||||
- **التباعد بين الأسطر**: يحتاج النص العربي إلى مساحة أكبر للتشكيل
|
||||
|
||||
## النص المختلط
|
||||
|
||||
هذا نص يحتوي على كلمات إنجليزية مثل JavaScript و HTML و CSS مع نص عربي. يجب أن يظهر كل شيء بشكل صحيح.
|
||||
|
||||
## الروابط
|
||||
|
||||
- [موقع Hugo](https://gohugo.io)
|
||||
- [سمة FixIt](https://fixit.lruihao.cn)
|
||||
- [وثائق RTL](https://rtlstyling.com)
|
||||
|
||||
## القوائم
|
||||
|
||||
القوائم غير المرتبة:
|
||||
|
||||
- عنصر القائمة الأول
|
||||
- عنصر القائمة الثاني
|
||||
- عنصر القائمة الثالث
|
||||
- عنصر فرعي
|
||||
- عنصر فرعي آخر
|
||||
|
||||
القوائم المرتبة:
|
||||
|
||||
1. الخطوة الأولى في العملية
|
||||
2. الخطوة الثانية
|
||||
3. الخطوة الثالثة والأخيرة
|
||||
|
||||
قوائم المهام:
|
||||
|
||||
- [x] إعداد بيئة التطوير
|
||||
- [x] كتابة المحتوى الأساسي
|
||||
- [ ] اختبار التوافق مع المتصفحات
|
||||
- [ ] مراجعة التصميم النهائي
|
||||
- [ ] نشر الموقع
|
||||
|
||||
## الجداول
|
||||
|
||||
| اللغة | الاتجاه | الحروف المتصلة |
|
||||
| ---------: | ------: | -------------: |
|
||||
| العربية | RTL | نعم |
|
||||
| الفارسية | RTL | نعم |
|
||||
| العبرية | RTL | لا |
|
||||
| الإنجليزية | LTR | لا |
|
||||
|
||||
## الاقتباسات
|
||||
|
||||
> العلم نور والجهل ظلام
|
||||
> — مثل عربي
|
||||
|
||||
اقتباس طويل:
|
||||
|
||||
> إن الله لا يغير ما بقوم حتى يغيروا ما بأنفسهم وإذا أراد الله بقوم سوءاً فلا مرد له وما لهم من دونه من وال
|
||||
|
||||
## الأيقونات
|
||||
|
||||
أيقونات يتم قلبها في RTL:
|
||||
|
||||
- :(fa-solid fa-tag): وسم
|
||||
- :(fa-solid fa-tags): وسوم
|
||||
- :(fa-solid fa-folder): مجلد
|
||||
- :(fa-solid fa-folder-open): مجلد مفتوح
|
||||
- :(fa-solid fa-pen-to-square): قلم تعديل
|
||||
|
||||
أيقونات لا يتم قلبها في RTL:
|
||||
|
||||
- :(fa-solid fa-share): مشاركة
|
||||
- :(fa-solid fa-search): بحث
|
||||
|
||||
## التبويبات
|
||||
|
||||
{{< tabs >}}
|
||||
{{% tab title="العلامة الأولى" %}}
|
||||
محتوى التبويب الأول.
|
||||
{{% /tab %}}
|
||||
{{% tab title="العلامة الثانية" %}}
|
||||
محتوى التبويب الثاني.
|
||||
{{% /tab %}}
|
||||
{{< /tabs >}}
|
||||
|
||||
## التفاصيل القابلة للطي
|
||||
|
||||
<details>
|
||||
<summary>انقر لعرض التفاصيل</summary>
|
||||
|
||||
هذا محتوى مخفي يمكنBOOLE توسيعه بالنقر.
|
||||
|
||||
المحتوى يمكن أن يكون نصاً أو كوداً أو أي عنصر آخر.
|
||||
|
||||
</details>
|
||||
|
||||
## التنبيهات
|
||||
|
||||
{{< admonition >}}
|
||||
هذا تنبيه عادي يحتوي على معلومات مفيدة للمستخدم.
|
||||
{{< /admonition >}}
|
||||
|
||||
> [!IMPORTANT]
|
||||
> تأكد من اختبار جميع التغييرات قبل النشر.
|
||||
|
||||
## المحتوى المشفر
|
||||
|
||||
{{< fixit-encryptor password="1212" message="أدخل كلمة المرور (1212) لعرض المحتوى" >}}
|
||||
هذا محتوى مشفر. يجب إدخال كلمة المرور لعرضه.
|
||||
{{< /fixit-encryptor >}}
|
||||
|
||||
## أمثلة على المحتوى LTR
|
||||
|
||||
في صفحة RTL، بعض العناصر تبقى باتجاه LTR لأن محتاها لغوي بحت أو برمجي. فيما يلي أمثلة:
|
||||
|
||||
### كتلة الكود
|
||||
|
||||
```c
|
||||
#include <stdio.h>
|
||||
|
||||
int main() {
|
||||
printf("Hello, World!\n");
|
||||
return 0;
|
||||
}
|
||||
```
|
||||
|
||||
### عارض JSON
|
||||
|
||||
```json
|
||||
{
|
||||
"name": "FixIt",
|
||||
"version": "1.0.0",
|
||||
"features": ["RTL", "i18n", "shortcodes"]
|
||||
}
|
||||
```
|
||||
|
||||
### تبويبات الكود
|
||||
|
||||
```python {group=tab1}
|
||||
print("Python")
|
||||
```
|
||||
|
||||
```go {group=tab1}
|
||||
fmt.Println("Go")
|
||||
```
|
||||
|
||||
### الصيغ الرياضية
|
||||
|
||||
معادلة بسيطة: $E = mc^2$
|
||||
|
||||
معادلة معقدة:
|
||||
|
||||
$$\sum_{i=1}^{n} i = \frac{n(n+1)}{2}$$
|
||||
|
||||
### مخططات Mermaid
|
||||
|
||||
```mermaid
|
||||
graph LR
|
||||
A[بداية] --> B[عملية]
|
||||
B --> C[نهاية]
|
||||
```
|
||||
|
||||
---
|
||||
{.awesome-hr}
|
||||
|
||||
_تم إنشاء هذا المقال لاختبار دعم اللغة العربية في سمة FixIt._
|
||||
@@ -0,0 +1,187 @@
|
||||
---
|
||||
title: Arabic RTL Test
|
||||
date: 2026-08-23T10:00:00+08:00
|
||||
collections:
|
||||
- Tests
|
||||
categories:
|
||||
- Features
|
||||
tags:
|
||||
- RTL
|
||||
- Arabic
|
||||
---
|
||||
|
||||
A comprehensive test article for Arabic language and Right-to-Left layout support in the [FixIt](https://github.com/hugo-fixit/FixIt/) theme. This article tests various web elements with Arabic content.
|
||||
|
||||
<!--more-->
|
||||
|
||||
## Introduction
|
||||
|
||||
Welcome to this comprehensive test article. Arabic is one of the most widely spoken languages in the world, characterized by its Right-to-Left writing direction. Supporting this language in web designs requires special attention to many technical aspects.
|
||||
|
||||
### Why RTL Matters
|
||||
|
||||
When designing websites that support Right-to-Left languages, we need to consider several factors:
|
||||
|
||||
- **Text direction**: Text should flow naturally from right to left
|
||||
- **Page layout**: Elements should be arranged in a logical order
|
||||
- **Symbols and icons**: Some may need to be mirrored
|
||||
- **Line spacing**: Arabic text needs more space for diacritics
|
||||
|
||||
## Mixed Text
|
||||
|
||||
This text contains English words like JavaScript, HTML, and CSS alongside Arabic text. Everything should display correctly.
|
||||
|
||||
## Links
|
||||
|
||||
- [Hugo Website](https://gohugo.io)
|
||||
- [FixIt Theme](https://fixit.lruihao.cn)
|
||||
- [RTL Styling](https://rtlstyling.com)
|
||||
|
||||
## Lists
|
||||
|
||||
Unordered lists:
|
||||
|
||||
- First list item
|
||||
- Second list item
|
||||
- Third list item
|
||||
- Sub item
|
||||
- Another sub item
|
||||
|
||||
Ordered lists:
|
||||
|
||||
1. First step in the process
|
||||
2. Second step
|
||||
3. Third and final step
|
||||
|
||||
Task lists:
|
||||
|
||||
- [x] Set up development environment
|
||||
- [x] Write basic content
|
||||
- [ ] Test browser compatibility
|
||||
- [ ] Review final design
|
||||
- [ ] Deploy website
|
||||
|
||||
## Tables
|
||||
|
||||
| Language | Direction | Connected Letters |
|
||||
| ---------- | --------- | ----------------- |
|
||||
| Arabic | RTL | Yes |
|
||||
| Persian | RTL | Yes |
|
||||
| Hebrew | RTL | No |
|
||||
| English | LTR | No |
|
||||
|
||||
## Blockquotes
|
||||
|
||||
> Knowledge is light and ignorance is darkness
|
||||
> — Arabic proverb
|
||||
|
||||
Long quote:
|
||||
|
||||
> Indeed, Allah does not change the condition of a people until they change what is in themselves
|
||||
|
||||
## Icons
|
||||
|
||||
Icons that are flipped in RTL:
|
||||
|
||||
- :(fa-solid fa-tag): Tag
|
||||
- :(fa-solid fa-tags): Tags
|
||||
- :(fa-solid fa-folder): Folder
|
||||
- :(fa-solid fa-folder-open): Folder Open
|
||||
- :(fa-solid fa-pen-to-square): Edit
|
||||
|
||||
Icons that are NOT flipped in RTL:
|
||||
|
||||
- :(fa-solid fa-share): Share
|
||||
- :(fa-solid fa-search): Search
|
||||
|
||||
## Tabs
|
||||
|
||||
{{< tabs >}}
|
||||
{{% tab title="First Tab" %}}
|
||||
Content of the first tab.
|
||||
{{% /tab %}}
|
||||
{{% tab title="Second Tab" %}}
|
||||
Content of the second tab.
|
||||
{{% /tab %}}
|
||||
{{< /tabs >}}
|
||||
|
||||
## Collapsible Details
|
||||
|
||||
<details>
|
||||
<summary>Click to show details</summary>
|
||||
|
||||
This is hidden content that can be expanded by clicking.
|
||||
|
||||
Content can be text, code, or any other element.
|
||||
|
||||
</details>
|
||||
|
||||
## Alerts
|
||||
|
||||
{{< admonition >}}
|
||||
This is a regular admonition with useful information for the user.
|
||||
{{< /admonition >}}
|
||||
|
||||
> [!IMPORTANT]
|
||||
> Make sure to test all changes before deploying.
|
||||
|
||||
## Encrypted Content
|
||||
|
||||
{{< fixit-encryptor password="1212" message="Enter password (1212) to view content" >}}
|
||||
This is encrypted content. You must enter the password to view it.
|
||||
{{< /fixit-encryptor >}}
|
||||
|
||||
## LTR Content Examples
|
||||
|
||||
In an RTL page, some elements remain in LTR direction because their content is purely linguistic or programmatic. Here are examples:
|
||||
|
||||
### Code Block
|
||||
|
||||
```c
|
||||
#include <stdio.h>
|
||||
|
||||
int main() {
|
||||
printf("Hello, World!\n");
|
||||
return 0;
|
||||
}
|
||||
```
|
||||
|
||||
### JSON Viewer
|
||||
|
||||
```json
|
||||
{
|
||||
"name": "FixIt",
|
||||
"version": "1.0.0",
|
||||
"features": ["RTL", "i18n", "shortcodes"]
|
||||
}
|
||||
```
|
||||
|
||||
### Code Tabs
|
||||
|
||||
```python {group=tab1}
|
||||
print("Python")
|
||||
```
|
||||
|
||||
```go {group=tab1}
|
||||
fmt.Println("Go")
|
||||
```
|
||||
|
||||
### Math
|
||||
|
||||
Simple equation: $E = mc^2$
|
||||
|
||||
Complex equation:
|
||||
|
||||
$$\sum_{i=1}^{n} i = \frac{n(n+1)}{2}$$
|
||||
|
||||
### Mermaid Diagram
|
||||
|
||||
```mermaid
|
||||
graph LR
|
||||
A[Start] --> B[Process]
|
||||
B --> C[End]
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
_Created to test Arabic language support in the FixIt theme._
|
||||
@@ -2,7 +2,6 @@
|
||||
title: Tabs Comprehensive Test Cases
|
||||
date: 2025-09-09T10:00:00+08:00
|
||||
collections:
|
||||
|
||||
- Tests
|
||||
categories:
|
||||
- Shortcodes
|
||||
@@ -14,7 +13,18 @@ tags:
|
||||
Testing various configurations and nested scenarios for the Tabs shortcode.
|
||||
|
||||
{{< tabs >}}
|
||||
{{% tab title="Test Cases" %}}See Types section for various test cases.{{% /tab %}}
|
||||
{{% tab title="Test Cases" %}}
|
||||
See Types section for various test cases.
|
||||
|
||||
```go-template {name="Shortcode"}
|
||||
{{</* tabs */>}}
|
||||
{{%/* tab title="Test Cases" */%}}
|
||||
{{%/* tab title="Test Cases" */%}}See Types section for various test cases.{{%/* /tab */%}}
|
||||
{{%/* tab title="Nested Tabs" */%}}See Nested Tabs section for examples.{{%/* /tab */%}}
|
||||
{{</* /tabs */>}}
|
||||
```
|
||||
|
||||
{{% /tab %}}
|
||||
{{% tab title="Nested Tabs" %}}See Nested Tabs section for examples.{{% /tab %}}
|
||||
{{< /tabs >}}
|
||||
|
||||
@@ -24,7 +34,7 @@ Testing various configurations and nested scenarios for the Tabs shortcode.
|
||||
|
||||
### Underline (Default)
|
||||
|
||||
<!-- placement: top, bottom, left, right -->
|
||||
<!-- placement: top, bottom, start, end -->
|
||||
|
||||
{{< tabs placement="top" >}}
|
||||
{{% tab title="Tab 1" %}}Content for underline style tab 1{{% /tab %}}
|
||||
@@ -34,7 +44,7 @@ Testing various configurations and nested scenarios for the Tabs shortcode.
|
||||
|
||||
### Pill
|
||||
|
||||
<!-- placement: top, bottom, left, right -->
|
||||
<!-- placement: top, bottom, start, end -->
|
||||
|
||||
{{< tabs type="pill" placement="top" >}}
|
||||
{{% tab title="Tab 1" %}}Content for pill style tab 1{{% /tab %}}
|
||||
@@ -44,7 +54,7 @@ Testing various configurations and nested scenarios for the Tabs shortcode.
|
||||
|
||||
### Card
|
||||
|
||||
<!-- placement: top, bottom, left, right -->
|
||||
<!-- placement: top, bottom, start, end -->
|
||||
|
||||
{{< tabs type="card" placement="top" >}}
|
||||
{{% tab title="Tab 1" %}}Content for card style tab 1{{% /tab %}}
|
||||
@@ -116,7 +126,7 @@ Nested tab C with a table:
|
||||
{{% tab title="Outer Tab 3" %}}
|
||||
This tab contains vertical nested tabs:
|
||||
|
||||
{{< tabs type="card" vertical=true >}}
|
||||
{{< tabs type="card" placement="end" >}}
|
||||
|
||||
{{% tab title="Vertical A" %}}
|
||||
Content for vertical nested tab A.
|
||||
@@ -178,3 +188,55 @@ gantt
|
||||
|
||||
{{% /tab %}}
|
||||
{{< /tabs >}}
|
||||
|
||||
### File Tree inside Tabs
|
||||
|
||||
{{< tabs >}}
|
||||
{{% tab title="File Tree Shortcode" %}}
|
||||
|
||||
{{< file-tree >}}
|
||||
[[filetree]]
|
||||
name = "src"
|
||||
type = "dir"
|
||||
|
||||
[[filetree.children]]
|
||||
name = "index.ts"
|
||||
type = "file"
|
||||
|
||||
[[filetree]]
|
||||
name = "README.md"
|
||||
type = "file"
|
||||
{{< /file-tree >}}
|
||||
|
||||
{{% /tab %}}
|
||||
{{% tab title="File Tree Code Block" %}}
|
||||
|
||||
```file-tree
|
||||
[[filetree]]
|
||||
name = "src"
|
||||
type = "dir"
|
||||
|
||||
[[filetree.children]]
|
||||
name = "index.ts"
|
||||
type = "file"
|
||||
|
||||
[[filetree]]
|
||||
name = "README.md"
|
||||
type = "file"
|
||||
```
|
||||
|
||||
{{% /tab %}}
|
||||
{{< /tabs >}}
|
||||
|
||||
### MathJax inside tabs
|
||||
|
||||
{{< tabs >}}
|
||||
{{% tab title="Inline" %}}
|
||||
$c = \pm\sqrt{a^2 + b^2}$ and \(f(x)=\int_{-\infty}^{\infty} \hat{f}(\xi) e^{2 \pi i \xi x} d \xi\)
|
||||
{{% /tab %}}
|
||||
{{% tab title="Block" %}}
|
||||
$$ x = {-b \pm \sqrt{b^2-4ac} \over 2a} $$
|
||||
|
||||
\[ f(a) = \frac{1}{2\pi i} \oint\frac{f(z)}{z-a}dz \]
|
||||
{{% /tab %}}
|
||||
{{< /tabs >}}
|
||||
|
||||
@@ -0,0 +1,57 @@
|
||||
---
|
||||
title: Task List Rendering Test
|
||||
date: 2026-02-28T08:54:02+08:00
|
||||
collections:
|
||||
- Tests
|
||||
categories:
|
||||
- Markdown
|
||||
tags:
|
||||
- Task List
|
||||
---
|
||||
|
||||
This post tests the rendering of task lists in Markdown.
|
||||
|
||||
<!--more-->
|
||||
|
||||
## Basic Task Lists
|
||||
|
||||
- [ ] Unchecked Task
|
||||
- [x] Checked Task
|
||||
- Regular list item
|
||||
|
||||
## Extended Task Lists (Custom Icons)
|
||||
|
||||
- [-] Cancelled Task
|
||||
- [/] In Progress Task
|
||||
- [<] Scheduled Task
|
||||
- [>] Rescheduled Task
|
||||
- [!] Important Task
|
||||
- [!x] Important Checked Task
|
||||
- [?] Question Task
|
||||
- Regular list item
|
||||
|
||||
## Nested Task Lists (Bug Fix Verification)
|
||||
|
||||
- [ ] Parent Task 1
|
||||
- [ ] Child Task 1.1
|
||||
- [x] Child Task 1.2
|
||||
- Regular list item
|
||||
- [/] Parent Task 2
|
||||
- Regular list item
|
||||
- [ ] Child Task 2.1
|
||||
- [x] Grandchild Task 2.1.1
|
||||
- [-] Grandchild Task 2.1.2
|
||||
- [<] Scheduled Task
|
||||
- [>] Rescheduled Task
|
||||
- [!] Important Task
|
||||
- [!x] Important Checked Task
|
||||
- [?] Question Task
|
||||
|
||||
## Mixed Content in List Items
|
||||
|
||||
- [ ] Task with **bold** and _italic_ text
|
||||
- [x] Task with `inline code`
|
||||
- [ ] Task with [some link](https://github.com/hugo-fixit/FixIt)
|
||||
- [ ] Multi-line task
|
||||
that spans across multiple lines
|
||||
and still renders correctly as a single list item.
|
||||
@@ -0,0 +1,38 @@
|
||||
- name: my-project
|
||||
type: dir
|
||||
children:
|
||||
- name: src
|
||||
type: dir
|
||||
children:
|
||||
- name: index.ts
|
||||
type: file
|
||||
- name: components
|
||||
type: dir
|
||||
children:
|
||||
- name: Header.tsx
|
||||
type: file
|
||||
- name: Footer.tsx
|
||||
type: file
|
||||
- name: utils
|
||||
type: dir
|
||||
children:
|
||||
- name: helper.ts
|
||||
type: file
|
||||
- name: validator.ts
|
||||
type: file
|
||||
- name: public
|
||||
type: dir
|
||||
children:
|
||||
- name: favicon.ico
|
||||
type: file
|
||||
- name: images
|
||||
type: dir
|
||||
children:
|
||||
- name: logo.png
|
||||
type: file
|
||||
- name: package.json
|
||||
type: file
|
||||
- name: README.md
|
||||
type: file
|
||||
- name: tsconfig.json
|
||||
type: file
|
||||
+43
-15
@@ -1,10 +1,32 @@
|
||||
# -------------------------------------------------------------------------------------
|
||||
# Hugo Configuration
|
||||
# See: https://gohugo.io/getting-started/configuration/
|
||||
# See: https://gohugo.io/configuration/all/
|
||||
# -------------------------------------------------------------------------------------
|
||||
|
||||
title = "Hugo FixIt TEST"
|
||||
title = "FixIt TEST"
|
||||
baseURL = "https://demo.fixit.lruihao.cn/test/"
|
||||
ignoreLogs = [
|
||||
"warning-file-tree",
|
||||
"warning-encryption"
|
||||
]
|
||||
defaultContentLanguage = "en"
|
||||
|
||||
# test for multilingual support
|
||||
[languages]
|
||||
|
||||
[languages.en]
|
||||
locale = "en"
|
||||
label = "English"
|
||||
|
||||
# [todo] 优化中文排版
|
||||
# [languages.zh-cn]
|
||||
# locale = "zh-CN"
|
||||
# label = "简体中文"
|
||||
|
||||
[languages.ar]
|
||||
direction = "rtl"
|
||||
locale = "ar"
|
||||
label = "العربية"
|
||||
|
||||
[permalinks]
|
||||
|
||||
@@ -20,31 +42,37 @@ _merge = "shallow"
|
||||
[outputs]
|
||||
_merge = "shallow"
|
||||
|
||||
# -------------------------------------------------------------------------------------
|
||||
# Taxonomies Configuration
|
||||
# See: https://gohugo.io/content-management/taxonomies/#configure-taxonomies
|
||||
# -------------------------------------------------------------------------------------
|
||||
|
||||
[taxonomies]
|
||||
_merge = "shallow"
|
||||
|
||||
# -------------------------------------------------------------------------------------
|
||||
# Theme Core Configuration
|
||||
# See: https://fixit.lruihao.cn/documentation/basics/#theme-configuration
|
||||
# See: https://fixit.lruihao.cn/docs/getting-started/configuration/params/
|
||||
# -------------------------------------------------------------------------------------
|
||||
|
||||
[params]
|
||||
version = "0.3.X"
|
||||
version = "1.0.X"
|
||||
collection_list = true
|
||||
collection_navigation = true
|
||||
|
||||
[params.page]
|
||||
collectionList = true
|
||||
collectionNavigation = true
|
||||
[params.home.profile]
|
||||
enable = true
|
||||
avatar_url = "/images/fixit-test.png"
|
||||
|
||||
[params.social]
|
||||
|
||||
[params.social.github]
|
||||
id = "hugo-fixit"
|
||||
weight = 2
|
||||
|
||||
[params.social.twitter]
|
||||
id = "lruihao"
|
||||
weight = 1
|
||||
# for twitter cards
|
||||
# site = "hugo-fixit"
|
||||
|
||||
[params.author]
|
||||
name = "Lruihao"
|
||||
email = ""
|
||||
link = "https://lruihao.cn"
|
||||
avatar = "https://lruihao.cn/images/avatar.jpg"
|
||||
|
||||
[params.mermaid]
|
||||
zenuml = "https://cdn.jsdelivr.net/npm/@mermaid-js/mermaid-zenuml/dist/mermaid-zenuml.esm.min.mjs"
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
"name": "@hugo-fixit/test",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build": "hugo --themesDir ../../.. --theme $PWD/../.. --gc --minify --logLevel info",
|
||||
"dev": "hugo server --themesDir ../../.. --theme $PWD/../.. -D --disableFastRender --navigateToChanged --ignoreCache -O"
|
||||
"build": "hugo --themesDir ../.. --theme . --gc --minify --logLevel info",
|
||||
"dev": "hugo server --themesDir ../.. --theme . -D --disableFastRender --navigateToChanged --ignoreCache -O"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -28,7 +28,7 @@ comment: false
|
||||
|
||||
Comment like this:
|
||||
|
||||
````markdown
|
||||
````markdown {mode=mac}
|
||||
```yaml
|
||||
- nickname: <your nickname>
|
||||
avatar: <your avatar>
|
||||
@@ -37,10 +37,8 @@ Comment like this:
|
||||
```
|
||||
````
|
||||
|
||||
{{< admonition info "Notice" true >}}
|
||||
|
||||
1. If you want to exchange link, please leave a comment as the above format. (personal non-commercial blogs / websites only)
|
||||
2. :(fa-solid fa-exclamation-triangle): Website failure, stop maintenance and improper content may be unlinked!
|
||||
3. Those websites that do not respect other people's labor achievements, reprint without source, or malicious acts, please do not come to exchange.
|
||||
|
||||
{{< /admonition >}}
|
||||
> [!NOTE]
|
||||
>
|
||||
> 1. If you want to exchange link, please leave a comment as the above format. (personal non-commercial blogs / websites only)
|
||||
> 2. :(fa-solid fa-exclamation-triangle): Website failure, stop maintenance and improper content may be unlinked!
|
||||
> 3. Those websites that do not respect other people's labor achievements, reprint without source, or malicious acts, please do not come to exchange.
|
||||
|
||||
@@ -4,40 +4,28 @@ subtitle:
|
||||
date: {{ .Date }}
|
||||
slug: {{ substr .File.UniqueID 0 7 }}
|
||||
draft: true
|
||||
author:
|
||||
name:
|
||||
link:
|
||||
email:
|
||||
avatar:
|
||||
description:
|
||||
keywords:
|
||||
license:
|
||||
comment: false
|
||||
weight: 0
|
||||
tags:
|
||||
- draft
|
||||
categories:
|
||||
- draft
|
||||
hiddenFromHomePage: false
|
||||
hiddenFromSearch: false
|
||||
hiddenFromRelated: false
|
||||
hiddenFromFeed: false
|
||||
collections:
|
||||
- draft
|
||||
tags:
|
||||
- draft
|
||||
summary:
|
||||
resources:
|
||||
- name: featured-image
|
||||
src: featured-image.jpg
|
||||
- name: featured-image-preview
|
||||
src: featured-image-preview.jpg
|
||||
toc: true
|
||||
math: false
|
||||
lightgallery: false
|
||||
password:
|
||||
message:
|
||||
repost:
|
||||
enable: true
|
||||
enable: false
|
||||
url:
|
||||
|
||||
# See details front matter: https://fixit.lruihao.cn/documentation/content-management/introduction/#front-matter
|
||||
# See: https://fixit.lruihao.cn/docs/content-management/front-matter/
|
||||
---
|
||||
|
||||
<!--more-->
|
||||
|
||||
+8
-23
@@ -4,40 +4,25 @@ subtitle:
|
||||
date: {{ .Date }}
|
||||
slug: {{ substr .File.UniqueID 0 7 }}
|
||||
draft: true
|
||||
author:
|
||||
name:
|
||||
link:
|
||||
email:
|
||||
avatar:
|
||||
description:
|
||||
keywords:
|
||||
license:
|
||||
comment: false
|
||||
weight: 0
|
||||
tags:
|
||||
- draft
|
||||
categories:
|
||||
- draft
|
||||
hiddenFromHomePage: false
|
||||
hiddenFromSearch: false
|
||||
hiddenFromRelated: false
|
||||
hiddenFromFeed: false
|
||||
collections:
|
||||
- draft
|
||||
tags:
|
||||
- draft
|
||||
summary:
|
||||
resources:
|
||||
- name: featured-image
|
||||
src: featured-image.jpg
|
||||
- name: featured-image-preview
|
||||
src: featured-image-preview.jpg
|
||||
toc: true
|
||||
math: false
|
||||
lightgallery: false
|
||||
featured_image:
|
||||
featured_image_preview:
|
||||
password:
|
||||
message:
|
||||
repost:
|
||||
enable: true
|
||||
enable: false
|
||||
url:
|
||||
|
||||
# See details front matter: https://fixit.lruihao.cn/documentation/content-management/introduction/#front-matter
|
||||
# See: https://fixit.lruihao.cn/docs/content-management/front-matter/
|
||||
---
|
||||
|
||||
<!--more-->
|
||||
|
||||
@@ -2,4 +2,6 @@
|
||||
title: {{ T "assets.search" }}
|
||||
layout: search
|
||||
date: {{ .Date }}
|
||||
description:
|
||||
keywords:
|
||||
---
|
||||
|
||||
@@ -1,98 +0,0 @@
|
||||
@import "../../lib/normalize/normalize";
|
||||
|
||||
html {
|
||||
font-family: $global-font-family;
|
||||
font-weight: $global-font-weight;
|
||||
font-display: swap;
|
||||
font-size: $global-font-size;
|
||||
line-height: $global-line-height;
|
||||
width: 100%;
|
||||
scroll-behavior: smooth;
|
||||
overflow: overlay;
|
||||
}
|
||||
|
||||
@media screen and (prefers-reduced-motion: reduce) {
|
||||
html {
|
||||
scroll-behavior: auto;
|
||||
}
|
||||
}
|
||||
|
||||
::selection {
|
||||
background-color: $selection-color;
|
||||
|
||||
[data-theme='dark'] & {
|
||||
background-color: $selection-color-dark;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(#{$rootPrefix}global-background-color);
|
||||
color: var(#{$rootPrefix}global-font-color);
|
||||
@include overflow-wrap(break-word);
|
||||
}
|
||||
|
||||
iframe {
|
||||
border: 0;
|
||||
@include border-radius($global-border-radius);
|
||||
}
|
||||
|
||||
[role='button'] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
summary {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
abbr[title] {
|
||||
cursor: help;
|
||||
text-decoration-skip-ink: none;
|
||||
}
|
||||
|
||||
img {
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
img,video {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
dialog {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
details {
|
||||
&.center {
|
||||
summary {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
%code {
|
||||
padding: 0.2em 0.4em;
|
||||
margin: 0;
|
||||
font-size: $code-font-size;
|
||||
line-height: $code-font-size;
|
||||
font-family: $code-font-family;
|
||||
color: $code-color;
|
||||
background-color: var(#{$rootPrefix}code-inline-background-color);
|
||||
text-decoration: inherit;
|
||||
@include border-radius($global-border-radius);
|
||||
@include overflow-wrap(break-word);
|
||||
@include line-break(auto);
|
||||
|
||||
[data-theme='dark'] & {
|
||||
color: $code-color-dark;
|
||||
}
|
||||
}
|
||||
|
||||
@include link(true, true);
|
||||
|
||||
@import '../_partials/scrollbar';
|
||||
@import '../_partials/mask';
|
||||
@import '../_partials/img';
|
||||
@import '../_partials/icon';
|
||||
@import '../_partials/details';
|
||||
@import '../_partials/widgets';
|
||||
@@ -1,54 +0,0 @@
|
||||
.breadcrumb-container {
|
||||
padding-inline: 1rem;
|
||||
font-size: 0.75rem;
|
||||
background-color: var(#{$rootPrefix}global-background-color);
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
@include z-index(1);
|
||||
@extend .print-d-none;
|
||||
|
||||
&:has(~ main[data-reverse]) {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
content: '';
|
||||
flex: 1;
|
||||
padding-inline: 0.5rem;
|
||||
}
|
||||
|
||||
&.sticky {
|
||||
position: sticky;
|
||||
top: $header-height;
|
||||
}
|
||||
|
||||
.breadcrumb {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 0.5rem 0;
|
||||
margin: 0 auto;
|
||||
list-style: none;
|
||||
border-bottom: 1px inset $global-border-color;
|
||||
@extend %page-style;
|
||||
|
||||
[data-theme='dark'] & {
|
||||
border-bottom-color: $global-border-color-dark;
|
||||
}
|
||||
|
||||
.breadcrumb-item {
|
||||
display: flex;
|
||||
|
||||
+ .breadcrumb-item::before {
|
||||
content: attr(data-separator);
|
||||
display: inline-block;
|
||||
padding-inline: 0.5rem;
|
||||
color: var(#{$rootPrefix}global-font-secondary-color);
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: var(#{$rootPrefix}secondary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,56 +0,0 @@
|
||||
// ==============================
|
||||
// Common Styles
|
||||
// 常用样式
|
||||
// ==============================
|
||||
|
||||
.text-truncate {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.text-start {
|
||||
text-align: left !important;
|
||||
}
|
||||
.text-end {
|
||||
text-align: right !important;
|
||||
}
|
||||
.text-center {
|
||||
text-align: center !important;
|
||||
}
|
||||
|
||||
.d-none {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.ms-1,
|
||||
.mx-1 {
|
||||
margin-left: 0.25em !important;
|
||||
}
|
||||
.me-1,
|
||||
.mx-1 {
|
||||
margin-right: 0.25em !important;
|
||||
}
|
||||
.ps-1,
|
||||
.px-1 {
|
||||
padding-left: 0.25em !important;
|
||||
}
|
||||
.pe-1,
|
||||
.px-1 {
|
||||
padding-right: 0.25em !important;
|
||||
}
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
.text-#{$color} {
|
||||
color: var(#{$rootPrefix}#{$color}) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@each $key, $value in $orders {
|
||||
.order-#{$key} {
|
||||
order: #{$value} !important;
|
||||
}
|
||||
}
|
||||
|
||||
.variant-numeric {
|
||||
font-variant-numeric: tabular-nums lining-nums;
|
||||
}
|
||||
@@ -1,633 +0,0 @@
|
||||
header {
|
||||
width: 100%;
|
||||
background-color: $header-background-color;
|
||||
@include z-index(2);
|
||||
@include transition(box-shadow 0.3s ease);
|
||||
@extend .print-d-none;
|
||||
|
||||
[data-theme='dark'] & {
|
||||
background-color: $header-background-color-dark;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@include box-shadow(0 0 1.5rem 0 rgba(0, 0, 0, 0.1));
|
||||
|
||||
[data-theme='dark'] & {
|
||||
@include box-shadow(0 0 1.5rem 0 rgba(255, 255, 255, 0.1));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header-wrapper {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-size: $header-title-font-size;
|
||||
font-family: $header-title-font-family;
|
||||
font-weight: bold;
|
||||
margin-right: 0.5rem;
|
||||
min-width: 10%;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
@include flex(10);
|
||||
|
||||
.logo {
|
||||
min-height: 1.5em;
|
||||
height: 1.5em;
|
||||
width: auto;
|
||||
vertical-align: top;
|
||||
transform: translateY(calc(#{$header-height} / 2 - 50%));
|
||||
}
|
||||
|
||||
.header-title-text {
|
||||
margin-left: 0.25rem;
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
|
||||
.header-subtitle {
|
||||
margin-left: 0.25rem;
|
||||
font-size: 0.6em;
|
||||
}
|
||||
}
|
||||
|
||||
.menu {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
.menu-item-divider {
|
||||
list-style: none;
|
||||
margin: 0.25rem 0.5rem;
|
||||
height: 1px;
|
||||
background-color: $menu-border-color;
|
||||
|
||||
[data-theme='dark'] & {
|
||||
background-color: $menu-border-color-dark;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
list-style: none;
|
||||
|
||||
.dropdown-icon {
|
||||
margin-left: 0.25rem;
|
||||
font-size: .875em;
|
||||
color: var(#{$rootPrefix}global-font-color);
|
||||
|
||||
&.open::before {
|
||||
content: "\f078";
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
>.menu-link,
|
||||
>.nested-item>.menu-link {
|
||||
font-weight: bold;
|
||||
color: $menu-active-color;
|
||||
|
||||
[data-theme='dark'] & {
|
||||
color: $menu-active-color-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menu-link[href="javascript:void(0);"] {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.menu-link i {
|
||||
@include transform(perspective(1rem));
|
||||
@include transition(transform 0.4s ease);
|
||||
}
|
||||
|
||||
.menu-link:hover i {
|
||||
@include transform(perspective(1rem) translateZ(0.2rem));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menu .search {
|
||||
position: relative;
|
||||
|
||||
input {
|
||||
color: transparent;
|
||||
box-sizing: border-box;
|
||||
height: 2.5rem;
|
||||
width: 1.25rem;
|
||||
@include border-radius(0.5rem);
|
||||
border: none;
|
||||
outline: none;
|
||||
background-color: transparent;
|
||||
vertical-align: baseline !important;
|
||||
@include transition(width 0.3s ease);
|
||||
}
|
||||
|
||||
@include placeholder(transparent);
|
||||
|
||||
.search-button {
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
left: auto;
|
||||
right: 1rem;
|
||||
}
|
||||
|
||||
.search-toggle {
|
||||
left: 0.5rem;
|
||||
right: auto;
|
||||
|
||||
#header-desktop.open & {
|
||||
left: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.search-loading {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.search-clear {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.open &,
|
||||
&.mobile {
|
||||
input {
|
||||
color: var(#{$rootPrefix}global-font-color);
|
||||
background-color: $search-background-color;
|
||||
padding: 0 2rem 0 2rem;
|
||||
}
|
||||
|
||||
[data-theme='dark'] & {
|
||||
input {
|
||||
background-color: $search-background-color-dark;
|
||||
}
|
||||
|
||||
@include placeholder($global-font-secondary-color-dark);
|
||||
}
|
||||
|
||||
@include placeholder($global-font-secondary-color);
|
||||
|
||||
.search-button {
|
||||
color: var(#{$rootPrefix}global-font-secondary-color);
|
||||
}
|
||||
|
||||
.search-clear:hover {
|
||||
color: #ff6b6b;
|
||||
}
|
||||
|
||||
.search-toggle:hover {
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.theme-switch {
|
||||
i {
|
||||
@include transform(rotate(225deg));
|
||||
@include transition(all 0.4s ease);
|
||||
}
|
||||
}
|
||||
|
||||
#header-desktop {
|
||||
display: block;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
height: $header-height;
|
||||
line-height: $header-height;
|
||||
box-sizing: border-box;
|
||||
|
||||
[data-header-desktop='normal'] & {
|
||||
position: static;
|
||||
}
|
||||
|
||||
nav {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.header-wrapper {
|
||||
// use css native function to calculate max value
|
||||
padding: 0 2rem 0 MAX(10vh, $header-height);
|
||||
height: 100%;
|
||||
|
||||
&[data-github-corner='right'] {
|
||||
padding-right: $header-height;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.menu {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
float: right;
|
||||
|
||||
> .menu-item {
|
||||
&:hover .sub-menu {
|
||||
display: block;
|
||||
@include transform(translateX(-0.5rem));
|
||||
}
|
||||
&.theme-switch {
|
||||
&:hover i {
|
||||
@include transform(rotate(45deg));
|
||||
}
|
||||
}
|
||||
&.language-switch:hover .sub-menu {
|
||||
@include transform(translateX(calc(1.75rem - 100%)));
|
||||
}
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
padding: 0 0.5rem;
|
||||
|
||||
&.delimiter {
|
||||
width: 0;
|
||||
margin: 0.125rem 0.25rem;
|
||||
padding: 0;
|
||||
border-left: 1px dashed lighten($global-font-secondary-color, 15%);
|
||||
|
||||
[data-theme='dark'] & {
|
||||
border-left-color: darken($global-font-secondary-color-dark, 15%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sub-menu {
|
||||
position: absolute;
|
||||
margin: 0;
|
||||
padding: 0.25rem 0;
|
||||
display: none;
|
||||
top: calc(#{$header-height} - 0.75rem);
|
||||
border-radius: $global-border-radius;
|
||||
border: 1px solid $menu-border-color;
|
||||
background-color: $header-background-color;
|
||||
max-height: 60vh;
|
||||
overflow-y: auto;
|
||||
@include transition(box-shadow 0.3s ease);
|
||||
@include box-shadow(0 0 1.5rem 0 rgba(0, 0, 0, 0.1));
|
||||
|
||||
[data-theme='dark'] & {
|
||||
background-color: $header-background-color-dark;
|
||||
border-color: $menu-border-color-dark;
|
||||
@include box-shadow(0 0 1.5rem 0 rgba(255, 255, 255, 0.1));
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
height: $submenu-height;
|
||||
line-height: $submenu-height;
|
||||
max-width: 15rem;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.open .header-wrapper .menu .menu-item.search {
|
||||
input {
|
||||
width: 24rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#header-mobile {
|
||||
display: none;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
min-height: $header-height;
|
||||
line-height: $header-height;
|
||||
|
||||
[data-header-mobile='normal'] & {
|
||||
position: static;
|
||||
}
|
||||
|
||||
.header-container {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
.header-wrapper {
|
||||
padding: 0 1rem;
|
||||
font-size: 1.125rem;
|
||||
@include transition(margin-top 0.3s ease);
|
||||
|
||||
.header-title {
|
||||
max-width: 80%;
|
||||
}
|
||||
|
||||
.theme-switch {
|
||||
line-height: 1.25em;
|
||||
}
|
||||
|
||||
.menu-toggle {
|
||||
span {
|
||||
display: block;
|
||||
background: $global-font-color;
|
||||
width: 20px;
|
||||
height: 2px;
|
||||
@include border-radius(3px);
|
||||
@include transition(all 0.3s ease-in-out);
|
||||
|
||||
[data-theme='dark'] & {
|
||||
background: $global-font-color-dark;
|
||||
}
|
||||
}
|
||||
|
||||
span:not(:last-child) {
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
&.active {
|
||||
span:nth-child(1) {
|
||||
@include transform(translateY(8px) rotate(45deg));
|
||||
}
|
||||
|
||||
span:nth-child(2) {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
span:nth-child(3) {
|
||||
@include transform(translateY(-8px) rotate(-45deg));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menu {
|
||||
background: $header-background-color;
|
||||
border-top: 2px solid $global-border-color;
|
||||
display: none;
|
||||
overflow-y: overlay;
|
||||
max-height: 70vh;
|
||||
@include box-shadow(0 0.125rem 0.25rem rgba(0, 0, 0, 0.1));
|
||||
@include scrollbar-width(none, 0);
|
||||
|
||||
[data-theme='dark'] & {
|
||||
background: $header-background-color-dark;
|
||||
border-top-color: $global-border-color-dark;
|
||||
@include box-shadow(0 0.125rem 0.25rem rgba(255, 255, 255, 0.1));
|
||||
}
|
||||
|
||||
.search-wrapper {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
padding: ($header-height - 2.5rem) / 2 1rem;
|
||||
line-height: 2.5rem;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: $header-background-color;
|
||||
@include z-index(0, 50);
|
||||
|
||||
[data-theme='dark'] & {
|
||||
background-color: $header-background-color-dark;
|
||||
}
|
||||
}
|
||||
|
||||
.search {
|
||||
flex-grow: 10;
|
||||
|
||||
.algolia-autocomplete,
|
||||
input {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.search-loading,
|
||||
.search-clear {
|
||||
right: 0.5rem;
|
||||
}
|
||||
|
||||
.search-button {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.search-cancel {
|
||||
display: none;
|
||||
margin-left: 0.75rem;
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
display: block;
|
||||
position: relative;
|
||||
line-height: 2.5rem;
|
||||
padding: 0 1rem;
|
||||
|
||||
&:not(.menu-system):hover {
|
||||
background-color: lighten($global-font-secondary-color, 24%);
|
||||
|
||||
[data-theme='dark'] & {
|
||||
background-color: darken($global-font-secondary-color-dark, 24%);
|
||||
}
|
||||
}
|
||||
|
||||
.menu-link {
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow-x: hidden;
|
||||
@include flex(4);
|
||||
}
|
||||
|
||||
& .nested-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.menu-link {
|
||||
max-width: 80%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menu-system {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 0.25rem;
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
line-height: 2.5rem;
|
||||
padding: 0 1rem;
|
||||
background-color: $header-background-color;
|
||||
|
||||
[data-theme='dark'] & {
|
||||
background-color: $header-background-color-dark;
|
||||
}
|
||||
|
||||
.menu-system-item {
|
||||
padding-inline: 0.5rem;
|
||||
}
|
||||
|
||||
.language-switch {
|
||||
position: relative;
|
||||
|
||||
.language-select {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sub-menu {
|
||||
padding-left: 0;
|
||||
display: none;
|
||||
|
||||
&.open {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.menu-item:hover {
|
||||
background-color: lighten($global-font-secondary-color, 20%);
|
||||
|
||||
[data-theme='dark'] & {
|
||||
background-color: darken($global-font-secondary-color-dark, 20%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.open {
|
||||
.header-wrapper {
|
||||
margin-top: -$header-height;
|
||||
}
|
||||
|
||||
.menu {
|
||||
padding-top: 0;
|
||||
border-top: none;
|
||||
|
||||
.menu-item {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.search-cancel {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search-dropdown {
|
||||
position: fixed;
|
||||
top: $header-height;
|
||||
@include z-index(2);
|
||||
@include box-shadow(0 0.125rem 0.25rem rgba(0, 0, 0, 0.1));
|
||||
|
||||
[data-theme='dark'] & {
|
||||
@include box-shadow(0 0.125rem 0.25rem rgba(255, 255, 255, 0.1));
|
||||
}
|
||||
|
||||
&.desktop {
|
||||
right: 2rem;
|
||||
width: 30rem;
|
||||
}
|
||||
|
||||
&.mobile {
|
||||
right: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
right: 0 !important;
|
||||
background-color: var(#{$rootPrefix}global-background-color);
|
||||
|
||||
.suggestions {
|
||||
overflow-y: auto;
|
||||
max-height: calc(100vh - #{$header-height});
|
||||
|
||||
.suggestion {
|
||||
padding: 0.75rem 1rem;
|
||||
|
||||
.suggestion-title {
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
max-width: 75%;
|
||||
}
|
||||
|
||||
.suggestion-date {
|
||||
font-size: 0.875rem;
|
||||
float: right;
|
||||
text-align: right;
|
||||
color: var(#{$rootPrefix}global-font-secondary-color);
|
||||
}
|
||||
|
||||
.suggestion-context {
|
||||
line-height: 1.25rem;
|
||||
@include box(vertical);
|
||||
-webkit-line-clamp: 2;
|
||||
line-clamp: 2;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
@include overflow-wrap(break-word);
|
||||
color: var(#{$rootPrefix}global-font-secondary-color);
|
||||
}
|
||||
|
||||
em {
|
||||
font-style: normal;
|
||||
background-color: $selection-color;
|
||||
|
||||
[data-theme='dark'] & {
|
||||
background-color: $selection-color-dark;
|
||||
}
|
||||
}
|
||||
|
||||
&.cursor {
|
||||
background: darken($code-background-color, 5%);
|
||||
|
||||
[data-theme='dark'] & {
|
||||
background: lighten($code-background-color-dark, 5%);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search-empty {
|
||||
padding: 1rem;
|
||||
text-align: center;
|
||||
|
||||
.search-query {
|
||||
font-weight: bold;
|
||||
|
||||
[data-theme='dark'] & {
|
||||
color: #ddd;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search-footer {
|
||||
padding: 0.5rem 1rem;
|
||||
float: right;
|
||||
font-size: 0.8rem;
|
||||
color: var(#{$rootPrefix}global-font-secondary-color);
|
||||
|
||||
@include link(false, false);
|
||||
|
||||
a {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,42 +0,0 @@
|
||||
/** Layout **/
|
||||
.wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
width: 100%;
|
||||
|
||||
main {
|
||||
flex: 1 0 auto;
|
||||
|
||||
aside {
|
||||
flex: 1;
|
||||
padding: 0.5rem;
|
||||
max-width: 500px;
|
||||
|
||||
&:not(:has(~ aside)) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.fi-container {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
padding-inline: 1rem;
|
||||
gap: 0.5rem;
|
||||
|
||||
&[data-reverse] {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
&:has(.home:not(.posts)) {
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@import "_header";
|
||||
@import "_breadcrumb";
|
||||
@import "_footer";
|
||||
@import "_pagination";
|
||||
@@ -1,272 +0,0 @@
|
||||
@media only screen and (min-width: 1441px) {
|
||||
%page-style {
|
||||
width: ROUND(60%, 2px);
|
||||
max-width: 1200px;
|
||||
|
||||
[data-page-style='wide'] & {
|
||||
width: ROUND(64%, 2px);
|
||||
max-width: 1600px;
|
||||
}
|
||||
|
||||
[data-page-style='narrow'] & {
|
||||
max-width: 800px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1440px) {
|
||||
%page-style {
|
||||
width: ROUND(56%, 2px);
|
||||
|
||||
[data-page-style='wide'] & {
|
||||
width: ROUND(60%, 2px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1201px) {
|
||||
.single .content {
|
||||
:is(.code-block, .diagram-container) {
|
||||
:is(.code-copy-btn, .diagram-copy-btn) {
|
||||
display: none;
|
||||
opacity: 0;
|
||||
transform: scale(0.9);
|
||||
transition:
|
||||
display 0.25s allow-discrete,
|
||||
opacity 0.25s,
|
||||
transform 0.25s,
|
||||
color 0.1s,
|
||||
background-color 0.1s,
|
||||
box-shadow 0.1s,
|
||||
border-color 0.1s;
|
||||
}
|
||||
&:hover {
|
||||
:is(.code-copy-btn, .diagram-copy-btn) {
|
||||
display: block;
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
@starting-style {
|
||||
opacity: 0;
|
||||
transform: scale(0.9);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1200px) {
|
||||
%page-style {
|
||||
width: ROUND(52%, 2px);
|
||||
|
||||
[data-page-style='wide'] & {
|
||||
width: ROUND(56%, 2px);
|
||||
}
|
||||
}
|
||||
|
||||
#header-desktop .header-wrapper {
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
.search-dropdown.desktop {
|
||||
right: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1200px) and (min-width: 961px) {
|
||||
.wrapper {
|
||||
main {
|
||||
// Hide empty aside and expand article when only one aside is empty
|
||||
aside:first-child:empty:has(~ aside:not(:empty)),
|
||||
aside:first-child:not(:empty) ~ aside#toc-auto:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
aside:first-child:empty:has(~ aside:not(:empty)) ~ article,
|
||||
aside:first-child:not(:empty) ~ article:has(~ aside:empty) {
|
||||
flex: 3;
|
||||
}
|
||||
}
|
||||
|
||||
// Adjust breadcrumb flex when asides are empty
|
||||
&:has(main > aside:first-child:empty ~ aside:not(:empty)) .breadcrumb-container {
|
||||
.breadcrumb {
|
||||
flex: 3;
|
||||
}
|
||||
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
&:has(main > aside:first-child:not(:empty) ~ aside#toc-auto:empty) .breadcrumb-container {
|
||||
.breadcrumb {
|
||||
flex: 3;
|
||||
}
|
||||
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 960px) {
|
||||
%page-style {
|
||||
width: ROUND(80%, 2px) !important;
|
||||
}
|
||||
|
||||
aside,
|
||||
.breadcrumb-container::before,
|
||||
.breadcrumb-container::after {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
#toc-static {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#header-desktop .header-wrapper {
|
||||
padding-left: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 681px) {
|
||||
.d-none-desktop {
|
||||
display: none;
|
||||
}
|
||||
.breadcrumb-container.sticky {
|
||||
body:not([data-header-desktop='sticky']) & {
|
||||
top: 0;
|
||||
}
|
||||
// adjust the scroll margin top of the content anchors on the page
|
||||
body:not([data-header-desktop='auto']) &+.fi-container .content [id] {
|
||||
scroll-margin-top: calc(var(#{$rootPrefix}scroll-mt) + var(#{$rootPrefix}breadcrumb-height));
|
||||
}
|
||||
}
|
||||
|
||||
[data-header-desktop='normal'] .page .content [id] {
|
||||
#{$rootPrefix}scroll-mt: #{$global-scroll-margin-top};
|
||||
}
|
||||
[data-header-desktop='normal'] {
|
||||
#toc-auto,
|
||||
.aside-collection {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
[data-header-desktop='sticky'] {
|
||||
.page .content .highlight.code-block .code-header {
|
||||
top: calc(#{$header-height} + var(#{$rootPrefix}breadcrumb-height));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 680px) {
|
||||
#header-desktop {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#header-mobile {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.d-none-mobile {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.breadcrumb-container.sticky {
|
||||
body:not([data-header-mobile='sticky']) & {
|
||||
top: 0;
|
||||
}
|
||||
// adjust the scroll margin top of the content anchors on the page
|
||||
body:not([data-header-mobile='auto']) &+.fi-container .content [id] {
|
||||
scroll-margin-top: calc(var(#{$rootPrefix}scroll-mt) + var(#{$rootPrefix}breadcrumb-height));
|
||||
}
|
||||
}
|
||||
|
||||
[data-header-mobile='normal'] .page .content [id] {
|
||||
#{$rootPrefix}scroll-mt: #{$global-scroll-margin-top};
|
||||
}
|
||||
[data-header-mobile='normal'] {
|
||||
#toc-auto,
|
||||
.aside-collection {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
[data-header-mobile='sticky'] {
|
||||
.page .content .highlight.code-block .code-header {
|
||||
top: calc(#{$header-height} + var(#{$rootPrefix}breadcrumb-height));
|
||||
}
|
||||
}
|
||||
|
||||
%page-style {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.page {
|
||||
.taxonomy-cards {
|
||||
.card-item {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
footer {
|
||||
.footer-container {
|
||||
font-size: 0.618rem;
|
||||
}
|
||||
}
|
||||
|
||||
.pagination .page-item {
|
||||
margin: 0 5px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only print {
|
||||
|
||||
// 确保打印时没有 scrollbar
|
||||
:root {
|
||||
#{$rootPrefix}scrollbar-width: none !important;
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar {
|
||||
display: none !important;
|
||||
width: 0 !important;
|
||||
height: 0 !important;
|
||||
}
|
||||
|
||||
.scrollbar-thin {
|
||||
scrollbar-width: none !important;
|
||||
-ms-overflow-style: none !important;
|
||||
}
|
||||
|
||||
@page {
|
||||
size: A4 portrait;
|
||||
margin: 1.27cm;
|
||||
}
|
||||
|
||||
.page {
|
||||
width: 100% !important;
|
||||
padding-top: 0 !important;
|
||||
|
||||
&.single {
|
||||
.single-title,
|
||||
.single-subtitle,
|
||||
.post-meta {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
h1:not(.single-title),
|
||||
.page-break-before {
|
||||
page-break-before: always;
|
||||
}
|
||||
|
||||
.page-break-after {
|
||||
page-break-after: always;
|
||||
}
|
||||
}
|
||||
|
||||
.print-d-none {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
@@ -1,75 +0,0 @@
|
||||
/* Resolve style conflicts between third-party plugins */
|
||||
|
||||
@keyframes #{$prefix}pulse {
|
||||
from {
|
||||
@include transform(scale3d(1, 1, 1));
|
||||
}
|
||||
|
||||
50% {
|
||||
@include transform(scale3d(1.05, 1.05, 1.05));
|
||||
}
|
||||
|
||||
to {
|
||||
@include transform(scale3d(1, 1, 1));
|
||||
}
|
||||
}
|
||||
|
||||
.animate__pulse {
|
||||
-webkit-animation-name: #{$prefix}pulse !important;
|
||||
animation-name: #{$prefix}pulse !important;
|
||||
}
|
||||
|
||||
/**
|
||||
* After the CSS round() function exceeds 90% browser support in the future, this code can be removed
|
||||
* See https://caniuse.com/mdn-css_types_round
|
||||
*/
|
||||
@supports not (width: ROUND(60%, 2px)) {
|
||||
@media only screen and (min-width: 1441px) {
|
||||
%page-style {
|
||||
width: 60%;
|
||||
max-width: 1200px;
|
||||
|
||||
[data-page-style='wide'] & {
|
||||
width: 64%;
|
||||
max-width: 1600px;
|
||||
}
|
||||
|
||||
[data-page-style='narrow'] & {
|
||||
max-width: 800px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 1440px) {
|
||||
%page-style {
|
||||
width: 56%;
|
||||
|
||||
[data-page-style='wide'] & {
|
||||
width: 60%;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 1200px) {
|
||||
%page-style {
|
||||
width: 52%;
|
||||
|
||||
[data-page-style='wide'] & {
|
||||
width: 56%;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 960px) {
|
||||
%page-style {
|
||||
width: 80% !important;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 680px) {
|
||||
%page-style {
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// fix ZenUML intersection height error
|
||||
#zenuml-intersection-detector-container {
|
||||
display: none;
|
||||
}
|
||||
@@ -1,69 +0,0 @@
|
||||
:root {
|
||||
// Note: Custom variable values only support SassScript inside `#{}`.
|
||||
// TODO migrate SCSS variables to CSS variables
|
||||
|
||||
interpolate-size: allow-keywords;
|
||||
|
||||
// Global colors variables
|
||||
#{$rootPrefix}global-background-color: #{$global-background-color};
|
||||
#{$rootPrefix}global-font-color: #{$global-font-color};
|
||||
#{$rootPrefix}global-font-secondary-color: #{$global-font-secondary-color};
|
||||
#{$rootPrefix}global-border-color: #{$global-border-color};
|
||||
#{$rootPrefix}global-link-color: #{$global-link-color};
|
||||
#{$rootPrefix}global-link-hover-color: #{$global-link-hover-color};
|
||||
|
||||
// Scroll margin top and Stack sticky top related
|
||||
#{$rootPrefix}scroll-mt: calc(#{$header-height} + #{$global-scroll-margin-top});
|
||||
|
||||
// Set breadcrumb height to 0px if breadcrumb is disabled
|
||||
#{$rootPrefix}breadcrumb-height: 0px;
|
||||
|
||||
// hr / divider style
|
||||
#{$rootPrefix}hr-background-color: #{darken($global-border-color, 5%)};
|
||||
#{$rootPrefix}hr-before-color: #{lighten($single-link-hover-color, 4%)};
|
||||
#{$rootPrefix}divider-edge-weak: linear-gradient(to right, transparent, var(#{$rootPrefix}divider-bg, #d0d0d5), transparent);
|
||||
|
||||
// Scrollbar related variables
|
||||
#{$rootPrefix}scrollbar-thumb-color: #{$scrollbar-color};
|
||||
#{$rootPrefix}scrollbar-thumb-hover-color: #{$scrollbar-hover-color};
|
||||
#{$rootPrefix}scrollbar-track-color: transparent;
|
||||
#{$rootPrefix}scrollbar-width: thin;
|
||||
#{$rootPrefix}scrollbar-width-legacy: 12px;
|
||||
|
||||
// Code related variables
|
||||
#{$rootPrefix}code-inline-background-color: rgba(175, 184, 193, 0.2);
|
||||
#{$rootPrefix}code-block-background-color: #{$code-background-color};
|
||||
#{$rootPrefix}code-header-color: #{$code-header-color};
|
||||
#{$rootPrefix}code-header-background-color: #{darken($code-background-color, 5%)};
|
||||
#{$rootPrefix}code-highlight-color: #{$code-highlight-color};
|
||||
#{$rootPrefix}gist-meta-background-color: #{darken($code-background-color, 5%)};
|
||||
|
||||
// Theme colors variables
|
||||
@each $color, $value in $theme-colors {
|
||||
#{$rootPrefix}#{$color}: #{$value};
|
||||
}
|
||||
}
|
||||
|
||||
// Dark theme
|
||||
[data-theme=dark] {
|
||||
#{$rootPrefix}global-background-color: #{$global-background-color-dark};
|
||||
#{$rootPrefix}global-font-color: #{$global-font-color-dark};
|
||||
#{$rootPrefix}global-font-secondary-color: #{$global-font-secondary-color-dark};
|
||||
#{$rootPrefix}global-border-color: #{$global-border-color-dark};
|
||||
#{$rootPrefix}global-link-color: #{$global-link-color-dark};
|
||||
#{$rootPrefix}global-link-hover-color: #{$global-link-hover-color-dark};
|
||||
|
||||
#{$rootPrefix}hr-background-color: #{lighten($global-border-color-dark, 5%)};
|
||||
#{$rootPrefix}hr-before-color: #{darken($global-link-hover-color-dark, 4%)};
|
||||
|
||||
#{$rootPrefix}code-inline-background-color: rgba(99, 110, 123, 0.4);
|
||||
#{$rootPrefix}code-block-background-color: #{$code-background-color-dark};
|
||||
#{$rootPrefix}code-header-color: #{$code-header-color-dark};
|
||||
#{$rootPrefix}code-header-background-color: #{darken($code-background-color-dark, 5%)};
|
||||
#{$rootPrefix}code-highlight-color: #{$code-highlight-color-dark};
|
||||
#{$rootPrefix}gist-meta-background-color: #{darken($code-background-color-dark, 5%)};
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
#{$rootPrefix}#{$color}: #{darken($value, 5%)};
|
||||
}
|
||||
}
|
||||
@@ -1,4 +0,0 @@
|
||||
// ==============================
|
||||
// Custom style
|
||||
// 自定义样式
|
||||
// ==============================
|
||||
@@ -1,5 +0,0 @@
|
||||
@mixin blur {
|
||||
.blur & {
|
||||
@include filter(blur(1.5px));
|
||||
}
|
||||
}
|
||||
@@ -1,108 +0,0 @@
|
||||
@mixin border-radius($value) {
|
||||
-webkit-border-radius: $value;
|
||||
-moz-border-radius: $value;
|
||||
border-radius: $value;
|
||||
}
|
||||
|
||||
@mixin box-shadow($values...) {
|
||||
-webkit-box-shadow: $values;
|
||||
box-shadow: $values;
|
||||
}
|
||||
|
||||
@mixin transition($values...) {
|
||||
-webkit-transition: $values;
|
||||
-moz-transition: $values;
|
||||
-o-transition: $values;
|
||||
transition: $values;
|
||||
}
|
||||
|
||||
@mixin transform($value) {
|
||||
-webkit-transform: $value;
|
||||
-ms-transform: $value;
|
||||
-o-transform: $value;
|
||||
transform: $value;
|
||||
}
|
||||
|
||||
@mixin filter($value) {
|
||||
-webkit-filter: $value;
|
||||
filter: $value;
|
||||
}
|
||||
|
||||
@mixin flex($value) {
|
||||
-webkit-flex: $value;
|
||||
flex: $value;
|
||||
}
|
||||
|
||||
@mixin box($orient) {
|
||||
display: -moz-box;
|
||||
display: -webkit-box;
|
||||
display: box;
|
||||
|
||||
-webkit-box-orient: $orient;
|
||||
-moz-box-orient: $orient;
|
||||
box-orient: $orient;
|
||||
}
|
||||
|
||||
@mixin placeholder($color) {
|
||||
input::-webkit-input-placeholder {
|
||||
color: $color;
|
||||
}
|
||||
|
||||
input:-moz-placeholder {
|
||||
color: $color;
|
||||
}
|
||||
|
||||
input::-moz-placeholder {
|
||||
color: $color;
|
||||
}
|
||||
|
||||
input:-ms-input-placeholder {
|
||||
color: $color;
|
||||
}
|
||||
|
||||
input::placeholder {
|
||||
color: $color;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin max-content($property) {
|
||||
#{$property}: -webkit-max-content;
|
||||
#{$property}: -moz-max-content;
|
||||
#{$property}: intrinsic;
|
||||
#{$property}: max-content;
|
||||
}
|
||||
|
||||
@mixin tab-size($value) {
|
||||
-moz-tab-size: $value;
|
||||
-o-tab-size: $value;
|
||||
tab-size: $value;
|
||||
}
|
||||
|
||||
@mixin appearance($value) {
|
||||
-moz-appearance: $value;
|
||||
-webkit-appearance: $value;
|
||||
}
|
||||
|
||||
// TODO Superseded by text-wrap: wrap; in modern browsers
|
||||
@mixin overflow-wrap($value) {
|
||||
word-wrap: $value;
|
||||
overflow-wrap: $value;
|
||||
}
|
||||
|
||||
@mixin line-break($value) {
|
||||
-webkit-line-break: $value;
|
||||
-ms-line-break: $value;
|
||||
line-break: $value;
|
||||
}
|
||||
|
||||
@mixin object-fit($value) {
|
||||
-o-object-fit: $value;
|
||||
object-fit: $value;
|
||||
font-family: 'object-fit: #{$value};';
|
||||
}
|
||||
|
||||
@mixin user-select($value) {
|
||||
-webkit-user-select: $value !important;
|
||||
-moz-user-select: $value !important;
|
||||
user-select: $value !important;
|
||||
}
|
||||
@@ -1,6 +0,0 @@
|
||||
@import '_blur';
|
||||
@import '_compatibility';
|
||||
@import '_link';
|
||||
@import '_loading';
|
||||
@import '_scrollbar-width';
|
||||
@import '_z-index';
|
||||
@@ -1,53 +0,0 @@
|
||||
/**
|
||||
* Link mixin
|
||||
* @param {Boolean} $light use global link color
|
||||
* @param {Boolean} $dark use global link color dark
|
||||
* @param {String} $decoration text-decoration, default none
|
||||
* TODO refactor to use CSS variables
|
||||
*/
|
||||
@mixin link($light, $dark, $decoration: none) {
|
||||
a,
|
||||
a::before,
|
||||
a::after {
|
||||
text-decoration: $decoration;
|
||||
|
||||
@if $light {
|
||||
color: $global-link-color;
|
||||
}
|
||||
|
||||
@else {
|
||||
color: $single-link-color;
|
||||
}
|
||||
|
||||
[data-theme='dark'] & {
|
||||
@if $dark {
|
||||
color: $global-link-color-dark;
|
||||
}
|
||||
|
||||
@else {
|
||||
color: $single-link-color-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a:active,
|
||||
a:hover {
|
||||
@if $light {
|
||||
color: $global-link-hover-color;
|
||||
}
|
||||
|
||||
@else {
|
||||
color: $single-link-hover-color;
|
||||
}
|
||||
|
||||
[data-theme='dark'] & {
|
||||
@if $dark {
|
||||
color: $global-link-hover-color-dark;
|
||||
}
|
||||
|
||||
@else {
|
||||
color: $single-link-hover-color-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,4 +0,0 @@
|
||||
@mixin scrollbar-width($width: thin, $widthLegacy: 12px) {
|
||||
#{$rootPrefix}scrollbar-width: #{$width};
|
||||
#{$rootPrefix}scrollbar-width-legacy: #{$widthLegacy};
|
||||
}
|
||||
@@ -1,3 +0,0 @@
|
||||
@mixin z-index($level, $diff: 0) {
|
||||
z-index: ($level * 100) + $diff;
|
||||
}
|
||||
@@ -1,4 +0,0 @@
|
||||
// ==============================
|
||||
// Override Variables
|
||||
// 覆盖变量
|
||||
// ==============================
|
||||
@@ -1,6 +0,0 @@
|
||||
#content-404 {
|
||||
font-size: 1.8rem;
|
||||
line-height: 3rem;
|
||||
@include transform(translateY(30vh));
|
||||
text-align: center;
|
||||
}
|
||||
@@ -1,19 +0,0 @@
|
||||
.page {
|
||||
position: relative;
|
||||
@extend %page-style;
|
||||
|
||||
.content {
|
||||
[id] {
|
||||
scroll-margin-top: var(#{$rootPrefix}scroll-mt);
|
||||
}
|
||||
}
|
||||
|
||||
@include blur;
|
||||
}
|
||||
|
||||
@import '_single';
|
||||
@import '_special';
|
||||
@import '_archive';
|
||||
@import '_home';
|
||||
@import '_404';
|
||||
@import '_offline';
|
||||
@@ -1,19 +0,0 @@
|
||||
#content-offline {
|
||||
@include transform(translateY(30vh));
|
||||
text-align: center;
|
||||
|
||||
.offline-title {
|
||||
font-size: 3.6rem;
|
||||
}
|
||||
.offline-subtitle {
|
||||
margin: 0.4rem 0;
|
||||
font-size: 1rem;
|
||||
font-weight: normal;
|
||||
font-style: italic;
|
||||
line-height: 100%;
|
||||
color: #57606a;
|
||||
}
|
||||
.error-text {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
}
|
||||
@@ -1,526 +0,0 @@
|
||||
@import '../_partials/_single/toc';
|
||||
@import '../_partials/_single/fixit-decryptor';
|
||||
@import '../_partials/_single/collections';
|
||||
@import '../_partials/_single/related';
|
||||
@import '../_partials/_single/color-preview';
|
||||
|
||||
.single {
|
||||
.single-title {
|
||||
padding: 1rem 0 0.5rem;
|
||||
margin: 0;
|
||||
font-size: 1.6rem;
|
||||
font-weight: bold;
|
||||
line-height: 140%;
|
||||
|
||||
.icon-pin {
|
||||
display: inline-block;
|
||||
width: max-content;
|
||||
transform: rotate(30deg);
|
||||
margin-right: 0.25em;
|
||||
color: var(#{$rootPrefix}danger);
|
||||
}
|
||||
|
||||
.icon-repost {
|
||||
display: inline-block;
|
||||
width: max-content;
|
||||
margin-right: 0.25em;
|
||||
color: var(#{$rootPrefix}success);
|
||||
}
|
||||
}
|
||||
|
||||
.single-subtitle {
|
||||
margin-block: 0 0.5rem;
|
||||
font-size: 1.2rem;
|
||||
font-weight: normal;
|
||||
line-height: 1.15;
|
||||
}
|
||||
|
||||
.post-meta {
|
||||
font-size: 0.875rem;
|
||||
color: var(#{$rootPrefix}global-font-secondary-color);
|
||||
|
||||
.comment-visitors,
|
||||
.comment-count {
|
||||
@extend .print-d-none;
|
||||
}
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
@include link(false, true);
|
||||
|
||||
.author {
|
||||
font-size: 1.05rem;
|
||||
|
||||
img.avatar {
|
||||
width: 1.3rem;
|
||||
height: 1.3rem;
|
||||
border-radius: 50%;
|
||||
vertical-align: text-bottom;
|
||||
border: 0.25px solid $global-border-color;
|
||||
box-sizing: border-box;
|
||||
object-position: center;
|
||||
@include object-fit(cover);
|
||||
|
||||
[data-theme='dark'] & {
|
||||
border-color: $global-border-color-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.featured-image {
|
||||
margin: 1rem 0;
|
||||
|
||||
img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
#content[data-end-flag]:not([data-password])::after {
|
||||
content: attr(data-end-flag);
|
||||
display: block;
|
||||
text-align: center;
|
||||
font-size: 15px;
|
||||
padding: 5px;
|
||||
color: var(#{$rootPrefix}global-font-secondary-color);
|
||||
}
|
||||
|
||||
hr {
|
||||
position: relative;
|
||||
height: 1em;
|
||||
margin-block: 1em;
|
||||
background: linear-gradient(to right, var(#{$rootPrefix}hr-background-color) 50%, transparent 50%);
|
||||
background-size: 10px 2px;
|
||||
background-position: center;
|
||||
background-repeat: repeat-x;
|
||||
border: none;
|
||||
|
||||
&.awesome-hr {
|
||||
&::before {
|
||||
display: inline-block;
|
||||
font-weight: 600;
|
||||
font-family: 'Font Awesome 6 Free';
|
||||
text-rendering: auto;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
position: absolute;
|
||||
left: 5%;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
z-index: 1;
|
||||
color: var(#{$rootPrefix}hr-before-color);
|
||||
content: '\f0c4';
|
||||
font-size: 20px;
|
||||
line-height: 1;
|
||||
transition: left 1s ease-in-out, color 0.3s ease, border-color 0.3s ease;
|
||||
}
|
||||
|
||||
&:hover::before {
|
||||
left: calc(95% - 20px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
margin-block: 1rem;
|
||||
> h1,
|
||||
> h2 {
|
||||
font-size: 1.5em;
|
||||
padding-bottom: 0.3em;
|
||||
border-bottom: 1px solid $global-border-color;
|
||||
}
|
||||
|
||||
> h3 {
|
||||
font-size: 1.25em;
|
||||
}
|
||||
|
||||
> h4 {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
> h5 {
|
||||
font-size: 0.875em;
|
||||
}
|
||||
|
||||
> h6 {
|
||||
font-size: 0.85em;
|
||||
}
|
||||
|
||||
.heading-element {
|
||||
display: flex;
|
||||
font-weight: bold;
|
||||
line-height: 1.25;
|
||||
margin-top: 1.5rem;
|
||||
margin-bottom: 1rem;
|
||||
|
||||
[data-theme='dark'] & {
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:target {
|
||||
> .heading-mark {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
> .heading-mark {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
opacity: 0;
|
||||
padding-inline: 0.5rem;
|
||||
transition: all 0.2s ease-in-out;
|
||||
@include link(false, false);
|
||||
|
||||
svg {
|
||||
fill: currentColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bold;
|
||||
|
||||
[data-theme='dark'] & {
|
||||
color: #ddd;
|
||||
}
|
||||
}
|
||||
|
||||
@include link(false, false);
|
||||
|
||||
a {
|
||||
white-space: normal;
|
||||
@include overflow-wrap(break-word);
|
||||
|
||||
[data-theme='dark'] & b,
|
||||
[data-theme='dark'] & strong {
|
||||
color: $single-link-color-dark;
|
||||
}
|
||||
}
|
||||
|
||||
[data-theme='dark'] a:hover b,
|
||||
[data-theme='dark'] a:hover strong {
|
||||
color: $single-link-hover-color-dark;
|
||||
}
|
||||
|
||||
ul,
|
||||
ol,
|
||||
dl {
|
||||
margin-block: 0.5em;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: disc;
|
||||
|
||||
// Task lists
|
||||
li[data-task] {
|
||||
list-style: none;
|
||||
margin-left: -1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
// Task lists
|
||||
li[data-task] {
|
||||
color: var(#{$rootPrefix}task-color);
|
||||
.checkbox-icon {
|
||||
margin-right: 0.25em;
|
||||
color: var(#{$rootPrefix}checkbox-color);
|
||||
}
|
||||
}
|
||||
li[data-task='x'],
|
||||
li[data-task='-'] {
|
||||
#{$rootPrefix}task-color: var(#{$rootPrefix}secondary);
|
||||
text-decoration: line-through rgba(145, 145, 145, 0.6);
|
||||
}
|
||||
li[data-task='x'] {
|
||||
#{$rootPrefix}checkbox-color: var(#{$rootPrefix}primary);
|
||||
}
|
||||
li[data-task='-'] {
|
||||
opacity: 0.6;
|
||||
}
|
||||
li[data-task='/'] {
|
||||
#{$rootPrefix}task-color: var(#{$rootPrefix}success);
|
||||
}
|
||||
li[data-task='!'] {
|
||||
#{$rootPrefix}checkbox-color: var(#{$rootPrefix}danger);
|
||||
}
|
||||
li[data-task='?'] {
|
||||
#{$rootPrefix}checkbox-color: var(#{$rootPrefix}warning);
|
||||
}
|
||||
|
||||
dl {
|
||||
dt {
|
||||
font-weight: bold;
|
||||
}
|
||||
dd {
|
||||
margin: 0.25em 0 1em;
|
||||
}
|
||||
}
|
||||
|
||||
ruby {
|
||||
background-color: var(#{$rootPrefix}code-block-background-color);
|
||||
|
||||
rt {
|
||||
color: var(#{$rootPrefix}global-font-secondary-color);
|
||||
}
|
||||
}
|
||||
|
||||
mark {
|
||||
padding: 0.14em 0.28em;
|
||||
background-color: var(#{$rootPrefix}mark-background-color, mark);
|
||||
color: var(#{$rootPrefix}mark-color, marktext);
|
||||
@include border-radius($global-border-radius);
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
&.mark-#{$color} {
|
||||
#{$rootPrefix}mark-color: #fff;
|
||||
#{$rootPrefix}mark-background-color: var(#{$rootPrefix}#{$color});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table-wrapper {
|
||||
position: relative;
|
||||
overflow-x: auto;
|
||||
#{$rootPrefix}scrollbar-thumb-color: #{$table-background-color};
|
||||
|
||||
[data-theme='dark'] & {
|
||||
#{$rootPrefix}scrollbar-thumb-color: #{$table-background-color-dark};
|
||||
}
|
||||
|
||||
> table {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
margin: 0.625rem 0;
|
||||
border-spacing: 0;
|
||||
background: $table-background-color;
|
||||
border-collapse: collapse;
|
||||
|
||||
[data-theme='dark'] & {
|
||||
background: $table-background-color-dark;
|
||||
}
|
||||
|
||||
thead {
|
||||
background: $table-thead-color;
|
||||
|
||||
[data-theme='dark'] & {
|
||||
background-color: $table-thead-color-dark;
|
||||
}
|
||||
}
|
||||
|
||||
&:not([class]) tbody {
|
||||
& tr:nth-child(odd) {
|
||||
background: darken($table-background-color, 2.25%);
|
||||
|
||||
[data-theme='dark'] & {
|
||||
background-color: lighten($table-background-color-dark, 2.75%);
|
||||
}
|
||||
}
|
||||
|
||||
& tr:hover {
|
||||
background: darken($table-background-color, 4.5%);
|
||||
|
||||
[data-theme='dark'] & {
|
||||
background-color: lighten($table-background-color-dark, 5.5%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
padding: 0.3rem 1rem;
|
||||
border: 1px solid darken($table-thead-color, 2%);
|
||||
|
||||
[data-theme='dark'] & {
|
||||
border-color: darken($table-thead-color-dark, 2%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
// SVG performs differently in Safari compared to other browsers
|
||||
&:not([src*='.svg']) {
|
||||
min-height: 1em;
|
||||
}
|
||||
}
|
||||
svg {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
figure {
|
||||
margin: 0.5rem;
|
||||
text-align: center;
|
||||
|
||||
.image-caption:not(:empty) {
|
||||
min-width: 20%;
|
||||
max-width: 80%;
|
||||
display: inline-block;
|
||||
padding: 0.5rem;
|
||||
margin: 0 auto;
|
||||
font-size: 0.875rem;
|
||||
color: #969696;
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
height: auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
blockquote {
|
||||
display: block;
|
||||
border-left: 0.25em solid $global-border-color;
|
||||
color: $blockquote-color;
|
||||
padding: 0 1em;
|
||||
margin: 1rem 0;
|
||||
|
||||
ul,
|
||||
ol {
|
||||
padding-left: 1.5em;
|
||||
}
|
||||
|
||||
dl dd {
|
||||
margin-inline-start: 0.25em;
|
||||
}
|
||||
|
||||
[data-theme='dark'] & {
|
||||
color: $blockquote-color-dark;
|
||||
border-left-color: $global-border-color-dark;
|
||||
}
|
||||
|
||||
@include link(false, true);
|
||||
}
|
||||
|
||||
sup[id^='fnref']:has(.footnote-ref) {
|
||||
padding: 2px 4px;
|
||||
background-color: rgba(238, 238, 238, 0.7);
|
||||
color: #555555;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
|
||||
[data-theme='dark'] & {
|
||||
background-color: rgba(56, 139, 253, 0.1);
|
||||
color: #58a6ff;
|
||||
}
|
||||
|
||||
@include link(true, false);
|
||||
}
|
||||
|
||||
.footnotes {
|
||||
font-size: 0.75rem;
|
||||
white-space: normal;
|
||||
color: darken($global-font-secondary-color, 5%);
|
||||
|
||||
ol {
|
||||
margin-block: 1em;
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
hr {
|
||||
background-color: var(#{$rootPrefix}hr-background-color);
|
||||
height: 1px;
|
||||
margin-block: 1em;
|
||||
}
|
||||
|
||||
code {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
a:not(.footnote-backref) {
|
||||
color: inherit;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
@include link(false, true);
|
||||
|
||||
[data-theme='dark'] & {
|
||||
color: lighten($global-font-secondary-color-dark, 5%);
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0.25rem 0;
|
||||
}
|
||||
}
|
||||
|
||||
kbd {
|
||||
display: inline-block;
|
||||
padding: 0 0.25rem;
|
||||
background-color: var(#{$rootPrefix}global-background-color);
|
||||
border: 1px solid $global-border-color;
|
||||
font-size: 0.8rem;
|
||||
font-family: $code-font-family;
|
||||
color: $code-color;
|
||||
@include border-radius($global-border-radius);
|
||||
@include box-shadow(inset 0 -1px 0 $global-border-color);
|
||||
|
||||
[data-theme='dark'] & {
|
||||
border: 1px solid $global-border-color-dark;
|
||||
color: $code-color-dark;
|
||||
@include box-shadow(inset 0 -1px 0 $global-border-color-dark);
|
||||
}
|
||||
}
|
||||
|
||||
// KaTeX styles
|
||||
.katex-display {
|
||||
max-width: 100%;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
.katex-error {
|
||||
padding: 0.14em 0.28em;
|
||||
background-color: mark;
|
||||
cursor: help;
|
||||
@include border-radius($global-border-radius);
|
||||
}
|
||||
|
||||
// MathJax styles
|
||||
mjx-container[jax='CHTML'][display='true'] {
|
||||
max-width: 100%;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
|
||||
// fix the color of xypic diagrams
|
||||
mjx-xypic {
|
||||
g {
|
||||
stroke: currentColor !important;
|
||||
}
|
||||
mjx-xypic-object {
|
||||
color: currentColor !important;
|
||||
fill: currentColor !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
json-viewer[boxed] + json-viewer[boxed] {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
@import '../_partials/_single/alert';
|
||||
@import '../_partials/_single/code';
|
||||
@import '../_partials/_single/diagram-copy-btn';
|
||||
@import '../_shortcodes';
|
||||
}
|
||||
|
||||
@import '../_partials/_single/reward';
|
||||
@import '../_partials/_single/footer';
|
||||
@import '../_partials/_single/comment';
|
||||
}
|
||||
|
||||
.lg-toolbar .lg-icon::after {
|
||||
color: #999;
|
||||
}
|
||||
@@ -1,63 +0,0 @@
|
||||
/**
|
||||
* Style of layout named 'friends'.
|
||||
* @Author: Lruihao <https://lruihao.cn>
|
||||
* @Updated: 2022/3/11 21:36
|
||||
*/
|
||||
|
||||
.friend-links {
|
||||
margin-top: 1rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
@media (max-width: 576px) {
|
||||
.friend-links {
|
||||
justify-content: space-around;
|
||||
}
|
||||
}
|
||||
.friend-link {
|
||||
width: 150px;
|
||||
height: 200px;
|
||||
font-size: 1rem;
|
||||
text-align: center;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
box-sizing: border-box;
|
||||
box-shadow: 3px 3px 5px #aaa;
|
||||
@include border-radius($global-border-radius);
|
||||
border: none;
|
||||
transition-duration: 0.3s;
|
||||
margin-bottom: 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.friend-link:hover {
|
||||
background: #fff;
|
||||
@include transform(scale(1.03));
|
||||
box-shadow: 0 0 3px #aaa;
|
||||
}
|
||||
.friend-avatar {
|
||||
object-fit: cover;
|
||||
object-position: center;
|
||||
width: 100% !important;
|
||||
height: 150px !important;
|
||||
@include border-radius($global-border-radius);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.friend-nickname {
|
||||
display: block;
|
||||
position: relative;
|
||||
color: #2bbc8a;
|
||||
font-weight: bold;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
line-height: 18px;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.friend-nickname:hover {
|
||||
color: #d480aa;
|
||||
}
|
||||
@@ -1,14 +0,0 @@
|
||||
.special {
|
||||
.single-title,
|
||||
.single-subtitle {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
&.friends {
|
||||
@import '_friends';
|
||||
}
|
||||
|
||||
&.search {
|
||||
@import '_search';
|
||||
}
|
||||
}
|
||||
@@ -1,10 +0,0 @@
|
||||
// Style of layout named 'search'
|
||||
// TODO Adapting to dark mode, maybe use css variables
|
||||
|
||||
// Google CSE
|
||||
.gcse-searchbox:empty,
|
||||
.gcse-searchresults:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Bing CSE (Unsupported)
|
||||
@@ -1,55 +0,0 @@
|
||||
.tag-cloud-tags {
|
||||
margin: 10px 0;
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
margin: 5px 10px;
|
||||
@include overflow-wrap(break-word);
|
||||
@include transition(all ease-out 0.3s);
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
@include transform(scale(1.2));
|
||||
|
||||
sup {
|
||||
color: var(#{$rootPrefix}global-font-color);
|
||||
@include transition(all ease-out 0.3s);
|
||||
}
|
||||
}
|
||||
|
||||
sup {
|
||||
color: var(#{$rootPrefix}global-font-secondary-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@for $grade from 0 through 10 {
|
||||
$tag-cloud-color: mix($tag-cloud-end, $tag-cloud-start, $grade * 10);
|
||||
$tag-cloud-color-dark: mix($tag-cloud-end-dark, $tag-cloud-start-dark, $grade * 10);
|
||||
|
||||
.tag-cloud-#{$grade} {
|
||||
color: $tag-cloud-color;
|
||||
font-size: var(--tag-font);
|
||||
margin: 10px !important;
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
color: var(#{$rootPrefix}global-link-hover-color) !important;
|
||||
|
||||
sup {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
[data-theme='dark'] & {
|
||||
color: $tag-cloud-color-dark;
|
||||
}
|
||||
|
||||
sup {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,175 +0,0 @@
|
||||
/**
|
||||
* GitHub Dark Dimmed
|
||||
* Copyright (c) 2012 - current GitHub, Inc.
|
||||
* Licensed under MIT (https://github.com/primer/github-syntax-theme-generator/blob/master/LICENSE)
|
||||
* Maintained by @Lruihao for FixIt theme
|
||||
* Created on 2022-03-01
|
||||
* Updated on 2024-07-14
|
||||
*/
|
||||
& {
|
||||
// Blob colors
|
||||
#{$rootPrefix}color-blob-num: #778491;
|
||||
#{$rootPrefix}color-blob-code-inner: #c5d1de;
|
||||
// Syntax colors
|
||||
#{$rootPrefix}color-prettylights-syntax-comment: #768390;
|
||||
#{$rootPrefix}color-prettylights-syntax-constant: #6cb6ff;
|
||||
#{$rootPrefix}color-prettylights-syntax-constant-other-reference-link: #96d0ff;
|
||||
#{$rootPrefix}color-prettylights-syntax-entity: #dcbdfb;
|
||||
#{$rootPrefix}color-prettylights-syntax-storage-modifier-import: #adbac7;
|
||||
#{$rootPrefix}color-prettylights-syntax-entity-tag: #8ddb8c;
|
||||
#{$rootPrefix}color-prettylights-syntax-keyword: #f47067;
|
||||
#{$rootPrefix}color-prettylights-syntax-string: #96d0ff;
|
||||
#{$rootPrefix}color-prettylights-syntax-variable: #f69d50;
|
||||
#{$rootPrefix}color-prettylights-syntax-brackethighlighter-unmatched: #e5534b;
|
||||
#{$rootPrefix}color-prettylights-syntax-brackethighlighter-angle: #768390;
|
||||
#{$rootPrefix}color-prettylights-syntax-invalid-illegal-text: #cdd9e5;
|
||||
#{$rootPrefix}color-prettylights-syntax-invalid-illegal-bg: #922323;
|
||||
#{$rootPrefix}color-prettylights-syntax-carriage-return-text: #cdd9e5;
|
||||
#{$rootPrefix}color-prettylights-syntax-carriage-return-bg: #ad2e2c;
|
||||
#{$rootPrefix}color-prettylights-syntax-string-regexp: #8ddb8c;
|
||||
#{$rootPrefix}color-prettylights-syntax-markup-list: #eac55f;
|
||||
#{$rootPrefix}color-prettylights-syntax-markup-heading: #316dca;
|
||||
#{$rootPrefix}color-prettylights-syntax-markup-italic: #adbac7;
|
||||
#{$rootPrefix}color-prettylights-syntax-markup-bold: #adbac7;
|
||||
#{$rootPrefix}color-prettylights-syntax-markup-deleted-text: #ffd8d3;
|
||||
#{$rootPrefix}color-prettylights-syntax-markup-deleted-bg: #78191b;
|
||||
#{$rootPrefix}color-prettylights-syntax-markup-inserted-text: #b4f1b4;
|
||||
#{$rootPrefix}color-prettylights-syntax-markup-inserted-bg: #1b4721;
|
||||
#{$rootPrefix}color-prettylights-syntax-markup-changed-text: #ffddb0;
|
||||
#{$rootPrefix}color-prettylights-syntax-markup-changed-bg: #682d0f;
|
||||
#{$rootPrefix}color-prettylights-syntax-markup-ignored-text: #adbac7;
|
||||
#{$rootPrefix}color-prettylights-syntax-markup-ignored-bg: #255ab2;
|
||||
#{$rootPrefix}color-prettylights-syntax-meta-diff-range: #dcbdfb;
|
||||
#{$rootPrefix}color-prettylights-syntax-sublimelinter-gutter-mark: #545d68;
|
||||
|
||||
.blob-num {
|
||||
color: var(#{$rootPrefix}color-blob-num);
|
||||
}
|
||||
.blob-code-inner {
|
||||
color: var(#{$rootPrefix}color-blob-code-inner);
|
||||
}
|
||||
|
||||
.pl-c /* comment, punctuation.definition.comment, string.comment */ {
|
||||
color: var(#{$rootPrefix}color-prettylights-syntax-comment);
|
||||
}
|
||||
|
||||
.pl-c1 /* constant, entity.name.constant, variable.other.constant, variable.language, support, meta.property-name, support.constant, support.variable, meta.module-reference, markup.raw, meta.diff.header, meta.output */,
|
||||
.pl-s .pl-v /* string variable */ {
|
||||
color: var(#{$rootPrefix}color-prettylights-syntax-constant);
|
||||
}
|
||||
|
||||
.pl-e /* entity */,
|
||||
.pl-en /* entity.name */ {
|
||||
color: var(#{$rootPrefix}color-prettylights-syntax-entity);
|
||||
}
|
||||
|
||||
.pl-smi /* variable.parameter.function, storage.modifier.package, storage.modifier.import, storage.type.java, variable.other */,
|
||||
.pl-s .pl-s1 /* string source */ {
|
||||
color: var(#{$rootPrefix}color-prettylights-syntax-storage-modifier-import);
|
||||
}
|
||||
|
||||
.pl-ent /* entity.name.tag, markup.quote */ {
|
||||
color: var(#{$rootPrefix}color-prettylights-syntax-entity-tag);
|
||||
}
|
||||
|
||||
.pl-k /* keyword, storage, storage.type */ {
|
||||
color: var(#{$rootPrefix}color-prettylights-syntax-keyword);
|
||||
}
|
||||
|
||||
.pl-s /* string */,
|
||||
.pl-pds /* punctuation.definition.string, source.regexp, string.regexp.character-class */,
|
||||
.pl-s .pl-pse .pl-s1 /* string punctuation.section.embedded source */,
|
||||
.pl-sr /* string.regexp */,
|
||||
.pl-sr .pl-cce /* string.regexp constant.character.escape */,
|
||||
.pl-sr .pl-sre /* string.regexp source.ruby.embedded */,
|
||||
.pl-sr .pl-sra /* string.regexp string.regexp.arbitrary-repitition */ {
|
||||
color: var(#{$rootPrefix}color-prettylights-syntax-string);
|
||||
}
|
||||
|
||||
.pl-v /* variable */,
|
||||
.pl-smw /* sublimelinter.mark.warning */ {
|
||||
color: var(#{$rootPrefix}color-prettylights-syntax-variable);
|
||||
}
|
||||
|
||||
.pl-bu /* invalid.broken, invalid.deprecated, invalid.unimplemented, message.error, brackethighlighter.unmatched, sublimelinter.mark.error */ {
|
||||
color: var(#{$rootPrefix}color-prettylights-syntax-brackethighlighter-unmatched);
|
||||
}
|
||||
|
||||
.pl-ii /* invalid.illegal */ {
|
||||
color: var(#{$rootPrefix}color-prettylights-syntax-invalid-illegal-text);
|
||||
background-color: var(#{$rootPrefix}color-prettylights-syntax-invalid-illegal-bg);
|
||||
}
|
||||
|
||||
.pl-c2 /* carriage-return */ {
|
||||
color: var(#{$rootPrefix}color-prettylights-syntax-carriage-return-text);
|
||||
background-color: var(#{$rootPrefix}color-prettylights-syntax-carriage-return-bg);
|
||||
}
|
||||
|
||||
.pl-c2::before /* carriage-return */ {
|
||||
content: '^M';
|
||||
}
|
||||
|
||||
.pl-sr .pl-cce /* string.regexp constant.character.escape */ {
|
||||
font-weight: bold;
|
||||
color: var(#{$rootPrefix}color-prettylights-syntax-string-regexp);
|
||||
}
|
||||
|
||||
.pl-ml /* markup.list */ {
|
||||
color: var(#{$rootPrefix}color-prettylights-syntax-markup-list);
|
||||
}
|
||||
|
||||
.pl-mh /* markup.heading */,
|
||||
.pl-mh .pl-en /* markup.heading entity.name */,
|
||||
.pl-ms /* meta.separator */ {
|
||||
font-weight: bold;
|
||||
color: var(#{$rootPrefix}color-prettylights-syntax-markup-heading);
|
||||
}
|
||||
|
||||
.pl-mi /* markup.italic */ {
|
||||
font-style: italic;
|
||||
color: var(#{$rootPrefix}color-prettylights-syntax-markup-italic);
|
||||
}
|
||||
|
||||
.pl-mb /* markup.bold */ {
|
||||
font-weight: bold;
|
||||
color: var(#{$rootPrefix}color-prettylights-syntax-markup-bold);
|
||||
}
|
||||
|
||||
.pl-md /* markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted */ {
|
||||
color: var(#{$rootPrefix}color-prettylights-syntax-markup-deleted-text);
|
||||
background-color: var(#{$rootPrefix}color-prettylights-syntax-markup-deleted-bg);
|
||||
}
|
||||
|
||||
.pl-mi1 /* markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted */ {
|
||||
color: var(#{$rootPrefix}color-prettylights-syntax-markup-inserted-text);
|
||||
background-color: var(#{$rootPrefix}color-prettylights-syntax-markup-inserted-bg);
|
||||
}
|
||||
|
||||
.pl-mc /* markup.changed, punctuation.definition.changed */ {
|
||||
color: var(#{$rootPrefix}color-prettylights-syntax-markup-changed-text);
|
||||
background-color: var(#{$rootPrefix}color-prettylights-syntax-markup-changed-bg);
|
||||
}
|
||||
|
||||
.pl-mi2 /* markup.ignored, markup.untracked */ {
|
||||
color: var(#{$rootPrefix}color-prettylights-syntax-markup-ignored-text);
|
||||
background-color: var(#{$rootPrefix}color-prettylights-syntax-markup-ignored-bg);
|
||||
}
|
||||
|
||||
.pl-mdr /* meta.diff.range */ {
|
||||
font-weight: bold;
|
||||
color: var(#{$rootPrefix}color-prettylights-syntax-meta-diff-range);
|
||||
}
|
||||
|
||||
.pl-ba /* brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote */ {
|
||||
color: var(#{$rootPrefix}color-prettylights-syntax-brackethighlighter-angle);
|
||||
}
|
||||
|
||||
.pl-sg /* sublimelinter.gutter-mark */ {
|
||||
color: var(#{$rootPrefix}color-prettylights-syntax-sublimelinter-gutter-mark);
|
||||
}
|
||||
|
||||
.pl-corl /* constant.other.reference.link, string.other.link */ {
|
||||
text-decoration: underline;
|
||||
color: var(#{$rootPrefix}color-prettylights-syntax-constant-other-reference-link);
|
||||
}
|
||||
}
|
||||
@@ -1,29 +0,0 @@
|
||||
/**
|
||||
* Code syntax highlighting for Chroma
|
||||
*
|
||||
* To generate syntax highlighting styles from the command line,
|
||||
* See https://gohugo.io/quick-reference/syntax-highlighting-styles/#styles
|
||||
* For example:
|
||||
* hugo gen chromastyles --style=github > assets/css/_partials/_code-syntax/light.scss
|
||||
* hugo gen chromastyles --style=github-dark > assets/css/_partials/_code-syntax/dark.scss
|
||||
*/
|
||||
.highlight {
|
||||
/* LineLink */
|
||||
.lnlinks {
|
||||
outline: none;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
/* LineHighlight */
|
||||
.hl {
|
||||
display: block;
|
||||
background-color: var(#{$rootPrefix}code-highlight-color);
|
||||
box-shadow: -0.75rem 0 0 var(#{$rootPrefix}code-highlight-color), 0.75rem 0 0 var(#{$rootPrefix}code-highlight-color);
|
||||
}
|
||||
|
||||
@import '../_code-syntax/light';
|
||||
|
||||
[data-theme='dark'] & {
|
||||
@import '../_code-syntax/dark';
|
||||
}
|
||||
}
|
||||
@@ -1,43 +0,0 @@
|
||||
.details {
|
||||
> .details-summary {
|
||||
@include border-radius($global-border-radius);
|
||||
@include transition(border-radius 0.2s ease 0.2s);
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
i.details-icon {
|
||||
color: var(#{$rootPrefix}global-font-secondary-color);
|
||||
@include transition(transform 0.2s ease);
|
||||
}
|
||||
}
|
||||
|
||||
> .details-content {
|
||||
height: 0;
|
||||
overflow-y: hidden;
|
||||
@include transition(height 0.5s ease-out);
|
||||
}
|
||||
|
||||
&.open {
|
||||
> .details-summary {
|
||||
@include border-radius($global-border-radius $global-border-radius 0 0);
|
||||
@include transition(border-radius 0s);
|
||||
|
||||
i.details-icon {
|
||||
@include transform(rotate(90deg));
|
||||
}
|
||||
}
|
||||
|
||||
> .details-content {
|
||||
height: auto;
|
||||
@include border-radius(0 0 $global-border-radius $global-border-radius);
|
||||
}
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
> .details-summary {
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,7 +0,0 @@
|
||||
img {
|
||||
@include border-radius($global-border-radius/2);
|
||||
|
||||
&[loading='lazy'] {
|
||||
background: var(#{$rootPrefix}loading-img) no-repeat center;
|
||||
}
|
||||
}
|
||||
@@ -1,17 +0,0 @@
|
||||
// Theme colors
|
||||
$primary: #1772ee !default;
|
||||
$secondary: #919191 !default;
|
||||
$success: #13ce66 !default;
|
||||
$info: #0dcaf0 !default;
|
||||
$warning: #ffba00 !default;
|
||||
$danger: #ff4949 !default;
|
||||
|
||||
// Theme colors map
|
||||
$theme-colors: (
|
||||
'primary': $primary,
|
||||
'secondary': $secondary,
|
||||
'success': $success,
|
||||
'info': $info,
|
||||
'warning': $warning,
|
||||
'danger': $danger
|
||||
) !default;
|
||||
@@ -1,13 +0,0 @@
|
||||
// Utilities
|
||||
|
||||
// property order
|
||||
$orders: (
|
||||
first: -1,
|
||||
0: 0,
|
||||
1: 1,
|
||||
2: 2,
|
||||
3: 3,
|
||||
4: 4,
|
||||
5: 5,
|
||||
last: 6,
|
||||
) !default;
|
||||
@@ -1,36 +0,0 @@
|
||||
/* Modern browsers with `scrollbar-*` support (high priority) */
|
||||
@supports (scrollbar-width: auto) {
|
||||
* {
|
||||
scrollbar-color: var(#{$rootPrefix}scrollbar-thumb-color) var(#{$rootPrefix}scrollbar-track-color);;
|
||||
scrollbar-width: var(#{$rootPrefix}scrollbar-width);
|
||||
}
|
||||
}
|
||||
|
||||
/* Legacy browsers with `::-webkit-scrollbar-*` support */
|
||||
::-webkit-scrollbar {
|
||||
height: var(#{$rootPrefix}scrollbar-width-legacy);
|
||||
width: var(#{$rootPrefix}scrollbar-width-legacy);
|
||||
overflow: visible;
|
||||
}
|
||||
::-webkit-scrollbar-button {
|
||||
height: 0;
|
||||
width: 0;
|
||||
}
|
||||
::-webkit-scrollbar-corner {
|
||||
background-color: var(#{$rootPrefix}scrollbar-track-color);
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: var(#{$rootPrefix}scrollbar-thumb-color);
|
||||
&:hover {
|
||||
background-color: var(#{$rootPrefix}scrollbar-thumb-hover-color);
|
||||
}
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background-color: var(#{$rootPrefix}scrollbar-track-color);
|
||||
}
|
||||
::-webkit-scrollbar-thumb,
|
||||
::-webkit-scrollbar-track {
|
||||
background-clip: padding-box;
|
||||
border: 3px solid transparent;
|
||||
border-radius: 100px;
|
||||
}
|
||||
@@ -1,44 +0,0 @@
|
||||
.alert {
|
||||
padding: 0.5rem 1rem;
|
||||
margin-block: 1rem;
|
||||
color: inherit;
|
||||
border-left: 0.25em solid var(#{$rootPrefix}alert-border-color);
|
||||
|
||||
> :first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
> :last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.alert-title {
|
||||
display: flex;
|
||||
font-weight: 500;
|
||||
align-items: center;
|
||||
line-height: 1;
|
||||
margin-bottom: 1rem;
|
||||
color: var(#{$rootPrefix}alert-color);
|
||||
|
||||
> svg.icon {
|
||||
width: initial;
|
||||
height: initial;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@each $type, $item in $alert-color-map {
|
||||
&.alert-#{$type} {
|
||||
#{$rootPrefix}alert-border-color: #{map-get($item, border-color)};
|
||||
#{$rootPrefix}alert-color: #{map-get($item, color)};
|
||||
}
|
||||
}
|
||||
|
||||
[data-theme='dark'] & {
|
||||
@each $type, $item in $alert-color-map-dark {
|
||||
&.alert-#{$type} {
|
||||
#{$rootPrefix}alert-border-color: #{map-get($item, border-color)};
|
||||
#{$rootPrefix}alert-color: #{map-get($item, color)};
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,511 +0,0 @@
|
||||
// inline code
|
||||
code {
|
||||
@extend %code;
|
||||
}
|
||||
|
||||
// indented code
|
||||
pre {
|
||||
margin: 0;
|
||||
line-height: 1.45em;
|
||||
padding: 0.5rem 0.75rem;
|
||||
overflow: auto;
|
||||
font-size: $code-block-font-size;
|
||||
font-family: $code-font-family;
|
||||
background-color: var(#{$rootPrefix}code-block-background-color);
|
||||
@include border-radius($global-border-radius);
|
||||
@include tab-size(4);
|
||||
|
||||
+ pre {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
code {
|
||||
padding: 0;
|
||||
background-color: transparent;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
@include border-radius(0);
|
||||
@include max-content(min-width);
|
||||
|
||||
[data-theme='dark'] & {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
min-height: 1em;
|
||||
max-height: 1.2em;
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
}
|
||||
|
||||
.highlight,
|
||||
.gist {
|
||||
font-size: $code-block-font-size;
|
||||
font-family: $code-font-family;
|
||||
#{$rootPrefix}scrollbar-thumb-color: inherit;
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
border-spacing: 0;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
table,
|
||||
table thead,
|
||||
table tr,
|
||||
table td {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Code fences blocks or highlight shortcodes
|
||||
.highlight {
|
||||
margin: 0.5rem 0;
|
||||
position: relative;
|
||||
@include border-radius($global-border-radius);
|
||||
|
||||
// lineNumbersInTable=true
|
||||
> .chroma {
|
||||
position: relative;
|
||||
background-color: var(#{$rootPrefix}code-block-background-color);
|
||||
@include border-radius($global-border-radius);
|
||||
|
||||
&:is(pre):has(.ln) {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.lntable {
|
||||
overflow: auto;
|
||||
display: block;
|
||||
background-color: var(#{$rootPrefix}code-block-background-color);
|
||||
@include border-radius($global-border-radius);
|
||||
|
||||
td {
|
||||
vertical-align: top;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
pre {
|
||||
outline-offset: -1px;
|
||||
@include border-radius(0);
|
||||
}
|
||||
|
||||
// line numbers
|
||||
.lntd:first-child {
|
||||
position: sticky;
|
||||
left: 0;
|
||||
}
|
||||
// code content
|
||||
.lntd:last-child {
|
||||
width: 100%;
|
||||
code {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// line numbers (lineNumbersInTable=false)
|
||||
.ln {
|
||||
padding-right: 0.75rem;
|
||||
display: inline-block;
|
||||
text-align: right;
|
||||
position: sticky;
|
||||
left: 0;
|
||||
}
|
||||
// Line numbers
|
||||
.lnt,
|
||||
.ln {
|
||||
color: var(#{$rootPrefix}global-font-secondary-color);
|
||||
@include user-select(none);
|
||||
}
|
||||
|
||||
&:not(.code-block) {
|
||||
.lntd:last-child pre.chroma {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// code fences blocks wrapped
|
||||
&.code-block {
|
||||
.code-wrapper {
|
||||
overflow: hidden;
|
||||
height: auto;
|
||||
position: relative;
|
||||
counter-reset: codeNos calc(var(#{$rootPrefix}line-start) - 1);
|
||||
@include border-radius($global-border-radius);
|
||||
@include transition(height 0.5s ease-out);
|
||||
@include border-radius($global-border-radius);
|
||||
// attr() for arbitrary properties is currently only supported in Chromium-based browsers (see https://caniuse.com/css3-attr);
|
||||
// non-supporting browsers fall back to values set via Hugo templating in render-codeblock.html
|
||||
#{$rootPrefix}max-shown-lines: attr(data-max number, 10);
|
||||
#{$rootPrefix}line-start: attr(data-line-start number, 1);
|
||||
#{$rootPrefix}line-digit: attr(data-line-digit number, 1);
|
||||
}
|
||||
|
||||
// code preview
|
||||
&:has(.code-expand-btn):not(.is-expanded, .is-collapsed) {
|
||||
.code-wrapper {
|
||||
height: calc(1.45em * var(#{$rootPrefix}max-shown-lines) + var(#{$rootPrefix}code-expand-offset, 0.5rem));
|
||||
}
|
||||
&[data-mode='mac'] .code-wrapper {
|
||||
#{$rootPrefix}code-expand-offset: 1.875rem + 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.code-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
font-family: $global-font-family;
|
||||
font-weight: bold;
|
||||
line-height: 1.4em;
|
||||
color: var(#{$rootPrefix}code-header-color);
|
||||
background-color: var(#{$rootPrefix}code-header-background-color);
|
||||
position: sticky;
|
||||
top: var(#{$rootPrefix}breadcrumb-height);
|
||||
@include z-index(0, 1);
|
||||
@include border-radius($global-border-radius $global-border-radius 0 0);
|
||||
@include transition(border-radius 0s);
|
||||
|
||||
+ .code-wrapper {
|
||||
@include border-radius(0 0 $global-border-radius $global-border-radius);
|
||||
|
||||
> pre.chroma {
|
||||
@include border-radius(0 0 $global-border-radius $global-border-radius);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.code-title {
|
||||
width: 100%;
|
||||
padding: 0.4rem;
|
||||
|
||||
&::after {
|
||||
padding-left: 0.2rem;
|
||||
content: attr(data-name, var(#{$rootPrefix}code-type, 'Code'));
|
||||
}
|
||||
|
||||
// filename for code block
|
||||
&[data-name]::after {
|
||||
@include overflow-wrap(break-word);
|
||||
}
|
||||
|
||||
.arrow {
|
||||
padding: 0 0.2rem;
|
||||
@include transition(transform 0.2s ease);
|
||||
}
|
||||
|
||||
.title-inner {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background-color: var(#{$rootPrefix}code-header-background-color);
|
||||
padding-inline: 1em;
|
||||
max-width: 80%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
@include z-index(0, 2);
|
||||
}
|
||||
}
|
||||
|
||||
.ellipses-btn {
|
||||
display: none;
|
||||
padding: 0.4rem;
|
||||
}
|
||||
|
||||
[role='button'] {
|
||||
padding: 0.4rem;
|
||||
@extend .print-d-none;
|
||||
}
|
||||
|
||||
.copy-btn[data-copied] .fa-clone {
|
||||
--fa: "\f00c";
|
||||
font-weight: 900;
|
||||
color: var(#{$rootPrefix}global-link-hover-color);
|
||||
}
|
||||
|
||||
@each $type, $text in $code-type-map {
|
||||
&.language-#{to-lower-case($type)} {
|
||||
#{$rootPrefix}code-type: $text;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.line-wrapping .line-wrap-btn,
|
||||
&:not(.line-nos-hidden) .line-nos-btn,
|
||||
.code-header [role='button']:hover,
|
||||
&:has([contenteditable='true']) .edit-btn {
|
||||
color: var(#{$rootPrefix}global-link-hover-color);
|
||||
}
|
||||
|
||||
.code-expand-btn {
|
||||
width: 100%;
|
||||
padding-block: 1rem;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba($code-background-color, 0) 0%,
|
||||
rgba($code-background-color, 0.9) 60%,
|
||||
$code-background-color 100%
|
||||
);
|
||||
@include z-index(0, 1);
|
||||
@include border-radius(0 0 $global-border-radius $global-border-radius);
|
||||
|
||||
[data-theme='dark'] & {
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba($code-background-color-dark, 0) 0%,
|
||||
rgba($code-background-color-dark, 0.9) 60%,
|
||||
$code-background-color-dark 100%
|
||||
);
|
||||
}
|
||||
|
||||
.fa-angles-down {
|
||||
opacity: 0;
|
||||
animation-name: fadeOutDown;
|
||||
animation-duration: 1.5s;
|
||||
animation-iteration-count: infinite;
|
||||
animation-delay: 0.3s;
|
||||
@include transition(transform 0.2s ease);
|
||||
}
|
||||
}
|
||||
|
||||
.code-copy-btn {
|
||||
@extend .diagram-copy-btn;
|
||||
}
|
||||
|
||||
// classic mode code block collapsed
|
||||
&.is-collapsed {
|
||||
.code-header {
|
||||
#{$rootPrefix}code-header-background-color: #{darken($code-background-color, 6%)};
|
||||
@include border-radius($global-border-radius);
|
||||
@include transition(border-radius 0.2s ease 0.2s);
|
||||
|
||||
[data-theme='dark'] & {
|
||||
#{$rootPrefix}code-header-background-color: #{darken($code-background-color-dark, 6%)};
|
||||
}
|
||||
|
||||
+ .code-wrapper {
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.arrow {
|
||||
@include transform(rotate(-90deg));
|
||||
}
|
||||
|
||||
.ellipses-btn {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.code-header [role='button']:not(.ellipses-btn),
|
||||
.code-expand-btn {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// code preview expanded
|
||||
&.is-expanded {
|
||||
margin-bottom: 1rem;
|
||||
&:has([contenteditable='true']) .code-expand-btn {
|
||||
display: none;
|
||||
}
|
||||
.code-expand-btn {
|
||||
background: transparent;
|
||||
padding-block: 0;
|
||||
transform: translateY(1rem);
|
||||
|
||||
.fa-angles-down {
|
||||
animation-name: fadeOutRotate;
|
||||
|
||||
@keyframes fadeOutRotate {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: rotate(180deg) translate3d(0, 100%, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// hide original line numbers
|
||||
&.line-nos-hidden {
|
||||
> .chroma .lntable {
|
||||
width: 100%;
|
||||
display: table;
|
||||
}
|
||||
.lntd:first-child,
|
||||
.ln {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// line wrapping
|
||||
&.line-wrapping {
|
||||
> .chroma .lntable {
|
||||
width: 100%;
|
||||
display: table;
|
||||
|
||||
// hide original line numbers
|
||||
.lntd:first-child {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.lntd:last-child pre.chroma,
|
||||
.code-wrapper > pre.chroma {
|
||||
max-width: 100%;
|
||||
box-sizing: border-box;
|
||||
|
||||
code {
|
||||
text-wrap: wrap;
|
||||
word-break: break-all;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// line numbers (pseudo-elements) for code blocks
|
||||
&.line-wrapping:not(.line-nos-hidden) .lntd:last-child pre.chroma,
|
||||
&:not(.line-nos-hidden) .code-wrapper > pre.chroma:not(:has(.ln)) {
|
||||
> code > .line {
|
||||
display: flex;
|
||||
|
||||
&::before {
|
||||
counter-increment: codeNos;
|
||||
content: counter(codeNos);
|
||||
white-space: nowrap;
|
||||
text-align: right;
|
||||
min-width: calc(var(#{$rootPrefix}line-digit) * 1ch);
|
||||
padding-inline: 0.75rem;
|
||||
flex-shrink: 0;
|
||||
color: var(#{$rootPrefix}global-font-secondary-color);
|
||||
background-color: var(#{$rootPrefix}code-block-background-color);
|
||||
}
|
||||
|
||||
// highlight for line numbers
|
||||
&.hl::before {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// add sticky effect for line numbers when lineNos=false
|
||||
&:not(.line-nos-hidden) .code-wrapper > pre.chroma > code > .line::before {
|
||||
position: sticky;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
// when line numbers shown
|
||||
&:not(.line-nos-hidden) {
|
||||
.lntd:last-child pre.chroma,
|
||||
.code-wrapper > pre.chroma:not(:has(.ln)) {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// add border for non-classic mode
|
||||
&:not([data-mode='classic']) {
|
||||
border: 1px solid darken($code-background-color, 3%);
|
||||
|
||||
[data-theme='dark'] & {
|
||||
border-color: darken($code-background-color-dark, 3%);
|
||||
}
|
||||
}
|
||||
|
||||
&[data-mode='mac'] {
|
||||
pre.chroma {
|
||||
padding-top: 1.875rem;
|
||||
|
||||
&::after {
|
||||
background: var(#{$rootPrefix}mac-red, #fc625d);
|
||||
box-shadow: 20px 0 var(#{$rootPrefix}mac-yellow, #fdbc40), 40px 0 var(#{$rootPrefix}mac-green, #35cd4b);
|
||||
left: 8px;
|
||||
top: 8px;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
content: ' ';
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
|
||||
[data-theme='dark'] & {
|
||||
#{$rootPrefix}mac-red-dark: #ff5f56;
|
||||
#{$rootPrefix}mac-yellow-dark: #febc2e;
|
||||
#{$rootPrefix}mac-green-dark: #28c840;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&[data-mode='simple'] {
|
||||
pre.chroma {
|
||||
padding-block: 0.875rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@import '../_code-syntax/index';
|
||||
|
||||
// gist shortcode
|
||||
.gist {
|
||||
background-color: var(#{$rootPrefix}code-block-background-color);
|
||||
@include border-radius($global-border-radius $global-border-radius 0 0);
|
||||
|
||||
.gist-file,
|
||||
.gist-data,
|
||||
.gist-meta {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.gist-data {
|
||||
background-color: inherit;
|
||||
|
||||
.blob-wrapper {
|
||||
padding-block: 0.5rem;
|
||||
|
||||
table.highlight {
|
||||
background-color: inherit;
|
||||
overflow: initial;
|
||||
|
||||
td.blob-num {
|
||||
position: sticky;
|
||||
left: 0;
|
||||
background-color: var(#{$rootPrefix}code-block-background-color);
|
||||
@include z-index(0, 1);
|
||||
}
|
||||
|
||||
td.blob-code {
|
||||
padding-left: 2px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.gist-meta {
|
||||
padding: 0.4rem 0.8rem;
|
||||
@include link(false, false);
|
||||
@include border-radius(0 0 $global-border-radius $global-border-radius);
|
||||
background-color: var(#{$rootPrefix}gist-meta-background-color);
|
||||
}
|
||||
|
||||
[data-theme='dark'] & {
|
||||
@import '../_code-syntax/github-dark-dimmed';
|
||||
}
|
||||
}
|
||||
@@ -1,22 +0,0 @@
|
||||
// Color preview styles for inline code
|
||||
.color-code {
|
||||
position: relative;
|
||||
#{$rootPrefix}color-code-size: 0.64em;
|
||||
|
||||
.color-preview {
|
||||
display: inline-block;
|
||||
width: var(#{$rootPrefix}color-code-size);
|
||||
height: var(#{$rootPrefix}color-code-size);
|
||||
border-radius: 50%;
|
||||
margin-right: 0.25em;
|
||||
vertical-align: middle;
|
||||
border: 1px solid;
|
||||
border-color: var(#{$rootPrefix}color-preview-border-color, #d1d9e0b3);
|
||||
pointer-events: none;
|
||||
transform: translateY(-1px);
|
||||
|
||||
[data-theme='dark'] & {
|
||||
#{$rootPrefix}color-preview-border-color: #3d444db3;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,8 +0,0 @@
|
||||
>#comments {
|
||||
padding: 2rem 0;
|
||||
@extend .print-d-none;
|
||||
|
||||
iframe {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@@ -1,50 +0,0 @@
|
||||
// Diagram container
|
||||
.diagram-container {
|
||||
position: relative;
|
||||
margin-block: 0.5rem;
|
||||
}
|
||||
|
||||
// Diagram copy button styles
|
||||
.diagram-copy-btn {
|
||||
position: absolute;
|
||||
top: 0.5rem;
|
||||
right: 0.5rem;
|
||||
line-height: 1;
|
||||
padding: 0.5rem;
|
||||
user-select: none;
|
||||
border: 1px solid;
|
||||
border-radius: 6px;
|
||||
color: var(#{$rootPrefix}dcb-color, #25292e);
|
||||
border-color: var(#{$rootPrefix}dcb-border-color, #d1d9e0);
|
||||
background-color: var(#{$rootPrefix}dcb-background-color, #f6f8fa);
|
||||
box-shadow: var(#{$rootPrefix}dcb-box-shadow, 0px 1px 0px 0px #1f23280a);
|
||||
transition-duration: 0.1s;
|
||||
transition-property: color, background-color, box-shadow, border-color;
|
||||
@include z-index(0, 1);
|
||||
@extend .print-d-none;
|
||||
|
||||
[data-theme='dark'] & {
|
||||
#{$rootPrefix}dcb-color: #d1d7e0;
|
||||
#{$rootPrefix}dcb-border-color: #3d444d;
|
||||
#{$rootPrefix}dcb-background-color: #2a313c;
|
||||
#{$rootPrefix}dcb-box-shadow: 0px 0px 0px 0px #000000;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
#{$rootPrefix}dcb-border-color: #d1d9e0;
|
||||
#{$rootPrefix}dcb-background-color: #eff2f5;
|
||||
|
||||
[data-theme='dark'] & {
|
||||
#{$rootPrefix}dcb-border-color: #3d444d;
|
||||
#{$rootPrefix}dcb-background-color: #2f3742;
|
||||
}
|
||||
}
|
||||
|
||||
&[data-copied] {
|
||||
.fa-clone {
|
||||
--fa: "\f00c";
|
||||
font-weight: 900;
|
||||
color: var(#{$rootPrefix}global-link-hover-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,114 +0,0 @@
|
||||
.fixit-decryptor-container {
|
||||
font-family: $global-font-family;
|
||||
text-align: center;
|
||||
margin-block: var(#{$rootPrefix}decryptor-margin-block);
|
||||
|
||||
.fixit-decryptor-loading {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.fixit-decryptor-input,
|
||||
.fixit-decryptor-btn,
|
||||
.fixit-encryptor-btn {
|
||||
display: none;
|
||||
box-sizing: border-box;
|
||||
outline: none;
|
||||
color: var(#{$rootPrefix}global-font-color);
|
||||
border: 1px solid darken($global-border-color, 15%);
|
||||
border-radius: $global-border-radius;
|
||||
@include transition(all 0.1s ease-out);
|
||||
box-shadow: 0px 0px 5px 0px darken($global-border-color, 15%);
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
color: darken($global-link-hover-color, 6%);
|
||||
border-color: var(#{$rootPrefix}global-link-hover-color);
|
||||
box-shadow: 0px 0px 5px 0px lighten($global-link-hover-color, 20%);
|
||||
|
||||
[data-theme='dark'] & {
|
||||
color: lighten($global-link-hover-color-dark, 6%);
|
||||
box-shadow: 0px 0px 5px 0px darken($global-link-hover-color-dark, 20%);
|
||||
}
|
||||
}
|
||||
|
||||
[data-theme='dark'] & {
|
||||
border-color: lighten($global-border-color-dark, 15%);
|
||||
box-shadow: 0px 0px 5px 0px lighten($global-border-color-dark, 15%);
|
||||
}
|
||||
}
|
||||
|
||||
.fixit-decryptor-input {
|
||||
width: calc(clamp(50%, 450px, 100%) - 100px);
|
||||
height: 3rem;
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
background-color: var(#{$rootPrefix}global-background-color);
|
||||
}
|
||||
|
||||
.fixit-decryptor-btn,
|
||||
.fixit-encryptor-btn {
|
||||
cursor: pointer;
|
||||
@include transition(all 0.1s ease-out);
|
||||
padding: 0.8rem 1rem;
|
||||
|
||||
background-color: $header-background-color;
|
||||
|
||||
[data-theme='dark'] & {
|
||||
background-color: $header-background-color-dark;
|
||||
}
|
||||
}
|
||||
|
||||
.fixit-encryptor-btn {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
fixit-encryptor {
|
||||
&.initialized > .fixit-decryptor-container {
|
||||
.fixit-decryptor-input,
|
||||
.fixit-decryptor-btn {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.fixit-decryptor-loading {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
cipher-text {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
// fixit-encryptor for for the encrypted pages
|
||||
article fixit-encryptor {
|
||||
.fixit-decryptor-container {
|
||||
#{$rootPrefix}decryptor-margin-block: 2rem;
|
||||
}
|
||||
&.decrypted > .fixit-decryptor-container {
|
||||
.fixit-decryptor-loading,
|
||||
.fixit-decryptor-input,
|
||||
.fixit-decryptor-btn {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.fixit-encryptor-btn {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// fixit-encryptor shortcodes
|
||||
#content fixit-encryptor {
|
||||
.fixit-decryptor-container {
|
||||
#{$rootPrefix}decryptor-margin-block: 1rem;
|
||||
}
|
||||
&.decrypted > .fixit-decryptor-container {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.encrypted-hidden {
|
||||
display: none !important;
|
||||
}
|
||||
@@ -1,95 +0,0 @@
|
||||
.post-reward {
|
||||
padding: 1rem;
|
||||
text-align: center;
|
||||
@extend .print-d-none;
|
||||
|
||||
&:has(.reward-ways:empty) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.comment {
|
||||
margin: 0.5rem 0;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.reward-ways {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.reward-input:checked~.reward-ways {
|
||||
display: block;
|
||||
padding-top: 20px;
|
||||
|
||||
div {
|
||||
display: inline-block;
|
||||
@include user-select(none);
|
||||
|
||||
span {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&:hover span[data-animation] {
|
||||
animation: var(--animation-reward, jackInTheBox) 0.8s infinite linear;
|
||||
// The animation may affect :hover of img in dark mode
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
img {
|
||||
display: inline-block;
|
||||
margin: 0.8em 2em 0;
|
||||
max-width: 100%;
|
||||
width: $reward-img-width;
|
||||
}
|
||||
}
|
||||
|
||||
// `fixed` mode only supports desktop
|
||||
&[data-mode='fixed'] {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
padding: 1rem;
|
||||
background-color: var(#{$rootPrefix}global-background-color);
|
||||
@include z-index(2);
|
||||
@include border-radius($global-border-radius);
|
||||
@include box-shadow(0 0 1.5rem 0 rgba(0, 0, 0, 0.2));
|
||||
|
||||
[data-theme='dark'] & {
|
||||
@include box-shadow(0 0 1.5rem 0 rgba(255, 255, 255, 0.2));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.reward-button {
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
color: lighten($reward-color, 5%);
|
||||
border: 2px solid lighten($reward-color, 10%);
|
||||
border-radius: $global-border-radius;
|
||||
padding: 0.6rem 1rem;
|
||||
background-color: var(#{$rootPrefix}global-background-color);
|
||||
vertical-align: text-top;
|
||||
line-height: 1rem;
|
||||
@include transition(all 0.3s ease-out);
|
||||
|
||||
&:active,
|
||||
&:hover {
|
||||
color: #ffffff;
|
||||
border-color: $reward-color;
|
||||
background-color: $reward-color;
|
||||
|
||||
[data-theme='dark'] & {
|
||||
color: #ffffff;
|
||||
border-color: $reward-color-dark;
|
||||
background-color: $reward-color-dark;
|
||||
}
|
||||
}
|
||||
|
||||
[data-theme='dark'] & {
|
||||
color: $reward-color;
|
||||
border-color: lighten($reward-color, 5%);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,7 +0,0 @@
|
||||
@import '_widgets/cookieconsent';
|
||||
@import '_widgets/fixed-button';
|
||||
@import '_widgets/github-corner';
|
||||
@import '_widgets/noscript-warning';
|
||||
@import '_widgets/post-chat';
|
||||
@import '_widgets/reading-progress';
|
||||
@import '_widgets/typeit';
|
||||
@@ -1,15 +0,0 @@
|
||||
.cc-window.cc-banner {
|
||||
.cc-btn {
|
||||
color: var(#{$rootPrefix}global-font-color);
|
||||
background-color: var(#{$rootPrefix}global-background-color);
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: #ccc;
|
||||
|
||||
[data-theme='dark'] & {
|
||||
background-color: #444;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,86 +0,0 @@
|
||||
.fixed-buttons {
|
||||
position: fixed;
|
||||
right: 1.5rem;
|
||||
bottom: 1.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
@include z-index(1);
|
||||
}
|
||||
|
||||
.fixed-button {
|
||||
font-size: 1rem;
|
||||
line-height: 1.5rem;
|
||||
padding: 0.5rem 0.625rem;
|
||||
// TODO
|
||||
color: darken($global-font-secondary-color, 10%);
|
||||
background-color: $header-background-color;
|
||||
@include border-radius(1.25rem);
|
||||
@include transition(color 0.4s ease);
|
||||
@include blur;
|
||||
@extend .print-d-none;
|
||||
|
||||
[data-theme='dark'] & {
|
||||
color: $global-font-secondary-color-dark;
|
||||
background-color: $header-background-color-dark;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
color: var(#{$rootPrefix}global-font-color);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
.back-to-top {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
// Ring stroke width
|
||||
#{$rootPrefix}b2t-stroke: 0.5rem;
|
||||
// Ring background color
|
||||
#{$rootPrefix}b2t-bg: #{$global-border-color};
|
||||
// Progress color
|
||||
#{$rootPrefix}b2t-prog: var(#{$rootPrefix}success);
|
||||
// dasharray = circumference = 2πr
|
||||
// dashoffset = circumference * (1 - scrollPercent / 100)
|
||||
#{$rootPrefix}b2t-dasharray: 314.15;
|
||||
|
||||
[data-theme='dark'] & {
|
||||
#{$rootPrefix}b2t-bg: #{$global-border-color-dark};
|
||||
#{$rootPrefix}b2t-prog: #{$global-font-color-dark};
|
||||
}
|
||||
|
||||
// SVG circular progress ring
|
||||
svg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
// Rotate to start from top
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
.bg {
|
||||
fill: none;
|
||||
stroke: var(#{$rootPrefix}b2t-bg);
|
||||
stroke-width: var(#{$rootPrefix}b2t-stroke);
|
||||
}
|
||||
|
||||
// Progress ring
|
||||
.progress {
|
||||
fill: none;
|
||||
stroke: var(#{$rootPrefix}b2t-prog);
|
||||
stroke-width: var(#{$rootPrefix}b2t-stroke);
|
||||
stroke-linecap: round;
|
||||
stroke-dasharray: var(#{$rootPrefix}b2t-dasharray);
|
||||
stroke-dashoffset: calc(var(#{$rootPrefix}b2t-dasharray) * (1 - var(#{$rootPrefix}b2t-progress, 0) / 100));
|
||||
transition: stroke-dashoffset .1s linear;
|
||||
}
|
||||
}
|
||||
@@ -1,47 +0,0 @@
|
||||
@keyframes octocat-wave {
|
||||
0%,
|
||||
100% {
|
||||
@include transform(rotate(0));
|
||||
}
|
||||
20%,
|
||||
60% {
|
||||
@include transform(rotate(-25deg));
|
||||
}
|
||||
40%,
|
||||
80% {
|
||||
@include transform(rotate(10deg));
|
||||
}
|
||||
}
|
||||
|
||||
.github-corner {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
@include z-index(2);
|
||||
@extend .print-d-none;
|
||||
|
||||
:hover .octo-arm {
|
||||
animation: octocat-wave 560ms ease-in-out;
|
||||
}
|
||||
svg {
|
||||
width: $header-height;
|
||||
height: $header-height;
|
||||
border: 0;
|
||||
color: $github-corner-color;
|
||||
fill: $github-corner-fill;
|
||||
|
||||
[data-theme='dark'] & {
|
||||
color: $github-corner-color-dark;
|
||||
fill: $github-corner-fill-dark;
|
||||
}
|
||||
}
|
||||
&.left {
|
||||
left: 0;
|
||||
|
||||
svg {
|
||||
@include transform(scale(-1, 1));
|
||||
}
|
||||
}
|
||||
&.right {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
@@ -1,16 +0,0 @@
|
||||
.noscript-warning {
|
||||
background-color: var(#{$rootPrefix}danger);
|
||||
color: white;
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
position: fixed;
|
||||
text-align: center;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
@include z-index(2);
|
||||
|
||||
[data-theme='dark'] & {
|
||||
background-color: var(#{$rootPrefix}danger-dark);
|
||||
}
|
||||
}
|
||||
@@ -1,4 +0,0 @@
|
||||
#postChat_button,
|
||||
.post-TianliGPT {
|
||||
@extend .print-d-none;
|
||||
}
|
||||
@@ -1,12 +0,0 @@
|
||||
.reading-progress-bar {
|
||||
height: var(--progress-h, 2px);
|
||||
width: var(--progress, 0);
|
||||
background-color: var(--bg-progress, var(#{$rootPrefix}success));
|
||||
position: fixed;
|
||||
@include z-index(2);
|
||||
@extend .print-d-none;
|
||||
|
||||
[data-theme="dark"] & {
|
||||
background-color: var(--bg-progress-dark, #{$global-font-color-dark});
|
||||
}
|
||||
}
|
||||
@@ -1,13 +0,0 @@
|
||||
.typeit {
|
||||
.highlight {
|
||||
padding: 0.375rem;
|
||||
font-size: 0.875rem;
|
||||
font-family: $code-font-family;
|
||||
font-weight: bold;
|
||||
word-break: break-all;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
--ti-cursor-font-family: #{$global-font-family};
|
||||
--ti-cursor-transform: translateX(0);
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user