Compare commits
8 Commits
0726c0be25
...
ef50b6558b
Author | SHA1 | Date |
---|---|---|
zhengyi | ef50b6558b | |
zhengyi | 8e00479668 | |
zhengyi | 787f42a801 | |
zhengyi | dd3884f910 | |
zhengyi | b9ca3f3650 | |
zhengyi | 3e4a7df335 | |
zhengyi | a343f9dacd | |
zhengyi | 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 {
|
||||
min-height: 200px;
|
||||
flex: 1 1;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
#preview {
|
||||
|
|
|
@ -58,6 +58,18 @@ drive:baidu
|
|||
name: 网站资源集合
|
||||
link: https://www.baidu.com/
|
||||
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()
|
||||
})
|
||||
|
|
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 {GitProvider} from "./git-provider";
|
||||
import {DriveProvider} from "./drive-provider";
|
||||
import {GalleryProvider} from "./gallery-provider";
|
||||
|
||||
export const ProviderList:Array<Provider> = [
|
||||
new TipsProvider(),
|
||||
new GitProvider(),
|
||||
new DriveProvider()
|
||||
new DriveProvider(),
|
||||
new GalleryProvider()
|
||||
]
|
||||
|
|
|
@ -3,8 +3,8 @@ import {ProviderList} from "./provider-list";
|
|||
import {RENDER_CLASS} from "../constant";
|
||||
|
||||
export declare interface Provider {
|
||||
check: (type: string) => boolean
|
||||
process: (type:string,content: string, options: IOptions) => string
|
||||
check(type: string): boolean
|
||||
process(type:string,content: string, options: IOptions): string
|
||||
}
|
||||
|
||||
export class ProviderFactory {
|
||||
|
|
|
@ -61,6 +61,9 @@ module.exports = {
|
|||
})
|
||||
],
|
||||
devServer: {
|
||||
static: {
|
||||
directory: path.join(__dirname , 'assets'),
|
||||
},
|
||||
port: 9000,
|
||||
host: "0.0.0.0"
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue