feat: 支持三栏式 svg 插画

Author: shiny

assets/img/xifangquezhi/sangharama.svg

@@ -0,0 +1,5 @@
+<template>
+    <div class="flex lg:flex-row flex-col-reverse">
+        <slot />
+    </div>
+</template>

components/content/Flex.vue

@@ -0,0 +1,10 @@
+<template>
+    <p class="vertical-rl">
+        <slot />
+    </p>
+</template>
+<style scoped>
+.vertical-rl {
+  @apply lg:[writing-mode:vertical-rl] sm:[writing-mode:horizontal-tb];
+}
+</style>

components/content/Vertical.vue

@@ -386,4 +386,30 @@ download_link: https://file.hufasi.com/%E8%A5%BF%E6%96%B9%E7%A1%AE%E6%8C%87%EF%B
 
 古先圣人，去今远矣。然读其书，知其言决不可以伪为者，断之于理而已矣。佛法入中国千五百年，其间豪杰明睿之士，得一经一偈，决定信入，了脱生死者，殆不可悉数。而浅智之流，辄以私意窥之，谓其原出于老庄，乃其徒所伪作。即今老庄书具在，试取而与《楞严》《圆觉》诸经絜之，其浅深离合之故，略可见矣。老庄所不能为，而谓学老庄者能为之乎？此不能察理而自徇其私者之过也。近世飞鸾之化行，三教圣贤往往随方应感，宏法度人，是皆出于不得已之心。读其书，知其言决不可以伪为者，亦断之于理而己矣。《西方确指》者，极乐界中觉明妙行菩萨所说法也。其为教，贬斥邪修，指归净土，阐一心之妙谛，穷向上之玄关，诚学佛者之指南也。予反复读之，作而叹曰：嗟夫！莲华国土，不离当处。阿弥陀佛，全体众生。奈此众生日用不知，未曾发一念回向心，从迷入迷，漂流长劫，可不哀哉！菩萨悲愿深重，与此众生世世随逐，不相含离。飞鸾之化，与现身说法何异？读是书者，诚能信自本心，如说修行，心心回向，无诸异念，念极情空，脱然无住。虽现居五浊恶世，己浑身坐在莲华国里。报缘一谢，弹指往生。是果是因，初无先后。如其不信自心，因而不信净土，甚者或疑此书为伪作，则吾末如之何也矣！是书得之友人王贯三。向有刻板，顷毁于火。吾党诸贤将复刻以行世。予谨为订其章句，次其先后，既成而为之叙如此。
 
-乾隆三十八年秋八月，东林后学彭绍升撰。
+乾隆三十八年秋八月，东林后学彭绍升撰。
+::flex{class="gap-8 py-10 lg:px-24"}
+::SvgoXifangquezhiSangharama{.grow .dark:text-zinc-400 .w-56 .h-auto .max-w-full .m-auto :fontControlled="false"}
+::
+::gatha{.leading-loose .text-2xl .self-center}
+愿以此功德
+消除宿现业
+增长诸福慧
+圆成胜善根
+所有刀兵劫
+及与饥馑等
+悉皆尽灭除
+人各习礼让
+一切助印者
+辗转流通者
+现眷咸安乐
+先亡获超升
+风雨常调顺
+人民系康宁
+法界诸含识
+同证无上道
+::
+::vertical{.text-3xl .font-serif .text-center}
+### 普为助印及读诵受持转辗
+### 流通各佛经者回向偈
+::
+::

content/xifangquezhi.md

@@ -10,7 +10,9 @@ export default defineNuxtConfig({
     '@nuxt/content',
     'nuxt-icon',
     '@nuxt/image',
-    '@nuxtjs/color-mode'
+    '@nuxtjs/color-mode',
+    '@nuxtjs/tailwindcss',
+    'nuxt-svgo'
   ],
   content: {
     documentDriven: true
@@ -26,6 +28,12 @@ export default defineNuxtConfig({
       },
     },
   },
+  tailwindcss: {
+    exposeConfig: true
+  },
+  svgo: {
+    autoImportPath: './assets/img/'
+  },
   image: {
     provider: 'cloudimage',
     /**

nuxt.config.ts

@@ -15,10 +15,12 @@
     "@nuxt/devtools": "latest",
     "@nuxt/image": "1.0.0-rc.1",
     "@nuxtjs/color-mode": "^3.3.0",
+    "@nuxtjs/tailwindcss": "^6.8.0",
     "@types/node": "^18.17.0",
     "autoprefixer": "^10.4.14",
     "naive-ui": "^2.34.4",
     "nuxt": "^3.6.5",
+    "nuxt-svgo": "^3.4.0",
     "postcss": "^8.4.27",
     "tailwindcss": "^3.3.3",
     "wrangler": "^3.3.0"