Compare commits
| Author | SHA1 | Date | |
|---|---|---|---|
 qwqcode
|
e44d367ee7 | ||
|
qwqcode
|
6dd9ac452c | ||
|
qwqcode
|
349584eb16 | ||
|
qwqcode
|
ae8fb326a9 | ||
|
qwqcode
|
599579ff59 | ||
|
qwqcode
|
022684b8dd | ||
|
qwqcode
|
3410480b67 | ||
|
qwqcode
|
3087f133a5 | ||
|
qwqcode
|
01a115c3d0 |
No files matched your search
@@ -14,6 +14,7 @@ module.exports = {
|
||||
],
|
||||
plugins: ['@typescript-eslint', 'import'],
|
||||
rules: {
|
||||
'no-alert': 'off',
|
||||
'no-unused-vars': 'off',
|
||||
'no-plusplus': 0,
|
||||
'no-param-reassign': 0,
|
||||
|
||||
@@ -14,7 +14,9 @@
|
||||
|
||||
> 🌌 一款简洁的自托管评论系统 | A Selfhosted Comment System.
|
||||
|
||||
前往：[“**官方文档**”](https://artalk.js.org)
|
||||
可参考：[“官方文档”](https://artalk.js.org)
|
||||
|
||||
最新版：[“Releases”](https://github.com/ArtalkJS/ArtalkGo/releases)
|
||||
|
||||
---
|
||||
|
||||
@@ -52,8 +54,8 @@
|
||||
- 数据备份：防止评论数据丢失
|
||||
- 数据迁移：在不同评论系统之间来回切换
|
||||
- 一页多评：一页多个评论区（似乎没啥用
|
||||
- Markdown 语法默认支持
|
||||
- 支持 Latex：需引入 Artalk 的 Katex 插件
|
||||
- Markdown：语法默认支持
|
||||
- 支持 Latex：引入 Artalk 的 Katex 插件
|
||||
- [Vite](https://github.com/vitejs/vite)：开发者的极致体验
|
||||
|
||||
## 食用方针
|
||||
@@ -69,13 +71,140 @@ import Artalk from 'artalk'
|
||||
|
||||
new Artalk({
|
||||
el: '#Comments',
|
||||
pageKey: '<页面链接>',
|
||||
pageTitle: '<页面标题>',
|
||||
server: '<后端地址>',
|
||||
site: '<站点名称>',
|
||||
pageKey: 'http://your_domain/post/1', // 页面链接
|
||||
pageTitle: '关于如何引入 Artalk 这档子事', // 页面标题
|
||||
server: 'http://localhost:8080/api', // 后端地址
|
||||
site: 'Artalk 的博客 (你的站点名)',
|
||||
})
|
||||
```
|
||||
|
||||
### Docker
|
||||
|
||||
```sh
|
||||
# 为 Artalk 创建一个目录
|
||||
mkdir Artalk
|
||||
cd Artalk
|
||||
|
||||
# 下载配置文件模版
|
||||
curl -L https://raw.githubusercontent.com/ArtalkJS/ArtalkGo/master/artalk-go.example.yml > conf.yml
|
||||
|
||||
docker run -d \
|
||||
--name artalk \
|
||||
-p 0.0.0.0:8080:23366 \
|
||||
-v $(pwd)/conf.yml:/conf.yml \
|
||||
-v $(pwd)/data:/data \
|
||||
artalk/artalk-go
|
||||
```
|
||||
|
||||
### Docker Compose
|
||||
|
||||
```sh
|
||||
mkdir Artalk
|
||||
cd Artalk
|
||||
|
||||
vim docker-compose.yaml
|
||||
```
|
||||
|
||||
```yaml
|
||||
version: "3.5"
|
||||
services:
|
||||
artalk:
|
||||
container_name: artalk
|
||||
image: artalk/artalk-go
|
||||
ports:
|
||||
- 8080:23366
|
||||
volumes:
|
||||
- ./conf.yml:/conf.yml
|
||||
- ./data:/data
|
||||
```
|
||||
|
||||
```sh
|
||||
docker-compose up -d
|
||||
```
|
||||
|
||||
## TODOs
|
||||
|
||||
- [x] [Golang 后端](https://github.com/ArtalkJS/ArtalkGo)
|
||||
- [x] 多站点支持
|
||||
- [x] 多数据库支持
|
||||
- [x] 评论获取分页
|
||||
- [x] 评论点赞投票
|
||||
- [x] 浏览量统计
|
||||
- [x] 评论分页加载
|
||||
- [x] 评论置顶 / 精华
|
||||
- [x] 评论排序 (热度 / 时间)
|
||||
- [x] 通知中心
|
||||
- [x] 提及
|
||||
- [x] 全部
|
||||
- [x] 我的
|
||||
- [x] 待审
|
||||
- [x] 管理员控制台
|
||||
- [x] 评论 (增/删/改)
|
||||
- [x] 页面 (增/删/改)
|
||||
- [x] 站点 (增/删/改)
|
||||
- [x] 数据分页
|
||||
- [ ] 配置 (GUI)
|
||||
- [x] 数据导入 ([Artransfer](https://github.com/ArtalkJS/Artransfer))
|
||||
- [x] Artrans
|
||||
- [x] Artalk v1 (PHP)
|
||||
- [x] WordPress
|
||||
- [x] Typecho
|
||||
- [x] Valine
|
||||
- [x] Disqus
|
||||
- [x] Commento
|
||||
- [x] Twikoo
|
||||
- [x] 数据导出
|
||||
- [ ] 数据备份同步
|
||||
- [x] 邮件异步队列发送
|
||||
- [ ] 邮件队列持久化
|
||||
- [x] 邮件多种发送方式
|
||||
- [x] SMTP
|
||||
- [x] 阿里云邮件
|
||||
- [x] 系统调用 sendmail
|
||||
- [x] 邮件多模板自定义
|
||||
- [x] 用户已读标记
|
||||
- [x] 验证码
|
||||
- [x] 图片验证码
|
||||
- [x] [极验](https://www.geetest.com/)滑动验证码
|
||||
- [x] 反垃圾
|
||||
- [x] [Akismet](https://akismet.com/)
|
||||
- [x] [阿里云内容安全](https://help.aliyun.com/document_detail/28417.html)
|
||||
- [x] [腾讯云内容安全](https://cloud.tencent.com/document/product/1124/64508)
|
||||
- [x] 关键字过滤
|
||||
- [x] 评论通知管理员 ([notify](https://github.com/nikoksr/notify))
|
||||
- [x] Telegram Bot
|
||||
- [x] 飞书 WebHook Bot
|
||||
- [x] 钉钉
|
||||
- [x] Bark
|
||||
- [x] Slack
|
||||
- [x] LINE
|
||||
- [ ] 自定义 HTTP 回调
|
||||
- [ ] 命令行管理
|
||||
- [ ] 博客邮件订阅
|
||||
- [x] 用户鉴权机制
|
||||
- [x] 跨域非法请求阻止
|
||||
- [x] 全局验证码操作次数限制
|
||||
- [x] JWT 登陆状态验证
|
||||
- [x] 时区自定义
|
||||
- [x] 只看作者功能
|
||||
- [ ] AT 提及 (@)
|
||||
- [ ] 评论提及 (#)
|
||||
- [ ] 表情包统一管理
|
||||
- [ ] 导入表情包
|
||||
- [ ] 表情包图片地址控制
|
||||
- [x] 图片上传
|
||||
- [x] 图片上传到图床 ([upgit](https://github.com/pluveto/upgit))
|
||||
- [ ] 图片管理
|
||||
- [ ] 附件上传 / 管理
|
||||
- [ ] 评论标签分类系统
|
||||
- [ ] 主题样式更换
|
||||
- [ ] 规范化 API
|
||||
- [ ] 扩展中心
|
||||
- [ ] 开放用户注册
|
||||
- [ ] 接入第三方登录
|
||||
- [ ] 国际化 (i18n)
|
||||
- [x] 一键升级
|
||||
|
||||
## 特别致谢
|
||||
|
||||
感谢社区提供的帮助与反馈，若有好的建议与意见欢迎前往 [ISSUES](https://github.com/ArtalkJS/Artalk/issues) 随时告知。
|
||||
|
||||
@@ -9,6 +9,24 @@
|
||||
<body>
|
||||
<div id="ArtalkSidebar"></div>
|
||||
|
||||
<script type="module" src="./src/index.ts"></script>
|
||||
<script type="module">
|
||||
import InitSidebar from './src/main'
|
||||
|
||||
const p = new URLSearchParams(document.location.search)
|
||||
const pageKey = p.get('pageKey') || ''
|
||||
const site = p.get('site') || ''
|
||||
const user = JSON.parse(p.get('user') || '{}')
|
||||
const darkMode = p.get('darkMode') === '1'
|
||||
|
||||
window.referer = p.get('referer')
|
||||
|
||||
InitSidebar({
|
||||
el: '#ArtalkSidebar',
|
||||
server: (import.meta.env.MODE === 'development') ? 'http://localhost:23366/api' : '../api',
|
||||
pageKey,
|
||||
site,
|
||||
darkMode,
|
||||
}, user)
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@artalkjs/artalk-sidebar",
|
||||
"version": "0.1.0",
|
||||
"version": "0.1.1",
|
||||
"license": "LGPL-3.0",
|
||||
"description": "The sidebar of artalk",
|
||||
"repository": {
|
||||
@@ -10,11 +10,6 @@
|
||||
},
|
||||
"homepage": "https://artalk.js.org",
|
||||
"bugs": "https://github.com/ArtalkJS/Artalk/issue",
|
||||
"main": "./dist/ArtalkSidebar.js",
|
||||
"unpkg": "./dist/ArtalkSidebar.iife.js",
|
||||
"jsdelivr": "./dist/ArtalkSidebar.iife.js",
|
||||
"module": "./dist/ArtalkSidebar.es.js",
|
||||
"types": "./types/index.d.ts",
|
||||
"scripts": {
|
||||
"dev": "vite --port 23367",
|
||||
"build": "pnpm -F artalk build && pnpm lint && vite build",
|
||||
|
||||
@@ -1,13 +1,14 @@
|
||||
import '../style/page-list.less'
|
||||
|
||||
import Context from 'artalk/src/context'
|
||||
import Component from 'artalk/src/lib/component'
|
||||
import * as Utils from 'artalk/src/lib/utils'
|
||||
import * as Ui from 'artalk/src/lib/ui'
|
||||
import { PageData } from 'artalk/types/artalk-data'
|
||||
import Api from 'artalk/src/api'
|
||||
import ActionBtn from 'artalk/src/components/action-btn'
|
||||
import ItemTextEditor from '../item-text-editor'
|
||||
import Component from '../sidebar-component'
|
||||
import { SidebarCtx } from '../main'
|
||||
import ItemTextEditor from '../lib/item-text-editor'
|
||||
|
||||
export default class PageList extends Component {
|
||||
$editor?: HTMLElement
|
||||
@@ -15,8 +16,8 @@ export default class PageList extends Component {
|
||||
|
||||
pages: PageData[] = []
|
||||
|
||||
constructor(ctx: Context) {
|
||||
super(ctx)
|
||||
constructor(ctx: Context, sidebar: SidebarCtx) {
|
||||
super(ctx, sidebar)
|
||||
|
||||
this.$el = Utils.createElement(`<div class="atk-page-list"></div>`)
|
||||
}
|
||||
|
||||
@@ -1,12 +1,13 @@
|
||||
import '../style/site-list.less'
|
||||
|
||||
import Context from 'artalk/src/context'
|
||||
import Component from 'artalk/src/lib/component'
|
||||
import * as Utils from 'artalk/src/lib/utils'
|
||||
import * as Ui from 'artalk/src/lib/ui'
|
||||
import { SiteData } from 'artalk/types/artalk-data'
|
||||
import Api from 'artalk/src/api'
|
||||
import ItemTextEditor from '../item-text-editor'
|
||||
import Component from '../sidebar-component'
|
||||
import { SidebarCtx } from '../main'
|
||||
import ItemTextEditor from '../lib/item-text-editor'
|
||||
|
||||
export default class SiteList extends Component {
|
||||
sites: SiteData[] = []
|
||||
@@ -21,8 +22,8 @@ export default class SiteList extends Component {
|
||||
|
||||
$add?: HTMLElement
|
||||
|
||||
constructor(ctx: Context) {
|
||||
super(ctx)
|
||||
constructor(ctx: Context, sidebar: SidebarCtx) {
|
||||
super(ctx, sidebar)
|
||||
|
||||
this.$el = Utils.createElement(
|
||||
`<div class="atk-site-list">
|
||||
|
||||
@@ -1,31 +0,0 @@
|
||||
import Artalk from 'artalk'
|
||||
import ArtalkConfig, { LocalUser } from 'artalk/types/artalk-config'
|
||||
import 'artalk/dist/Artalk.css'
|
||||
import Sidebar from './sidebar'
|
||||
|
||||
class ArtalkSidebar extends Artalk {
|
||||
constructor(customConf: ArtalkConfig, user: LocalUser) {
|
||||
super(customConf)
|
||||
|
||||
this.$root.style.display = 'none'
|
||||
|
||||
user = user || {}
|
||||
this.ctx.user.data = {
|
||||
...this.ctx.user.data,
|
||||
...user
|
||||
}
|
||||
this.ctx.user.save()
|
||||
|
||||
const sidebar = new Sidebar(this.ctx)
|
||||
document.body.appendChild(sidebar.$el)
|
||||
|
||||
if (customConf.darkMode) {
|
||||
sidebar.$el.classList.add('atk-dark-mode')
|
||||
}
|
||||
|
||||
sidebar.show()
|
||||
console.log('hello artalk-sidebar')
|
||||
}
|
||||
}
|
||||
|
||||
export default ArtalkSidebar
|
||||
@@ -1,16 +0,0 @@
|
||||
import ArtalkSidebar from './artalk-sidebar'
|
||||
|
||||
const searchParams = new URLSearchParams(document.location.search)
|
||||
const pageKey = searchParams.get('pageKey') || ''
|
||||
const site = searchParams.get('site') || ''
|
||||
const user = JSON.parse(searchParams.get('user') || '{}')
|
||||
const darkMode = searchParams.get('darkMode') === '1'
|
||||
;(window as any).referer = searchParams.get('referer')
|
||||
|
||||
const artalkSidebar = new ArtalkSidebar({
|
||||
el: '#ArtalkSidebar',
|
||||
server: (import.meta.env.MODE === 'development') ? 'http://localhost:23366/api' : '../api',
|
||||
pageKey,
|
||||
site,
|
||||
darkMode,
|
||||
}, user)
|
||||
+1
-1
@@ -1,4 +1,4 @@
|
||||
import './style/item-text-editor.less'
|
||||
import '../style/item-text-editor.less'
|
||||
|
||||
import * as Utils from 'artalk/src/lib/utils'
|
||||
|
||||
@@ -0,0 +1,31 @@
|
||||
import Artalk from 'artalk'
|
||||
import ArtalkConfig, { LocalUser } from 'artalk/types/artalk-config'
|
||||
import 'artalk/dist/Artalk.css'
|
||||
import SidebarRoot from './sidebar-root'
|
||||
|
||||
export default function InitSidebar(conf: ArtalkConfig, user: LocalUser) {
|
||||
const artalk = new Artalk(conf)
|
||||
|
||||
artalk.$root.style.display = 'none'
|
||||
|
||||
user = user || {}
|
||||
artalk.ctx.user.data = {
|
||||
...artalk.ctx.user.data,
|
||||
...user
|
||||
}
|
||||
artalk.ctx.user.save()
|
||||
|
||||
const sidebarCtx = new SidebarCtx()
|
||||
const sidebar = new SidebarRoot(artalk.ctx, sidebarCtx)
|
||||
document.body.appendChild(sidebar.$el)
|
||||
|
||||
if (conf.darkMode) sidebar.$el.classList.add('atk-dark-mode')
|
||||
|
||||
sidebar.init()
|
||||
|
||||
console.log('hello artalk-sidebar')
|
||||
}
|
||||
|
||||
export class SidebarCtx {
|
||||
reload!: () => void
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
import ArtalkComponent from 'artalk/src/lib/component'
|
||||
import Context from 'artalk/src/context'
|
||||
import { SidebarCtx } from './main'
|
||||
|
||||
export default class Component extends ArtalkComponent {
|
||||
sidebar: SidebarCtx
|
||||
|
||||
constructor(ctx: Context, sidebar: SidebarCtx) {
|
||||
super(ctx)
|
||||
|
||||
this.sidebar = sidebar
|
||||
}
|
||||
}
|
||||
+74
-78
@@ -1,13 +1,14 @@
|
||||
import './style/sidebar.less'
|
||||
|
||||
import Context from 'artalk/src/context'
|
||||
import Component from 'artalk/src/lib/component'
|
||||
import * as Utils from 'artalk/src/lib/utils'
|
||||
import * as Ui from 'artalk/src/lib/ui'
|
||||
import Comment from 'artalk/src/components/comment'
|
||||
import { SiteData } from 'artalk/types/artalk-data'
|
||||
import Api from 'artalk/src/api'
|
||||
|
||||
import Component from './sidebar-component'
|
||||
import { SidebarCtx } from './main'
|
||||
import SidebarHTML from './sidebar.html?raw'
|
||||
|
||||
import SidebarView from './sidebar-view'
|
||||
@@ -25,13 +26,12 @@ const REGISTER_VIEWS: (typeof SidebarView)[] = [
|
||||
CommentsView, PagesView, SitesView, TransferView, // SettingView
|
||||
]
|
||||
|
||||
export default class Sidebar extends Component {
|
||||
export default class SidebarRoot extends Component {
|
||||
public $header: HTMLElement
|
||||
public $headerMenu: HTMLElement
|
||||
public $title: HTMLElement
|
||||
public $avatar: HTMLElement
|
||||
public $siteLogo?: HTMLElement
|
||||
public $closeBtn: HTMLElement
|
||||
public $nav: HTMLElement
|
||||
public $curtViewBtn: HTMLElement
|
||||
public $curtViewBtnIcon: HTMLElement
|
||||
@@ -53,8 +53,8 @@ export default class Sidebar extends Component {
|
||||
|
||||
private viewSwitcherShow = false
|
||||
|
||||
constructor(ctx: Context) {
|
||||
super(ctx)
|
||||
constructor(ctx: Context, sidebar: SidebarCtx) {
|
||||
super(ctx, sidebar)
|
||||
|
||||
// initial elements
|
||||
this.$el = Utils.createElement(SidebarHTML)
|
||||
@@ -62,7 +62,6 @@ export default class Sidebar extends Component {
|
||||
this.$headerMenu = this.$header.querySelector('.atk-menu')!
|
||||
this.$title = this.$header.querySelector('.atk-sidebar-title')!
|
||||
this.$avatar = this.$header.querySelector('.atk-avatar')!
|
||||
this.$closeBtn = this.$header.querySelector('.atk-sidebar-close')!
|
||||
|
||||
this.$nav = this.$el.querySelector('.atk-sidebar-nav')!
|
||||
this.$curtViewBtn = this.$nav.querySelector('.akt-curt-view-btn')!
|
||||
@@ -76,14 +75,10 @@ export default class Sidebar extends Component {
|
||||
// init UI
|
||||
this.initViewSwitcher()
|
||||
|
||||
this.$closeBtn.onclick = () => {
|
||||
this.hide()
|
||||
// 重载操作
|
||||
this.sidebar.reload = () => {
|
||||
this.init()
|
||||
}
|
||||
|
||||
// event
|
||||
this.ctx.on('sidebar-show', () => (this.show()))
|
||||
this.ctx.on('sidebar-hide', () => (this.hide()))
|
||||
this.ctx.on('user-changed', () => { this.firstShow = true })
|
||||
}
|
||||
|
||||
/** 初始化 view 切换器 */
|
||||
@@ -130,75 +125,76 @@ export default class Sidebar extends Component {
|
||||
this.viewSwitcherShow = !this.viewSwitcherShow
|
||||
}
|
||||
|
||||
private firstShow = true
|
||||
|
||||
/** 显示 */
|
||||
public async show() {
|
||||
// 第一次加载
|
||||
if (this.firstShow) {
|
||||
///////////////////
|
||||
//// IMPORTANT ////
|
||||
///////////////////
|
||||
|
||||
// 用户权限检测
|
||||
if (this.isAdmin) {
|
||||
// 是管理员
|
||||
this.$title.innerText = '控制中心'
|
||||
this.$curtViewBtn.style.display = ''
|
||||
|
||||
if (!this.siteSwitcher) {
|
||||
// 初始化站点切换器
|
||||
this.siteSwitcher = new SiteListFloater(this.ctx, {
|
||||
onSwitchSite: (siteName) => { this.switchSite(siteName) },
|
||||
onClickSitesViewBtn: () => { this.switchView('sites') }
|
||||
})
|
||||
this.$viewWrap.before(this.siteSwitcher.$el)
|
||||
this.$avatar.onclick = (evt) => {
|
||||
if (!this.isAdmin) return
|
||||
this.siteSwitcher?.show(evt.target as any)
|
||||
}
|
||||
/** 初始化 */
|
||||
public async init() {
|
||||
// 用户权限检测
|
||||
if (this.isAdmin) {
|
||||
// 是管理员
|
||||
this.$title.innerText = '控制中心'
|
||||
this.$curtViewBtn.style.display = ''
|
||||
|
||||
if (!this.siteSwitcher) {
|
||||
// 初始化站点切换器
|
||||
this.siteSwitcher = new SiteListFloater(this.ctx, {
|
||||
onSwitchSite: (siteName) => {
|
||||
this.switchSite(siteName)
|
||||
},
|
||||
onClickSitesViewBtn: () => {
|
||||
this.switchView('sites')
|
||||
},
|
||||
})
|
||||
this.$viewWrap.before(this.siteSwitcher.$el)
|
||||
this.$avatar.onclick = (evt) => {
|
||||
if (!this.isAdmin) return
|
||||
this.siteSwitcher?.show(evt.target as any)
|
||||
}
|
||||
|
||||
this.curtSite = this.conf.site
|
||||
|
||||
Ui.showLoading(this.$el)
|
||||
try {
|
||||
await this.siteSwitcher!.load(this.curtSite)
|
||||
} catch (err: any) {
|
||||
const $err = Utils.createElement(`<span>加载失败：${err.msg || '网络错误'}<br/></span>`)
|
||||
const $retryBtn = Utils.createElement('<span style="cursor:pointer;">点击重新获取</span>')
|
||||
$err.appendChild($retryBtn)
|
||||
$retryBtn.onclick = () => { Ui.setError(this.$el, null); this.show() }
|
||||
Ui.setError(this.$el, $err)
|
||||
return
|
||||
} finally { Ui.hideLoading(this.$el) }
|
||||
|
||||
// 站点图像
|
||||
this.$avatar.innerHTML = ''
|
||||
this.$siteLogo = Utils.createElement('<div class="atk-site-logo"></div>')
|
||||
this.$siteLogo.innerText = (this.curtSite || '').substr(0, 1)
|
||||
this.$avatar.append(this.$siteLogo)
|
||||
} else {
|
||||
// 不是管理员
|
||||
this.$title.innerText = '通知中心'
|
||||
this.$curtViewBtn.style.display = 'none' // 隐藏 view 切换器
|
||||
this.curtSite = this.conf.site // 第一次 show 使用当前站点数据
|
||||
|
||||
// 头像
|
||||
const $avatarImg = document.createElement('img') as HTMLImageElement
|
||||
$avatarImg.src = Utils.getGravatarURL(this.ctx, MD5(this.ctx.user.data.email.toLowerCase()))
|
||||
this.$avatar.innerHTML = ''
|
||||
this.$avatar.append($avatarImg)
|
||||
}
|
||||
|
||||
this.switchView(DEFAULT_VIEW) // 打开默认 view
|
||||
this.firstShow = false
|
||||
}
|
||||
}
|
||||
this.curtSite = this.conf.site
|
||||
|
||||
public async hide() {
|
||||
console.log("hide")
|
||||
Ui.showLoading(this.$el)
|
||||
try {
|
||||
await this.siteSwitcher!.load(this.curtSite)
|
||||
} catch (err: any) {
|
||||
const $err = Utils.createElement(
|
||||
`<span>加载失败：${err.msg || '网络错误'}<br/></span>`
|
||||
)
|
||||
const $retryBtn = Utils.createElement(
|
||||
'<span style="cursor:pointer;">点击重新获取</span>'
|
||||
)
|
||||
$err.appendChild($retryBtn)
|
||||
$retryBtn.onclick = () => {
|
||||
Ui.setError(this.$el, null)
|
||||
this.init()
|
||||
}
|
||||
Ui.setError(this.$el, $err)
|
||||
return
|
||||
} finally {
|
||||
Ui.hideLoading(this.$el)
|
||||
}
|
||||
|
||||
// 站点图像
|
||||
this.$avatar.innerHTML = ''
|
||||
this.$siteLogo = Utils.createElement('<div class="atk-site-logo"></div>')
|
||||
this.$siteLogo.innerText = (this.curtSite || '').substr(0, 1)
|
||||
this.$avatar.append(this.$siteLogo)
|
||||
} else {
|
||||
// 不是管理员
|
||||
this.$title.innerText = '通知中心'
|
||||
this.$curtViewBtn.style.display = 'none' // 隐藏 view 切换器
|
||||
this.curtSite = this.conf.site // 第一次 show 使用当前站点数据
|
||||
|
||||
// 头像
|
||||
const $avatarImg = document.createElement('img') as HTMLImageElement
|
||||
$avatarImg.src = Utils.getGravatarURL(
|
||||
this.ctx,
|
||||
MD5(this.ctx.user.data.email.toLowerCase())
|
||||
)
|
||||
this.$avatar.innerHTML = ''
|
||||
this.$avatar.append($avatarImg)
|
||||
}
|
||||
|
||||
this.switchView(DEFAULT_VIEW) // 打开默认 view
|
||||
}
|
||||
|
||||
/** 切换 View */
|
||||
@@ -207,7 +203,7 @@ export default class Sidebar extends Component {
|
||||
if (!view) {
|
||||
// 初始化 View
|
||||
const View = REGISTER_VIEWS.find(o => o.viewName === viewName)!
|
||||
view = new View(this.ctx, this.$viewWrap)
|
||||
view = new View(this.ctx, this.sidebar, this.$viewWrap)
|
||||
this.viewInstances[viewName] = view
|
||||
}
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
import Context from 'artalk/src/context'
|
||||
import Component from 'artalk/src/lib/component'
|
||||
import * as Utils from 'artalk/src/lib/utils'
|
||||
import Comment from 'artalk/src/components/comment'
|
||||
import Component from './sidebar-component'
|
||||
import { SidebarCtx } from './main'
|
||||
|
||||
export default class SidebarView extends Component {
|
||||
static viewName = ''
|
||||
@@ -13,8 +14,8 @@ export default class SidebarView extends Component {
|
||||
|
||||
protected $parent: HTMLElement
|
||||
|
||||
constructor(ctx: Context, $parent: HTMLElement) {
|
||||
super(ctx)
|
||||
constructor(ctx: Context, sidebar: SidebarCtx, $parent: HTMLElement) {
|
||||
super(ctx, sidebar)
|
||||
|
||||
this.$parent = $parent
|
||||
this.$el = Utils.createElement(`<div class="atk-sidebar-view"></div>`)
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
import Api from 'artalk/src/api'
|
||||
import Context from 'artalk/src/context'
|
||||
import Component from 'artalk/src/lib/component'
|
||||
import * as Utils from 'artalk/src/lib/utils'
|
||||
import * as Ui from 'artalk/src/lib/ui'
|
||||
import Comment from 'artalk/src/components/comment'
|
||||
@@ -24,7 +23,7 @@ export default class PagesView extends SidebarView {
|
||||
|
||||
mount(siteName: string) {
|
||||
if (!this.pageList) {
|
||||
this.pageList = new PageList(this.ctx)
|
||||
this.pageList = new PageList(this.ctx, this.sidebar)
|
||||
this.$el.append(this.pageList.$el)
|
||||
}
|
||||
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
import Api from 'artalk/src/api'
|
||||
import Context from 'artalk/src/context'
|
||||
import Component from 'artalk/src/lib/component'
|
||||
import * as Utils from 'artalk/src/lib/utils'
|
||||
import Comment from 'artalk/src/components/comment'
|
||||
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
import Api from 'artalk/src/api'
|
||||
import Context from 'artalk/src/context'
|
||||
import Component from 'artalk/src/lib/component'
|
||||
import * as Utils from 'artalk/src/lib/utils'
|
||||
import Comment from 'artalk/src/components/comment'
|
||||
|
||||
@@ -19,7 +18,7 @@ export default class SitesView extends SidebarView {
|
||||
|
||||
mount(siteName: string) {
|
||||
if (!this.siteList) {
|
||||
this.siteList = new SiteList(this.ctx)
|
||||
this.siteList = new SiteList(this.ctx, this.sidebar)
|
||||
this.$el.append(this.siteList.$el)
|
||||
}
|
||||
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
import Api from 'artalk/src/api'
|
||||
import Context from 'artalk/src/context'
|
||||
import Component from 'artalk/src/lib/component'
|
||||
import * as Utils from 'artalk/src/lib/utils'
|
||||
import * as Ui from 'artalk/src/lib/ui'
|
||||
import Comment from 'artalk/src/components/comment'
|
||||
@@ -8,7 +7,7 @@ import Comment from 'artalk/src/components/comment'
|
||||
import SiteList from '../admin/site-list'
|
||||
import SidebarView from '../sidebar-view'
|
||||
|
||||
export default class TransferView extends SidebarView {ß
|
||||
export default class TransferView extends SidebarView {
|
||||
static viewName = 'transfer'
|
||||
static viewTitle = '迁移'
|
||||
static viewAdminOnly = true
|
||||
@@ -42,8 +41,18 @@ export default class TransferView extends SidebarView {ß
|
||||
</div>
|
||||
<div class="atk-form">
|
||||
<div class="atk-label atk-data-file-label">Artrans 数据文件</div>
|
||||
<input type="file" name="AtkDataFile" accept="text/plain,.json,.artrans">
|
||||
<span class="atk-desc">使用「<a href="https://artalk.js.org/guide/transfer.html" target="_blank">转换工具</a>」将评论数据转为 Artrans 格式</span>
|
||||
<div class="atk-file-upload-group">
|
||||
<div class="atk-file-input-wrap atk-fade-in">
|
||||
<input type="file" name="AtkDataFile" accept=".artrans">
|
||||
<span class="atk-desc">使用「<a href="https://artalk.js.org/guide/transfer.html" target="_blank">转换工具</a>」将评论数据转为 Artrans 格式</span>
|
||||
</div>
|
||||
<div class="atk-uploading-wrap atk-fade-in">
|
||||
<div class="atk-progress">
|
||||
<div class="atk-bar"></div>
|
||||
</div>
|
||||
<div class="atk-status">上传中 <span class="atk-curt">0%</span>... <span class="atk-abort">取消</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="atk-label">目标站点名</div>
|
||||
<input type="text" name="AtkSiteName" placeholder="输入内容..." autocomplete="off">
|
||||
<div class="atk-label">目标站点 URL</div>
|
||||
@@ -55,16 +64,132 @@ export default class TransferView extends SidebarView {ß
|
||||
</div>`
|
||||
|
||||
const $form = this.$el.querySelector<HTMLSelectElement>('.atk-form')!
|
||||
const $dataFile = $form.querySelector<HTMLInputElement>('[name="AtkDataFile"]')!
|
||||
const $dataFileLabel = $form.querySelector<HTMLInputElement>('.atk-data-file-label')!
|
||||
|
||||
const $fileWrap = $form.querySelector<HTMLElement>('.atk-file-input-wrap')!
|
||||
const $file = $fileWrap.querySelector<HTMLInputElement>('[name="AtkDataFile"]')!
|
||||
const $fileDesc = $fileWrap.querySelector<HTMLElement>('.atk-desc')!
|
||||
const fileDescOrgHTML = $fileDesc.innerHTML
|
||||
const restoreFileInput = () => {
|
||||
$fileDesc.innerHTML = fileDescOrgHTML
|
||||
$file.value = ''
|
||||
}
|
||||
|
||||
// 文件上传
|
||||
const $uploadingWrap = $form.querySelector<HTMLElement>('.atk-uploading-wrap')!
|
||||
const $uploadProgress = $uploadingWrap.querySelector<HTMLElement>('.atk-progress')!
|
||||
const $uploadProgressBar = $uploadProgress.querySelector<HTMLElement>('.atk-bar')!
|
||||
const $uploadStatus = $uploadingWrap.querySelector<HTMLElement>('.atk-status')!
|
||||
const $uploadStatusCurt = $uploadStatus.querySelector<HTMLElement>('.atk-curt')!
|
||||
const $uploadAbortBtn = $uploadStatus.querySelector<HTMLElement>('.atk-abort')!
|
||||
|
||||
const $siteName = $form.querySelector<HTMLInputElement>('[name="AtkSiteName"]')!
|
||||
const $siteURL = $form.querySelector<HTMLInputElement>('[name="AtkSiteURL"]')!
|
||||
const $payload = $form.querySelector<HTMLTextAreaElement>('[name="AtkPayload"]')!
|
||||
const $submitBtn = $form.querySelector<HTMLButtonElement>('[name="AtkSubmit"]')!
|
||||
const setError = (msg: string) => window.alert(msg)
|
||||
|
||||
const showUploading = () => {
|
||||
$fileWrap.style.display = 'none'
|
||||
$uploadingWrap.style.display = ''
|
||||
setUploading(0)
|
||||
}
|
||||
|
||||
const hideUploading = () => {
|
||||
$fileWrap.style.display = ''
|
||||
$uploadingWrap.style.display = 'none'
|
||||
}
|
||||
|
||||
const setUploading = (progress: number) => {
|
||||
$uploadProgressBar.style.width = `${progress}%`
|
||||
$uploadStatusCurt.innerText = `${progress}%`
|
||||
}
|
||||
|
||||
let UploadedFilename: string = ''
|
||||
|
||||
hideUploading()
|
||||
|
||||
// 文件上传操作
|
||||
$file.onchange = () => {
|
||||
if (!$file.files || $file.files.length < 0) return
|
||||
|
||||
showUploading()
|
||||
UploadedFilename = ''
|
||||
|
||||
const xhr = new XMLHttpRequest()
|
||||
|
||||
// 进度条
|
||||
xhr.upload.addEventListener('progress', (evt) => {
|
||||
if (evt.loaded === evt.total) {
|
||||
// 上传完毕
|
||||
setUploading(100)
|
||||
return
|
||||
}
|
||||
|
||||
const fileSize = $file.files![0].size
|
||||
if (evt.loaded <= fileSize) {
|
||||
// 正在上传
|
||||
const percent = Math.round(evt.loaded / fileSize * 100)
|
||||
setUploading(percent)
|
||||
}
|
||||
})
|
||||
|
||||
// 创建上传参数
|
||||
const formData = new FormData()
|
||||
formData.append('file', $file.files[0])
|
||||
formData.append('token', this.ctx.user.data.token)
|
||||
|
||||
// 开始上传
|
||||
xhr.open('post', `${this.ctx.conf.server}/admin/import-upload`)
|
||||
xhr.timeout = 2*60*1000 // 2min
|
||||
xhr.send(formData)
|
||||
|
||||
// 上传成功事件
|
||||
xhr.onload = () => {
|
||||
const setErr = (msg: string): void => {
|
||||
restoreFileInput()
|
||||
hideUploading()
|
||||
alert(`文件上传失败，${msg}`)
|
||||
}
|
||||
|
||||
if (xhr.status !== 200) {
|
||||
setErr(`响应状态码：${xhr.status}`)
|
||||
return
|
||||
}
|
||||
|
||||
let json: any
|
||||
try {
|
||||
json = JSON.parse(xhr.response)
|
||||
} catch (err) {
|
||||
console.error(err)
|
||||
setErr(`JSON 解析失败：${err}`)
|
||||
return
|
||||
}
|
||||
|
||||
if (!json.success || !json.data.filename) {
|
||||
setErr(`响应：${xhr.response}`)
|
||||
return
|
||||
}
|
||||
|
||||
$fileDesc.innerHTML = '文件已成功上传，可以开始导入'
|
||||
UploadedFilename = json.data.filename
|
||||
hideUploading()
|
||||
}
|
||||
|
||||
// 中止上传
|
||||
$uploadAbortBtn.onclick = () => {
|
||||
xhr.abort()
|
||||
restoreFileInput()
|
||||
hideUploading()
|
||||
}
|
||||
}
|
||||
|
||||
// 开始导入按钮
|
||||
$submitBtn.onclick = () => {
|
||||
const dataType = 'artrans'
|
||||
if (!UploadedFilename) {
|
||||
setError(`请先上传 Artrans 数据文件`)
|
||||
return
|
||||
}
|
||||
|
||||
const siteName = $siteName.value.trim()
|
||||
const siteURL = $siteURL.value.trim()
|
||||
const payload = $payload.value.trim()
|
||||
@@ -80,7 +205,7 @@ export default class TransferView extends SidebarView {ß
|
||||
return
|
||||
}
|
||||
|
||||
if (rData !instanceof Object) {
|
||||
if (typeof rData !== 'object' || Array.isArray(rData)) {
|
||||
setError(`Payload 需为 JSON 对象`)
|
||||
return
|
||||
}
|
||||
@@ -89,7 +214,7 @@ export default class TransferView extends SidebarView {ß
|
||||
if (siteURL) rData.t_url = siteURL
|
||||
|
||||
// 创建导入会话
|
||||
const createSession = (dataStr?: string) => {
|
||||
const createSession = (filename?: string) => {
|
||||
const $logWrap = this.$el.querySelector<HTMLElement>('.atk-log-wrap')!
|
||||
const $log = $logWrap.querySelector<HTMLElement>('.atk-log')!
|
||||
const $backBtn = this.$el.querySelector<HTMLElement>('.atk-log-back-btn')!
|
||||
@@ -100,9 +225,12 @@ export default class TransferView extends SidebarView {ß
|
||||
$backBtn.onclick = () => {
|
||||
$logWrap.style.display = 'none'
|
||||
$form.style.display = ''
|
||||
restoreFileInput()
|
||||
UploadedFilename = ''
|
||||
this.sidebar.reload()
|
||||
}
|
||||
|
||||
if (dataStr) rData.json_data = dataStr
|
||||
if (filename) rData.json_file = filename
|
||||
|
||||
// 创建 iframe
|
||||
const frameName = `f_${+new Date()}`
|
||||
@@ -113,7 +241,6 @@ export default class TransferView extends SidebarView {ß
|
||||
$log.append($frame)
|
||||
|
||||
const formParams: {[k: string]: string} = {
|
||||
type: dataType,
|
||||
payload: JSON.stringify(rData),
|
||||
token: this.ctx.user.data.token || '',
|
||||
}
|
||||
@@ -138,20 +265,8 @@ export default class TransferView extends SidebarView {ß
|
||||
$formTmp.remove()
|
||||
}
|
||||
|
||||
const reader = new FileReader()
|
||||
reader.onload = () => {
|
||||
const data = String(reader.result)
|
||||
createSession(data)
|
||||
}
|
||||
|
||||
// 是否已选择文件
|
||||
if ($dataFile.files?.length) {
|
||||
// 先读取文件
|
||||
reader.readAsText($dataFile.files[0])
|
||||
} else {
|
||||
// 直接开始会话
|
||||
createSession()
|
||||
}
|
||||
// 直接开始会话
|
||||
createSession(UploadedFilename)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -160,7 +275,7 @@ export default class TransferView extends SidebarView {ß
|
||||
|
||||
try {
|
||||
const d = await new Api(this.ctx).export()
|
||||
this.download(`artrans-${this.getYmdHisFilename()}.json`, d)
|
||||
this.download(`backup-${this.getYmdHisFilename()}.artrans`, d)
|
||||
} catch (err: any) {
|
||||
console.log(err)
|
||||
window.alert(`${String(err)}`)
|
||||
|
||||
@@ -317,13 +317,13 @@
|
||||
}
|
||||
|
||||
&[type="file"] {
|
||||
border-radius: 2px;
|
||||
background: transparent;
|
||||
border: 2px solid var(--at-color-border);
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
padding: 0 15px;
|
||||
margin-bottom: 20px;
|
||||
margin-bottom: 17px;
|
||||
border-radius: 50px;
|
||||
|
||||
&:hover {
|
||||
background: var(--at-color-bg-light);
|
||||
@@ -336,11 +336,16 @@
|
||||
color: #000;
|
||||
border: 0;
|
||||
border-right: 2px solid #eee;
|
||||
padding: 0 20px 0 5px;
|
||||
border-left: 0;
|
||||
border-top: 0;
|
||||
border-bottom: 0;
|
||||
padding: 0 20px 0 10px;
|
||||
line-height: 25px;
|
||||
margin-right: 15px;
|
||||
cursor: pointer;
|
||||
transition: .2s ease;
|
||||
-webkit-appearance: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -380,14 +385,59 @@
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
padding: 0 20px;
|
||||
border-radius: 4px;
|
||||
border-radius: 50px;
|
||||
margin: 0 5px;
|
||||
width: 100%;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
input, select, button {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.atk-file-upload-group {
|
||||
height: 100px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.atk-uploading-wrap {
|
||||
.atk-progress {
|
||||
width: 100%;
|
||||
height: 12px;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
background: #eee;
|
||||
border-radius: 100px;
|
||||
margin-bottom: 7px;
|
||||
margin-top: 20px;
|
||||
|
||||
.atk-bar {
|
||||
transition: 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
|
||||
background: var(--at-color-main);
|
||||
height: 100%;
|
||||
width: 0%;
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
.atk-status {
|
||||
color: var(--at-color-meta);
|
||||
font-size: 14px;
|
||||
|
||||
.atk-curt {
|
||||
color: var(--at-color-main)
|
||||
}
|
||||
|
||||
.atk-abort {
|
||||
cursor: pointer;
|
||||
float: right;
|
||||
|
||||
&:hover {
|
||||
color: var(--at-color-main);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.atk-log-wrap {
|
||||
|
||||
+1
-1
@@ -1,3 +1,3 @@
|
||||
import ArtalkSidebar from '../src/artalk-sidebar'
|
||||
import ArtalkSidebar from '../src/main'
|
||||
|
||||
export default ArtalkSidebar
|
||||
@@ -13,29 +13,7 @@ export default defineConfig({
|
||||
build: {
|
||||
target: 'es2015',
|
||||
outDir: resolve(__dirname, "dist"),
|
||||
minify: 'terser',
|
||||
// lib: {
|
||||
// entry: resolve(__dirname, 'src/main.ts'),
|
||||
// name: 'ArtalkSidebar',
|
||||
// fileName: (format) => ((format == "umd") ? 'ArtalkSidebar.js' : `ArtalkSidebar.${format}.js`),
|
||||
// formats: ["es", "umd", "iife"]
|
||||
// },
|
||||
rollupOptions: {
|
||||
// 确保外部化处理那些你不想打包进库的依赖
|
||||
// external: ['artalk'],
|
||||
output: {
|
||||
assetFileNames: assetInfo => {
|
||||
if (/\.css$/.test(assetInfo.name)) {
|
||||
return 'ArtalkSidebar.css'
|
||||
}
|
||||
return "[name].[ext]"
|
||||
},
|
||||
// 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
|
||||
globals: {
|
||||
artalk: 'Artalk'
|
||||
}
|
||||
}
|
||||
}
|
||||
minify: 'terser'
|
||||
},
|
||||
plugins: [tsconfigPaths()],
|
||||
css: {
|
||||
|
||||
@@ -29,6 +29,9 @@
|
||||
body.dark-mode .to-night { background: #fff;border: 1px solid #2d3235;color: #0083ff; }
|
||||
.to-top { right: 25px; }
|
||||
</style>
|
||||
<!--<link rel="stylesheet"
|
||||
href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/styles/arta.min.css">
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"></script>-->
|
||||
</head>
|
||||
<body>
|
||||
<div class="card billboard atk-fade-in">
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "artalk",
|
||||
"version": "2.2.1",
|
||||
"version": "2.2.3",
|
||||
"backendMinVersion": "2.1.1",
|
||||
"license": "LGPL-3.0",
|
||||
"description": "A Selfhosted Comment System",
|
||||
|
||||
@@ -317,7 +317,7 @@ export default class Comment extends Component {
|
||||
}
|
||||
|
||||
getIsRoot() {
|
||||
return this.parent === null
|
||||
return this.data.rid === 0
|
||||
}
|
||||
|
||||
getChildren() {
|
||||
|
||||
@@ -551,6 +551,8 @@ export default class Editor extends Component {
|
||||
const $travelPlace = Utils.createElement('<div></div>')
|
||||
$afterEl.after($travelPlace)
|
||||
$travelPlace.replaceWith(this.$el)
|
||||
|
||||
this.$el.classList.add('atk-fade-in') // 添加渐入动画
|
||||
}
|
||||
|
||||
travelBack () {
|
||||
|
||||
@@ -93,6 +93,7 @@ export default class SidebarLayer extends Component {
|
||||
+ `?pageKey=${encodeURIComponent(this.conf.pageKey)}`
|
||||
+ `&site=${encodeURIComponent(this.conf.site || '')}`
|
||||
+ `&user=${userData}`
|
||||
+ `&time=${+new Date()}`
|
||||
+ `&referer=${encodeURIComponent(`${location.protocol}//${location.host}${location.pathname}`)}`
|
||||
+ `${((this.conf.darkMode) ? `&darkMode=1` : ``)}`)
|
||||
|
||||
|
||||
@@ -150,25 +150,34 @@ export function initMarked(ctx: Context) {
|
||||
return html.replace(/^<a /, `<a target="_blank" ${!localLink ? `rel="noreferrer noopener nofollow"` : ''} `);
|
||||
}
|
||||
|
||||
renderer.code = (block, lang) => {
|
||||
// Colorize the block only if the language is known to highlight.js
|
||||
const realLang = (!lang ? 'plaintext' : lang)
|
||||
let colorized = block
|
||||
if ((window as any).hljs) {
|
||||
if (realLang && (window as any).hljs.getLanguage(realLang)) {
|
||||
colorized = (window as any).hljs.highlight(realLang, block).value
|
||||
}
|
||||
} else {
|
||||
colorized = hanabi(block)
|
||||
}
|
||||
|
||||
return `<pre rel="${realLang}">\n`
|
||||
+ `<code class="hljs language-${realLang}">${colorized.replace(/&/g, '&')}</code>\n`
|
||||
+ `</pre>`
|
||||
}
|
||||
|
||||
// @see https://github.com/markedjs/marked/blob/4afb228d956a415624c4e5554bb8f25d047676fe/src/Tokenizer.js#L329
|
||||
const nMarked = libMarked
|
||||
libMarked.setOptions({
|
||||
renderer,
|
||||
highlight: (code) => hanabi(code),
|
||||
pedantic: false,
|
||||
gfm: true,
|
||||
breaks: true,
|
||||
smartLists: true,
|
||||
smartypants: true,
|
||||
xhtml: false,
|
||||
sanitize: true,
|
||||
sanitizer: (html) => insane(html, {
|
||||
...insane.defaults,
|
||||
allowedAttributes: {
|
||||
...insane.defaults.allowedAttributes,
|
||||
img: ['src', 'atk-emoticon']
|
||||
},
|
||||
}),
|
||||
sanitize: false,
|
||||
silent: true,
|
||||
})
|
||||
|
||||
@@ -177,7 +186,49 @@ export function initMarked(ctx: Context) {
|
||||
|
||||
/** 解析 markdown */
|
||||
export function marked(ctx: Context, src: string): string {
|
||||
return ctx.markedInstance.parse(src)
|
||||
// @link https://gist.github.com/lionel-rowe/bb384465ba4e4c81a9c8dada84167225
|
||||
return insane(ctx.markedInstance.parse(src), {
|
||||
allowedClasses: {},
|
||||
allowedSchemes: ['http', 'https', 'mailto'],
|
||||
allowedTags: [
|
||||
'a', 'abbr', 'article', 'b', 'blockquote', 'br', 'caption', 'code', 'del', 'details', 'div', 'em',
|
||||
'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'hr', 'i', 'img', 'ins', 'kbd', 'li', 'main', 'mark',
|
||||
'ol', 'p', 'pre', 'section', 'span', 'strike', 'strong', 'sub', 'summary', 'sup', 'table',
|
||||
'tbody', 'td', 'th', 'thead', 'tr', 'u', 'ul'
|
||||
],
|
||||
allowedAttributes: {
|
||||
'*': ['title', 'accesskey'],
|
||||
a: ['href', 'name', 'target', 'aria-label'],
|
||||
img: ['src', 'alt', 'title', 'atk-emoticon', 'aria-label'],
|
||||
// for code highlight
|
||||
code: ['class'],
|
||||
span: ['class', 'style'],
|
||||
},
|
||||
filter: node => {
|
||||
// allow hljs style
|
||||
const allowed = [
|
||||
[ 'code', /^hljs\W+language-(.*)$/ ],
|
||||
[ 'span', /^(hljs-.*)$/ ]
|
||||
]
|
||||
allowed.forEach(([ tag, reg ]) => {
|
||||
if (
|
||||
node.tag === tag
|
||||
&& !!node.attrs.class
|
||||
&& !(reg as RegExp).test(node.attrs.class)
|
||||
) {
|
||||
delete node.attrs.class
|
||||
}
|
||||
})
|
||||
|
||||
// allow <span> set color sty
|
||||
if (node.tag === 'span' && !!node.attrs.style
|
||||
&& !/^color:(\W+)?#[0-9a-f]{3,6};?$/i.test(node.attrs.style)) {
|
||||
delete node.attrs.style
|
||||
}
|
||||
|
||||
return true
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/** 获取修正后的 UserAgent */
|
||||
|
||||
@@ -7,28 +7,46 @@
|
||||
}
|
||||
|
||||
.artalk, .atk-layer-wrap {
|
||||
line-height: @line-height;
|
||||
color: var(--at-color-font);
|
||||
font-family: @font-family;
|
||||
word-wrap: break-word;
|
||||
word-break: break-all;
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
line-height: @line-height;
|
||||
}
|
||||
|
||||
input, textarea, button, optgroup, select {
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
@codeFont: Source Code Pro,courier new,Input Mono,PT Mono,SFMono-Regular,Consolas,Monaco,Menlo,PingFang SC,Liberation Mono,Microsoft YaHei,Courier,monospace;
|
||||
|
||||
code {
|
||||
font-family: @codeFont;
|
||||
margin: 0 .3em;
|
||||
padding: .1em .2em;
|
||||
background-color: var(--at-color-bg-grey);
|
||||
color: var(--at-color-font);
|
||||
font-family: @font-family;
|
||||
word-wrap: break-word;
|
||||
word-break: break-all;
|
||||
border-radius: @block-radius;
|
||||
}
|
||||
|
||||
pre {
|
||||
padding: 10px;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 0;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
pre code {
|
||||
* { font-family: @codeFont; }
|
||||
line-height: @line-height;
|
||||
display: block;
|
||||
padding: 10px 15px;
|
||||
white-space: pre-wrap;
|
||||
background-color: var(--at-color-bg-grey);
|
||||
color: var(--at-color-font);
|
||||
padding: 10px 15px;
|
||||
border-radius: @block-radius;
|
||||
margin: 0;
|
||||
font-family: Source Code Pro,courier new,Input Mono,PT Mono,SFMono-Regular,Consolas,Monaco,Menlo,PingFang SC,Liberation Mono,Microsoft YaHei,Courier,monospace;
|
||||
|
||||
code {
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
@@ -55,6 +73,28 @@
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
margin-bottom: 1.5em;
|
||||
font-size: .96em
|
||||
}
|
||||
|
||||
td, th {
|
||||
text-align: left;
|
||||
padding: 4px 8px 4px 10px;
|
||||
border: 1px solid var(--at-color-border)
|
||||
}
|
||||
|
||||
td {
|
||||
vertical-align: top
|
||||
}
|
||||
|
||||
tr:nth-child(even) {
|
||||
background-color: var(--at-color-bg-grey);
|
||||
}
|
||||
}
|
||||
|
||||
.atk-hide {
|
||||
|
||||
Reference in new issue
Block a user