Compare commits
No commits in common. "ef50b6558b1060dfec9cfa34a8c0ffabf5e2c81f" and "0726c0be25092b6ec82826c809922d11139b8f2f" have entirely different histories.
ef50b6558b
...
0726c0be25
Binary file not shown.
Before Width: | Height: | Size: 216 KiB |
Binary file not shown.
Before Width: | Height: | Size: 926 KiB |
|
@ -23,7 +23,6 @@
|
|||
#preview {
|
||||
min-height: 200px;
|
||||
flex: 1 1;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
#preview {
|
||||
|
|
|
@ -58,18 +58,6 @@ 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.
|
@ -1,81 +0,0 @@
|
|||
@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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
|
@ -1,26 +0,0 @@
|
|||
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,11 +2,9 @@ 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 GalleryProvider()
|
||||
new DriveProvider()
|
||||
]
|
||||
|
|
|
@ -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,9 +61,6 @@ module.exports = {
|
|||
})
|
||||
],
|
||||
devServer: {
|
||||
static: {
|
||||
directory: path.join(__dirname , 'assets'),
|
||||
},
|
||||
port: 9000,
|
||||
host: "0.0.0.0"
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue