比较提交
+14
@@ -0,0 +1,14 @@
|
||||
module.exports = {
|
||||
root: true,
|
||||
env: {
|
||||
browser: true,
|
||||
es2021: true,
|
||||
},
|
||||
parser: "@typescript-eslint/parser",
|
||||
parserOptions: {
|
||||
ecmaVersion: "latest",
|
||||
sourceType: "module",
|
||||
},
|
||||
plugins: ["@typescript-eslint"],
|
||||
extends: ["eslint:recommended", "plugin:@typescript-eslint/recommended", "prettier"],
|
||||
};
|
||||
@@ -1,12 +1,3 @@
|
||||
# Halo Terminal
|
||||
# Halo Dev Terminal
|
||||
|
||||
一款 Terminal 风格的 Halo 主题。
|
||||
|
||||
|
||||
|
||||
## 特性
|
||||
- 支持明暗模式切换；
|
||||
- 首页公告设置；
|
||||
- 备案信息设置；
|
||||
- 支持 Halo 内部的大部分页面，包括文章、页面、分类、标签、归档等。
|
||||
- 支持 Halo 应用市场的部分内容管理插件，包括友情链接、瞬间。
|
||||
一款 Dev Terminal 风格的 Halo 主题。
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
services:
|
||||
halo:
|
||||
image: registry.fit2cloud.com/halo/halo:2.22.12
|
||||
image: registry.fit2cloud.com/halo/halo:2.24.2
|
||||
volumes:
|
||||
- ./data:/root/.halo2
|
||||
- ../:/root/.halo2/themes/theme-terminal
|
||||
|
||||
@@ -6,3 +6,71 @@ page.tag.title=Tag: {0}
|
||||
page.categories.title=Categories
|
||||
page.category.title=Category: {0}
|
||||
page.about.title=About
|
||||
devcm.activity.aria=IDE activity bar
|
||||
devcm.activity.link=Link
|
||||
devcm.activity.explorer=Explorer
|
||||
devcm.activity.search=Search
|
||||
devcm.activity.archive=Archive
|
||||
devcm.activity.categories=Categories
|
||||
devcm.activity.tags=Tags
|
||||
devcm.activity.login=Login
|
||||
devcm.activity.console=Console
|
||||
devcm.activity.logout=Logout
|
||||
devcm.action.open=Open
|
||||
devcm.action.openPage=Open page
|
||||
devcm.action.openCategory=Open category
|
||||
devcm.action.closeTab=Close editor tab
|
||||
devcm.action.closePostTab=Close post tab
|
||||
devcm.action.closePageTab=Close page tab
|
||||
devcm.action.closeCategoryTab=Close category tab
|
||||
devcm.action.closeTagTab=Close tag tab
|
||||
devcm.action.closeTagsTab=Close tags tab
|
||||
devcm.action.closeLinksTab=Close links tab
|
||||
devcm.action.closeMomentsTab=Close moments tab
|
||||
devcm.action.newPost=New post
|
||||
devcm.action.toggleTheme=Toggle theme
|
||||
devcm.home.subtitle=Development Content Management.
|
||||
devcm.home.defaultContent=A Terminal-style Halo theme.
|
||||
devcm.home.postCount=> Current page has {0} post(s)
|
||||
devcm.post.featured=FEATURED
|
||||
devcm.post.readMore=Read more
|
||||
devcm.pagination.previous=Previous
|
||||
devcm.pagination.next=Next
|
||||
devcm.explorer.title=EXPLORER
|
||||
devcm.explorer.pages=pages
|
||||
devcm.explorer.home=Home
|
||||
devcm.explorer.categories=CATEGORIES
|
||||
devcm.explorer.tags=TAGS CLOUD
|
||||
devcm.right.context=Context panel
|
||||
devcm.right.articleInfo=ARTICLE INFO
|
||||
devcm.right.author=Author
|
||||
devcm.right.publishedAt=Published at
|
||||
devcm.right.category=Category
|
||||
devcm.right.tags=Tags
|
||||
devcm.right.toc=TABLE OF CONTENTS
|
||||
devcm.right.nearbyPosts=NEARBY POSTS
|
||||
devcm.right.previousPost=Previous
|
||||
devcm.right.nextPost=Next
|
||||
devcm.right.latestPosts=LATEST POSTS
|
||||
devcm.right.posts=posts
|
||||
devcm.archive.command=archive --view posts
|
||||
devcm.archive.title=Archives
|
||||
devcm.archive.description=Browse content by publish date.
|
||||
devcm.archive.tableTitle=Archive list
|
||||
devcm.archive.columnTitle=Title
|
||||
devcm.archive.columnTags=Tags
|
||||
devcm.archive.columnDate=Date
|
||||
devcm.archive.group=Archive group
|
||||
devcm.categories.command=archive --view categories
|
||||
devcm.categories.title=Categories
|
||||
devcm.categories.description=Browse posts by category and explore the site structure.
|
||||
devcm.categories.articleCount={0} articles
|
||||
devcm.tags.title=All tags
|
||||
devcm.taxonomy.categoryTitle=Category: {0}
|
||||
devcm.taxonomy.tagTitle=Tag: {0}
|
||||
devcm.taxonomy.postCount=({0} posts)
|
||||
devcm.links.defaultGroup=Links
|
||||
devcm.comments.file=comments.log
|
||||
devcm.comments.title=## Comments
|
||||
devcm.status.poweredBy=Powered by
|
||||
devcm.status.language=Language
|
||||
|
||||
@@ -6,3 +6,71 @@ page.tag.title=标签：{0}
|
||||
page.categories.title=分类
|
||||
page.category.title=分类：{0}
|
||||
page.about.title=关于
|
||||
devcm.activity.aria=IDE 活动栏
|
||||
devcm.activity.link=链接
|
||||
devcm.activity.explorer=资源管理器
|
||||
devcm.activity.search=搜索
|
||||
devcm.activity.archive=归档
|
||||
devcm.activity.categories=分类
|
||||
devcm.activity.tags=标签
|
||||
devcm.activity.login=登录
|
||||
devcm.activity.console=控制台
|
||||
devcm.activity.logout=登出
|
||||
devcm.action.open=打开
|
||||
devcm.action.openPage=打开页面
|
||||
devcm.action.openCategory=打开分类
|
||||
devcm.action.closeTab=关闭编辑器标签
|
||||
devcm.action.closePostTab=关闭文章标签
|
||||
devcm.action.closePageTab=关闭页面标签
|
||||
devcm.action.closeCategoryTab=关闭分类标签
|
||||
devcm.action.closeTagTab=关闭标签页
|
||||
devcm.action.closeTagsTab=关闭标签列表
|
||||
devcm.action.closeLinksTab=关闭链接页
|
||||
devcm.action.closeMomentsTab=关闭瞬间页
|
||||
devcm.action.newPost=新建文章
|
||||
devcm.action.toggleTheme=切换主题
|
||||
devcm.home.subtitle=Development Content Management.
|
||||
devcm.home.defaultContent=一款 Terminal 风格的 Halo 主题。
|
||||
devcm.home.postCount=> 当前页共有 {0} 篇文章
|
||||
devcm.post.featured=精选
|
||||
devcm.post.readMore=阅读全文
|
||||
devcm.pagination.previous=上一页
|
||||
devcm.pagination.next=下一页
|
||||
devcm.explorer.title=资源管理器
|
||||
devcm.explorer.pages=pages
|
||||
devcm.explorer.home=首页
|
||||
devcm.explorer.categories=分类
|
||||
devcm.explorer.tags=标签云
|
||||
devcm.right.context=上下文面板
|
||||
devcm.right.articleInfo=文章信息
|
||||
devcm.right.author=作者
|
||||
devcm.right.publishedAt=发布于
|
||||
devcm.right.category=分类
|
||||
devcm.right.tags=标签
|
||||
devcm.right.toc=目录
|
||||
devcm.right.nearbyPosts=相邻文章
|
||||
devcm.right.previousPost=上一篇
|
||||
devcm.right.nextPost=下一篇
|
||||
devcm.right.latestPosts=最新文章
|
||||
devcm.right.posts=篇文章
|
||||
devcm.archive.command=archive --view posts
|
||||
devcm.archive.title=文章归档
|
||||
devcm.archive.description=按发布时间浏览站点内容。
|
||||
devcm.archive.tableTitle=归档列表
|
||||
devcm.archive.columnTitle=标题
|
||||
devcm.archive.columnTags=标签
|
||||
devcm.archive.columnDate=日期
|
||||
devcm.archive.group=归档分组
|
||||
devcm.categories.command=archive --view categories
|
||||
devcm.categories.title=分类
|
||||
devcm.categories.description=按分类浏览文章，探索站点内容结构。
|
||||
devcm.categories.articleCount={0} 篇文章
|
||||
devcm.tags.title=所有标签
|
||||
devcm.taxonomy.categoryTitle=分类：{0}
|
||||
devcm.taxonomy.tagTitle=标签：{0}
|
||||
devcm.taxonomy.postCount=({0} 篇文章)
|
||||
devcm.links.defaultGroup=友情链接
|
||||
devcm.comments.file=comments.log
|
||||
devcm.comments.title=## 评论区
|
||||
devcm.status.poweredBy=Powered by
|
||||
devcm.status.language=语言
|
||||
|
||||
+1
-1
@@ -1,13 +1,13 @@
|
||||
{
|
||||
"name": "theme-terminal",
|
||||
"private": true,
|
||||
"version": "1.2.7",
|
||||
"description": "A terminal like theme for Halo.",
|
||||
"scripts": {
|
||||
"dev": "vite build --watch",
|
||||
"build": "tsc && vite build && theme-package",
|
||||
"build-only": "tsc && vite build",
|
||||
"lint": "eslint ./src --ext .js,.cjs,.mjs,.ts,.cts,.mts --ignore-path .gitignore",
|
||||
"test:structure": "node scripts/check-devcm-theme.mjs",
|
||||
"prettier": "prettier --write './src/**/*.{js,ts,css,json,ml,yaml,html}' './templates/**/*.html'"
|
||||
},
|
||||
"keywords": [
|
||||
|
||||
+263
-5
@@ -27,25 +27,284 @@ spec:
|
||||
name: title
|
||||
label: 站点标题
|
||||
help: 配置后，将展示站点标题。
|
||||
value: 'Terminal'
|
||||
value: "Terminal"
|
||||
- group: index
|
||||
label: 首页设置
|
||||
formSchema:
|
||||
- $formkit: text
|
||||
name: index_notice_title
|
||||
label: 首页公告标题
|
||||
value: 'Hello Halo!'
|
||||
value: "Hello Halo!"
|
||||
- $formkit: textarea
|
||||
name: index_notice_content
|
||||
label: 首页公告内容
|
||||
value: '一款 Terminal 风格的 Halo 主题。'
|
||||
value: "A Terminal-style Halo theme."
|
||||
- group: activity
|
||||
label: 活动栏
|
||||
formSchema:
|
||||
- $formkit: array
|
||||
name: activity_items
|
||||
label: 导航入口
|
||||
help: 按列表顺序渲染左侧 Activity Bar；可拖拽调整顺序。内置入口会自动处理图标、链接和激活状态，自定义入口才需要填写链接地址。
|
||||
itemLabels:
|
||||
- type: text
|
||||
label: $value.label
|
||||
- type: text
|
||||
label: $value.type
|
||||
value:
|
||||
- enabled: true
|
||||
type: home
|
||||
position: up
|
||||
label: 首页
|
||||
icon: folder
|
||||
url: /
|
||||
external: false
|
||||
- enabled: true
|
||||
type: search
|
||||
position: up
|
||||
label: 搜索
|
||||
icon: search
|
||||
url: ""
|
||||
external: false
|
||||
- enabled: true
|
||||
type: archive
|
||||
position: up
|
||||
label: 归档
|
||||
icon: archive
|
||||
url: ""
|
||||
external: false
|
||||
- enabled: true
|
||||
type: categories
|
||||
position: up
|
||||
label: 分类
|
||||
icon: script-text
|
||||
url: ""
|
||||
external: false
|
||||
- enabled: true
|
||||
type: tags
|
||||
position: up
|
||||
label: 标签
|
||||
icon: label
|
||||
url: ""
|
||||
external: false
|
||||
- enabled: true
|
||||
type: login
|
||||
position: down
|
||||
label: 登录
|
||||
icon: user
|
||||
url: /console
|
||||
external: false
|
||||
children:
|
||||
- $formkit: switch
|
||||
name: enabled
|
||||
label: 启用入口
|
||||
value: true
|
||||
- $formkit: select
|
||||
name: type
|
||||
label: 入口类型
|
||||
value: custom
|
||||
options:
|
||||
- label: 首页
|
||||
value: home
|
||||
- label: 搜索
|
||||
value: search
|
||||
- label: 归档
|
||||
value: archive
|
||||
- label: 分类
|
||||
value: categories
|
||||
- label: 标签
|
||||
value: tags
|
||||
- label: 登录
|
||||
value: login
|
||||
- label: 自定义
|
||||
value: custom
|
||||
- $formkit: text
|
||||
name: label
|
||||
label: 显示名称
|
||||
help: 用于鼠标悬浮提示和无障碍标签；建议自定义入口必填。
|
||||
- $formkit: select
|
||||
name: icon
|
||||
label: 图标
|
||||
value: file
|
||||
help: 内置入口已有默认图标；自定义入口可在这里选择同风格图标。
|
||||
options:
|
||||
- label: 文件夹
|
||||
value: folder
|
||||
- label: 首页
|
||||
value: home
|
||||
- label: 搜索
|
||||
value: search
|
||||
- label: 归档
|
||||
value: archive
|
||||
- label: 文档
|
||||
value: script-text
|
||||
- label: 文章
|
||||
value: article
|
||||
- label: 打开的书
|
||||
value: book-open
|
||||
- label: 文件
|
||||
value: file
|
||||
- label: 文件变体
|
||||
value: file-alt
|
||||
- label: 多文件
|
||||
value: file-multiple
|
||||
- label: 便签
|
||||
value: note
|
||||
- label: 多便签
|
||||
value: notes
|
||||
- label: 标签
|
||||
value: label
|
||||
- label: 标签变体
|
||||
value: label-alt
|
||||
- label: 用户
|
||||
value: user
|
||||
- label: 用户组
|
||||
value: users
|
||||
- label: 联系人
|
||||
value: contact
|
||||
- label: Git 分支
|
||||
value: git-branch
|
||||
- label: Git 提交
|
||||
value: git-commit
|
||||
- label: Git 合并
|
||||
value: git-merge
|
||||
- label: Pull Request
|
||||
value: git-pull-request
|
||||
- label: GitHub
|
||||
value: github
|
||||
- label: 链接
|
||||
value: link
|
||||
- label: 外链
|
||||
value: external-link
|
||||
- label: 打开
|
||||
value: open
|
||||
- label: 代码
|
||||
value: code
|
||||
- label: 命令
|
||||
value: command
|
||||
- label: 缺陷
|
||||
value: bug
|
||||
- label: 调试
|
||||
value: debug
|
||||
- label: 服务器
|
||||
value: server
|
||||
- label: 云
|
||||
value: cloud
|
||||
- label: 显示器
|
||||
value: monitor
|
||||
- label: 笔记本
|
||||
value: device-laptop
|
||||
- label: 仪表盘
|
||||
value: dashboard
|
||||
- label: 分析
|
||||
value: analytics
|
||||
- label: 图表
|
||||
value: chart
|
||||
- label: 柱状图
|
||||
value: chart-bar
|
||||
- label: 看板
|
||||
value: kanban
|
||||
- label: 时间线
|
||||
value: timeline
|
||||
- label: 邮件
|
||||
value: mail
|
||||
- label: 消息
|
||||
value: message
|
||||
- label: 聊天
|
||||
value: chat
|
||||
- label: 评论
|
||||
value: comment
|
||||
- label: 通知
|
||||
value: notification
|
||||
- label: 日历
|
||||
value: calendar
|
||||
- label: 时钟
|
||||
value: clock
|
||||
- label: 书签
|
||||
value: bookmark
|
||||
- label: 收藏
|
||||
value: heart
|
||||
- label: 灵感
|
||||
value: lightbulb
|
||||
- label: 防护
|
||||
value: shield
|
||||
- label: 锁
|
||||
value: lock
|
||||
- label: 图片
|
||||
value: image
|
||||
- label: 图库
|
||||
value: image-gallery
|
||||
- label: 相机
|
||||
value: camera
|
||||
- label: 音乐
|
||||
value: music
|
||||
- label: 视频
|
||||
value: video
|
||||
- label: 购物袋
|
||||
value: shopping-bag
|
||||
- label: 购物车
|
||||
value: cart
|
||||
- label: 钱包
|
||||
value: wallet
|
||||
- label: 地图
|
||||
value: map
|
||||
- label: 图钉
|
||||
value: pin
|
||||
- label: 旗帜
|
||||
value: flag
|
||||
- label: 电源
|
||||
value: power
|
||||
- label: 上传
|
||||
value: upload
|
||||
- label: 下载
|
||||
value: download
|
||||
- label: 编辑
|
||||
value: edit
|
||||
- label: 删除
|
||||
value: trash
|
||||
- label: 加号
|
||||
value: plus
|
||||
- label: 关闭
|
||||
value: close
|
||||
- label: 滑杆
|
||||
value: sliders
|
||||
- label: 滑杆 2
|
||||
value: sliders-2
|
||||
- label: 可见
|
||||
value: visible
|
||||
- label: 查看
|
||||
value: eye
|
||||
- label: 隐藏
|
||||
value: eye-closed
|
||||
- $formkit: text
|
||||
name: url
|
||||
label: 链接地址
|
||||
help: 内置入口可留空并自动使用 Halo 路由；自定义入口留空时不会跳转。
|
||||
- $formkit: select
|
||||
name: position
|
||||
label: 所在位置
|
||||
value: up
|
||||
options:
|
||||
- label: 上方
|
||||
value: up
|
||||
- label: 下方
|
||||
value: down
|
||||
- $formkit: select
|
||||
name: external
|
||||
label: 打开方式
|
||||
value: false
|
||||
options:
|
||||
- label: 当前窗口
|
||||
value: false
|
||||
- label: 新窗口
|
||||
value: true
|
||||
- group: footer
|
||||
label: 页脚设置
|
||||
formSchema:
|
||||
- $formkit: text
|
||||
name: footer_powered_text
|
||||
label: 页脚文本
|
||||
value: 'FillCode'
|
||||
value: "FillCode"
|
||||
- $formkit: text
|
||||
name: footer_powered_link
|
||||
label: 页脚文本链接
|
||||
@@ -64,4 +323,3 @@ spec:
|
||||
name: footer_gongan_link
|
||||
label: 公安备案跳转链接
|
||||
value: https://www.beian.gov.cn/
|
||||
|
||||
|
||||
@@ -0,0 +1,24 @@
|
||||
declare global {
|
||||
interface Window {
|
||||
SearchWidget: { open: (() => void) | undefined } | undefined;
|
||||
}
|
||||
}
|
||||
|
||||
export const initDevcmActivityActions = () => {
|
||||
document.addEventListener("click", (event) => {
|
||||
const target = event.target;
|
||||
|
||||
if (!(target instanceof Element)) {
|
||||
return;
|
||||
}
|
||||
|
||||
const actionTrigger = target.closest<HTMLElement>('[data-devcm-action="search"]');
|
||||
|
||||
if (!actionTrigger) {
|
||||
return;
|
||||
}
|
||||
|
||||
event.preventDefault();
|
||||
window.SearchWidget?.open?.();
|
||||
});
|
||||
};
|
||||
@@ -1,35 +0,0 @@
|
||||
export const headerDividing = () => ({
|
||||
isSticky: false,
|
||||
$el: null as HTMLElement | null,
|
||||
_observer: null as IntersectionObserver | null,
|
||||
|
||||
init() {
|
||||
const centerEl = this.$el as HTMLElement;
|
||||
if (!centerEl) return;
|
||||
|
||||
const header = centerEl.closest('.header') as HTMLElement;
|
||||
|
||||
if (!header) return;
|
||||
|
||||
// 直接观察 header 元素本身
|
||||
this._observer = new IntersectionObserver(
|
||||
(entries) => {
|
||||
const entry = entries[0];
|
||||
this.isSticky = entry.boundingClientRect.top < 0 && !entry.isIntersecting;
|
||||
},
|
||||
{
|
||||
threshold: 0, // 只要有任何部分离开就触发
|
||||
rootMargin: '0px' // 无偏移
|
||||
}
|
||||
);
|
||||
|
||||
this._observer.observe(header);
|
||||
},
|
||||
|
||||
destroy() {
|
||||
if (this._observer) {
|
||||
this._observer.disconnect();
|
||||
this._observer = null;
|
||||
}
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,28 @@
|
||||
import type { Alpine } from "alpinejs";
|
||||
|
||||
import { headerMenu } from "./header-menu";
|
||||
import { postLineNum } from "./post-line-num";
|
||||
import { postToc } from "./post-toc";
|
||||
import { initDevcmPromptLoading } from "./prompt-loading";
|
||||
import { themeComment } from "./theme-comment";
|
||||
import { themeMode } from "./theme-mode";
|
||||
import { upvote } from "./upvote";
|
||||
import { initDevcmActivityActions } from "./activity-actions";
|
||||
import { initTypedText } from "./typed-text";
|
||||
|
||||
export const bootDevcmAlpine = (Alpine: Alpine) => {
|
||||
window.Alpine = Alpine;
|
||||
|
||||
Alpine.data("upvote", upvote);
|
||||
Alpine.data("themeMode", themeMode);
|
||||
Alpine.data("postLineNum", postLineNum);
|
||||
Alpine.data("postToc", postToc);
|
||||
Alpine.data("headerMenu", headerMenu);
|
||||
Alpine.data("themeComment", themeComment);
|
||||
|
||||
initDevcmActivityActions();
|
||||
initDevcmPromptLoading();
|
||||
initTypedText();
|
||||
|
||||
Alpine.start();
|
||||
};
|
||||
@@ -0,0 +1,181 @@
|
||||
const PROMPT_LINE_SELECTOR = ".devcm-prompt-stream__line.dividing";
|
||||
const LOADING_CLASS = "devcm-prompt-stream__line--loading";
|
||||
const FINISHING_CLASS = "devcm-prompt-stream__line--finishing";
|
||||
const STORAGE_KEY = "devcm:prompt-loading";
|
||||
const ROUTE_PENDING_VALUE = "route";
|
||||
const FINISH_ANIMATION_NAMES = ["devcm-route-tail-shrink", "devcm-route-finish-state"];
|
||||
|
||||
let removeFinishListener: (() => void) | null = null;
|
||||
|
||||
const getPromptLine = () => document.querySelector<HTMLElement>(PROMPT_LINE_SELECTOR);
|
||||
|
||||
const clearFinishListener = () => {
|
||||
removeFinishListener?.();
|
||||
removeFinishListener = null;
|
||||
};
|
||||
|
||||
const setPendingRoute = () => {
|
||||
try {
|
||||
window.sessionStorage.setItem(STORAGE_KEY, ROUTE_PENDING_VALUE);
|
||||
} catch {
|
||||
// Ignore storage failures in private browsing or restricted environments.
|
||||
}
|
||||
};
|
||||
|
||||
const consumePendingRoute = () => {
|
||||
try {
|
||||
const isPending = window.sessionStorage.getItem(STORAGE_KEY) === ROUTE_PENDING_VALUE;
|
||||
window.sessionStorage.removeItem(STORAGE_KEY);
|
||||
return isPending;
|
||||
} catch {
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
const resetPromptLoading = () => {
|
||||
const line = getPromptLine();
|
||||
|
||||
clearFinishListener();
|
||||
|
||||
if (!line) {
|
||||
return;
|
||||
}
|
||||
|
||||
line.classList.remove(LOADING_CLASS, FINISHING_CLASS);
|
||||
delete line.dataset.devcmLoading;
|
||||
};
|
||||
|
||||
const startPromptLoading = () => {
|
||||
const line = getPromptLine();
|
||||
|
||||
clearFinishListener();
|
||||
|
||||
if (!line) {
|
||||
return;
|
||||
}
|
||||
|
||||
line.classList.remove(FINISHING_CLASS);
|
||||
line.classList.add(LOADING_CLASS);
|
||||
line.dataset.devcmLoading = "true";
|
||||
};
|
||||
|
||||
const startPromptFinishing = () => {
|
||||
const line = getPromptLine();
|
||||
|
||||
clearFinishListener();
|
||||
|
||||
if (!line) {
|
||||
return;
|
||||
}
|
||||
|
||||
const handleAnimationEnd = (event: AnimationEvent) => {
|
||||
if (FINISH_ANIMATION_NAMES.includes(event.animationName)) {
|
||||
resetPromptLoading();
|
||||
}
|
||||
};
|
||||
|
||||
line.classList.remove(LOADING_CLASS);
|
||||
line.classList.add(FINISHING_CLASS);
|
||||
line.dataset.devcmLoading = "done";
|
||||
line.addEventListener("animationend", handleAnimationEnd);
|
||||
removeFinishListener = () => line.removeEventListener("animationend", handleAnimationEnd);
|
||||
};
|
||||
|
||||
const finishWhenReady = () => {
|
||||
if (document.readyState === "complete") {
|
||||
startPromptFinishing();
|
||||
return;
|
||||
}
|
||||
|
||||
window.addEventListener("load", startPromptFinishing, { once: true });
|
||||
};
|
||||
|
||||
const isReloadNavigation = () => {
|
||||
if (typeof performance === "undefined" || typeof performance.getEntriesByType !== "function") {
|
||||
return false;
|
||||
}
|
||||
|
||||
const [navigationEntry] = performance.getEntriesByType("navigation") as PerformanceNavigationTiming[];
|
||||
return navigationEntry?.type === "reload";
|
||||
};
|
||||
|
||||
const resumeInitialPromptLoading = () => {
|
||||
if (consumePendingRoute()) {
|
||||
startPromptFinishing();
|
||||
return;
|
||||
}
|
||||
|
||||
if (!isReloadNavigation()) {
|
||||
return;
|
||||
}
|
||||
|
||||
startPromptLoading();
|
||||
finishWhenReady();
|
||||
};
|
||||
|
||||
const hasModifiedClick = (event: MouseEvent) => event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;
|
||||
|
||||
const isNavigableAnchor = (anchor: HTMLAnchorElement, event: MouseEvent) => {
|
||||
if (event.defaultPrevented || event.button !== 0 || hasModifiedClick(event)) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (anchor.hasAttribute("download")) {
|
||||
return false;
|
||||
}
|
||||
|
||||
const target = anchor.getAttribute("target");
|
||||
if (target && target.toLowerCase() !== "_self") {
|
||||
return false;
|
||||
}
|
||||
|
||||
const rawHref = anchor.getAttribute("href");
|
||||
if (!rawHref || rawHref === "#" || rawHref.startsWith("#")) {
|
||||
return false;
|
||||
}
|
||||
|
||||
const url = new URL(anchor.href, window.location.href);
|
||||
if (url.origin !== window.location.origin) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (url.protocol !== "http:" && url.protocol !== "https:") {
|
||||
return false;
|
||||
}
|
||||
|
||||
const current = new URL(window.location.href);
|
||||
return url.pathname !== current.pathname || url.search !== current.search;
|
||||
};
|
||||
|
||||
export const initDevcmPromptLoading = () => {
|
||||
resumeInitialPromptLoading();
|
||||
|
||||
document.addEventListener("click", (event) => {
|
||||
const target = event.target;
|
||||
|
||||
if (!(event instanceof MouseEvent) || !(target instanceof Element)) {
|
||||
return;
|
||||
}
|
||||
|
||||
const anchor = target.closest<HTMLAnchorElement>("a[href]");
|
||||
|
||||
if (!anchor || !isNavigableAnchor(anchor, event)) {
|
||||
return;
|
||||
}
|
||||
|
||||
setPendingRoute();
|
||||
startPromptLoading();
|
||||
});
|
||||
|
||||
window.addEventListener("beforeunload", startPromptLoading);
|
||||
window.addEventListener("pagehide", (event) => {
|
||||
if (!event.persisted) {
|
||||
startPromptLoading();
|
||||
}
|
||||
});
|
||||
window.addEventListener("pageshow", (event) => {
|
||||
if (event.persisted) {
|
||||
resetPromptLoading();
|
||||
}
|
||||
});
|
||||
};
|
||||
@@ -0,0 +1,88 @@
|
||||
import commentWidgetThemeStyle from "../styles/devcm-comment-widget.css?raw";
|
||||
|
||||
const injectShadowStyle = (root: ShadowRoot | null | undefined, id: string, css: string) => {
|
||||
if (!root || root.querySelector(`#${id}`)) {
|
||||
return;
|
||||
}
|
||||
|
||||
const style = document.createElement("style");
|
||||
style.id = id;
|
||||
style.textContent = css;
|
||||
root.appendChild(style);
|
||||
};
|
||||
|
||||
const themeCommentRoot = (root: ParentNode | null | undefined) => {
|
||||
if (!root) {
|
||||
return;
|
||||
}
|
||||
|
||||
root.querySelectorAll<HTMLElement>("*").forEach((element) => {
|
||||
if (element.shadowRoot) {
|
||||
injectShadowStyle(element.shadowRoot, "devcm-comment-widget-theme", commentWidgetThemeStyle);
|
||||
themeCommentRoot(element.shadowRoot);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const commentScopeSelector = ".devcm-comments, .devcm-moment-comments";
|
||||
|
||||
const getCommentScopes = (root: ParentNode) => {
|
||||
const scopes = Array.from(root.querySelectorAll<HTMLElement>(commentScopeSelector));
|
||||
if (root instanceof HTMLElement && root.matches(commentScopeSelector)) {
|
||||
scopes.unshift(root);
|
||||
}
|
||||
return scopes;
|
||||
};
|
||||
|
||||
const themeCommentWidget = (root: ParentNode) => {
|
||||
const commentScopes = getCommentScopes(root);
|
||||
if (!commentScopes.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
commentScopes.forEach((comments) => {
|
||||
themeCommentRoot(comments);
|
||||
|
||||
comments.querySelectorAll<HTMLElement>("comment-widget").forEach((widget) => {
|
||||
injectShadowStyle(widget.shadowRoot, "devcm-comment-widget-theme", commentWidgetThemeStyle);
|
||||
|
||||
const form = widget.shadowRoot?.querySelector<HTMLElement>("comment-form");
|
||||
injectShadowStyle(form?.shadowRoot, "devcm-comment-form-theme", commentWidgetThemeStyle);
|
||||
|
||||
const baseForm = form?.shadowRoot?.querySelector<HTMLElement>("base-form");
|
||||
injectShadowStyle(baseForm?.shadowRoot, "devcm-comment-base-form-theme", commentWidgetThemeStyle);
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
type ThemeCommentState = {
|
||||
$el: HTMLElement;
|
||||
observer: MutationObserver | null;
|
||||
timers: number[];
|
||||
init: () => void;
|
||||
destroy: () => void;
|
||||
refresh: () => void;
|
||||
};
|
||||
|
||||
export const themeComment = (): ThemeCommentState => ({
|
||||
$el: null as unknown as HTMLElement,
|
||||
observer: null,
|
||||
timers: [],
|
||||
init() {
|
||||
this.refresh();
|
||||
this.timers = [120, 500, 1200, 2400].map((delay) => window.setTimeout(() => this.refresh(), delay));
|
||||
|
||||
this.observer = new MutationObserver(() => this.refresh());
|
||||
this.observer.observe(this.$el, {
|
||||
childList: true,
|
||||
subtree: true,
|
||||
});
|
||||
},
|
||||
destroy() {
|
||||
this.observer?.disconnect();
|
||||
this.timers.forEach((timer) => window.clearTimeout(timer));
|
||||
},
|
||||
refresh() {
|
||||
themeCommentWidget(this.$el);
|
||||
},
|
||||
});
|
||||
+2
-2
@@ -5,10 +5,10 @@ interface ThemeModeState {
|
||||
}
|
||||
|
||||
export const themeMode = (): ThemeModeState => ({
|
||||
storedTheme: '',
|
||||
storedTheme: "",
|
||||
|
||||
init() {
|
||||
const storedTheme = localStorage.getItem("theme-mode") || (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
|
||||
const storedTheme = localStorage.getItem("theme-mode") || "dark";
|
||||
|
||||
if (!storedTheme) return;
|
||||
|
||||
|
||||
@@ -0,0 +1,50 @@
|
||||
const runWhenReady = (callback: () => void) => {
|
||||
if (document.readyState === "loading") {
|
||||
document.addEventListener("DOMContentLoaded", callback, { once: true });
|
||||
return;
|
||||
}
|
||||
|
||||
callback();
|
||||
};
|
||||
|
||||
const typewriterEffect = (selector: string) => {
|
||||
const typedTextContainer = document.querySelector<HTMLDivElement>(selector);
|
||||
|
||||
if (!typedTextContainer) {
|
||||
return;
|
||||
}
|
||||
|
||||
const text = typedTextContainer.innerText;
|
||||
const followingPromptLine = typedTextContainer.parentElement?.querySelector<HTMLElement>(
|
||||
".devcm-prompt-line--after-typed"
|
||||
);
|
||||
|
||||
typedTextContainer.innerText = "";
|
||||
typedTextContainer.classList.add("typed-text--typing");
|
||||
typedTextContainer.classList.remove("typed-text--complete");
|
||||
followingPromptLine?.classList.add("devcm-prompt-line--pending");
|
||||
followingPromptLine?.setAttribute("aria-hidden", "true");
|
||||
|
||||
let index = 0;
|
||||
|
||||
const typeNextCharacter = () => {
|
||||
if (index >= text.length) {
|
||||
typedTextContainer.classList.remove("typed-text--typing");
|
||||
typedTextContainer.classList.add("typed-text--complete");
|
||||
followingPromptLine?.classList.remove("devcm-prompt-line--pending");
|
||||
followingPromptLine?.removeAttribute("aria-hidden");
|
||||
return;
|
||||
}
|
||||
|
||||
typedTextContainer.innerText += text.charAt(index);
|
||||
index += 1;
|
||||
|
||||
window.setTimeout(typeNextCharacter, Math.random() * 200 + 50);
|
||||
};
|
||||
|
||||
typeNextCharacter();
|
||||
};
|
||||
|
||||
export const initTypedText = (selector = ".typed-text") => {
|
||||
runWhenReady(() => typewriterEffect(selector));
|
||||
};
|
||||
+3
-20
@@ -2,24 +2,7 @@ import "./styles/style.scss";
|
||||
import "./styles/font-hack.scss";
|
||||
import "./styles/font-pixel.scss";
|
||||
|
||||
import Alpine from 'alpinejs'
|
||||
import {upvote} from './alpine/upvote'
|
||||
import {themeMode} from './alpine/theme-mode'
|
||||
import {postLineNum} from './alpine/post-line-num'
|
||||
import {postToc} from './alpine/post-toc'
|
||||
import {headerDividing} from './alpine/header-dividing'
|
||||
import {headerMenu} from './alpine/header-menu'
|
||||
import {typewriterEffect} from './utils'
|
||||
import Alpine from "alpinejs";
|
||||
import { bootDevcmAlpine } from "./alpine";
|
||||
|
||||
window.Alpine = Alpine
|
||||
|
||||
Alpine.data('upvote', upvote)
|
||||
Alpine.data('themeMode', themeMode)
|
||||
Alpine.data('postLineNum', postLineNum)
|
||||
Alpine.data('postToc', postToc)
|
||||
Alpine.data('headerMenu', headerMenu)
|
||||
Alpine.data('headerDividing', headerDividing)
|
||||
|
||||
Alpine.start()
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => typewriterEffect('.typed-text'))
|
||||
bootDevcmAlpine(Alpine);
|
||||
|
||||
@@ -0,0 +1,97 @@
|
||||
:host {
|
||||
color: var(--devcm-text, #586e75);
|
||||
font-family: Hack, Monaco, Consolas, "Ubuntu Mono", PingHei, "PingFang SC", "Microsoft YaHei", monospace;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.comment-widget {
|
||||
color: var(--devcm-text, #586e75);
|
||||
}
|
||||
|
||||
.comment-widget__wrapper {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.comment-widget__stats {
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px dashed var(--devcm-line, rgba(101, 123, 131, 0.2));
|
||||
color: var(--devcm-green, #859900);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.comment-widget__list {
|
||||
color: var(--devcm-text, #586e75);
|
||||
}
|
||||
|
||||
.form {
|
||||
position: relative;
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.form__editor {
|
||||
width: 100%;
|
||||
min-height: 96px;
|
||||
padding: 12px 14px;
|
||||
border: 1px solid var(--devcm-line, rgba(101, 123, 131, 0.2));
|
||||
border-radius: 8px;
|
||||
outline: none;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
var(--devcm-panel, rgba(10, 12, 9, 0.94)),
|
||||
var(--devcm-panel-soft, rgba(5, 7, 5, 0.92))
|
||||
);
|
||||
box-shadow: var(--devcm-shadow, inset 0 0 0 1px rgba(181, 137, 0, 0.16));
|
||||
color: var(--devcm-text, #586e75);
|
||||
caret-color: var(--devcm-amber, #b58900);
|
||||
font: 14px/1.7 Hack, Monaco, Consolas, "Ubuntu Mono", PingHei, "PingFang SC", "Microsoft YaHei", monospace;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.form__editor::placeholder {
|
||||
color: var(--devcm-dim, rgba(221, 214, 185, 0.42));
|
||||
}
|
||||
|
||||
.form__editor:focus {
|
||||
border-color: var(--devcm-green, rgba(133, 153, 0, 0.45));
|
||||
box-shadow: 0 0 0 1px var(--devcm-green-soft, rgba(133, 153, 0, 0.16));
|
||||
}
|
||||
|
||||
.form__footer {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.form__actions {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.form__button--login,
|
||||
.form__button--submit {
|
||||
min-height: 32px;
|
||||
padding: 6px 12px;
|
||||
border: 1px solid var(--devcm-line, rgba(101, 123, 131, 0.2)) !important;
|
||||
border-radius: 8px;
|
||||
background: var(--devcm-panel-soft, rgba(238, 232, 213, 0.78)) !important;
|
||||
color: var(--devcm-amber, #b58900) !important;
|
||||
cursor: pointer;
|
||||
font: 13px/1 Hack, Monaco, Consolas, "Ubuntu Mono", PingHei, "PingFang SC", "Microsoft YaHei", monospace;
|
||||
}
|
||||
|
||||
.form__button--submit {
|
||||
border-color: var(--devcm-green, rgba(133, 153, 0, 0.28)) !important;
|
||||
background: var(--devcm-green-soft, rgba(133, 153, 0, 0.14)) !important;
|
||||
color: var(--devcm-green, #859900) !important;
|
||||
}
|
||||
|
||||
.form__button--login:hover,
|
||||
.form__button--submit:hover {
|
||||
background: var(--devcm-panel-warm, rgba(238, 232, 213, 0.62)) !important;
|
||||
}
|
||||
文件差异内容过多而无法显示
加载差异
@@ -0,0 +1,932 @@
|
||||
@import "variables";
|
||||
|
||||
html {
|
||||
height: 100%;
|
||||
background: var(--devcm-bg-deep);
|
||||
}
|
||||
|
||||
body.devcm-body {
|
||||
height: 100vh;
|
||||
min-height: 0;
|
||||
background: radial-gradient(circle at 46% 0%, rgba(104, 243, 127, 0.11), transparent 28%),
|
||||
radial-gradient(circle at 85% 18%, rgba(255, 176, 0, 0.1), transparent 28%),
|
||||
linear-gradient(180deg, #0f130f 0%, #090c09 100%);
|
||||
color: var(--devcm-text);
|
||||
font-family: var(--devcm-mono);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
body.devcm-body.pixel_style {
|
||||
--devcm-mono: Pixel, Monaco, Consolas, "Ubuntu Mono", PingHei, "PingFang SC", "Microsoft YaHei", monospace;
|
||||
font-family: var(--devcm-mono);
|
||||
}
|
||||
|
||||
html[data-color-scheme="light"] body.devcm-body {
|
||||
background: var(--devcm-bg-deep);
|
||||
}
|
||||
|
||||
html[data-color-scheme="light"] body.devcm-body::before {
|
||||
opacity: 0.26;
|
||||
background: repeating-linear-gradient(
|
||||
0deg,
|
||||
rgba(131, 145, 149, 0.045) 0,
|
||||
rgba(131, 145, 149, 0.045) 1px,
|
||||
transparent 1px,
|
||||
transparent 28px
|
||||
),
|
||||
repeating-linear-gradient(
|
||||
90deg,
|
||||
rgba(131, 145, 149, 0.045) 0,
|
||||
rgba(131, 145, 149, 0.045) 1px,
|
||||
transparent 1px,
|
||||
transparent 28px
|
||||
);
|
||||
mix-blend-mode: normal;
|
||||
}
|
||||
|
||||
html[data-color-scheme="light"] body.devcm-body::after {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
body.devcm-body::before,
|
||||
body.devcm-body::after {
|
||||
content: "";
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 50;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
body.devcm-body::before {
|
||||
opacity: 0.24;
|
||||
background: repeating-linear-gradient(
|
||||
0deg,
|
||||
rgba(255, 255, 255, 0.055) 0,
|
||||
rgba(255, 255, 255, 0.055) 1px,
|
||||
transparent 1px,
|
||||
transparent 3px
|
||||
),
|
||||
repeating-linear-gradient(
|
||||
90deg,
|
||||
rgba(255, 176, 0, 0.045) 0,
|
||||
rgba(255, 176, 0, 0.045) 1px,
|
||||
transparent 1px,
|
||||
transparent 28px
|
||||
);
|
||||
mix-blend-mode: screen;
|
||||
}
|
||||
|
||||
body.devcm-body::after {
|
||||
background: radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.38) 100%);
|
||||
opacity: 0.46;
|
||||
}
|
||||
|
||||
.devcm-shell {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
width: min(1720px, 100vw);
|
||||
height: 100vh;
|
||||
min-height: 0;
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
border-right: 1px solid rgba(255, 176, 0, 0.14);
|
||||
border-left: 1px solid rgba(255, 176, 0, 0.14);
|
||||
box-shadow: 0 0 54px rgba(0, 0, 0, 0.38);
|
||||
}
|
||||
|
||||
html[data-color-scheme="light"] .devcm-shell {
|
||||
border-color: rgba(101, 123, 131, 0.18);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.devcm-app {
|
||||
display: grid;
|
||||
height: 100vh;
|
||||
min-height: 0;
|
||||
grid-template-rows: auto minmax(0, 1fr) auto;
|
||||
overflow: hidden;
|
||||
background: linear-gradient(90deg, rgba(255, 176, 0, 0.064) 1px, transparent 1px) 0 0 / 28px 28px,
|
||||
linear-gradient(180deg, rgba(104, 243, 127, 0.04) 1px, transparent 1px) 0 0 / 28px 28px,
|
||||
linear-gradient(180deg, rgba(13, 17, 13, 0.96), rgba(10, 13, 10, 0.96));
|
||||
}
|
||||
|
||||
html[data-color-scheme="light"] .devcm-app {
|
||||
background: linear-gradient(90deg, rgba(117, 135, 70, 0.06) 1px, transparent 1px) 0 0 / 28px 28px,
|
||||
linear-gradient(180deg, rgba(157, 129, 50, 0.055) 1px, transparent 1px) 0 0 / 28px 28px, var(--devcm-bg);
|
||||
}
|
||||
|
||||
.devcm-topbar {
|
||||
position: relative;
|
||||
z-index: 16;
|
||||
min-height: var(--devcm-topbar-height);
|
||||
padding: 18px 28px 0;
|
||||
border-bottom: 1px solid rgba(255, 176, 0, 0.22);
|
||||
background: linear-gradient(180deg, rgba(13, 13, 10, 0.96), rgba(8, 10, 8, 0.94)),
|
||||
radial-gradient(circle at 54% 12%, rgba(104, 243, 127, 0.12), transparent 28%);
|
||||
box-shadow: 0 12px 34px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
html[data-color-scheme="light"] .devcm-topbar {
|
||||
border-bottom-color: rgba(101, 123, 131, 0.22);
|
||||
background: var(--devcm-bg-deep);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.devcm-topbar__main {
|
||||
display: grid;
|
||||
grid-template-columns: max-content minmax(160px, 1fr) max-content;
|
||||
gap: 18px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.devcm-brand {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
color: var(--devcm-amber);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.devcm-brand__image,
|
||||
.devcm-brand__mark {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
flex: 0 0 auto;
|
||||
border: 1px solid var(--devcm-line-strong);
|
||||
border-radius: 8px;
|
||||
background: rgba(255, 176, 0, 0.05);
|
||||
box-shadow: var(--devcm-shadow);
|
||||
}
|
||||
|
||||
.devcm-brand__image {
|
||||
object-fit: contain;
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
.devcm-brand__mark {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
color: var(--devcm-amber);
|
||||
font-size: 10px;
|
||||
font-weight: 900;
|
||||
line-height: 0.83;
|
||||
text-align: center;
|
||||
text-shadow: 0 0 12px rgba(255, 176, 0, 0.5);
|
||||
}
|
||||
|
||||
.devcm-brand__name {
|
||||
overflow: hidden;
|
||||
color: var(--devcm-amber);
|
||||
font-size: 29px;
|
||||
font-weight: 900;
|
||||
letter-spacing: 0;
|
||||
text-overflow: ellipsis;
|
||||
text-shadow: 0 0 18px rgba(255, 176, 0, 0.36);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.devcm-prompt-stream {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: grid;
|
||||
min-height: 34px;
|
||||
min-width: 0;
|
||||
grid-template-columns: max-content minmax(0, 1fr);
|
||||
gap: 14px;
|
||||
align-items: center;
|
||||
overflow: visible;
|
||||
isolation: isolate;
|
||||
}
|
||||
|
||||
.devcm-prompt-stream__name {
|
||||
color: var(--devcm-green);
|
||||
text-shadow: 0 0 12px rgba(104, 243, 127, 0.24);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.devcm-prompt-stream__line {
|
||||
min-width: 0;
|
||||
opacity: 0.78;
|
||||
filter: drop-shadow(0 0 7px rgba(104, 243, 127, 0.18));
|
||||
}
|
||||
|
||||
.devcm-topbar__actions {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.devcm-icon-button {
|
||||
display: grid;
|
||||
flex: 0 0 34px;
|
||||
width: 34px;
|
||||
min-width: 34px;
|
||||
height: 34px;
|
||||
place-items: center;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
border-radius: 8px;
|
||||
background: transparent;
|
||||
color: var(--devcm-amber);
|
||||
cursor: pointer;
|
||||
font-size: 22px;
|
||||
line-height: 1;
|
||||
text-shadow: 0 0 14px rgba(255, 176, 0, 0.34);
|
||||
}
|
||||
|
||||
.devcm-icon-button:hover {
|
||||
background: rgba(255, 176, 0, 0.08);
|
||||
box-shadow: inset 0 0 0 1px rgba(255, 176, 0, 0.24);
|
||||
}
|
||||
|
||||
.devcm-workspace {
|
||||
display: grid;
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
grid-template-columns: var(--devcm-activity-width) var(--devcm-sidebar-width) minmax(640px, 1fr) var(
|
||||
--devcm-rightbar-width
|
||||
);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.devcm-activity {
|
||||
display: flex;
|
||||
min-height: 0;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0;
|
||||
padding: 20px 0 16px;
|
||||
border-right: 1px solid rgba(255, 176, 0, 0.18);
|
||||
background: rgba(5, 7, 5, 0.78);
|
||||
}
|
||||
|
||||
.devcm-activity__group {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
min-height: 0;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.devcm-activity__group--down {
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.devcm-activity__icon-bank {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.devcm-activity__button {
|
||||
position: relative;
|
||||
display: grid;
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
place-items: center;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 10px;
|
||||
color: rgba(255, 221, 142, 0.84);
|
||||
font-size: 21px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.devcm-activity__button::after {
|
||||
content: attr(data-label);
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: calc(100% + 10px);
|
||||
z-index: 40;
|
||||
padding: 5px 8px;
|
||||
border: 1px solid rgba(255, 176, 0, 0.28);
|
||||
border-radius: 6px;
|
||||
background: rgba(8, 10, 7, 0.96);
|
||||
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.34);
|
||||
color: var(--devcm-amber);
|
||||
font-size: 12px;
|
||||
line-height: 1;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transform: translate(-4px, -50%);
|
||||
transition: opacity 0.15s ease, transform 0.15s ease;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.devcm-activity__button:hover::after {
|
||||
opacity: 1;
|
||||
transform: translate(0, -50%);
|
||||
}
|
||||
|
||||
.devcm-activity__button:hover,
|
||||
.devcm-activity__button--active {
|
||||
border-color: rgba(255, 176, 0, 0.35);
|
||||
background: rgba(255, 176, 0, 0.07);
|
||||
box-shadow: 0 0 16px rgba(255, 176, 0, 0.08);
|
||||
color: var(--devcm-amber);
|
||||
}
|
||||
|
||||
.devcm-activity__button--active::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
bottom: 8px;
|
||||
left: -10px;
|
||||
width: 3px;
|
||||
border-radius: 999px;
|
||||
background: var(--devcm-amber);
|
||||
box-shadow: 0 0 16px rgba(255, 176, 0, 0.44);
|
||||
}
|
||||
|
||||
.devcm-activity__spacer {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.devcm-sidebar,
|
||||
.devcm-rightbar {
|
||||
min-height: 0;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
background: rgba(8, 10, 7, 0.78);
|
||||
overscroll-behavior: contain;
|
||||
}
|
||||
|
||||
html[data-color-scheme="light"] .devcm-sidebar,
|
||||
html[data-color-scheme="light"] .devcm-rightbar {
|
||||
background: rgba(244, 238, 220, 0.5);
|
||||
}
|
||||
|
||||
html[data-color-scheme="light"] .devcm-activity {
|
||||
border-right-color: rgba(101, 123, 131, 0.22);
|
||||
background: var(--devcm-bg-deep);
|
||||
}
|
||||
|
||||
html[data-color-scheme="light"] .devcm-activity__button {
|
||||
color: #657b83;
|
||||
}
|
||||
|
||||
html[data-color-scheme="light"] .devcm-activity__button:hover,
|
||||
html[data-color-scheme="light"] .devcm-activity__button--active {
|
||||
border-color: rgba(181, 137, 0, 0.34);
|
||||
background: rgba(181, 137, 0, 0.09);
|
||||
box-shadow: none;
|
||||
color: var(--devcm-amber);
|
||||
}
|
||||
|
||||
.devcm-sidebar {
|
||||
padding: 18px 0 20px;
|
||||
border-right: 1px solid rgba(255, 176, 0, 0.18);
|
||||
}
|
||||
|
||||
.devcm-rightbar {
|
||||
padding: 24px 16px 20px;
|
||||
border-left: 1px solid rgba(255, 176, 0, 0.18);
|
||||
background: linear-gradient(180deg, rgba(8, 10, 7, 0.84), rgba(5, 7, 5, 0.76));
|
||||
}
|
||||
|
||||
.devcm-rightbar--hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.devcm-shell--page .devcm-workspace,
|
||||
.devcm-shell--links .devcm-workspace,
|
||||
.devcm-shell--moments .devcm-workspace {
|
||||
grid-template-columns: var(--devcm-activity-width) var(--devcm-sidebar-width) minmax(640px, 1fr);
|
||||
}
|
||||
|
||||
.devcm-side-section {
|
||||
margin-bottom: 18px;
|
||||
padding: 0 18px 18px;
|
||||
border-bottom: 1px solid rgba(255, 176, 0, 0.16);
|
||||
}
|
||||
|
||||
.devcm-side-section:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.devcm-section-title,
|
||||
.devcm-widget__title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 14px;
|
||||
color: var(--devcm-amber);
|
||||
font-size: 14px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.04em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.devcm-tree,
|
||||
.devcm-tree__nested {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: var(--devcm-muted);
|
||||
font-size: 14px;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.devcm-tree__nested {
|
||||
margin-left: 16px;
|
||||
padding-left: 9px;
|
||||
border-left: 1px dotted rgba(255, 176, 0, 0.14);
|
||||
}
|
||||
|
||||
.devcm-tree-folder {
|
||||
display: grid;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.devcm-tree-folder > summary {
|
||||
cursor: pointer;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.devcm-tree-folder > summary::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.devcm-tree-folder > summary:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.devcm-tree-folder > summary:focus-visible {
|
||||
box-shadow: inset 0 0 0 1px rgba(104, 243, 127, 0.36), 0 0 0 1px rgba(255, 176, 0, 0.22);
|
||||
}
|
||||
|
||||
.devcm-tree-folder[open] > summary > .devcm-tree__chev {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.devcm-tree__item {
|
||||
display: grid;
|
||||
min-height: 24px;
|
||||
grid-template-columns: 16px 18px minmax(0, 1fr) max-content;
|
||||
gap: 6px;
|
||||
align-items: center;
|
||||
padding: 2px 4px;
|
||||
border-radius: 6px;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.devcm-tree__icon {
|
||||
color: #cda44a;
|
||||
font-size: 15px;
|
||||
opacity: 0.82;
|
||||
}
|
||||
|
||||
html[data-color-scheme="light"] .devcm-tree__icon {
|
||||
color: #657b83;
|
||||
}
|
||||
|
||||
.devcm-tree__open {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--devcm-dim);
|
||||
font-size: 12px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.devcm-tree__open i {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.devcm-tree__open:hover {
|
||||
color: var(--devcm-green);
|
||||
}
|
||||
|
||||
.devcm-tree__item--external .devcm-tree__icon,
|
||||
.devcm-tree__open--external {
|
||||
color: var(--devcm-cyan);
|
||||
opacity: 0.92;
|
||||
}
|
||||
|
||||
.devcm-tree__item--external:hover .devcm-tree__icon,
|
||||
.devcm-tree__open--external:hover {
|
||||
color: var(--devcm-green);
|
||||
}
|
||||
|
||||
.devcm-tree__item:hover,
|
||||
.devcm-tree__item--root {
|
||||
background: rgba(255, 176, 0, 0.07);
|
||||
color: #f4d89c;
|
||||
}
|
||||
|
||||
html[data-color-scheme="light"] .devcm-tree__item:hover,
|
||||
html[data-color-scheme="light"] .devcm-tree__item--root {
|
||||
background: rgba(181, 137, 0, 0.08);
|
||||
color: #586e75;
|
||||
}
|
||||
|
||||
.devcm-tree__item--root {
|
||||
background: transparent;
|
||||
color: #e5c36c;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
html[data-color-scheme="light"] .devcm-tree__item--root {
|
||||
background: transparent;
|
||||
color: #657b83;
|
||||
}
|
||||
|
||||
.devcm-tree__chev {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
place-items: center;
|
||||
color: var(--devcm-amber);
|
||||
opacity: 0.8;
|
||||
transition: transform 0.16s ease;
|
||||
}
|
||||
|
||||
.devcm-tree__chev::before {
|
||||
content: "";
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top: 4px solid transparent;
|
||||
border-bottom: 4px solid transparent;
|
||||
border-left: 5px solid currentColor;
|
||||
}
|
||||
|
||||
.devcm-tree__item:not(.devcm-tree__item--folder) .devcm-tree__chev::before {
|
||||
width: 3px;
|
||||
height: 3px;
|
||||
border: 0;
|
||||
border-radius: 50%;
|
||||
background: currentColor;
|
||||
}
|
||||
|
||||
.devcm-tree__count {
|
||||
color: #8a7c56;
|
||||
}
|
||||
|
||||
.devcm-tag-cloud {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.devcm-tag {
|
||||
display: inline-flex;
|
||||
min-height: 28px;
|
||||
align-items: center;
|
||||
padding: 4px 9px;
|
||||
border: 1px solid rgba(255, 176, 0, 0.16);
|
||||
border-radius: 7px;
|
||||
background: rgba(255, 176, 0, 0.05);
|
||||
color: #cdb37a;
|
||||
font-size: 13px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
html[data-color-scheme="light"] .devcm-tag {
|
||||
border-color: rgba(101, 123, 131, 0.22);
|
||||
background: rgba(244, 238, 220, 0.42);
|
||||
color: #657b83;
|
||||
}
|
||||
|
||||
.devcm-tag:hover {
|
||||
border-color: rgba(255, 176, 0, 0.36);
|
||||
color: var(--devcm-amber);
|
||||
}
|
||||
|
||||
.devcm-widget {
|
||||
position: relative;
|
||||
margin-bottom: 16px;
|
||||
padding: 14px;
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(255, 176, 0, 0.26);
|
||||
border-radius: 8px;
|
||||
background: linear-gradient(180deg, rgba(14, 16, 12, 0.96), rgba(9, 11, 8, 0.94));
|
||||
box-shadow: var(--devcm-shadow);
|
||||
}
|
||||
|
||||
html[data-color-scheme="light"] .devcm-widget {
|
||||
background: rgba(255, 250, 235, 0.78);
|
||||
}
|
||||
|
||||
.devcm-widget::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(90deg, rgba(255, 176, 0, 0.04), transparent 38%, rgba(104, 243, 127, 0.025));
|
||||
opacity: 0.45;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.devcm-widget--empty {
|
||||
min-height: 112px;
|
||||
}
|
||||
|
||||
.devcm-widget__body {
|
||||
min-height: 50px;
|
||||
}
|
||||
|
||||
.devcm-widget > * {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.devcm-panel-list {
|
||||
display: grid;
|
||||
gap: 9px;
|
||||
}
|
||||
|
||||
.devcm-panel-link {
|
||||
display: grid;
|
||||
gap: 3px;
|
||||
padding: 9px 0;
|
||||
border-bottom: 1px dashed rgba(255, 176, 0, 0.12);
|
||||
color: #cdb78b;
|
||||
font-size: 13px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.devcm-panel-link:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.devcm-panel-link:hover {
|
||||
color: var(--devcm-amber);
|
||||
}
|
||||
|
||||
.devcm-panel-link strong {
|
||||
overflow: hidden;
|
||||
color: inherit;
|
||||
font-weight: 700;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.devcm-panel-link span {
|
||||
color: #8c7950;
|
||||
}
|
||||
|
||||
html[data-color-scheme="light"] .devcm-panel-link {
|
||||
border-bottom-color: rgba(101, 123, 131, 0.16);
|
||||
color: #586e75;
|
||||
}
|
||||
|
||||
html[data-color-scheme="light"] .devcm-panel-link span {
|
||||
color: #93a1a1;
|
||||
}
|
||||
|
||||
.devcm-info-list {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.devcm-info-list__row {
|
||||
display: grid;
|
||||
grid-template-columns: 72px minmax(0, 1fr);
|
||||
gap: 10px;
|
||||
color: #c9bb91;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
html[data-color-scheme="light"] .devcm-info-list__row {
|
||||
color: #657b83;
|
||||
}
|
||||
|
||||
.devcm-info-list__row strong {
|
||||
overflow: hidden;
|
||||
color: var(--devcm-green);
|
||||
font-weight: 600;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.devcm-statusbar {
|
||||
position: relative;
|
||||
z-index: 18;
|
||||
display: grid;
|
||||
box-sizing: border-box;
|
||||
height: var(--devcm-status-height);
|
||||
min-height: 0;
|
||||
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
|
||||
gap: 18px;
|
||||
align-items: center;
|
||||
padding: 0 28px;
|
||||
border-top: 1px solid rgba(255, 176, 0, 0.2);
|
||||
background: rgba(5, 7, 5, 0.92);
|
||||
color: #b99f67;
|
||||
font-size: 13px;
|
||||
line-height: 1;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
html[data-color-scheme="light"] .devcm-statusbar {
|
||||
border-top-color: rgba(101, 123, 131, 0.22);
|
||||
background: var(--devcm-bg-deep);
|
||||
color: #657b83;
|
||||
}
|
||||
|
||||
.devcm-statusbar__left,
|
||||
.devcm-statusbar__right,
|
||||
.devcm-statusbar__center,
|
||||
.devcm-statusbar__beian {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
min-width: 0;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.devcm-statusbar span,
|
||||
.devcm-statusbar a {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.devcm-statusbar__right {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.devcm-statusbar__center {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.devcm-statusbar__beian {
|
||||
display: inline-flex;
|
||||
height: auto;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
padding: 0;
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
.devcm-statusbar__beian:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.devcm-statusbar__beian img {
|
||||
display: inline-block;
|
||||
height: 1.2em;
|
||||
}
|
||||
|
||||
.devcm-statusbar a {
|
||||
color: var(--devcm-amber);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.devcm-statusbar__dot {
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
border-radius: 50%;
|
||||
background: var(--devcm-green);
|
||||
box-shadow: 0 0 10px rgba(104, 243, 127, 0.6);
|
||||
}
|
||||
|
||||
@media (max-width: 1320px) {
|
||||
:root {
|
||||
--devcm-sidebar-width: 250px;
|
||||
--devcm-rightbar-width: 270px;
|
||||
}
|
||||
|
||||
.devcm-workspace {
|
||||
grid-template-columns: var(--devcm-activity-width) var(--devcm-sidebar-width) minmax(520px, 1fr) var(
|
||||
--devcm-rightbar-width
|
||||
);
|
||||
}
|
||||
|
||||
.devcm-shell--page .devcm-workspace,
|
||||
.devcm-shell--links .devcm-workspace,
|
||||
.devcm-shell--moments .devcm-workspace {
|
||||
grid-template-columns: var(--devcm-activity-width) var(--devcm-sidebar-width) minmax(520px, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1060px) {
|
||||
.devcm-workspace {
|
||||
align-content: stretch;
|
||||
grid-auto-rows: auto;
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
grid-template-rows: auto minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.devcm-workspace > .devcm-sidebar,
|
||||
.devcm-rightbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.devcm-activity {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
grid-column: 1 / -1;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
gap: 10px;
|
||||
padding: 8px 12px;
|
||||
overflow-x: auto;
|
||||
border-right: 0;
|
||||
border-bottom: 1px solid rgba(255, 176, 0, 0.18);
|
||||
}
|
||||
|
||||
.devcm-activity__group {
|
||||
width: auto;
|
||||
flex: 0 0 auto;
|
||||
flex-direction: row;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.devcm-activity__group--down {
|
||||
margin-top: 0;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.devcm-activity__button {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.devcm-activity__button::after {
|
||||
top: calc(100% + 8px);
|
||||
left: 50%;
|
||||
transform: translate(-50%, -4px);
|
||||
}
|
||||
|
||||
.devcm-activity__button:hover::after {
|
||||
transform: translate(-50%, 0);
|
||||
}
|
||||
|
||||
.devcm-activity__button--active::before {
|
||||
top: auto;
|
||||
right: 8px;
|
||||
bottom: 0;
|
||||
left: 8px;
|
||||
width: auto;
|
||||
height: 3px;
|
||||
}
|
||||
|
||||
.devcm-activity__spacer {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.devcm-topbar {
|
||||
min-height: auto;
|
||||
padding: 14px 12px 0;
|
||||
}
|
||||
|
||||
.devcm-topbar__main {
|
||||
grid-template-columns: max-content minmax(0, 1fr) max-content;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.devcm-prompt-stream {
|
||||
min-height: 30px;
|
||||
grid-template-columns: max-content minmax(24px, 1fr);
|
||||
gap: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.devcm-prompt-stream__name {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.devcm-brand {
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.devcm-brand__image,
|
||||
.devcm-brand__mark {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 7px;
|
||||
}
|
||||
|
||||
.devcm-brand__name {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.devcm-workspace {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.devcm-statusbar {
|
||||
height: auto;
|
||||
min-height: var(--devcm-status-height);
|
||||
align-content: center;
|
||||
grid-template-columns: 1fr;
|
||||
justify-items: center;
|
||||
gap: 4px;
|
||||
padding: 7px;
|
||||
}
|
||||
|
||||
.devcm-statusbar__left,
|
||||
.devcm-statusbar__right,
|
||||
.devcm-statusbar__center {
|
||||
height: auto;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,80 @@
|
||||
:root,
|
||||
html[data-color-scheme="dark"] {
|
||||
color-scheme: dark;
|
||||
--devcm-bg: #0e120e;
|
||||
--devcm-bg-deep: #090c09;
|
||||
--devcm-panel: rgba(18, 22, 16, 0.94);
|
||||
--devcm-panel-soft: rgba(24, 28, 19, 0.88);
|
||||
--devcm-panel-warm: rgba(31, 25, 14, 0.76);
|
||||
--devcm-line: rgba(255, 176, 0, 0.22);
|
||||
--devcm-line-strong: rgba(255, 176, 0, 0.48);
|
||||
--devcm-text: #ddd6b9;
|
||||
--devcm-muted: #a79c78;
|
||||
--devcm-dim: #756b4d;
|
||||
--devcm-amber: #ffb000;
|
||||
--devcm-amber-soft: #d88900;
|
||||
--devcm-green: #68f37f;
|
||||
--devcm-green-soft: rgba(104, 243, 127, 0.15);
|
||||
--devcm-cyan: #00e5ff;
|
||||
--devcm-purple: #b58cff;
|
||||
--devcm-red: #ff5d5d;
|
||||
--devcm-radius: 12px;
|
||||
--devcm-activity-width: 58px;
|
||||
--devcm-sidebar-width: 284px;
|
||||
--devcm-rightbar-width: 308px;
|
||||
--devcm-topbar-height: 88px;
|
||||
--devcm-status-height: 34px;
|
||||
--devcm-mono: Hack, Monaco, Consolas, "Ubuntu Mono", PingHei, "PingFang SC", "Microsoft YaHei", monospace;
|
||||
--devcm-shadow: 0 0 22px rgba(255, 176, 0, 0.08), inset 0 0 0 1px rgba(255, 176, 0, 0.16);
|
||||
--devcm-green-glow: 0 0 18px rgba(104, 243, 127, 0.14);
|
||||
|
||||
--background: var(--devcm-bg);
|
||||
--foreground: var(--devcm-text);
|
||||
--selectionBackground: rgba(104, 243, 127, 0.24);
|
||||
--blue: var(--devcm-cyan);
|
||||
--green: var(--devcm-green);
|
||||
--red: var(--devcm-red);
|
||||
--yellow: var(--devcm-amber);
|
||||
--brightBlue: var(--devcm-cyan);
|
||||
--brightGreen: var(--devcm-green);
|
||||
--brightRed: var(--devcm-red);
|
||||
}
|
||||
|
||||
html[data-color-scheme="light"] {
|
||||
color-scheme: light;
|
||||
--devcm-bg: #fdf8e8;
|
||||
--devcm-bg-deep: #f4eedc;
|
||||
--devcm-panel: rgba(255, 250, 235, 0.9);
|
||||
--devcm-panel-soft: rgba(244, 238, 220, 0.5);
|
||||
--devcm-panel-warm: rgba(244, 238, 220, 0.34);
|
||||
--devcm-line: rgba(101, 123, 131, 0.2);
|
||||
--devcm-line-strong: rgba(181, 137, 0, 0.42);
|
||||
--devcm-text: #586e75;
|
||||
--devcm-muted: #657b83;
|
||||
--devcm-dim: #93a1a1;
|
||||
--devcm-amber: #b58900;
|
||||
--devcm-amber-soft: #cb4b16;
|
||||
--devcm-green: #859900;
|
||||
--devcm-green-soft: rgba(133, 153, 0, 0.14);
|
||||
--devcm-cyan: #2aa198;
|
||||
--devcm-purple: #6c71c4;
|
||||
--devcm-red: #dc322f;
|
||||
--devcm-shadow: inset 0 0 0 1px rgba(181, 137, 0, 0.16);
|
||||
--devcm-green-glow: 0 0 0 1px rgba(133, 153, 0, 0.12);
|
||||
|
||||
--background: var(--devcm-bg);
|
||||
--foreground: var(--devcm-text);
|
||||
--selectionBackground: rgba(42, 161, 152, 0.18);
|
||||
--blue: var(--devcm-cyan);
|
||||
--green: var(--devcm-green);
|
||||
--red: var(--devcm-red);
|
||||
--yellow: var(--devcm-amber);
|
||||
--brightBlue: var(--devcm-cyan);
|
||||
--brightGreen: var(--devcm-green);
|
||||
--brightRed: var(--devcm-red);
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: rgba(104, 243, 127, 0.26);
|
||||
color: #fff6d4;
|
||||
}
|
||||
+6
-1
@@ -3,7 +3,7 @@
|
||||
.footer {
|
||||
padding: 40px 0 0 0;
|
||||
flex-grow: 0;
|
||||
opacity: .5;
|
||||
opacity: 0.5;
|
||||
|
||||
&__inner {
|
||||
display: flex;
|
||||
@@ -79,5 +79,10 @@
|
||||
gap: 4px;
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
&__icon {
|
||||
display: inline-block;
|
||||
height: 1.2em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
+76
-48
@@ -1,4 +1,4 @@
|
||||
@import './variables.scss';
|
||||
@import "./variables.scss";
|
||||
|
||||
.dividing {
|
||||
flex: 1;
|
||||
@@ -10,13 +10,12 @@
|
||||
--dash-spacing: 10px;
|
||||
--dash-width: 2px;
|
||||
|
||||
// 进入动画初始状态（仅 sticky 激活时播放）
|
||||
opacity: 1;
|
||||
transition: opacity 0.3s ease-in-out;
|
||||
|
||||
// 虚线背景层 - 带遮罩
|
||||
&::before {
|
||||
content: '';
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
@@ -33,25 +32,13 @@
|
||||
animation: line-flow 3s linear infinite;
|
||||
|
||||
// 遮罩层实现虚线淡入淡出效果
|
||||
mask-image: linear-gradient(
|
||||
90deg,
|
||||
transparent 0%,
|
||||
black 3%,
|
||||
black 97%,
|
||||
transparent 100%
|
||||
);
|
||||
-webkit-mask-image: linear-gradient(
|
||||
90deg,
|
||||
transparent 0%,
|
||||
black 3%,
|
||||
black 97%,
|
||||
transparent 100%
|
||||
);
|
||||
mask-image: linear-gradient(90deg, transparent 0%, black 3%, black 97%, transparent 100%);
|
||||
-webkit-mask-image: linear-gradient(90deg, transparent 0%, black 3%, black 97%, transparent 100%);
|
||||
}
|
||||
|
||||
// 扫描光效 - 模拟终端扫描线
|
||||
&::after {
|
||||
content: '';
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: -5%;
|
||||
top: 50%;
|
||||
@@ -59,12 +46,7 @@
|
||||
width: 30%;
|
||||
height: 120%;
|
||||
filter: blur(4px);
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
transparent 0%,
|
||||
var(--green) 80%,
|
||||
transparent 100%
|
||||
);
|
||||
background: linear-gradient(90deg, transparent 0%, var(--green) 80%, transparent 100%);
|
||||
opacity: 0.3;
|
||||
animation: scan-line 5s ease-in-out infinite;
|
||||
pointer-events: none;
|
||||
@@ -72,33 +54,52 @@
|
||||
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
&.sticky {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 5px;
|
||||
z-index: 100;
|
||||
--dash-spacing: 6px;
|
||||
--dash-width: 2px;
|
||||
background-color: color-mix(in srgb, var(--background) 90%, transparent);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
|
||||
// 进入动画：透明度由0到1
|
||||
animation: sticky-in 0.5s ease-in-out forwards;
|
||||
&.devcm-prompt-stream__line--loading {
|
||||
opacity: 1;
|
||||
|
||||
&::before {
|
||||
top: calc(50% - 1px);
|
||||
height: 2px;
|
||||
&::after {
|
||||
left: 0;
|
||||
width: 100%;
|
||||
opacity: 0.78;
|
||||
filter: blur(3px);
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgba(255, 93, 93, 0.04) 0%,
|
||||
rgba(255, 93, 93, 0.28) 52%,
|
||||
rgba(255, 93, 93, 0.46) 78%,
|
||||
rgba(255, 93, 93, 0.72) 100%
|
||||
);
|
||||
animation-name: devcm-route-fill-grow, devcm-route-loading-pulse;
|
||||
animation-duration: 1.28s, 0.72s;
|
||||
animation-timing-function: cubic-bezier(0.18, 0.72, 0.22, 1), ease-in-out;
|
||||
animation-fill-mode: forwards, none;
|
||||
animation-iteration-count: 1, infinite;
|
||||
animation-direction: normal, alternate;
|
||||
transform: translateY(-50%) scaleX(0);
|
||||
transform-origin: left center;
|
||||
transition: opacity 0.18s ease;
|
||||
will-change: transform, opacity, filter;
|
||||
}
|
||||
}
|
||||
|
||||
&.devcm-prompt-stream__line--finishing {
|
||||
opacity: 1;
|
||||
animation: devcm-route-finish-state 0.86s linear forwards;
|
||||
|
||||
&::after {
|
||||
opacity: 0.6;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
opacity: 0.66;
|
||||
filter: blur(3px);
|
||||
// 调整扫描线高度以适应 5px 容器
|
||||
height: 200%;
|
||||
width: 25%;
|
||||
clip-path: inset(0 0 0 0);
|
||||
background: linear-gradient(90deg, rgba(255, 93, 93, 0.05) 0%, rgba(255, 93, 93, 0.62) 70%, transparent 100%);
|
||||
animation-name: devcm-route-tail-shrink;
|
||||
animation-duration: 0.86s;
|
||||
animation-timing-function: cubic-bezier(0.48, 0, 0.22, 1);
|
||||
animation-fill-mode: forwards;
|
||||
transform: translateY(-50%);
|
||||
transition: opacity 0.18s ease;
|
||||
will-change: clip-path, opacity, filter;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -122,10 +123,10 @@
|
||||
}
|
||||
30% {
|
||||
width: 30%;
|
||||
opacity: .3;
|
||||
opacity: 0.3;
|
||||
}
|
||||
70% {
|
||||
opacity: .3;
|
||||
opacity: 0.3;
|
||||
}
|
||||
100% {
|
||||
left: 80%;
|
||||
@@ -133,10 +134,37 @@
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes sticky-in {
|
||||
@keyframes devcm-route-loading-pulse {
|
||||
0% {
|
||||
opacity: 0.58;
|
||||
}
|
||||
100% {
|
||||
opacity: 0.78;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes devcm-route-fill-grow {
|
||||
0% {
|
||||
transform: translateY(-50%) scaleX(0);
|
||||
}
|
||||
100% {
|
||||
transform: translateY(-50%) scaleX(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes devcm-route-tail-shrink {
|
||||
0% {
|
||||
clip-path: inset(0 0 0 0);
|
||||
opacity: 0.66;
|
||||
}
|
||||
100% {
|
||||
clip-path: inset(0 0 0 100%);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes devcm-route-finish-state {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
+15
-12
@@ -2,16 +2,19 @@
|
||||
@tailwind utilities;
|
||||
@tailwind components;
|
||||
|
||||
@import 'main';
|
||||
@import 'logo';
|
||||
@import 'buttons';
|
||||
@import 'header';
|
||||
@import 'header-dividing';
|
||||
@import 'post';
|
||||
@import 'post-line-num';
|
||||
@import 'post-toc';
|
||||
@import 'pagination';
|
||||
@import 'footer';
|
||||
@import 'typed-text';
|
||||
@import "main";
|
||||
@import "logo";
|
||||
@import "buttons";
|
||||
@import "header";
|
||||
@import "header-dividing";
|
||||
@import "post";
|
||||
@import "post-line-num";
|
||||
@import "post-toc";
|
||||
@import "pagination";
|
||||
@import "footer";
|
||||
@import "typed-text";
|
||||
|
||||
@import 'theme';
|
||||
@import "theme";
|
||||
@import "devcm-tokens";
|
||||
@import "devcm-shell";
|
||||
@import "devcm-editor";
|
||||
|
||||
+16
-3
@@ -1,10 +1,23 @@
|
||||
/* 光标样式 */
|
||||
.typed-text::after {
|
||||
content: '|';
|
||||
content: none;
|
||||
}
|
||||
|
||||
.typed-text.typed-text--typing::after {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
opacity: 0;
|
||||
width: 0.16em;
|
||||
height: 0.78em;
|
||||
margin-left: 0.08em;
|
||||
background: var(--devcm-amber);
|
||||
box-shadow: 0 0 8px rgba(255, 176, 0, 0.34);
|
||||
opacity: 0.82;
|
||||
animation: blink 0.7s infinite alternate; /* 闪烁动画 */
|
||||
vertical-align: text-bottom;
|
||||
vertical-align: 0.04em;
|
||||
}
|
||||
|
||||
.typed-text.typed-text--complete::after {
|
||||
content: none;
|
||||
}
|
||||
|
||||
/* 闪烁动画 */
|
||||
|
||||
-24
@@ -1,24 +0,0 @@
|
||||
// 文字打字机效果
|
||||
export const typewriterEffect = (selectors: string) => {
|
||||
const typedTextContainer = document.querySelector<HTMLDivElement>(selectors)
|
||||
|
||||
if (!typedTextContainer) return
|
||||
|
||||
const text = typedTextContainer.innerText
|
||||
|
||||
// 清除原有的文本
|
||||
typedTextContainer.innerText = ''
|
||||
|
||||
// 实现打字机效果
|
||||
let i = 0
|
||||
|
||||
const typewriter = () => {
|
||||
if (i >= text.length) return
|
||||
|
||||
typedTextContainer.innerText += text.charAt(i++)
|
||||
|
||||
setTimeout(typewriter, Math.random() * 200 + 50)
|
||||
}
|
||||
|
||||
typewriter()
|
||||
}
|
||||
+85
-1
@@ -1,5 +1,83 @@
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
const { Icons } = require("tailwindcss-plugin-icons");
|
||||
|
||||
const devcmActivityIcons = [
|
||||
"folder",
|
||||
"home",
|
||||
"search",
|
||||
"archive",
|
||||
"script-text",
|
||||
"article",
|
||||
"book-open",
|
||||
"file",
|
||||
"file-alt",
|
||||
"file-multiple",
|
||||
"note",
|
||||
"notes",
|
||||
"label",
|
||||
"label-alt",
|
||||
"user",
|
||||
"users",
|
||||
"contact",
|
||||
"git-branch",
|
||||
"git-commit",
|
||||
"git-merge",
|
||||
"git-pull-request",
|
||||
"github",
|
||||
"link",
|
||||
"external-link",
|
||||
"open",
|
||||
"code",
|
||||
"command",
|
||||
"bug",
|
||||
"debug",
|
||||
"server",
|
||||
"cloud",
|
||||
"monitor",
|
||||
"device-laptop",
|
||||
"dashboard",
|
||||
"analytics",
|
||||
"chart",
|
||||
"chart-bar",
|
||||
"kanban",
|
||||
"timeline",
|
||||
"mail",
|
||||
"message",
|
||||
"chat",
|
||||
"comment",
|
||||
"notification",
|
||||
"calendar",
|
||||
"clock",
|
||||
"bookmark",
|
||||
"heart",
|
||||
"lightbulb",
|
||||
"shield",
|
||||
"lock",
|
||||
"image",
|
||||
"image-gallery",
|
||||
"camera",
|
||||
"music",
|
||||
"video",
|
||||
"shopping-bag",
|
||||
"cart",
|
||||
"wallet",
|
||||
"map",
|
||||
"pin",
|
||||
"flag",
|
||||
"power",
|
||||
"upload",
|
||||
"download",
|
||||
"edit",
|
||||
"trash",
|
||||
"plus",
|
||||
"close",
|
||||
"sliders",
|
||||
"sliders-2",
|
||||
"visible",
|
||||
"eye",
|
||||
"eye-closed",
|
||||
];
|
||||
|
||||
module.exports = {
|
||||
content: ["./templates/**/*.html", "./src/main.ts"],
|
||||
theme: {
|
||||
@@ -12,9 +90,14 @@ module.exports = {
|
||||
pixelarticons: {
|
||||
includeAll: true,
|
||||
},
|
||||
"radix-icons": {
|
||||
icons: {
|
||||
gear: {},
|
||||
},
|
||||
},
|
||||
})),
|
||||
],
|
||||
darkMode: ['class', '[data-color-scheme="dark"]'],
|
||||
darkMode: ["class", '[data-color-scheme="dark"]'],
|
||||
safelist: [
|
||||
"prose-sm",
|
||||
"prose-base",
|
||||
@@ -26,5 +109,6 @@ module.exports = {
|
||||
"prose-zinc",
|
||||
"prose-neutral",
|
||||
"prose-stone",
|
||||
...devcmActivityIcons.map((icon) => `i-pixelarticons-${icon}`),
|
||||
],
|
||||
};
|
||||
+46
-44
@@ -1,66 +1,68 @@
|
||||
<!DOCTYPE html>
|
||||
<html
|
||||
xmlns:th="https://www.thymeleaf.org"
|
||||
th:replace="~{modules/layout :: html(title = |#{page.archives.title} - ${site.title}|, header = null, content = ~{::content}, footer = null)}"
|
||||
th:replace="~{modules/layout :: html(title = |#{page.archives.title} - ${site.title}|, pageType = 'archive', terminalUserName = ${archives != null and archives.items != null and !#lists.isEmpty(archives.items) and archives.items[0].months != null and !#lists.isEmpty(archives.items[0].months) and archives.items[0].months[0].posts != null and !#lists.isEmpty(archives.items[0].months[0].posts) and archives.items[0].months[0].posts[0].owner != null and !#strings.isEmpty(archives.items[0].months[0].posts[0].owner.name) ? archives.items[0].months[0].posts[0].owner.name : 'admin'}, content = ~{::content})}"
|
||||
>
|
||||
<th:block th:fragment="content">
|
||||
<div class="content">
|
||||
<div class="post">
|
||||
<h1 class="post-title" th:text="文章归档">文章归档</h1>
|
||||
<th:block th:each="archive : ${archives.items}">
|
||||
<ul>
|
||||
<th:block th:each="month : ${archive.months}">
|
||||
<li class="post-list" th:each="post : ${month.posts}">
|
||||
<a th:href="${post.status.permalink}">
|
||||
<span class="post-date" th:text="${#dates.format(post.spec.publishTime,'yyyy-MM-dd')}"
|
||||
>发布时间</span
|
||||
>
|
||||
<span class="post-separator">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</span>
|
||||
<span class="post-list-title" th:text="${post.spec.title}">文章标题</span></a>
|
||||
<span class="post-tags-inline">
|
||||
<span class="post-separator">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</span>
|
||||
<span th:each="tag : ${post.tags}">
|
||||
<a
|
||||
th:href="${tag.status.permalink}"
|
||||
th:title="${tag.spec.displayName}"
|
||||
th:text="'#'+${tag.spec.displayName}"
|
||||
class="post-tag"
|
||||
>#Tag
|
||||
</a>
|
||||
</span>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
</th:block>
|
||||
</ul>
|
||||
</th:block>
|
||||
<section class="devcm-terminal-window devcm-archive-hero">
|
||||
<div class="devcm-window-titlebar">
|
||||
<span class="devcm-window-dot"></span>
|
||||
<span class="devcm-window-dot"></span>
|
||||
<span class="devcm-window-dot"></span>
|
||||
</div>
|
||||
<div class="devcm-hero">
|
||||
<div class="devcm-hero__copy">
|
||||
<div class="devcm-prompt-line">
|
||||
<span th:text="|${terminalUser}@devcm:~$|">admin@devcm:~$</span>
|
||||
<span th:text="#{devcm.archive.command}">archive --view posts</span>
|
||||
</div>
|
||||
<h1 class="devcm-hero__title" th:text="#{devcm.archive.title}">Archives</h1>
|
||||
<p class="devcm-hero__desc" th:text="#{devcm.archive.description}">Browse content by publish date.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="devcm-archive-table">
|
||||
<div class="devcm-archive-table__title" th:text="#{devcm.archive.tableTitle}">Archive list</div>
|
||||
<div class="devcm-archive-row devcm-archive-row--header">
|
||||
<span th:text="#{devcm.archive.columnTitle}">Title</span>
|
||||
<span th:text="#{devcm.archive.columnTags}">Tags</span>
|
||||
<span th:text="#{devcm.archive.columnDate}">Date</span>
|
||||
</div>
|
||||
<th:block th:each="archive : ${archives.items}">
|
||||
<th:block th:each="month : ${archive.months}">
|
||||
<div class="devcm-archive-row devcm-archive-row--month">
|
||||
<span>
|
||||
<span th:text="#{devcm.archive.group}">Archive group</span>
|
||||
(<span th:text="${#lists.size(month.posts)}">0</span>)
|
||||
</span>
|
||||
</div>
|
||||
<a class="devcm-archive-row" th:each="post : ${month.posts}" th:href="${post.status.permalink}">
|
||||
<span th:text="${post.spec.title}">文章标题</span>
|
||||
<span>
|
||||
<b th:each="tag : ${post.tags}" th:text="'#' + ${tag.spec.displayName} + ' '">#tag</b>
|
||||
</span>
|
||||
<span th:text="${#dates.format(post.spec.publishTime,'MM-dd')}">01-01</span>
|
||||
</a>
|
||||
</th:block>
|
||||
</th:block>
|
||||
</section>
|
||||
|
||||
<div class="pagination" th:if="${archives.hasPrevious() || archives.hasNext()}">
|
||||
<div class="pagination__buttons">
|
||||
<span class="button previous" th:if="${archives.hasPrevious()}">
|
||||
<a th:href="@{${archives.prevUrl}}">
|
||||
<span class="button__icon">< </span>
|
||||
<span class="button__text">上一页</span>
|
||||
<span class="button__text" th:text="#{devcm.pagination.previous}">Previous</span>
|
||||
</a>
|
||||
</span>
|
||||
<span class="button next" th:if="${archives.hasNext()}">
|
||||
<a th:href="@{${archives.nextUrl}}">
|
||||
<span class="button__text">下一页</span>
|
||||
<span class="button__text" th:text="#{devcm.pagination.next}">Next</span>
|
||||
<span class="button__icon"> ></span>
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</th:block>
|
||||
</html>
|
||||
|
||||
+34
-7
@@ -1,16 +1,43 @@
|
||||
<!DOCTYPE html>
|
||||
<html
|
||||
xmlns:th="https://www.thymeleaf.org"
|
||||
th:replace="~{modules/layout :: html(title = |#{page.categories.title} - ${site.title}|, header = null, content = ~{::content}, footer = null)}"
|
||||
th:replace="~{modules/layout :: html(title = |#{page.categories.title} - ${site.title}|, pageType = 'categories', terminalUserName = 'admin', content = ~{::content})}"
|
||||
>
|
||||
<th:block th:fragment="content">
|
||||
<div class="content">
|
||||
<div class="post">
|
||||
<h1 class="post-title">所有分类</h1>
|
||||
<ul>
|
||||
<li th:replace="~{modules/category-tree :: single(categories=${categories})}"></li>
|
||||
</ul>
|
||||
<section class="devcm-terminal-window devcm-archive-hero">
|
||||
<div class="devcm-window-titlebar">
|
||||
<span class="devcm-window-dot"></span>
|
||||
<span class="devcm-window-dot"></span>
|
||||
<span class="devcm-window-dot"></span>
|
||||
</div>
|
||||
<div class="devcm-hero">
|
||||
<div class="devcm-hero__copy">
|
||||
<div class="devcm-prompt-line">
|
||||
<span th:text="|${terminalUser}@devcm:~$|">admin@devcm:~$</span>
|
||||
<span th:text="#{devcm.categories.command}">archive --view categories</span>
|
||||
</div>
|
||||
<h1 class="devcm-hero__title" th:text="#{devcm.categories.title}">Categories</h1>
|
||||
<p class="devcm-hero__desc" th:text="#{devcm.categories.description}">
|
||||
Browse posts by category and explore the site structure.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="devcm-category-grid">
|
||||
<a class="devcm-category-card" th:each="category : ${categories}" th:href="${category.status.permalink}">
|
||||
<h2>
|
||||
<i class="i-pixelarticons-folder"></i>
|
||||
<span th:text="${category.spec.displayName}">Category</span>
|
||||
</h2>
|
||||
<strong
|
||||
th:text="#{devcm.categories.articleCount(${category.status.visiblePostCount != null ? category.status.visiblePostCount : 0})}"
|
||||
>0 articles</strong
|
||||
>
|
||||
<p th:if="${not #strings.isEmpty(category.spec.description)}" th:text="${category.spec.description}">
|
||||
Category description
|
||||
</p>
|
||||
</a>
|
||||
</section>
|
||||
</th:block>
|
||||
</html>
|
||||
|
||||
+31
-45
@@ -1,68 +1,54 @@
|
||||
<!DOCTYPE html>
|
||||
<html
|
||||
xmlns:th="https://www.thymeleaf.org"
|
||||
th:replace="~{modules/layout :: html(title = |#{page.category.title(${category.spec.displayName})} - ${site.title}|, header = null, content = ~{::content}, footer = null)}"
|
||||
th:replace="~{modules/layout :: html(title = |#{page.category.title(${category.spec.displayName})} - ${site.title}|, pageType = 'category', terminalUserName = ${posts != null and posts.items != null and !#lists.isEmpty(posts.items) and posts.items[0].owner != null and !#strings.isEmpty(posts.items[0].owner.name) ? posts.items[0].owner.name : 'admin'}, content = ~{::content})}"
|
||||
>
|
||||
<th:block th:fragment="content">
|
||||
<div class="content">
|
||||
<div class="post">
|
||||
<h1
|
||||
class="post-title"
|
||||
th:text="'分类：'+${category.spec.displayName}+' ('+${category.status.visiblePostCount?:0}+' 篇文章)'"
|
||||
>
|
||||
分类：分类名 (n 篇文章)
|
||||
</h1>
|
||||
<a href="/categories"> 所有分类 </a>
|
||||
<ul>
|
||||
<li class="post-list" th:each="post : ${posts.items}">
|
||||
<a th:href="${post.status.permalink}">
|
||||
<span class="post-date" th:text="${#dates.format(post.spec.publishTime,'yyyy-MM-dd')}"
|
||||
>发布时间</span
|
||||
>
|
||||
<span class="post-separator">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</span>
|
||||
<span class="post-list-title" th:text="${post.spec.title}">文章标题</span></a>
|
||||
<span class="post-tags-inline">
|
||||
<span class="post-separator">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</span>
|
||||
<span th:each="tag : ${post.tags}">
|
||||
<section class="devcm-editor-window">
|
||||
<div class="devcm-editor-tabs">
|
||||
<div class="devcm-editor-tab devcm-editor-tab--active">
|
||||
<span th:text="${category.spec.displayName} + '.md'">category.md</span>
|
||||
<a
|
||||
th:href="${tag.status.permalink}"
|
||||
th:title="${tag.spec.displayName}"
|
||||
th:text="'#'+${tag.spec.displayName}"
|
||||
class="post-tag"
|
||||
>#Tag
|
||||
</a>
|
||||
</span>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
class="devcm-editor-tab__close"
|
||||
href="#"
|
||||
th:href="${!#strings.isEmpty(site.routes.categoriesUri) ? site.routes.categoriesUri : '/categories'}"
|
||||
th:aria-label="#{devcm.action.closeCategoryTab}"
|
||||
th:title="#{devcm.action.closeCategoryTab}"
|
||||
>×</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="devcm-editor-body">
|
||||
<h1 class="devcm-page-title">
|
||||
<span th:text="#{devcm.taxonomy.categoryTitle(${category.spec.displayName})}">Category</span>
|
||||
<small
|
||||
th:text="#{devcm.taxonomy.postCount(${category.status.visiblePostCount != null ? category.status.visiblePostCount : 0})}"
|
||||
>(0 posts)</small
|
||||
>
|
||||
</h1>
|
||||
<div class="devcm-post-stack">
|
||||
<th:block th:each="post,iterStat : ${posts.items}">
|
||||
<th:block th:replace="~{modules/post-card :: post-card(post=${post}, featured=${iterStat.index == 0})}" />
|
||||
</th:block>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="pagination" th:if="${posts.hasPrevious() || posts.hasNext()}">
|
||||
<div class="pagination__buttons">
|
||||
<span class="button previous" th:if="${posts.hasPrevious()}">
|
||||
<a th:href="@{${posts.prevUrl}}">
|
||||
<span class="button__icon"><</span>
|
||||
<span class="button__text">上一页</span>
|
||||
<span class="button__text" th:text="#{devcm.pagination.previous}">Previous</span>
|
||||
</a>
|
||||
</span>
|
||||
<span class="button next" th:if="${posts.hasNext()}">
|
||||
<a th:href="@{${posts.nextUrl}}">
|
||||
<span class="button__text">下一页</span>
|
||||
<span class="button__text" th:text="#{devcm.pagination.next}">Next</span>
|
||||
<span class="button__icon">></span>
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</th:block>
|
||||
</html>
|
||||
|
||||
+70
-36
@@ -1,64 +1,98 @@
|
||||
<!DOCTYPE html>
|
||||
<html
|
||||
xmlns:th="https://www.thymeleaf.org"
|
||||
th:replace="~{modules/layout :: html(title = ${site.title}, header = null, content = ~{::content}, footer = null)}"
|
||||
th:replace="~{modules/layout :: html(title = ${site.title}, pageType = 'home', terminalUserName = ${posts != null and posts.items != null and !#lists.isEmpty(posts.items) and posts.items[0].owner != null and !#strings.isEmpty(posts.items[0].owner.name) ? posts.items[0].owner.name : 'admin'}, content = ~{::content})}"
|
||||
>
|
||||
<th:block th:fragment="content">
|
||||
<div class="content">
|
||||
<div class="index-content framed">
|
||||
<h1 class="typed-text" th:text="${theme.config.index.index_notice_title}"></h1>
|
||||
<div th:utext="${theme.config.index.index_notice_content}"></div>
|
||||
<section class="devcm-terminal-window devcm-home-hero">
|
||||
<div class="devcm-window-titlebar">
|
||||
<span class="devcm-window-dot"></span>
|
||||
<span class="devcm-window-dot"></span>
|
||||
<span class="devcm-window-dot"></span>
|
||||
</div>
|
||||
<div class="posts">
|
||||
<div class="post on-list" th:each="post : ${posts.items}">
|
||||
<h1 class="post-title">
|
||||
<a th:text="'< ' + ${post.spec.title} + ' >'" th:href="${post.status.permalink}">Post Title</a>
|
||||
<div class="devcm-hero">
|
||||
<div class="devcm-hero__copy">
|
||||
<div class="devcm-prompt-line">
|
||||
<span th:text="|${terminalUser}@devcm:~$|">admin@devcm:~$</span> <span>./welcome.sh</span>
|
||||
</div>
|
||||
<h1 class="devcm-hero__title typed-text" th:text="${theme.config.index.index_notice_title}">
|
||||
Welcome to DevCM.
|
||||
</h1>
|
||||
<div class="post-meta">
|
||||
<span class="post-date" th:text="${#dates.format(post.spec.publishTime,'yyyy-MM-dd')}">
|
||||
Post CreateTime
|
||||
</span>
|
||||
<span class="post-separator">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</span>
|
||||
<span class="post-author" th:with="contributor = ${post.contributors[0]}" th:text="${contributor.displayName}">
|
||||
Author
|
||||
</span>
|
||||
<span class="post-tags-inline" th:each="tag : ${post.tags}">
|
||||
<a th:href="${tag.status.permalink}"
|
||||
th:title="${tag.spec.displayName}"
|
||||
th:text="'#'+${tag.spec.displayName}"
|
||||
class="post-tag"
|
||||
>#Tag
|
||||
</a>
|
||||
</span>
|
||||
<div class="devcm-hero__subtitle" th:text="#{devcm.home.subtitle}">Development Content Management.</div>
|
||||
<div class="devcm-hero__desc" th:utext="${theme.config.index.index_notice_content}">
|
||||
<span th:text="#{devcm.home.defaultContent}">A Terminal-style Halo theme.</span>
|
||||
</div>
|
||||
<div class="post-content" th:text="${post.status.excerpt}">Post Excerpt...</div>
|
||||
<div class="devcm-prompt-line devcm-prompt-line--after-typed">
|
||||
<span th:text="|${terminalUser}@devcm:~$|">admin@devcm:~$</span> <span class="devcm-cursor"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="devcm-ascii-badge" aria-hidden="true">
|
||||
<span class="devcm-ascii-badge__grid"></span>
|
||||
<div class="devcm-ascii-badge__inner">
|
||||
<span class="devcm-ascii-badge__label">DEV.CM</span>
|
||||
<pre th:utext="'DEV CM'">
|
||||
DEV
|
||||
CM</pre
|
||||
>
|
||||
<small>< <span th:text="${#dates.year(#dates.createNow())}">2026</span> /></small>
|
||||
<span class="devcm-ascii-badge__scan"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div>
|
||||
<a class="read-more button" th:href="${post.status.permalink}">阅读更多 ></a>
|
||||
<section class="devcm-editor-window" x-data="{ postsOpen: true }">
|
||||
<div class="devcm-editor-tabs">
|
||||
<div class="devcm-editor-tabs__left">
|
||||
<div class="devcm-editor-tab devcm-editor-tab--active" x-show="postsOpen">
|
||||
<span>posts.md</span>
|
||||
<a
|
||||
href="#"
|
||||
class="devcm-editor-tab__close"
|
||||
role="button"
|
||||
@click.prevent="postsOpen = false"
|
||||
th:aria-label="#{devcm.action.closeTab}"
|
||||
th:title="#{devcm.action.closeTab}"
|
||||
>
|
||||
×
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<a
|
||||
class="devcm-editor-tab__add"
|
||||
href="/console"
|
||||
th:aria-label="#{devcm.action.newPost}"
|
||||
th:title="#{devcm.action.newPost}"
|
||||
>＋</a
|
||||
>
|
||||
</div>
|
||||
<div id="devcm-posts-panel" class="devcm-editor-body devcm-post-list-body" x-show="postsOpen">
|
||||
<div class="devcm-post-stack">
|
||||
<th:block th:each="post,iterStat : ${posts.items}">
|
||||
<th:block th:replace="~{modules/post-card :: post-card(post=${post}, featured=${iterStat.index == 0})}" />
|
||||
</th:block>
|
||||
<div class="devcm-list-footnote" th:if="${posts.items != null}">
|
||||
<span th:text="#{devcm.home.postCount(${#lists.size(posts.items)})}">> Current page has 0 post(s)</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="pagination" th:if="${posts.hasPrevious() || posts.hasNext()}">
|
||||
<div class="pagination__buttons">
|
||||
<span class="button previous" th:if="${posts.hasPrevious()}">
|
||||
<a th:href="@{${posts.prevUrl}}">
|
||||
<span class="button__icon">< </span>
|
||||
<span class="button__text">上一页</span>
|
||||
<span class="button__text" th:text="#{devcm.pagination.previous}">Previous</span>
|
||||
</a>
|
||||
</span>
|
||||
<span class="button next" th:if="${posts.hasNext()}">
|
||||
<a th:href="@{${posts.nextUrl}}">
|
||||
<span class="button__text">下一页</span>
|
||||
<span class="button__text" th:text="#{devcm.pagination.next}">Next</span>
|
||||
<span class="button__icon"> ></span>
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</th:block>
|
||||
</html>
|
||||
|
||||
+32
-29
@@ -1,43 +1,46 @@
|
||||
<!DOCTYPE html>
|
||||
<html
|
||||
xmlns:th="https://www.thymeleaf.org"
|
||||
th:replace="~{modules/layout :: html(title = |#{page.links.title} - ${site.title}|, header = null, content = ~{::content}, footer = null)}"
|
||||
th:replace="~{modules/layout :: html(title = |#{page.links.title} - ${site.title}|, pageType = 'links', terminalUserName = 'admin', content = ~{::content})}"
|
||||
>
|
||||
<th:block th:fragment="content">
|
||||
<script th:src="@{/assets/libs/pixelit.js}"></script>
|
||||
<div>
|
||||
<section class="">
|
||||
<div class="">
|
||||
<div class="mb-6" th:each="group : ${groups}">
|
||||
<div class="">
|
||||
<h2
|
||||
class="post-title"
|
||||
th:text="${!#strings.isEmpty(group.spec.displayName) ? group.spec.displayName:'友情链接'}"
|
||||
<section class="devcm-editor-window">
|
||||
<div class="devcm-editor-tabs">
|
||||
<div class="devcm-editor-tab devcm-editor-tab--active">
|
||||
<span>links.md</span>
|
||||
<a
|
||||
class="devcm-editor-tab__close"
|
||||
href="/"
|
||||
th:aria-label="#{devcm.action.closeLinksTab}"
|
||||
th:title="#{devcm.action.closeLinksTab}"
|
||||
>×</a
|
||||
>
|
||||
链接分组
|
||||
</div>
|
||||
</div>
|
||||
<div class="devcm-editor-body">
|
||||
<div class="devcm-link-group" th:each="group : ${groups}">
|
||||
<h2
|
||||
class="devcm-page-title"
|
||||
th:text="${!#strings.isEmpty(group.spec.displayName) ? group.spec.displayName : #messages.msg('devcm.links.defaultGroup')}"
|
||||
>
|
||||
Links
|
||||
</h2>
|
||||
</div>
|
||||
<div class="">
|
||||
<a th:each="link : ${group.links}" th:href="${link.spec.url}" target="_blank" class="mb-2 block">
|
||||
<div class="flex bg-[#a9c1e2] dark:bg-[#3b5070] p-1">
|
||||
<div class="">
|
||||
<img class="w-16" src="sky.jpg" th:src="${link.spec.logo}" id="pixelitimg" th:alt="${link.spec.displayName}">
|
||||
</div>
|
||||
<div class="ml-4 flex flex-col justify-around">
|
||||
<div class="m-0 text-[#003e8a] dark:text-[#6ca4f8]"><span th:text="${link.spec.displayName}"></span><span th:text="| (${link.spec.url})|"></span></div>
|
||||
<div class="m-0 text-[#3e3e3e] dark:text-[#8b949e]" th:text="${link.spec.description}"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="devcm-link-grid">
|
||||
<a class="devcm-link-card" th:each="link : ${group.links}" th:href="${link.spec.url}" target="_blank">
|
||||
<img
|
||||
th:if="${not #strings.isEmpty(link.spec.logo)}"
|
||||
th:src="${link.spec.logo}"
|
||||
th:alt="${link.spec.displayName}"
|
||||
/>
|
||||
<span class="devcm-link-card__body">
|
||||
<strong th:text="${link.spec.displayName}">Link</strong>
|
||||
<small th:text="${link.spec.url}">https://example.com</small>
|
||||
<span th:text="${link.spec.description}">description</span>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<script>
|
||||
//create object
|
||||
const px = new pixelit();
|
||||
px.draw().pixelate();
|
||||
</script>
|
||||
</div>
|
||||
</th:block>
|
||||
</html>
|
||||
|
||||
@@ -0,0 +1,226 @@
|
||||
<aside class="devcm-activity" th:fragment="activity-bar (pageType)" th:aria-label="#{devcm.activity.aria}">
|
||||
<span class="devcm-activity__icon-bank" aria-hidden="true">
|
||||
<i class="i-pixelarticons-folder"></i>
|
||||
<i class="i-pixelarticons-search"></i>
|
||||
<i class="i-pixelarticons-archive"></i>
|
||||
<i class="i-pixelarticons-script-text"></i>
|
||||
<i class="i-pixelarticons-label"></i>
|
||||
<i class="i-pixelarticons-user"></i>
|
||||
<i class="i-radix-icons-gear"></i>
|
||||
<i class="i-pixelarticons-git-branch"></i>
|
||||
<i class="i-pixelarticons-git-commit"></i>
|
||||
<i class="i-pixelarticons-git-merge"></i>
|
||||
<i class="i-pixelarticons-git-pull-request"></i>
|
||||
<i class="i-pixelarticons-github"></i>
|
||||
</span>
|
||||
|
||||
<th:block
|
||||
th:with="items=${theme.config.activity.activity_items},
|
||||
archiveActivityItem=${items != null and !#lists.isEmpty(items) ? items.^[type == 'archive' or key == 'archive'] : null},
|
||||
categoriesActivityItem=${items != null and !#lists.isEmpty(items) ? items.^[type == 'categories' or key == 'categories'] : null},
|
||||
tagsActivityItem=${items != null and !#lists.isEmpty(items) ? items.^[type == 'tags' or key == 'tags'] : null},
|
||||
activityArchiveHref=${!#strings.isEmpty(site.routes.archivesUri) ? site.routes.archivesUri : (archiveActivityItem != null and !#strings.isEmpty(archiveActivityItem.url) ? archiveActivityItem.url : (archiveActivityItem != null and !#strings.isEmpty(archiveActivityItem.href) ? archiveActivityItem.href : '/archives'))},
|
||||
activityCategoriesHref=${!#strings.isEmpty(site.routes.categoriesUri) ? site.routes.categoriesUri : (categoriesActivityItem != null and !#strings.isEmpty(categoriesActivityItem.url) ? categoriesActivityItem.url : (categoriesActivityItem != null and !#strings.isEmpty(categoriesActivityItem.href) ? categoriesActivityItem.href : '/categories'))},
|
||||
activityTagsHref=${!#strings.isEmpty(site.routes.tagsUri) ? site.routes.tagsUri : (tagsActivityItem != null and !#strings.isEmpty(tagsActivityItem.url) ? tagsActivityItem.url : (tagsActivityItem != null and !#strings.isEmpty(tagsActivityItem.href) ? tagsActivityItem.href : '/tags'))}"
|
||||
>
|
||||
<div class="devcm-activity__group devcm-activity__group--up">
|
||||
<th:block th:if="${items != null and !#lists.isEmpty(items)}">
|
||||
<th:block
|
||||
th:each="item : ${items}"
|
||||
th:with="placement=${#strings.isEmpty(item.position) ? 'up' : item.position},
|
||||
itemType=${!#strings.isEmpty(item.type) ? item.type : (!#strings.isEmpty(item.key) ? item.key : 'custom')},
|
||||
entryAction=${itemType == 'search' or item.action == 'search' ? 'search' : 'link'},
|
||||
entryConfiguredHref=${!#strings.isEmpty(item.url) ? item.url : (!#strings.isEmpty(item.href) ? item.href : '#')},
|
||||
entryHref=${entryAction == 'search' ? '#' : (itemType == 'archive' ? activityArchiveHref : (itemType == 'categories' ? activityCategoriesHref : (itemType == 'tags' ? activityTagsHref : entryConfiguredHref)))},
|
||||
entryLabel=${!#strings.isEmpty(item.label) ? item.label : (!#strings.isEmpty(item.labelKey) ? #messages.msg(item.labelKey) : #messages.msg('devcm.activity.link'))}"
|
||||
>
|
||||
<a
|
||||
class="devcm-activity__button"
|
||||
th:if="${placement != 'down' and itemType != 'login' and itemType != 'git' and (item.enabled == null or item.enabled == true or item.enabled == 'true') and (entryAction != 'search' or pluginFinder.available('PluginSearchWidget'))}"
|
||||
th:classappend="${(!#strings.isEmpty(item.activeTypes) and #strings.contains(',' + item.activeTypes + ',', ',' + pageType + ',')) or (itemType == 'home' and pageType == 'home') or (itemType == 'archive' and (pageType == 'archive' or pageType == 'post')) or (itemType == 'categories' and (pageType == 'categories' or pageType == 'category')) or (itemType == 'tags' and (pageType == 'tags' or pageType == 'tag'))} ? ' devcm-activity__button--active' : ''"
|
||||
th:href="${entryHref}"
|
||||
th:target="${item.external == true or item.external == 'true'} ? '_blank' : null"
|
||||
th:rel="${item.external == true or item.external == 'true'} ? 'noopener noreferrer' : null"
|
||||
th:title="${entryLabel}"
|
||||
th:attr="data-label=${entryLabel},aria-label=${entryLabel},data-devcm-action=${entryAction}"
|
||||
>
|
||||
<i th:class="|i-pixelarticons-${!#strings.isEmpty(item.icon) ? item.icon : 'file'}|"></i>
|
||||
</a>
|
||||
<a
|
||||
class="devcm-activity__button"
|
||||
sec:authorize="isAnonymous()"
|
||||
th:if="${placement != 'down' and itemType == 'login' and (item.enabled == null or item.enabled == true or item.enabled == 'true')}"
|
||||
th:href="${entryHref}"
|
||||
th:target="${item.external == true or item.external == 'true'} ? '_blank' : null"
|
||||
th:rel="${item.external == true or item.external == 'true'} ? 'noopener noreferrer' : null"
|
||||
th:title="${entryLabel}"
|
||||
th:attr="data-label=${entryLabel},aria-label=${entryLabel},data-devcm-action=${entryAction}"
|
||||
>
|
||||
<i class="i-pixelarticons-user"></i>
|
||||
</a>
|
||||
<a
|
||||
class="devcm-activity__button"
|
||||
sec:authorize="isAuthenticated()"
|
||||
th:if="${placement != 'down' and itemType == 'login' and (item.enabled == null or item.enabled == true or item.enabled == 'true')}"
|
||||
href="/console"
|
||||
th:title="#{devcm.activity.console}"
|
||||
th:attr="data-label=#{devcm.activity.console},aria-label=#{devcm.activity.console},data-devcm-action='link'"
|
||||
>
|
||||
<i class="i-radix-icons-gear"></i>
|
||||
</a>
|
||||
<a
|
||||
class="devcm-activity__button"
|
||||
sec:authorize="isAuthenticated()"
|
||||
th:if="${placement != 'down' and itemType == 'login' and (item.enabled == null or item.enabled == true or item.enabled == 'true')}"
|
||||
href="/logout"
|
||||
th:title="#{devcm.activity.logout}"
|
||||
th:attr="data-label=#{devcm.activity.logout},aria-label=#{devcm.activity.logout},data-devcm-action='link'"
|
||||
>
|
||||
<i class="i-pixelarticons-user"></i>
|
||||
</a>
|
||||
</th:block>
|
||||
</th:block>
|
||||
|
||||
<th:block th:if="${items == null or #lists.isEmpty(items)}">
|
||||
<a
|
||||
class="devcm-activity__button"
|
||||
th:classappend="${pageType == 'home'} ? ' devcm-activity__button--active' : ''"
|
||||
href="/"
|
||||
th:title="#{devcm.activity.explorer}"
|
||||
th:attr="data-label=#{devcm.activity.explorer},aria-label=#{devcm.activity.explorer}"
|
||||
>
|
||||
<i class="i-pixelarticons-folder"></i>
|
||||
</a>
|
||||
<a
|
||||
class="devcm-activity__button"
|
||||
th:if="${pluginFinder.available('PluginSearchWidget')}"
|
||||
href="#"
|
||||
data-devcm-action="search"
|
||||
th:title="#{devcm.activity.search}"
|
||||
th:attr="data-label=#{devcm.activity.search},aria-label=#{devcm.activity.search}"
|
||||
>
|
||||
<i class="i-pixelarticons-search"></i>
|
||||
</a>
|
||||
<a
|
||||
class="devcm-activity__button"
|
||||
th:classappend="${pageType == 'archive' or pageType == 'post'} ? ' devcm-activity__button--active' : ''"
|
||||
href="#"
|
||||
th:href="${activityArchiveHref}"
|
||||
th:title="#{devcm.activity.archive}"
|
||||
th:attr="data-label=#{devcm.activity.archive},aria-label=#{devcm.activity.archive}"
|
||||
>
|
||||
<i class="i-pixelarticons-archive"></i>
|
||||
</a>
|
||||
<a
|
||||
class="devcm-activity__button"
|
||||
th:classappend="${pageType == 'categories' or pageType == 'category'} ? ' devcm-activity__button--active' : ''"
|
||||
href="#"
|
||||
th:href="${activityCategoriesHref}"
|
||||
th:title="#{devcm.activity.categories}"
|
||||
th:attr="data-label=#{devcm.activity.categories},aria-label=#{devcm.activity.categories}"
|
||||
>
|
||||
<i class="i-pixelarticons-script-text"></i>
|
||||
</a>
|
||||
<a
|
||||
class="devcm-activity__button"
|
||||
th:classappend="${pageType == 'tags' or pageType == 'tag'} ? ' devcm-activity__button--active' : ''"
|
||||
href="#"
|
||||
th:href="${activityTagsHref}"
|
||||
th:title="#{devcm.activity.tags}"
|
||||
th:attr="data-label=#{devcm.activity.tags},aria-label=#{devcm.activity.tags}"
|
||||
>
|
||||
<i class="i-pixelarticons-label"></i>
|
||||
</a>
|
||||
</th:block>
|
||||
</div>
|
||||
|
||||
<div class="devcm-activity__group devcm-activity__group--down">
|
||||
<th:block th:if="${items != null and !#lists.isEmpty(items)}">
|
||||
<th:block
|
||||
th:each="item : ${items}"
|
||||
th:with="placement=${#strings.isEmpty(item.position) ? 'up' : item.position},
|
||||
itemType=${!#strings.isEmpty(item.type) ? item.type : (!#strings.isEmpty(item.key) ? item.key : 'custom')},
|
||||
entryAction=${itemType == 'search' or item.action == 'search' ? 'search' : 'link'},
|
||||
entryConfiguredHref=${!#strings.isEmpty(item.url) ? item.url : (!#strings.isEmpty(item.href) ? item.href : '#')},
|
||||
entryHref=${entryAction == 'search' ? '#' : (itemType == 'archive' ? activityArchiveHref : (itemType == 'categories' ? activityCategoriesHref : (itemType == 'tags' ? activityTagsHref : entryConfiguredHref)))},
|
||||
entryLabel=${!#strings.isEmpty(item.label) ? item.label : (!#strings.isEmpty(item.labelKey) ? #messages.msg(item.labelKey) : #messages.msg('devcm.activity.link'))}"
|
||||
>
|
||||
<a
|
||||
class="devcm-activity__button"
|
||||
th:if="${placement == 'down' and itemType != 'login' and itemType != 'git' and (item.enabled == null or item.enabled == true or item.enabled == 'true') and (entryAction != 'search' or pluginFinder.available('PluginSearchWidget'))}"
|
||||
th:classappend="${(!#strings.isEmpty(item.activeTypes) and #strings.contains(',' + item.activeTypes + ',', ',' + pageType + ',')) or (itemType == 'home' and pageType == 'home') or (itemType == 'archive' and (pageType == 'archive' or pageType == 'post')) or (itemType == 'categories' and (pageType == 'categories' or pageType == 'category')) or (itemType == 'tags' and (pageType == 'tags' or pageType == 'tag'))} ? ' devcm-activity__button--active' : ''"
|
||||
th:href="${entryHref}"
|
||||
th:target="${item.external == true or item.external == 'true'} ? '_blank' : null"
|
||||
th:rel="${item.external == true or item.external == 'true'} ? 'noopener noreferrer' : null"
|
||||
th:title="${entryLabel}"
|
||||
th:attr="data-label=${entryLabel},aria-label=${entryLabel},data-devcm-action=${entryAction}"
|
||||
>
|
||||
<i th:class="|i-pixelarticons-${!#strings.isEmpty(item.icon) ? item.icon : 'file'}|"></i>
|
||||
</a>
|
||||
<a
|
||||
class="devcm-activity__button"
|
||||
sec:authorize="isAnonymous()"
|
||||
th:if="${placement == 'down' and itemType == 'login' and (item.enabled == null or item.enabled == true or item.enabled == 'true')}"
|
||||
th:href="${entryHref}"
|
||||
th:target="${item.external == true or item.external == 'true'} ? '_blank' : null"
|
||||
th:rel="${item.external == true or item.external == 'true'} ? 'noopener noreferrer' : null"
|
||||
th:title="${entryLabel}"
|
||||
th:attr="data-label=${entryLabel},aria-label=${entryLabel},data-devcm-action=${entryAction}"
|
||||
>
|
||||
<i class="i-pixelarticons-user"></i>
|
||||
</a>
|
||||
<a
|
||||
class="devcm-activity__button"
|
||||
sec:authorize="isAuthenticated()"
|
||||
th:if="${placement == 'down' and itemType == 'login' and (item.enabled == null or item.enabled == true or item.enabled == 'true')}"
|
||||
href="/console"
|
||||
th:title="#{devcm.activity.console}"
|
||||
th:attr="data-label=#{devcm.activity.console},aria-label=#{devcm.activity.console},data-devcm-action='link'"
|
||||
>
|
||||
<i class="i-radix-icons-gear"></i>
|
||||
</a>
|
||||
<a
|
||||
class="devcm-activity__button"
|
||||
sec:authorize="isAuthenticated()"
|
||||
th:if="${placement == 'down' and itemType == 'login' and (item.enabled == null or item.enabled == true or item.enabled == 'true')}"
|
||||
href="/logout"
|
||||
th:title="#{devcm.activity.logout}"
|
||||
th:attr="data-label=#{devcm.activity.logout},aria-label=#{devcm.activity.logout},data-devcm-action='link'"
|
||||
>
|
||||
<i class="i-pixelarticons-user"></i>
|
||||
</a>
|
||||
</th:block>
|
||||
</th:block>
|
||||
|
||||
<th:block th:if="${items == null or #lists.isEmpty(items)}">
|
||||
<a
|
||||
class="devcm-activity__button"
|
||||
sec:authorize="isAnonymous()"
|
||||
href="/console"
|
||||
th:title="#{devcm.activity.login}"
|
||||
th:attr="data-label=#{devcm.activity.login},aria-label=#{devcm.activity.login}"
|
||||
>
|
||||
<i class="i-pixelarticons-user"></i>
|
||||
</a>
|
||||
<a
|
||||
class="devcm-activity__button"
|
||||
sec:authorize="isAuthenticated()"
|
||||
href="/console"
|
||||
th:title="#{devcm.activity.console}"
|
||||
th:attr="data-label=#{devcm.activity.console},aria-label=#{devcm.activity.console}"
|
||||
>
|
||||
<i class="i-radix-icons-gear"></i>
|
||||
</a>
|
||||
<a
|
||||
class="devcm-activity__button"
|
||||
sec:authorize="isAuthenticated()"
|
||||
href="/logout"
|
||||
th:title="#{devcm.activity.logout}"
|
||||
th:attr="data-label=#{devcm.activity.logout},aria-label=#{devcm.activity.logout}"
|
||||
>
|
||||
<i class="i-pixelarticons-user"></i>
|
||||
</a>
|
||||
</th:block>
|
||||
</div>
|
||||
</th:block>
|
||||
</aside>
|
||||
@@ -1,10 +1,33 @@
|
||||
<ul th:fragment="next (categories)">
|
||||
<li th:fragment="single (categories)" th:each="category : ${categories}">
|
||||
<a th:href="@{${category.status.permalink}}">
|
||||
<span th:text="${category.spec.displayName}+' ('+${category.status.visiblePostCount?:0}+' 篇文章)'"> </span>
|
||||
</a>
|
||||
<th:block th:if="${not #lists.isEmpty(category.children)}">
|
||||
<ul th:fragment="next (categories)" class="devcm-tree__nested">
|
||||
<li th:fragment="single (categories)" th:each="category : ${categories}" class="devcm-tree__node">
|
||||
<details class="devcm-tree-folder" open th:if="${not #lists.isEmpty(category.children)}">
|
||||
<summary class="devcm-tree__item devcm-tree__item--folder">
|
||||
<span class="devcm-tree__chev" aria-hidden="true"></span>
|
||||
<i class="devcm-tree__icon i-pixelarticons-folder"></i>
|
||||
<span th:text="${category.spec.displayName}">Category</span>
|
||||
<a
|
||||
class="devcm-tree__open"
|
||||
th:href="@{${category.status.permalink}}"
|
||||
th:title="#{devcm.action.open}"
|
||||
th:aria-label="#{devcm.action.openCategory}"
|
||||
>↗</a
|
||||
>
|
||||
</summary>
|
||||
<th:block th:replace="~{modules/category-tree :: next (categories=${category.children})}"></th:block>
|
||||
</th:block>
|
||||
</details>
|
||||
<a
|
||||
class="devcm-tree__item"
|
||||
th:unless="${not #lists.isEmpty(category.children)}"
|
||||
th:href="@{${category.status.permalink}}"
|
||||
>
|
||||
<span class="devcm-tree__chev" aria-hidden="true"></span>
|
||||
<i class="devcm-tree__icon i-pixelarticons-folder"></i>
|
||||
<span th:text="${category.spec.displayName}">Category</span>
|
||||
<span
|
||||
class="devcm-tree__count"
|
||||
th:text="${category.status.visiblePostCount != null ? category.status.visiblePostCount : 0}"
|
||||
>0</span
|
||||
>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
@@ -0,0 +1,26 @@
|
||||
<th:block xmlns:th="https://www.thymeleaf.org">
|
||||
<div class="devcm-terminal-window" th:fragment="terminal-window (content)">
|
||||
<div class="devcm-window-titlebar">
|
||||
<span class="devcm-window-dot"></span>
|
||||
<span class="devcm-window-dot"></span>
|
||||
<span class="devcm-window-dot"></span>
|
||||
</div>
|
||||
<th:block th:replace="${content}" />
|
||||
</div>
|
||||
|
||||
<div class="devcm-editor-window" th:fragment="editor-window (tabTitle, content)">
|
||||
<div class="devcm-editor-tabs">
|
||||
<div class="devcm-editor-tab devcm-editor-tab--active">
|
||||
<span th:text="${tabTitle}">_posts.md</span>
|
||||
<a
|
||||
class="devcm-editor-tab__close"
|
||||
href="/"
|
||||
th:aria-label="#{devcm.action.closeTab}"
|
||||
th:title="#{devcm.action.closeTab}"
|
||||
>×</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<th:block th:replace="${content}" />
|
||||
</div>
|
||||
</th:block>
|
||||
@@ -0,0 +1,47 @@
|
||||
<aside class="devcm-sidebar" th:fragment="explorer (pageType)" th:aria-label="#{devcm.explorer.title}">
|
||||
<section class="devcm-side-section">
|
||||
<div class="devcm-section-title">
|
||||
<span th:text="#{devcm.explorer.title}">EXPLORER</span>
|
||||
<span aria-hidden="true">...</span>
|
||||
</div>
|
||||
<div class="devcm-tree" th:with="menu = ${menuFinder.getPrimary()}">
|
||||
<details class="devcm-tree-folder" open>
|
||||
<summary class="devcm-tree__item devcm-tree__item--folder">
|
||||
<span class="devcm-tree__chev" aria-hidden="true"></span>
|
||||
<i class="devcm-tree__icon i-pixelarticons-folder"></i>
|
||||
<span th:text="#{devcm.explorer.pages}">pages</span>
|
||||
</summary>
|
||||
<div class="devcm-tree__nested">
|
||||
<th:block th:if="${menu != null}" th:replace="~{modules/menu-tree :: items(items=${menu.menuItems})}" />
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="devcm-side-section" th:if="${categories != null}">
|
||||
<div class="devcm-section-title">
|
||||
<span th:text="#{devcm.explorer.categories}">CATEGORIES</span>
|
||||
<span aria-hidden="true">...</span>
|
||||
</div>
|
||||
<ul class="devcm-tree devcm-tree--list">
|
||||
<li th:replace="~{modules/category-tree :: single(categories=${categories})}"></li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section class="devcm-side-section" th:if="${tags != null}">
|
||||
<div class="devcm-section-title">
|
||||
<span th:text="#{devcm.explorer.tags}">TAGS CLOUD</span>
|
||||
<span aria-hidden="true">...</span>
|
||||
</div>
|
||||
<div class="devcm-tag-cloud">
|
||||
<a
|
||||
class="devcm-tag"
|
||||
th:each="tag : ${tags}"
|
||||
th:href="${tag.status.permalink}"
|
||||
th:text="'#' + ${tag.spec.displayName}"
|
||||
>
|
||||
#tag
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
</aside>
|
||||
@@ -3,7 +3,10 @@
|
||||
<div class="copyright">
|
||||
<span>
|
||||
© <span th:text="${#dates.year(#dates.createNow())}">2024</span> Powered by
|
||||
<a th:href="${theme.config.footer.footer_powered_link}" th:text="${theme.config.footer.footer_powered_text}"></a>
|
||||
<a
|
||||
th:href="${theme.config.footer.footer_powered_link}"
|
||||
th:text="${theme.config.footer.footer_powered_text}"
|
||||
></a>
|
||||
</span>
|
||||
</div>
|
||||
<div class="beian">
|
||||
@@ -16,7 +19,7 @@
|
||||
></a
|
||||
></span>
|
||||
<span th:if="${not #strings.isEmpty(theme.config.beian.gongan_text)}">
|
||||
<img th:src="@{/assets/image/gongan.png}" style="display:inline-block; height: 1.2em;">
|
||||
<img class="beian__icon" th:src="@{/assets/image/gongan.png}" alt="" />
|
||||
<a
|
||||
href="https://www.beian.gov.cn/"
|
||||
target="_blank"
|
||||
|
||||
+23
-68
@@ -1,77 +1,32 @@
|
||||
<header class="header" xmlns:th="http://www.w3.org/1999/xhtml">
|
||||
<div th:fragment="header" th:with="menu = ${menuFinder.getPrimary()}">
|
||||
<div class="header__inner">
|
||||
<a class="logo" href="/" style="text-decoration: none">
|
||||
<img class="icon" th:if="${not #strings.isEmpty(theme.config.basic.logo)}" th:src="${theme.config.basic.logo}" alt="Logo" />
|
||||
<div class="text" th:if="${not #strings.isEmpty(theme.config.basic.title)}" th:text="${theme.config.basic.title}"></div>
|
||||
<header class="devcm-topbar header" th:fragment="header (pageType)" th:with="menu = ${menuFinder.getPrimary()}">
|
||||
<div class="devcm-topbar__main header__inner">
|
||||
<a class="devcm-brand logo" href="/" th:aria-label="#{devcm.explorer.home}">
|
||||
<img
|
||||
class="devcm-brand__image icon"
|
||||
th:if="${not #strings.isEmpty(theme.config.basic.logo)}"
|
||||
th:src="${theme.config.basic.logo}"
|
||||
alt="Logo"
|
||||
/>
|
||||
<span class="devcm-brand__mark" th:unless="${not #strings.isEmpty(theme.config.basic.logo)}">DEV<br />CM</span>
|
||||
<span class="devcm-brand__name">DevCM</span>
|
||||
</a>
|
||||
<div class="header__center" x-data="headerDividing()">
|
||||
<div class="dividing" :class="{ 'sticky': isSticky }"></div>
|
||||
|
||||
<div class="devcm-prompt-stream header__center">
|
||||
<span class="devcm-prompt-stream__name" th:text="|${terminalUser}@devcm:~$|">admin@devcm:~$</span>
|
||||
<span class="devcm-prompt-stream__line dividing" aria-hidden="true"></span>
|
||||
</div>
|
||||
|
||||
<div class="devcm-topbar__actions">
|
||||
<button
|
||||
type="button"
|
||||
class="button"
|
||||
th:if="${pluginFinder.available('PluginSearchWidget')}"
|
||||
onclick="SearchWidget.open()"
|
||||
class="devcm-icon-button button"
|
||||
x-data="themeMode()"
|
||||
@click="handleToggleThemeMode()"
|
||||
th:aria-label="#{devcm.action.toggleTheme}"
|
||||
th:title="#{devcm.action.toggleTheme}"
|
||||
>
|
||||
<th:block th:unless="${theme.config.basic.pixel_style}">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1.5rem" height="1.5rem" viewBox="0 0 24 24">
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="m19.6 21l-6.3-6.3q-.75.6-1.725.95T9.5 16q-2.725 0-4.612-1.888T3 9.5q0-2.725 1.888-4.612T9.5 3q2.725 0 4.612 1.888T16 9.5q0 1.1-.35 2.075T14.7 13.3l6.3 6.3l-1.4 1.4ZM9.5 14q1.875 0 3.188-1.313T14 9.5q0-1.875-1.313-3.188T9.5 5Q7.625 5 6.312 6.313T5 9.5q0 1.875 1.313 3.188T9.5 14Z"
|
||||
/>
|
||||
</svg>
|
||||
</th:block>
|
||||
<th:block th:if="${theme.config.basic.pixel_style}">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1.5rem" height="1.5rem" viewBox="0 0 24 24"><path fill="currentColor" d="M6 2h8v2H6zM4 6V4h2v2zm0 8H2V6h2zm2 2H4v-2h2zm8 0v2H6v-2zm2-2h-2v2h2v2h2v2h2v2h2v-2h-2v-2h-2v-2h-2zm0-8h2v8h-2zm0 0V4h-2v2z"/></svg>
|
||||
</th:block>
|
||||
</button>
|
||||
<button type="button" class="button" x-data="themeMode()" @click="handleToggleThemeMode()">
|
||||
<th:block th:unless="${theme.config.basic.pixel_style}">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
style="vertical-align: -0.125em"
|
||||
width="1.5rem"
|
||||
height="1.5rem"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M7.5 2c-1.79 1.15-3 3.18-3 5.5s1.21 4.35 3.03 5.5C4.46 13 2 10.54 2 7.5A5.5 5.5 0 0 1 7.5 2m11.57 1.5l1.43 1.43L4.93 20.5L3.5 19.07L19.07 3.5m-6.18 2.43L11.41 5L9.97 6l.42-1.7L9 3.24l1.75-.12l.58-1.65L12 3.1l1.73.03l-1.35 1.13l.51 1.67m-3.3 3.61l-1.16-.73l-1.12.78l.34-1.32l-1.09-.83l1.36-.09l.45-1.29l.51 1.27l1.36.03l-1.05.87l.4 1.31M19 13.5a5.5 5.5 0 0 1-5.5 5.5c-1.22 0-2.35-.4-3.26-1.07l7.69-7.69c.67.91 1.07 2.04 1.07 3.26m-4.4 6.58l2.77-1.15l-.24 3.35l-2.53-2.2m4.33-2.7l1.15-2.77l2.2 2.54l-3.35.23m1.15-4.96l-1.14-2.78l3.34.24l-2.2 2.54M9.63 18.93l2.77 1.15l-2.53 2.19l-.24-3.34Z"
|
||||
/>
|
||||
</svg>
|
||||
</th:block>
|
||||
<th:block th:if="${theme.config.basic.pixel_style}">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1.5rem" height="1.5rem" viewBox="0 0 24 24"><path fill="currentColor" d="M11 0h2v4h-2zm1 12H8v2H4v2H2v4h2v2h10v-2h2v-4h-2v-2h-2zm0 2v2h2v4H4v-4h4v2h2v-2H8v-2zM8 6h6v2H8zm0 2v2H6V8zm8 2h-2V8h2zm0 0h2v2h-2zm4-8h2v2h-2zm0 2v2h-2V4zM2 2h2v2H2zm2 2h2v2H4zm20 7h-4v2h4z"/></svg>
|
||||
</th:block>
|
||||
<i class="i-pixelarticons-sun-alt"></i>
|
||||
</button>
|
||||
</div>
|
||||
<nav class="menu">
|
||||
<ul th:if="${menu != null} and ${not #lists.isEmpty(menu.menuItems)}" class="menu__inner">
|
||||
<li th:each="menuItem : ${menu.menuItems}" x-data="headerMenu()" @mouseenter="handleToggleMenu()" @mouseleave="handleToggleMenu()">
|
||||
<a
|
||||
class="text-gray-600 hover:text-blue-600"
|
||||
th:href="${menuItem.status.href}"
|
||||
th:target="${menuItem.spec.target?.value}"
|
||||
th:text="${menuItem.status.displayName + (not #lists.isEmpty(menuItem.children) ? '▾' : '')}"
|
||||
></a>
|
||||
<ul
|
||||
th:if="${not #lists.isEmpty(menuItem.children)}"
|
||||
class="menu__sub-inner"
|
||||
:class="{'open': isOpen}"
|
||||
>
|
||||
<li th:each="childMenuItem : ${menuItem.children}">
|
||||
<a
|
||||
class="text-gray-600 hover:text-blue-600"
|
||||
th:href="${childMenuItem.status.href}"
|
||||
th:target="${childMenuItem.spec.target?.value}"
|
||||
th:text="${childMenuItem.status.displayName}"
|
||||
></a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
+32
-19
@@ -1,36 +1,49 @@
|
||||
<!DOCTYPE html>
|
||||
<html
|
||||
xmlns:th="https://www.thymeleaf.org"
|
||||
data-color-scheme="dark"
|
||||
th:lang="${#locale.toLanguageTag}"
|
||||
th:fragment="html (header, content, footer)">
|
||||
th:fragment="html (title, pageType, terminalUserName, content)"
|
||||
>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="icon" type="image/x-icon" th:href="${theme.config.basic.favicon}">
|
||||
<link rel="icon" type="image/x-icon" th:href="${theme.config.basic.favicon}" />
|
||||
<title th:text="${title}"></title>
|
||||
<link rel="manifest" th:href="@{/assets/dist/manifest.json}" />
|
||||
<link rel="stylesheet" th:href="@{/assets/dist/main.css?version={version}(version=${theme.spec.version})}" href="./assets/dist/style.css" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
th:href="@{/assets/dist/main.css?version={version}&build=devcm-ide-1.2.10-softlight1(version=${theme.spec.version})}"
|
||||
href="./assets/dist/style.css"
|
||||
/>
|
||||
</head>
|
||||
<!-- 根据情况判断是否添加开启像素化样式 -->
|
||||
<body class="main" th:classappend="${theme.config.basic.pixel_style} ? 'pixel_style' : '' ">
|
||||
<div class="center headings--one-size container">
|
||||
<th:block th:if="${header != null}">
|
||||
<th:block th:replace="${header}" />
|
||||
</th:block>
|
||||
<th:block th:if="${header == null}">
|
||||
<th:block th:replace="~{modules/header :: header(isHome = true)}" />
|
||||
</th:block>
|
||||
<body
|
||||
class="main devcm-body"
|
||||
th:classappend="${theme.config.basic.pixel_style == true or theme.config.basic.pixel_style == 'true'} ? ' pixel_style' : ''"
|
||||
th:with="currentPageType=${#strings.isEmpty(pageType) ? 'home' : pageType},
|
||||
terminalUser=${#strings.isEmpty(terminalUserName) ? 'admin' : terminalUserName}"
|
||||
>
|
||||
<div class="devcm-shell" th:classappend="| devcm-shell--${currentPageType}|">
|
||||
<div class="devcm-app">
|
||||
<th:block th:replace="~{modules/header :: header(pageType=${currentPageType})}" />
|
||||
|
||||
<div class="devcm-workspace">
|
||||
<th:block th:replace="~{modules/activity-bar :: activity-bar(pageType=${currentPageType})}" />
|
||||
<th:block th:replace="~{modules/explorer :: explorer(pageType=${currentPageType})}" />
|
||||
|
||||
<main class="devcm-editor" id="main-content">
|
||||
<th:block th:replace="${content}" />
|
||||
</main>
|
||||
|
||||
<th:block th:if="${footer == null}">
|
||||
<th:block th:replace="~{modules/footer}" />
|
||||
</th:block>
|
||||
<th:block th:if="${footer != null}">
|
||||
<th:block th:replace="${footer}" />
|
||||
</th:block>
|
||||
<th:block th:replace="~{modules/right-panel :: right-panel(pageType=${currentPageType})}" />
|
||||
</div>
|
||||
<script th:src="@{/assets/dist/main.js?version={version}(version=${theme.spec.version})}"></script>
|
||||
|
||||
<th:block th:replace="~{modules/statusbar :: statusbar(pageType=${currentPageType})}" />
|
||||
</div>
|
||||
</div>
|
||||
<script
|
||||
th:src="@{/assets/dist/main.js?version={version}&build=devcm-ide-1.2.10-softlight1(version=${theme.spec.version})}"
|
||||
></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -0,0 +1,63 @@
|
||||
<th:block th:fragment="items (items)">
|
||||
<th:block
|
||||
th:each="menuItem : ${items}"
|
||||
th:with="menuHref=${menuItem.status.href},
|
||||
menuTarget=${menuItem.spec.target?.value},
|
||||
menuExternal=${!#strings.isEmpty(menuHref) and (#strings.startsWith(menuHref, 'http://') or #strings.startsWith(menuHref, 'https://') or menuTarget == '_blank')}"
|
||||
>
|
||||
<details class="devcm-tree-folder" open th:if="${not #lists.isEmpty(menuItem.children)}">
|
||||
<summary class="devcm-tree__item devcm-tree__item--folder">
|
||||
<span class="devcm-tree__chev" aria-hidden="true"></span>
|
||||
<i class="devcm-tree__icon i-pixelarticons-folder"></i>
|
||||
<span th:text="${menuItem.status.displayName}">Folder</span>
|
||||
<a
|
||||
class="devcm-tree__open devcm-tree__open--external"
|
||||
th:if="${menuExternal}"
|
||||
th:href="${menuHref}"
|
||||
th:target="${menuTarget}"
|
||||
rel="noopener noreferrer"
|
||||
th:title="#{devcm.action.open}"
|
||||
th:aria-label="#{devcm.action.openPage}"
|
||||
>
|
||||
<i class="i-pixelarticons-external-link"></i>
|
||||
</a>
|
||||
<a
|
||||
class="devcm-tree__open"
|
||||
th:unless="${menuExternal}"
|
||||
th:href="${menuHref}"
|
||||
th:target="${menuTarget}"
|
||||
th:title="#{devcm.action.open}"
|
||||
th:aria-label="#{devcm.action.openPage}"
|
||||
>
|
||||
<i class="i-pixelarticons-open"></i>
|
||||
</a>
|
||||
</summary>
|
||||
<div class="devcm-tree__nested">
|
||||
<th:block th:replace="~{modules/menu-tree :: items(items=${menuItem.children})}" />
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<a
|
||||
class="devcm-tree__item devcm-tree__item--external"
|
||||
th:if="${#lists.isEmpty(menuItem.children) and menuExternal}"
|
||||
th:href="${menuHref}"
|
||||
th:target="${menuTarget}"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<span class="devcm-tree__chev" aria-hidden="true"></span>
|
||||
<i class="devcm-tree__icon i-pixelarticons-external-link"></i>
|
||||
<span th:text="${menuItem.status.displayName}">Page</span>
|
||||
</a>
|
||||
|
||||
<a
|
||||
class="devcm-tree__item"
|
||||
th:if="${#lists.isEmpty(menuItem.children) and !menuExternal}"
|
||||
th:href="${menuHref}"
|
||||
th:target="${menuTarget}"
|
||||
>
|
||||
<span class="devcm-tree__chev" aria-hidden="true"></span>
|
||||
<i class="devcm-tree__icon i-pixelarticons-file"></i>
|
||||
<span th:text="${menuItem.status.displayName}">Page</span>
|
||||
</a>
|
||||
</th:block>
|
||||
</th:block>
|
||||
@@ -0,0 +1,33 @@
|
||||
<article
|
||||
class="devcm-post-card"
|
||||
th:fragment="post-card (post, featured)"
|
||||
th:classappend="${featured} ? ' devcm-post-card--featured' : ''"
|
||||
>
|
||||
<h2 class="devcm-post-card__title">
|
||||
<a th:href="${post.status.permalink}" th:text="${post.spec.title}">Post Title</a>
|
||||
<span class="devcm-badge" th:if="${featured}" th:text="#{devcm.post.featured}">FEATURED</span>
|
||||
</h2>
|
||||
<div class="devcm-post-card__meta">
|
||||
<span th:text="${#dates.format(post.spec.publishTime,'yyyy-MM-dd')}">2026-01-01</span>
|
||||
<span
|
||||
th:if="${post.contributors != null and !#lists.isEmpty(post.contributors)}"
|
||||
th:with="contributor = ${post.contributors[0]}"
|
||||
th:text="${contributor.displayName}"
|
||||
>
|
||||
Author
|
||||
</span>
|
||||
<a
|
||||
class="devcm-post-card__tag"
|
||||
th:each="tag : ${post.tags}"
|
||||
th:href="${tag.status.permalink}"
|
||||
th:title="${tag.spec.displayName}"
|
||||
th:text="'#' + ${tag.spec.displayName}"
|
||||
>
|
||||
#tag
|
||||
</a>
|
||||
</div>
|
||||
<p class="devcm-post-card__excerpt" th:text="${post.status.excerpt}">Post excerpt...</p>
|
||||
<a class="devcm-read-more" th:href="${post.status.permalink}"
|
||||
><span th:text="#{devcm.post.readMore}">Read more</span> <span aria-hidden="true">→</span></a
|
||||
>
|
||||
</article>
|
||||
@@ -0,0 +1,150 @@
|
||||
<aside
|
||||
class="devcm-rightbar"
|
||||
th:fragment="right-panel (pageType)"
|
||||
th:classappend="${pageType == 'page' or pageType == 'links' or pageType == 'moments'} ? ' devcm-rightbar--hidden' : ''"
|
||||
th:aria-label="#{devcm.right.context}"
|
||||
>
|
||||
<th:block th:if="${pageType == 'post'}">
|
||||
<section class="devcm-widget" th:if="${post != null}">
|
||||
<div class="devcm-widget__title">
|
||||
<span th:text="#{devcm.right.articleInfo}">ARTICLE INFO</span>
|
||||
<span aria-hidden="true">...</span>
|
||||
</div>
|
||||
<div class="devcm-info-list">
|
||||
<div class="devcm-info-list__row">
|
||||
<span th:text="#{devcm.right.author}">Author</span>
|
||||
<strong th:text="${post.owner.displayName}">Author</strong>
|
||||
</div>
|
||||
<div class="devcm-info-list__row">
|
||||
<span th:text="#{devcm.right.publishedAt}">Published at</span>
|
||||
<strong th:text="${#dates.format(post.spec.publishTime,'yyyy-MM-dd HH:mm')}">Date</strong>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="devcm-widget" th:if="${post.categories != null and !#lists.isEmpty(post.categories)}">
|
||||
<div class="devcm-widget__title">
|
||||
<span th:text="#{devcm.explorer.categories}">CATEGORIES</span>
|
||||
<span aria-hidden="true">...</span>
|
||||
</div>
|
||||
<div class="devcm-panel-list">
|
||||
<a class="devcm-panel-link" th:each="category : ${post.categories}" th:href="${category.status.permalink}">
|
||||
<strong th:text="${category.spec.displayName}">Category</strong>
|
||||
<span>
|
||||
<span th:text="${category.status.visiblePostCount != null ? category.status.visiblePostCount : 0}">0</span>
|
||||
<span th:text="#{devcm.right.posts}">posts</span>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="devcm-widget" th:if="${post.tags != null and !#lists.isEmpty(post.tags)}">
|
||||
<div class="devcm-widget__title">
|
||||
<span th:text="#{devcm.right.tags}">TAGS</span>
|
||||
<span aria-hidden="true">...</span>
|
||||
</div>
|
||||
<div class="devcm-tag-cloud">
|
||||
<a
|
||||
class="devcm-tag"
|
||||
th:each="tag : ${post.tags}"
|
||||
th:href="${tag.status.permalink}"
|
||||
th:text="'#' + ${tag.spec.displayName}"
|
||||
>
|
||||
#tag
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="devcm-widget" x-data="postToc" x-init="init()" x-show="items.length > 0">
|
||||
<div class="devcm-widget__title">
|
||||
<span th:text="#{devcm.right.toc}">TABLE OF CONTENTS</span>
|
||||
<span aria-hidden="true">...</span>
|
||||
</div>
|
||||
<div class="post-toc">
|
||||
<ul class="toc-tree">
|
||||
<template x-for="(item, index) in items" :key="index">
|
||||
<li
|
||||
class="toc-item"
|
||||
:class="{ 'toc-item--active': activeId === item.id }"
|
||||
:style="`padding-left: ${getIndent(item.level)}`"
|
||||
@click="scrollTo(item.id)"
|
||||
>
|
||||
<span class="toc-item__toggle toc-item__toggle--empty">▼</span>
|
||||
<span class="toc-item__tag" x-text="item.tagName"></span>
|
||||
<span class="toc-item__title" x-text="item.title"></span>
|
||||
</li>
|
||||
</template>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<th:block th:with="postCursor=${postFinder.cursor(post.metadata?.name)}">
|
||||
<section class="devcm-widget" th:if="${postCursor.hasPrevious() or postCursor.hasNext()}">
|
||||
<div class="devcm-widget__title">
|
||||
<span th:text="#{devcm.right.nearbyPosts}">NEARBY POSTS</span>
|
||||
<span aria-hidden="true">...</span>
|
||||
</div>
|
||||
<div class="devcm-panel-list">
|
||||
<a
|
||||
class="devcm-panel-link"
|
||||
th:if="${postCursor.hasPrevious()}"
|
||||
th:href="${postCursor.previous?.status?.permalink}"
|
||||
>
|
||||
<span th:text="#{devcm.right.previousPost}">Previous</span>
|
||||
<strong th:text="${postCursor.previous?.spec?.title}">Previous</strong>
|
||||
</a>
|
||||
<a class="devcm-panel-link" th:if="${postCursor.hasNext()}" th:href="${postCursor.next?.status?.permalink}">
|
||||
<span th:text="#{devcm.right.nextPost}">Next</span>
|
||||
<strong th:text="${postCursor.next?.spec?.title}">Next</strong>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
</th:block>
|
||||
</th:block>
|
||||
|
||||
<th:block th:unless="${pageType == 'post'}">
|
||||
<section class="devcm-widget" th:if="${posts != null and posts.items != null and !#lists.isEmpty(posts.items)}">
|
||||
<div class="devcm-widget__title">
|
||||
<span th:text="#{devcm.right.latestPosts}">LATEST POSTS</span>
|
||||
<span aria-hidden="true">...</span>
|
||||
</div>
|
||||
<div class="devcm-panel-list">
|
||||
<a class="devcm-panel-link" th:each="post : ${posts.items}" th:href="${post.status.permalink}">
|
||||
<strong th:text="${post.spec.title}">Post title</strong>
|
||||
<span th:text="${#dates.format(post.spec.publishTime,'yyyy-MM-dd')}">2026-01-01</span>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
<section class="devcm-widget" th:if="${categories != null and !#lists.isEmpty(categories)}">
|
||||
<div class="devcm-widget__title">
|
||||
<span th:text="#{devcm.explorer.categories}">CATEGORIES</span>
|
||||
<span aria-hidden="true">...</span>
|
||||
</div>
|
||||
<div class="devcm-panel-list">
|
||||
<a class="devcm-panel-link" th:each="category : ${categories}" th:href="${category.status.permalink}">
|
||||
<strong th:text="${category.spec.displayName}">Category</strong>
|
||||
<span
|
||||
><span th:text="${category.status.visiblePostCount != null ? category.status.visiblePostCount : 0}">0</span>
|
||||
<span th:text="#{devcm.right.posts}">posts</span></span
|
||||
>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
<section class="devcm-widget" th:if="${tags != null and !#lists.isEmpty(tags)}">
|
||||
<div class="devcm-widget__title">
|
||||
<span th:text="#{devcm.right.tags}">TAGS</span>
|
||||
<span aria-hidden="true">...</span>
|
||||
</div>
|
||||
<div class="devcm-tag-cloud">
|
||||
<a
|
||||
class="devcm-tag"
|
||||
th:each="tag : ${tags}"
|
||||
th:href="${tag.status.permalink}"
|
||||
th:text="'#' + ${tag.spec.displayName}"
|
||||
>
|
||||
#tag
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
</th:block>
|
||||
</aside>
|
||||
@@ -0,0 +1,39 @@
|
||||
<footer class="devcm-statusbar" th:fragment="statusbar (pageType)">
|
||||
<div class="devcm-statusbar__left">
|
||||
<span th:text="${#strings.isEmpty(theme.config.basic.title) ? site.title : theme.config.basic.title}">DevCM</span>
|
||||
<span th:text="${pageType}">home</span>
|
||||
</div>
|
||||
<div class="devcm-statusbar__center">
|
||||
<span>© <span th:text="${#dates.year(#dates.createNow())}">2026</span></span>
|
||||
<span th:text="#{devcm.status.poweredBy}">Powered by</span>
|
||||
<a th:href="${theme.config.footer.footer_powered_link}" th:text="${theme.config.footer.footer_powered_text}"
|
||||
>FillCode</a
|
||||
>
|
||||
<div class="devcm-statusbar__beian">
|
||||
<span th:if="${not #strings.isEmpty(theme.config.footer.footer_icp_text)}">
|
||||
<a
|
||||
href="https://beian.miit.gov.cn/"
|
||||
target="_blank"
|
||||
th:href="${theme.config.footer.footer_icp_link}"
|
||||
th:text="${theme.config.footer.footer_icp_text}"
|
||||
></a>
|
||||
</span>
|
||||
<span th:if="${not #strings.isEmpty(theme.config.footer.footer_gongan_text)}">
|
||||
<img th:src="@{/assets/image/gongan.png}" alt="" />
|
||||
<a
|
||||
href="https://www.beian.gov.cn/"
|
||||
target="_blank"
|
||||
th:href="${theme.config.footer.footer_gongan_link}"
|
||||
th:text="${theme.config.footer.footer_gongan_text}"
|
||||
></a>
|
||||
</span>
|
||||
<halo:footer />
|
||||
</div>
|
||||
</div>
|
||||
<div class="devcm-statusbar__right">
|
||||
<span th:text="${#locale.toLanguageTag()}">en-US</span>
|
||||
<span>UTF-8</span>
|
||||
<span>HTML</span>
|
||||
<i class="devcm-statusbar__dot" aria-hidden="true"></i>
|
||||
</div>
|
||||
</footer>
|
||||
+53
-54
@@ -1,105 +1,104 @@
|
||||
<!DOCTYPE html>
|
||||
<html
|
||||
xmlns:th="https://www.thymeleaf.org"
|
||||
th:replace="~{modules/layout :: html(title = |#{page.moments.title} - ${site.title}|, header = null, content = ~{::content}, footer = null)}"
|
||||
th:replace="~{modules/layout :: html(title = |#{page.moments.title} - ${site.title}|, pageType = 'moments', terminalUserName = ${moments != null and moments.items != null and !#lists.isEmpty(moments.items) and moments.items[0].owner != null and !#strings.isEmpty(moments.items[0].owner.name) ? moments.items[0].owner.name : 'admin'}, content = ~{::content})}"
|
||||
>
|
||||
<th:block th:fragment="content">
|
||||
<link rel="stylesheet" href="https://gcore.jsdelivr.net/npm/glightbox/dist/css/glightbox.min.css" />
|
||||
<script src="https://gcore.jsdelivr.net/gh/mcstudios/glightbox/dist/js/glightbox.min.js"></script>
|
||||
<div class="content">
|
||||
<div class="moments" x-data="upvote('moment','moment.halo.run','moments')">
|
||||
<div
|
||||
class="moment on-list post"
|
||||
|
||||
<section class="devcm-editor-window">
|
||||
<div class="devcm-editor-tabs">
|
||||
<div class="devcm-editor-tab devcm-editor-tab--active">
|
||||
<span>moments.md</span>
|
||||
<a
|
||||
class="devcm-editor-tab__close"
|
||||
href="/"
|
||||
th:aria-label="#{devcm.action.closeMomentsTab}"
|
||||
th:title="#{devcm.action.closeMomentsTab}"
|
||||
>×</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="devcm-editor-body">
|
||||
<div class="devcm-moments" x-data="upvote('moment','moment.halo.run','moments')">
|
||||
<article
|
||||
class="devcm-post-card devcm-moment-card"
|
||||
th:each="moment,iterStat : ${moments.items}"
|
||||
th:with="content=${moment.spec.content}"
|
||||
th:attr="x-data=|{name:'${moment.metadata.name}',showComment:false}|"
|
||||
>
|
||||
<div class="post-meta">
|
||||
<span class="post-date" th:text="${#dates.format(moment.spec.releaseTime,'yyyy-MM-dd')}">
|
||||
Moment CreateTime
|
||||
</span>
|
||||
<span class="post-separator">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</span>
|
||||
<span class="post-author" th:with="owner = ${moment.owner}" th:text="${owner.displayName}">
|
||||
Author
|
||||
</span>
|
||||
<div class="devcm-post-card__meta">
|
||||
<span th:text="${#dates.format(moment.spec.releaseTime,'yyyy-MM-dd')}">Moment CreateTime</span>
|
||||
<span th:with="owner = ${moment.owner}" th:text="${owner.displayName}">Author</span>
|
||||
</div>
|
||||
<div class="post-content" th:utext="${content.html}">Moment Content...</div>
|
||||
<div class="devcm-post-card__excerpt" th:utext="${content.html}">Moment Content...</div>
|
||||
|
||||
<th:block th:with="medium=${moment.spec.content.medium}">
|
||||
<div
|
||||
th:unless="${#lists.isEmpty(moments)}"
|
||||
class="moment-media mt-4 grid w-4/5 gap-2 sm:w-4/5"
|
||||
th:classappend="${(#lists.size(medium) > 4 ? 'grid-cols-3' : '') + (#lists.size(medium) == 1 ? 'grid-cols-1' :'') + ((#lists.size(medium) > 1 && #lists.size(medium) < 5) ? 'grid-cols-2' :'')}"
|
||||
th:unless="${#lists.isEmpty(medium)}"
|
||||
class="devcm-moment-media"
|
||||
th:classappend="${(#lists.size(medium) > 4 ? ' devcm-moment-media--three' : '') + (#lists.size(medium) == 1 ? ' devcm-moment-media--one' :'') + ((#lists.size(medium) > 1 && #lists.size(medium) < 5) ? ' devcm-moment-media--two' :'')}"
|
||||
>
|
||||
<div class="" th:each="media : ${medium}">
|
||||
<div th:each="media : ${medium}">
|
||||
<a th:class="|glightbox|" th:data-gallery="|gallery${iterStat.count}|" th:href="${media.url}">
|
||||
<img
|
||||
th:if="${#strings.equals(media.type,'PHOTO')}"
|
||||
class="transform-gpu rounded-lg object-cover"
|
||||
th:src="${media.url}"
|
||||
th:alt="${moment.owner.displayName}"
|
||||
/>
|
||||
</a>
|
||||
<div th:if="${#strings.equals(media.type,'VIDEO')}" class="w-full">
|
||||
<video controls th:src="${media.url}" class="rounded-lg object-cover"></video>
|
||||
</div>
|
||||
<video th:if="${#strings.equals(media.type,'VIDEO')}" controls th:src="${media.url}"></video>
|
||||
</div>
|
||||
</div>
|
||||
</th:block>
|
||||
<div class="mt-3 flex items-center gap-4">
|
||||
<div
|
||||
class="journal-likes inline-flex cursor-pointer items-center text-sm text-gray-400 transition-all hover:text-red-700"
|
||||
:class="{'text-red-700': getIsUpvoted(name)}"
|
||||
|
||||
<div class="devcm-moment-actions">
|
||||
<button
|
||||
type="button"
|
||||
class="devcm-action-link"
|
||||
:class="{ 'devcm-action-link--active': getIsUpvoted(name) }"
|
||||
@click="handleUpvote(name)"
|
||||
>
|
||||
<i class="!h-4 !w-4 i-pixelarticons-heart"></i>
|
||||
<span
|
||||
class="ml-1"
|
||||
th:attr="data-upvote-moment-name=${moment.metadata.name}"
|
||||
th:text="${moment.stats.upvote}"
|
||||
<i class="i-pixelarticons-heart"></i>
|
||||
<span th:attr="data-upvote-moment-name=${moment.metadata.name}" th:text="${moment.stats.upvote}"
|
||||
>0</span
|
||||
>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="inline-flex cursor-pointer items-center text-sm text-gray-400 transition-all hover:text-black dark:hover:text-white"
|
||||
:class="{'!text-black':showComment && storedTheme == 'light','!text-white':showComment && storedTheme == 'dark' }"
|
||||
@click="showComment = !showComment"
|
||||
>
|
||||
<i class="!h-4 !w-4 i-pixelarticons-comment"></i>
|
||||
<span class="ml-1" th:text="${moment.stats.approvedComment}"> </span>
|
||||
</div>
|
||||
</button>
|
||||
<button type="button" class="devcm-action-link" @click="showComment = !showComment">
|
||||
<i class="i-pixelarticons-comment"></i>
|
||||
<span th:text="${moment.stats.approvedComment}">0</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="mt-2" x-show="showComment">
|
||||
<div class="devcm-moment-comments" x-data="themeComment()" x-init="init()" x-show="showComment">
|
||||
<halo:comment
|
||||
group="moment.halo.run"
|
||||
kind="Moment"
|
||||
th:attr="name=${moment.metadata.name}"
|
||||
colorScheme="storedTheme"
|
||||
colorScheme="localStorage.getItem('theme-mode')"
|
||||
/>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="pagination" th:if="${moments.hasPrevious()} or ${moments.hasNext()}">
|
||||
<div class="pagination__buttons">
|
||||
<span class="button previous" th:if="${moments.hasPrevious()}">
|
||||
<a th:href="@{${moments.prevUrl}}">
|
||||
<div class="button__icon i-pixelarticons-chevron-left !h-6 !w-6"></div>
|
||||
<span class="button__text">上一页</span>
|
||||
<span class="button__text" th:text="#{devcm.pagination.previous}">Previous</span>
|
||||
</a>
|
||||
</span>
|
||||
<span class="button next" th:if="${moments.hasNext()}">
|
||||
<a th:href="@{${moments.nextUrl}}" class="items-center">
|
||||
<span class="button__text">下一页</span>
|
||||
<div class="button__icon i-pixelarticons-chevron-right !h-6 !w-6"></div>
|
||||
<a th:href="@{${moments.nextUrl}}">
|
||||
<span class="button__text" th:text="#{devcm.pagination.next}">Next</span>
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
const lightbox = GLightbox({
|
||||
loop: false,
|
||||
|
||||
+32
-19
@@ -1,29 +1,41 @@
|
||||
<!DOCTYPE html>
|
||||
<html
|
||||
xmlns:th="https://www.thymeleaf.org"
|
||||
th:replace="~{modules/layout :: html(title = |${singlePage.spec.title} - ${site.title}|, header = null, content = ~{::content}, footer = null)}"
|
||||
th:replace="~{modules/layout :: html(title = |${singlePage.spec.title} - ${site.title}|, pageType = 'page', terminalUserName = ${singlePage != null and singlePage.owner != null and !#strings.isEmpty(singlePage.owner.name) ? singlePage.owner.name : 'admin'}, content = ~{::content})}"
|
||||
>
|
||||
<th:block th:fragment="content">
|
||||
<div class="post">
|
||||
<h1 class="post-title" th:text="${singlePage.spec.title}">Post Title</h1>
|
||||
<div class="post-meta">
|
||||
<span class="post-date" th:text="${#dates.format(singlePage.spec.publishTime,'yyyy-MM-dd')}">
|
||||
publishTime
|
||||
</span>
|
||||
<span class="post-separator">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</span>
|
||||
<span class="post-author" th:text="${singlePage.owner.displayName}">Author</span>
|
||||
</div>
|
||||
<div class="post-content">
|
||||
<div th:utext="${singlePage.content.content}">Post Content</div>
|
||||
<article class="devcm-editor-window devcm-article">
|
||||
<div class="devcm-editor-tabs">
|
||||
<div class="devcm-editor-tab devcm-editor-tab--active">
|
||||
<span th:text="${singlePage.spec.title} + '.md'">page.md</span>
|
||||
<a
|
||||
class="devcm-editor-tab__close"
|
||||
href="/"
|
||||
th:aria-label="#{devcm.action.closePageTab}"
|
||||
th:title="#{devcm.action.closePageTab}"
|
||||
>×</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div th:if="${haloCommentEnabled}">
|
||||
<h2>评论</h2>
|
||||
<div class="devcm-editor-body devcm-article-content">
|
||||
<h1 class="devcm-article-title" th:text="${singlePage.spec.title}">Page Title</h1>
|
||||
<div class="devcm-article-meta">
|
||||
<span th:text="${#dates.format(singlePage.spec.publishTime,'yyyy-MM-dd')}">publishTime</span>
|
||||
<span th:text="${singlePage.owner.displayName}">Author</span>
|
||||
</div>
|
||||
<div th:utext="${singlePage.content.content}">Page Content</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<section class="comment-wrap devcm-comments" x-data="themeComment()" x-init="init()" th:if="${haloCommentEnabled}">
|
||||
<div class="devcm-comment-titlebar">
|
||||
<span class="devcm-window-dot"></span>
|
||||
<span class="devcm-window-dot"></span>
|
||||
<span class="devcm-window-dot"></span>
|
||||
<strong th:text="#{devcm.comments.file}">comments.log</strong>
|
||||
</div>
|
||||
<div class="devcm-comment-body">
|
||||
<h2 th:text="#{devcm.comments.title}">## Comments</h2>
|
||||
<halo:comment
|
||||
group="content.halo.run"
|
||||
kind="SinglePage"
|
||||
@@ -31,5 +43,6 @@
|
||||
colorScheme="localStorage.getItem('theme')"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
</th:block>
|
||||
</html>
|
||||
|
||||
+51
-56
@@ -1,86 +1,81 @@
|
||||
<!DOCTYPE html>
|
||||
<html
|
||||
xmlns:th="https://www.thymeleaf.org"
|
||||
th:replace="~{modules/layout :: html(title = |${post.spec.title} - ${site.title}|, header = null, content = ~{::content}, footer = null)}"
|
||||
th:replace="~{modules/layout :: html(title = |${post.spec.title} - ${site.title}|, pageType = 'post', terminalUserName = ${post != null and post.owner != null and !#strings.isEmpty(post.owner.name) ? post.owner.name : 'admin'}, content = ~{::content})}"
|
||||
>
|
||||
<th:block th:fragment="content">
|
||||
<!-- 目录组件 -->
|
||||
<div class="post-toc-sticky">
|
||||
<div class="post-toc" x-data="postToc" x-init="init()">
|
||||
<div class="toc-header">
|
||||
<span class="toc-header__icon"><></span>
|
||||
<span class="toc-header__title">Outline</span>
|
||||
</div>
|
||||
<ul class="toc-tree">
|
||||
<template x-for="(item, index) in items" :key="index">
|
||||
<li class="toc-item"
|
||||
:class="{'toc-item--active': activeId === item.id}"
|
||||
:style="`padding-left: ${getIndent(item.level)}`"
|
||||
@click="scrollTo(item.id)">
|
||||
<span class="toc-item__toggle toc-item__toggle--empty">▼</span>
|
||||
<span class="toc-item__icon"><></span>
|
||||
<span class="toc-item__tag" x-text="item.tagName"></span>
|
||||
<span class="toc-item__title" x-text="item.title"></span>
|
||||
</li>
|
||||
</template>
|
||||
</ul>
|
||||
<article class="devcm-editor-window devcm-article" x-data="postLineNum" x-init="init()">
|
||||
<div class="devcm-editor-tabs">
|
||||
<div
|
||||
class="devcm-editor-tab devcm-editor-tab--active"
|
||||
th:with="postTabBaseName=${!#strings.isEmpty(post.spec.slug) ? post.spec.slug : post.metadata.name},
|
||||
postTabName=${#strings.endsWith(postTabBaseName, '.md') ? postTabBaseName : postTabBaseName + '.md'},
|
||||
archiveActivityItem=${theme.config.activity.activity_items != null and !#lists.isEmpty(theme.config.activity.activity_items) ? theme.config.activity.activity_items.^[type == 'archive' or key == 'archive'] : null},
|
||||
postCloseHref=${!#strings.isEmpty(site.routes.archivesUri) ? site.routes.archivesUri : (archiveActivityItem != null and !#strings.isEmpty(archiveActivityItem.url) ? archiveActivityItem.url : (archiveActivityItem != null and !#strings.isEmpty(archiveActivityItem.href) ? archiveActivityItem.href : '/archives'))}"
|
||||
>
|
||||
<span th:text="${postTabName}">post</span>
|
||||
<a
|
||||
class="devcm-editor-tab__close"
|
||||
href="#"
|
||||
th:href="${postCloseHref}"
|
||||
th:aria-label="#{devcm.action.closePostTab}"
|
||||
th:title="#{devcm.action.closePostTab}"
|
||||
>×</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="post" x-data="postLineNum" x-init="init()">
|
||||
<h1 class="post-title" th:text="'< ' + ${post.spec.title} + ' >'">Post Title</h1>
|
||||
<div class="post-meta">
|
||||
<span class="post-date" th:text="${#dates.format(post.spec.publishTime,'yyyy-MM-dd')}"> publishTime </span>
|
||||
<span class="post-separator">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</span>
|
||||
<span class="post-author" th:text="${post.owner.displayName}">Author</span>
|
||||
<span class="post-tags-inline" th:each="tag : ${post.tags}">
|
||||
<a th:href="${tag.status.permalink}"
|
||||
|
||||
<div class="post-body devcm-article-body">
|
||||
<div class="post-line-gutter"></div>
|
||||
<div class="post-content devcm-article-content">
|
||||
<div>
|
||||
<h1 class="devcm-article-title" th:text="'< ' + ${post.spec.title} + ' >'">Post Title</h1>
|
||||
<div class="devcm-article-meta">
|
||||
<span th:text="${#dates.format(post.spec.publishTime,'yyyy-MM-dd')}">publishTime</span>
|
||||
<span th:text="${post.owner.displayName}">Author</span>
|
||||
<a
|
||||
th:each="tag : ${post.tags}"
|
||||
th:href="${tag.status.permalink}"
|
||||
th:title="${tag.spec.displayName}"
|
||||
th:text="'#' + ${tag.spec.displayName}"
|
||||
class="post-tag"
|
||||
>#Tag
|
||||
>
|
||||
#Tag
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
<div class="post-body">
|
||||
<!-- 行数组件 -->
|
||||
<div class="post-line-gutter"></div>
|
||||
<div class="post-content">
|
||||
<div th:utext="${post.content.content}">Post Content</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="comment-wrap" th:if="${haloCommentEnabled}">
|
||||
<h2>评论</h2>
|
||||
<halo:comment
|
||||
group="content.halo.run"
|
||||
kind="Post"
|
||||
th:attr="name=${post.metadata.name}"
|
||||
/>
|
||||
</article>
|
||||
|
||||
<section class="comment-wrap devcm-comments" x-data="themeComment()" x-init="init()" th:if="${haloCommentEnabled}">
|
||||
<div class="devcm-comment-titlebar">
|
||||
<span class="devcm-window-dot"></span>
|
||||
<span class="devcm-window-dot"></span>
|
||||
<span class="devcm-window-dot"></span>
|
||||
<strong th:text="#{devcm.comments.file}">comments.log</strong>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<div class="pagination__title">
|
||||
<span class="pagination__title-h">其他文章</span>
|
||||
<hr />
|
||||
<div class="devcm-comment-body">
|
||||
<h2 th:text="#{devcm.comments.title}">## Comments</h2>
|
||||
<halo:comment group="content.halo.run" kind="Post" th:attr="name=${post.metadata.name}" />
|
||||
</div>
|
||||
<div class="pagination__buttons" th:with="postCursor=${postFinder.cursor(post.metadata?.name)}">
|
||||
</section>
|
||||
|
||||
<nav class="pagination devcm-prev-next" th:with="postCursor=${postFinder.cursor(post.metadata?.name)}">
|
||||
<div class="pagination__buttons">
|
||||
<span th:if="${postCursor.hasPrevious()}" class="button previous">
|
||||
<a th:href="${postCursor.previous?.status?.permalink}">
|
||||
<span class="button__icon">< </span>
|
||||
<span class="button__text" th:text="${postCursor.previous?.spec?.title}">prevPost</span>
|
||||
<span class="button__text" th:text="${postCursor.previous?.spec?.title}">Previous</span>
|
||||
</a>
|
||||
</span>
|
||||
<span th:if="${postCursor.hasNext()}" class="button next">
|
||||
<a th:href="${postCursor.next?.status?.permalink}">
|
||||
<span class="button__text" th:text="${postCursor.next?.spec?.title}">nextPost</span>
|
||||
<span class="button__text" th:text="${postCursor.next?.spec?.title}">Next</span>
|
||||
<span class="button__icon"> ></span>
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</th:block>
|
||||
</html>
|
||||
|
||||
+31
-47
@@ -1,70 +1,54 @@
|
||||
<!DOCTYPE html>
|
||||
<html
|
||||
xmlns:th="https://www.thymeleaf.org"
|
||||
th:replace="~{modules/layout :: html(title = |#{page.tag.title(${tag.spec.displayName})} - ${site.title}|, header = null, content = ~{::content}, footer = null)}"
|
||||
th:replace="~{modules/layout :: html(title = |#{page.tag.title(${tag.spec.displayName})} - ${site.title}|, pageType = 'tag', terminalUserName = ${posts != null and posts.items != null and !#lists.isEmpty(posts.items) and posts.items[0].owner != null and !#strings.isEmpty(posts.items[0].owner.name) ? posts.items[0].owner.name : 'admin'}, content = ~{::content})}"
|
||||
>
|
||||
<th:block th:fragment="content">
|
||||
<div class="content">
|
||||
<div class="post">
|
||||
<h1
|
||||
class="post-title"
|
||||
th:text="'标签：'+${tag.spec.displayName}+' ('+${tag.status.visiblePostCount?:0}+' 篇文章)'"
|
||||
>
|
||||
标签：标签名 (n 篇文章)
|
||||
</h1>
|
||||
|
||||
<a href="/tags"> 所有标签 </a>
|
||||
|
||||
<ul>
|
||||
<li class="post-list" th:each="post : ${posts.items}">
|
||||
<a th:href="${post.status.permalink}">
|
||||
<span class="post-date" th:text="${#dates.format(post.spec.publishTime,'yyyy-MM-dd')}"
|
||||
>发布时间</span
|
||||
>
|
||||
<span class="post-separator">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</span>
|
||||
<span class="post-list-title" th:text="${post.spec.title}">文章标题</span></a>
|
||||
<span class="post-tags-inline">
|
||||
<span class="post-separator">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</span>
|
||||
<span th:each="tag : ${post.tags}">
|
||||
<section class="devcm-editor-window">
|
||||
<div class="devcm-editor-tabs">
|
||||
<div class="devcm-editor-tab devcm-editor-tab--active">
|
||||
<span th:text="'#' + ${tag.spec.displayName} + '.md'">tag.md</span>
|
||||
<a
|
||||
th:href="@{${post.status.permalink}}"
|
||||
th:title="${tag.spec.displayName}"
|
||||
th:text="'#'+${tag.spec.displayName}"
|
||||
class="post-tag"
|
||||
>#Tag
|
||||
</a>
|
||||
</span>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
class="devcm-editor-tab__close"
|
||||
href="#"
|
||||
th:href="${!#strings.isEmpty(site.routes.tagsUri) ? site.routes.tagsUri : '/tags'}"
|
||||
th:aria-label="#{devcm.action.closeTagTab}"
|
||||
th:title="#{devcm.action.closeTagTab}"
|
||||
>×</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="devcm-editor-body">
|
||||
<h1 class="devcm-page-title">
|
||||
<span th:text="#{devcm.taxonomy.tagTitle(${tag.spec.displayName})}">Tag</span>
|
||||
<small
|
||||
th:text="#{devcm.taxonomy.postCount(${tag.status.visiblePostCount != null ? tag.status.visiblePostCount : 0})}"
|
||||
>(0 posts)</small
|
||||
>
|
||||
</h1>
|
||||
<div class="devcm-post-stack">
|
||||
<th:block th:each="post,iterStat : ${posts.items}">
|
||||
<th:block th:replace="~{modules/post-card :: post-card(post=${post}, featured=${iterStat.index == 0})}" />
|
||||
</th:block>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="pagination" th:if="${posts.hasPrevious() || posts.hasNext()}">
|
||||
<div class="pagination__buttons">
|
||||
<span class="button previous" th:if="${posts.hasPrevious()}">
|
||||
<a th:href="@{${posts.prevUrl}}">
|
||||
<span class="button__icon"><</span>
|
||||
<span class="button__text">上一页</span>
|
||||
<span class="button__text" th:text="#{devcm.pagination.previous}">Previous</span>
|
||||
</a>
|
||||
</span>
|
||||
<span class="button next" th:if="${posts.hasNext()}">
|
||||
<a th:href="@{${posts.nextUrl}}">
|
||||
<span class="button__text">下一页</span>
|
||||
<span class="button__text" th:text="#{devcm.pagination.next}">Next</span>
|
||||
<span class="button__icon">></span>
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</th:block>
|
||||
</html>
|
||||
|
||||
+23
-11
@@ -1,23 +1,35 @@
|
||||
<!DOCTYPE html>
|
||||
<html
|
||||
xmlns:th="https://www.thymeleaf.org"
|
||||
th:replace="~{modules/layout :: html(title = |#{page.tags.title} - ${site.title}|, header = null, content = ~{::content}, footer = null)}"
|
||||
th:replace="~{modules/layout :: html(title = |#{page.tags.title} - ${site.title}|, pageType = 'tags', terminalUserName = 'admin', content = ~{::content})}"
|
||||
>
|
||||
<th:block th:fragment="content">
|
||||
<div class="content">
|
||||
<div class="post">
|
||||
<h1 class="post-title">所有标签</h1>
|
||||
<ul>
|
||||
<li th:each="tag: ${tags}" class="tag-list">
|
||||
<section class="devcm-editor-window">
|
||||
<div class="devcm-editor-tabs">
|
||||
<div class="devcm-editor-tab devcm-editor-tab--active">
|
||||
<span>tags.md</span>
|
||||
<a
|
||||
th:href="${tag.status.permalink}"
|
||||
th:text="${tag.spec.displayName}+' ('+${tag.status.visiblePostCount?:0}+' 篇文章)'"
|
||||
class="devcm-editor-tab__close"
|
||||
href="/"
|
||||
th:aria-label="#{devcm.action.closeTagsTab}"
|
||||
th:title="#{devcm.action.closeTagsTab}"
|
||||
>×</a
|
||||
>
|
||||
标签名 (n 篇文章)
|
||||
</div>
|
||||
</div>
|
||||
<div class="devcm-editor-body">
|
||||
<h1 class="devcm-page-title" th:text="#{devcm.tags.title}">All tags</h1>
|
||||
<div class="devcm-tag-cloud devcm-tag-cloud--page">
|
||||
<a
|
||||
class="devcm-tag"
|
||||
th:each="tag : ${tags}"
|
||||
th:href="${tag.status.permalink}"
|
||||
th:text="'#' + ${tag.spec.displayName} + ' (' + ${tag.status.visiblePostCount != null ? tag.status.visiblePostCount : 0} + ')'"
|
||||
>
|
||||
#tag
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</th:block>
|
||||
</html>
|
||||
|
||||
+1
-1
@@ -13,5 +13,5 @@ spec:
|
||||
repo: https://git.dev.cm/theme-terminal
|
||||
settingName: "theme-terminal-setting"
|
||||
configMapName: "theme-terminal-configMap"
|
||||
version: 1.2.7
|
||||
version: 2.0.9
|
||||
require: ">=2.22.0"
|
||||
|
||||
在新议题中引用
屏蔽一个用户