Compare commits
8 Commits
0726c0be25
...
ef50b6558b
Author | SHA1 | Date |
---|---|---|
|
ef50b6558b | |
|
8e00479668 | |
|
787f42a801 | |
|
dd3884f910 | |
|
b9ca3f3650 | |
|
3e4a7df335 | |
|
a343f9dacd | |
|
0678b1dd76 |
Binary file not shown.
After Width: | Height: | Size: 216 KiB |
Binary file not shown.
After Width: | Height: | Size: 926 KiB |
|
@ -23,6 +23,7 @@
|
||||||
#preview {
|
#preview {
|
||||||
min-height: 200px;
|
min-height: 200px;
|
||||||
flex: 1 1;
|
flex: 1 1;
|
||||||
|
width: 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
#preview {
|
#preview {
|
||||||
|
|
|
@ -58,6 +58,18 @@ drive:baidu
|
||||||
name: 网站资源集合
|
name: 网站资源集合
|
||||||
link: https://www.baidu.com/
|
link: https://www.baidu.com/
|
||||||
password: abcde
|
password: abcde
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
gallery:grid
|
||||||
|
[Image 1](/imgs/img1.png)
|
||||||
|
[Image 2](/imgs/img2.png)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
gallery:linear
|
||||||
|
[Image 1](/imgs/img1.png)
|
||||||
|
[Image 2](/imgs/img2.png)
|
||||||
`
|
`
|
||||||
render()
|
render()
|
||||||
})
|
})
|
||||||
|
|
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
@ -0,0 +1,81 @@
|
||||||
|
@import "constant";
|
||||||
|
|
||||||
|
.halo-render.gallery {
|
||||||
|
border: 1px solid @secondary-light;
|
||||||
|
border-radius: @border-radius;
|
||||||
|
padding: 10px 15px;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 18px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
|
||||||
|
.iconfont {
|
||||||
|
font-size: 30px;
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.image-list {
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
.vditor--gallery-container {
|
||||||
|
.img {
|
||||||
|
border-radius: @border-radius!important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&&.grid {
|
||||||
|
|
||||||
|
.image-list {
|
||||||
|
flex-wrap: wrap;
|
||||||
|
column-gap: 2%;
|
||||||
|
row-gap: 10px;
|
||||||
|
|
||||||
|
.vditor--gallery-container {
|
||||||
|
width: 32%;
|
||||||
|
height: 0;
|
||||||
|
position: relative;
|
||||||
|
padding-bottom: 32%;
|
||||||
|
|
||||||
|
.img {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 1400px) {
|
||||||
|
.container {
|
||||||
|
width: 23%;
|
||||||
|
padding-bottom: 23%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&&.linear {
|
||||||
|
.image-list {
|
||||||
|
display: flex;
|
||||||
|
overflow-y: hidden;
|
||||||
|
overflow-x: auto;
|
||||||
|
width: 100%;
|
||||||
|
gap: 10px;
|
||||||
|
|
||||||
|
.vditor--gallery-container {
|
||||||
|
height: 300px;
|
||||||
|
|
||||||
|
.img {
|
||||||
|
height: 99%;
|
||||||
|
width: auto!important;
|
||||||
|
max-width: unset!important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,26 @@
|
||||||
|
import {IOptions, Provider} from "./provider";
|
||||||
|
import {RENDER_CLASS} from "../constant";
|
||||||
|
import "../less/gallery.less"
|
||||||
|
|
||||||
|
export class GalleryProvider implements Provider {
|
||||||
|
check(type: string): boolean {
|
||||||
|
return type.startsWith("gallery");
|
||||||
|
}
|
||||||
|
process(type: string, content: string, options: IOptions): string {
|
||||||
|
const imgInfoList = content.split("\n")
|
||||||
|
const [, subtype, title=""] = type.match(/gallery:([a-zA-Z]+)(?:\[(.*?))?$/)
|
||||||
|
console.log(subtype)
|
||||||
|
let html = `<div class="${RENDER_CLASS} gallery ${subtype}">`
|
||||||
|
html += `<div class="title"><span class="iconfont"></span>${title.replace("]", "") || "图集"}</div>`
|
||||||
|
// Start Image List
|
||||||
|
html += `<div class="image-list">`
|
||||||
|
imgInfoList.forEach(info => {
|
||||||
|
if (!info) return;
|
||||||
|
const [, alt, url] = info.match(/\[(.*)]\((.*)\)/)
|
||||||
|
html+= `<div class="vditor--gallery-container"><img class="img" src="${url}" alt="${alt}" /></div>`
|
||||||
|
})
|
||||||
|
html += `</div>`
|
||||||
|
// RETURN
|
||||||
|
return html + "</div>"
|
||||||
|
}
|
||||||
|
}
|
|
@ -2,9 +2,11 @@ import {TipsProvider} from "./tips-provider";
|
||||||
import {Provider} from "./provider";
|
import {Provider} from "./provider";
|
||||||
import {GitProvider} from "./git-provider";
|
import {GitProvider} from "./git-provider";
|
||||||
import {DriveProvider} from "./drive-provider";
|
import {DriveProvider} from "./drive-provider";
|
||||||
|
import {GalleryProvider} from "./gallery-provider";
|
||||||
|
|
||||||
export const ProviderList:Array<Provider> = [
|
export const ProviderList:Array<Provider> = [
|
||||||
new TipsProvider(),
|
new TipsProvider(),
|
||||||
new GitProvider(),
|
new GitProvider(),
|
||||||
new DriveProvider()
|
new DriveProvider(),
|
||||||
|
new GalleryProvider()
|
||||||
]
|
]
|
||||||
|
|
|
@ -3,8 +3,8 @@ import {ProviderList} from "./provider-list";
|
||||||
import {RENDER_CLASS} from "../constant";
|
import {RENDER_CLASS} from "../constant";
|
||||||
|
|
||||||
export declare interface Provider {
|
export declare interface Provider {
|
||||||
check: (type: string) => boolean
|
check(type: string): boolean
|
||||||
process: (type:string,content: string, options: IOptions) => string
|
process(type:string,content: string, options: IOptions): string
|
||||||
}
|
}
|
||||||
|
|
||||||
export class ProviderFactory {
|
export class ProviderFactory {
|
||||||
|
|
|
@ -61,6 +61,9 @@ module.exports = {
|
||||||
})
|
})
|
||||||
],
|
],
|
||||||
devServer: {
|
devServer: {
|
||||||
|
static: {
|
||||||
|
directory: path.join(__dirname , 'assets'),
|
||||||
|
},
|
||||||
port: 9000,
|
port: 9000,
|
||||||
host: "0.0.0.0"
|
host: "0.0.0.0"
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue