themekit-js 1.47.2919 → 1.47.3019

package/dist/client/theme-default/components/blocks/Feature.vue

@@ -1,10 +1,8 @@
 <script setup lang="ts"> 
-import Image from './Image.vue' 
-import Button from './Button.vue' 
 
-import { useData } from '../../composables/data' 
+import { withBase } from 'themekit-js' 
+import Button from './Button.vue' 
  
-const { base } = useData()
 const _blank:string="_blank"
 
 defineProps<{
@@ -13,17 +11,17 @@ defineProps<{
 
 
  
+ /** 
+
+function  CoverStyles(children:any){
+  return itemStyles(children,"cover" );
+}*/
+
  
-function hasMasker(children:any){
-  return hasParam(children,"masker" );
-}
-function hasCover(children:any){
-  return hasParam(children,"cover" );
-}
-function hasParam(children:any,name:string ){
+
+ function ItemStyles(child:any){//,name:string ){
     const styles:any=[]
-    for(let i=0;i<  children.length;i++){
-         const child=children[i] 
+    
          if(child["src"]!=null  ){ 
               const src=child["src"]
               const pattern = /[?&]([^=#]+)=([^&#]*)/g;  
@@ -32,63 +30,86 @@ function hasParam(children:any,name:string ){
               while ((match = pattern.exec(src)) !== null) {   
                   params[match[1]]=match[2]  
               }   
-              if(params["class"]==name){ 
-                       styles.push({"display":"block"}) 
-                      if(src.substring(0,1)=="/"){
-                        styles.push({"background-image":"url("+ base.value+src.substring(1,src.length) +")"})
-                      }else{
-                        styles.push({"background-image":"url("+  src +")"})
-                      } 
-                      if(params["color"]){
-                        styles.push({"color": decodeURIComponent(params["color"])}) 
-                      }
+             // if(params["class"]==name){ 
+                      
                       if(params["background"]){
                         styles.push({"background":decodeURIComponent(params["background"])}) 
-                          
                       } 
                       if(params["height"]){
                         styles.push({"height":params["height"]}) 
                       }
-              } 
+              //  } 
          } 
-    }
+   
     return styles 
 }
+
+/** 
+function hasImageParam(child:any,name:string ){
+     
+         if(child["src"]!=null  ){ 
+              const src=child["src"]
+              const pattern = /[?&]([^=#]+)=([^&#]*)/g;  
+              const params:any={}
+              let match; 
+              while ((match = pattern.exec(src)) !== null) {   
+                  params[match[1]]=match[2]  
+              }   
+              if(params["class"]!=null&& params["class"]==name){ 
+                  return true;
+              } 
+         } 
+         return false;
+}*/
 </script>
 
 <template>
   <div  class="VPFeature"  >
     <article class="box"> 
-       <template v-for="(item) in block.children" > 
-                    <div class="box-cover"  :style="hasCover(item.children)"   ></div> 
-                    <i   class="box-cover-fixed"  :style="hasCover(item.children)" ></i>
-                    <div class="box-cover"  :style="hasMasker(item.children)"  >
-                         <i class="box-marker"  ></i> 
-                    </div>    
-                    <h1 class="title" v-if="item.block_type=='h1'">
-                       <span v-for="(h1) in item.children" class="clip">{{h1.content}}</span>
-                    </h1> 
-                    <h2 class="title" v-if="item.block_type=='h2'">
-                       <span v-for="(h2) in item.children" class="clip">{{h2.content}}</span>
-                    </h2>
-                    <h3 class="title" v-if="item.block_type=='h3'">
-                       <span v-for="(h3) in item.children" class="clip">{{h3.content}}</span>
-                    </h3>
-                    <p v-if="item.block_type=='p'" class="details"  >
-                       <template v-for="(subitem) in item.children"> 
-                              <template v-if="subitem.block_type=='text'">{{subitem.content}} </template>
-                              <Image  v-if="subitem.block_type=='img'"
-                                        :block="subitem"   /> 
-                              <Button  v-if="subitem.block_type=='a'"
-                                      tag="a"
-                                      size="medium"
-                                    :block="subitem" 
-                                    :href="subitem.href"
-                                    :target="_blank"  ></Button>  
-                       </template>
-                    </p>
-                   
-        </template> 
+       <template  v-for="(item) in block.children" >  
+                <template v-for="(subitem) in item.children">   
+                      <div  v-if="subitem.block_type=='img'&&subitem.alt=='masker'"   class="block-feature-masker"  > 
+                              <img  alt="Image" :src="withBase(subitem.src)"  />
+                              <i class="box-marker"></i>   
+                      </div> 
+                      <div  v-if="subitem.block_type=='img'&&subitem.alt=='background'" :style="ItemStyles(subitem)"  class="block-feature-masker" ></div> 
+                </template>
+       </template>           
+       <div class="box-inner">
+              <template  v-for="(item) in block.children" > 
+                      <template v-for="(subitem) in item.children">  
+                            <div v-if="subitem.block_type=='img'&&subitem.alt=='icon'" class="block-feature-icon" >  
+                                    <img alt="Image" :src="withBase(subitem.src)"  /> 
+                            </div>  
+                      </template>
+            </template>        
+            <div class="box-main" >
+                <template class="box-main" v-for="(item) in block.children" >  
+                        <h1 class="title" v-if="item.block_type=='h1'">
+                          <span v-for="(h1) in item.children" class="clip">{{h1.content}}</span>
+                        </h1> 
+                        <h2 class="title" v-if="item.block_type=='h2'">
+                          <span v-for="(h2) in item.children" class="clip">{{h2.content}}</span>
+                        </h2>
+                        <h3 class="title" v-if="item.block_type=='h3'">
+                          <span v-for="(h3) in item.children" class="clip">{{h3.content}}</span>
+                        </h3>
+                        <p v-if="item.block_type=='p'" class="details"  >
+                          <template v-for="(subitem) in item.children"> 
+                                  <template v-if="subitem.block_type=='text'">{{subitem.content}} </template>
+                                  <img  v-if="subitem.block_type=='img'&&subitem.alt!='icon'&&subitem.alt!='masker'"
+                                              :src="subitem.src"   /> 
+                                  <Button  v-if="subitem.block_type=='a'"
+                                          tag="a"
+                                          size="medium"
+                                        :block="subitem" 
+                                        :href="subitem.href"
+                                        :target="_blank"  ></Button>  
+                          </template>
+                        </p> 
+                </template>
+            </div>
+        </div> 
     </article>
   </div>
 </template>
@@ -112,31 +133,31 @@ function hasParam(children:any,name:string ){
      right: 0;
      bottom: 0;
      z-index: 0;
-     opacity: 0.75;
-     background-color: #fff;
+     opacity: 0.8;
+     background-color: #eee;
 } 
 
 .dark .VPFeature  .box-marker {
     background-color: #222;
 }
- 
-.VPFeature  .box-cover  {
-     display: none;  
+ .block-feature-icon{
+     margin-right:16px; 
+ }
+.block-feature-masker  { 
+  z-index: 0;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
-    z-index: 0;
-    border-radius: 12px;
-    background-size: cover;
-    background-position: center;
-}
-.VPFeature  .box-cover-fixed{
-     display: none !important;  
-     opacity: 0;
-     margin:-24px;  
+     z-index: 0;
+     overflow:hidden;
+   
 }
+.block-feature-masker img{ width: 100%;}
+
+
+
 .VPFeature.link:hover {
   border-color: var(--vp-c-brand-1);
 }
@@ -144,10 +165,12 @@ function hasParam(children:any,name:string ){
 .box {
   display: flex;
   flex-direction: column;
-  padding: 24px;
+ 
   height: 100%;
+  position: relative;
 }
-
+.box-inner{  padding: 24px; z-index: 1; display: flex; }
+.box-main{ flex-grow: 1;}
 .box > :deep(.VPImage) {
   margin-bottom: 20px;
 }
@@ -171,8 +194,13 @@ h1.title{
   font-weight: 500;
   color: var(--vp-c-text-2);
   z-index: 1;
+  display: flex;
+  justify-content: flex-start;
+  gap: 6px; 
+  margin-bottom: 6px;
 }
- 
+  
+
 
 
 

package/dist/client/theme-default/components/blocks/Feature.vue_240730

@@ -0,0 +1,214 @@
+<script setup lang="ts"> 
+import Image from './Image.vue' 
+import Button from './Button.vue' 
+
+import { useData } from '../../composables/data' 
+ 
+const { base } = useData()
+const _blank:string="_blank"
+
+defineProps<{
+  block?: any
+}>()
+
+
+ 
+ 
+function  MaskerStyles(children:any){
+  return itemStyles(children,"masker" );
+}
+function  CoverStyles(children:any){
+  return itemStyles(children,"cover" );
+}
+ function itemStyles(children:any,name:string ){
+    const styles:any=[]
+    for(let i=0;i<  children.length;i++){
+         const child=children[i] 
+         if(child["src"]!=null  ){ 
+              const src=child["src"]
+              const pattern = /[?&]([^=#]+)=([^&#]*)/g;  
+              const params:any={}
+              let match; 
+              while ((match = pattern.exec(src)) !== null) {   
+                  params[match[1]]=match[2]  
+              }   
+              if(params["class"]==name){ 
+                       styles.push({"display":"block"}) 
+                      if(src.substring(0,1)=="/"){
+                        styles.push({"background-image":"url("+ base.value+src.substring(1,src.length) +")"})
+                      }else{
+                        styles.push({"background-image":"url("+  src +")"})
+                      } 
+                      if(params["color"]){
+                        styles.push({"color": decodeURIComponent(params["color"])}) 
+                      }
+                      if(params["background"]){
+                        styles.push({"background":decodeURIComponent(params["background"])}) 
+                      } 
+                      if(params["height"]){
+                        styles.push({"height":params["height"]}) 
+                      }
+              } 
+         } 
+    }
+    return styles 
+}
+
+
+function hasImageParam(children:any,name:string ){
+    
+    for(let i=0;i<  children.length;i++){
+         const child=children[i] 
+         if(child["src"]!=null  ){ 
+              const src=child["src"]
+              const pattern = /[?&]([^=#]+)=([^&#]*)/g;  
+              const params:any={}
+              let match; 
+              while ((match = pattern.exec(src)) !== null) {   
+                  params[match[1]]=match[2]  
+              }   
+              if(params["class"]==name){ 
+                  return true;
+              } 
+         } 
+    }
+    return false;
+}
+</script>
+
+<template>
+  <div  class="VPFeature"  >
+    <article class="box"> 
+       <template v-for="(item,index) in block.children" > 
+                    <div class="box-cover"  :style="CoverStyles(  item.children)"   ></div> 
+                    <i   class="box-cover-fixed"  :style="CoverStyles(  item.children)" ></i>
+                    <div class="box-cover"  :style="MaskerStyles( item.children)"  >
+                         <i class="box-marker"  ></i> 
+                    </div>    
+                    <h1 class="title" v-if="item.block_type=='h1'">
+                       <span v-for="(h1) in item.children" class="clip">{{h1.content}}</span>
+                    </h1> 
+                    <h2 class="title" v-if="item.block_type=='h2'">
+                       <span v-for="(h2) in item.children" class="clip">{{h2.content}}</span>
+                    </h2>
+                    <h3 class="title" v-if="item.block_type=='h3'">
+                       <span v-for="(h3) in item.children" class="clip">{{h3.content}}</span>
+                    </h3>
+                    <p v-if="item.block_type=='p'" class="details"  >
+                       <template v-for="(subitem) in item.children"> 
+                              <template v-if="subitem.block_type=='text'">{{subitem.content}} </template>
+                              <Image  v-if="subitem.block_type=='img'"
+                                        :block="subitem"   /> 
+                              <Button  v-if="subitem.block_type=='a'"
+                                      tag="a"
+                                      size="medium"
+                                    :block="subitem" 
+                                    :href="subitem.href"
+                                    :target="_blank"  ></Button>  
+                       </template>
+                    </p>
+                   
+        </template> 
+    </article>
+  </div>
+</template>
+
+<style scoped>
+.VPFeature {
+  display: block; 
+  border-radius: 12px;
+  height: 100%;
+  background-color: var(--vp-c-bg-soft);
+  transition: border-color 0.25s, background-color 0.25s; 
+  position: relative;
+  overflow: hidden;
+}
+ 
+.VPFeature  .box-marker {
+     display: block;
+     position: absolute;
+     top: 0;
+     left: 0;
+     right: 0;
+     bottom: 0;
+     z-index: 0;
+     opacity: 0.75;
+     background-color: #fff;
+} 
+
+.dark .VPFeature  .box-marker {
+    background-color: #222;
+}
+ 
+.VPFeature  .box-cover  {
+     display: none;  
+     position: absolute;
+     top: 0;
+     left: 0;
+     right: 0;
+     bottom: 0;
+    z-index: 0;
+    border-radius: 12px;
+    background-size: cover;
+    background-position: center;
+}
+.VPFeature  .box-cover-fixed{
+     display: none !important;  
+     opacity: 0;
+     margin:-24px;  
+}
+.VPFeature.link:hover {
+  border-color: var(--vp-c-brand-1);
+}
+
+.box {
+  display: flex;
+  flex-direction: column;
+  padding: 24px;
+  height: 100%;
+}
+
+.box > :deep(.VPImage) {
+  margin-bottom: 20px;
+}
+
+ 
+
+.title {
+  line-height: 24px;
+  font-size: 16px;
+  font-weight: 600;
+  z-index: 2;
+}
+h1.title{
+   font-size: 32px;
+   padding:16px 0;
+}
+.details {
+  flex-grow: 1; 
+  line-height: 24px;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--vp-c-text-2);
+  z-index: 1;
+}
+ 
+
+
+
+.link-text {
+  padding-top: 8px;
+}
+
+.link-text-value {
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--vp-c-brand-1);
+}
+
+.link-text-icon {
+  margin-left: 6px;
+}
+</style>

package/dist/client/theme-default/components/blocks/Features.vue

@@ -62,8 +62,8 @@ const styles= computed(() => {
   <div :style="styles">
   <template v-for="(ul,index) in block.children"  >
  
-      <div v-if="ul.block_type=='h1'||ul.block_type=='h2'||ul.block_type=='h3'" class="block-features-title container vp-doc" >
-           <Heading :block="ul"></Heading>
+      <div v-if="ul.block_type=='h1'||ul.block_type=='h2'||ul.block_type=='h3'" class="block-features-title  vp-doc" >
+            <div class="container"> <Heading :block="ul"></Heading> </div>
       </div>
       <div class="container" v-if="ul.block_type=='p'"> <P :block="ul"></P></div> 
       <div v-if="ul.block_type=='ul'" class="VPFeatures" >
@@ -84,24 +84,24 @@ const styles= computed(() => {
 
 <style scoped>  
 .VPFeatures {
-  position: relative;
-  padding: 0 24px;
+    position: relative;
+    padding: 0 24px;
 }
  
-.block-features-title{ padding:12px 0 8px; }
+.block-features-title{ padding:12px 24px 8px; }
  
 @media (min-width: 640px) {
   .VPFeatures {
     padding: 0 48px;
   }
-  .block-features-title{  padding: 16px 0 8px;  }
+  .block-features-title{  padding: 16px 24px 8px;  }
 }
 
 @media (min-width: 960px) {
   .VPFeatures {
     padding: 0 64px;
   } 
-  .block-features-title{  padding: 24px 0 8px;  }
+  .block-features-title{  padding: 24px 24px 8px;  }
 }
 
 .container {

package/dist/node/cli.js

@@ -1,4 +1,4 @@
-import { a as getDefaultExportFromCjs, q as c, t as clearCache, n as init, b as build, o as serve, v as version, p as createServer } from './serve-sZj3sT-k.js';
+import { a as getDefaultExportFromCjs, q as c, t as clearCache, n as init, b as build, o as serve, v as version, p as createServer } from './serve-JETwzqn2.js';
 import { createLogger } from 'vite';
 import 'path';
 import 'shiki';

package/dist/node/index.js

@@ -1,7 +1,7 @@
 import { normalizePath } from 'vite';
 export { loadEnv } from 'vite';
-import { g as glob, c as createMarkdownRenderer, f as fs, m as matter, a as getDefaultExportFromCjs } from './serve-sZj3sT-k.js';
-export { S as ScaffoldThemeType, b as build, p as createServer, e as defineConfig, h as defineConfigWithTheme, d as defineLoader, n as init, j as mergeConfig, r as resolveConfig, l as resolvePages, k as resolveSiteData, i as resolveUserConfig, s as scaffold, o as serve } from './serve-sZj3sT-k.js';
+import { g as glob, c as createMarkdownRenderer, f as fs, m as matter, a as getDefaultExportFromCjs } from './serve-JETwzqn2.js';
+export { S as ScaffoldThemeType, b as build, p as createServer, e as defineConfig, h as defineConfigWithTheme, d as defineLoader, n as init, j as mergeConfig, r as resolveConfig, l as resolvePages, k as resolveSiteData, i as resolveUserConfig, s as scaffold, o as serve } from './serve-JETwzqn2.js';
 import path from 'path';
 import 'crypto';
 import 'module';

package/dist/node/{serve-sZj3sT-k.js → serve-JETwzqn2.js}

@@ -38286,7 +38286,8 @@ async function createMarkdownToVueRenderFn(srcDir, options = {}, pages, isBuild
           for (let i2 = start2; i2 < tokens.length; i2++) {
             const token = tokens[i2];
             if (token.type == "image") {
-              parent["children"].push({ "block_type": "img", "content": token.attrGet("content"), "src": token.attrGet("src") });
+              const alt = token.children != null && token.children.length > 0 ? token.children[0]["content"] : "";
+              parent["children"].push({ "block_type": "img", "content": token.attrGet("content"), "alt": alt, "src": token.attrGet("src") });
               continue;
             }
             if (token.tag == "code") {
@@ -46738,7 +46739,7 @@ function escapeHtml(string) {
 
 var escape$1 = /*@__PURE__*/getDefaultExportFromCjs(escapeHtml_1);
 
-var version = "1.47.2919";
+var version = "1.47.3019";
 
 async function renderPage(render, config, page, result, appChunk, cssChunk, assets, pageToHashMap, metadataScript, additionalHeadTags) {
   const routePath = `/${page.replace(/\.md$/, "")}`;

package/package.json

@@ -1,6 +1,6 @@
 { 
   "name": "themekit-js",
-  "version": "1.47.2919",  
+  "version": "1.47.3019",  
   "description": "基于VitePress开发的Markdown静态网站生成器",
   "type": "module",
   "packageManager": "pnpm@8.15.6",