修改Copyright.astro时的一些报错，有些疑问🤔

[yizhixiaokong]

我想参考 https://astro-pure.js.org/docs/advanced/customize#swizzling 部分修改 Copyright.astro 中的一些样式。

在src/components/pages/Copyright.astro 复制了node_modules/astro-pure/components/pages/Copyright.astro 并且修改了依赖，具体如下：

---
import type { CollectionKey, InferEntrySchema } from 'astro:content'
import config from 'virtual:config'

- import { cn, getFormattedDate } from '../../utils'
- import { QRCode } from '../advanced'
- import { Icon } from '../user'
+ import { QRCode } from 'astro-pure/advanced'
+ import { Icon } from 'astro-pure/user'
+ import { cn, getFormattedDate } from 'astro-pure/utils'

......

<div class='mx-6 rounded-b-xl border border-t-0 px-3 pb-1.5 pt-1 sm:mx-8 sm:px-4'>
  <a
    href='/projects#sponsorship'
    class='flex items-center justify-between text-muted-foreground no-underline'
    target='_blank'
  >
-      <span>Buy me a cup of coffee ☕.</span>
+      <span>Buy me a cup of coffeeeeeeeeeeee ☕.</span>
  <Icon class='box-content size-5 p-1' name='receive-money' />
  </a>

......

<script>
-   import { showToast } from '../../utils'
+   import { showToast } from 'astro-pure/utils'

  // Copy link
  const copyLink = document.getElementById('copy-link')

......

对应src/layouts/BlogPost.astro 引用修改：

- import { ArticleBottom, Copyright, Hero } from 'astro-pure/components/pages'
+ import Copyright from '@/components/pages/Copyright.astro'
+ import { ArticleBottom, Hero } from 'astro-pure/components/pages'

然后bun dev来看效果的时候，后台有个错误报出来（好像不影响页面渲染）：

15:48:41 [200] /blog/helloworld 59ms
✘ [ERROR] Could not resolve "virtual:config"

    node_modules/astro-pure/utils/date.ts:1:19:
      1 │ import config from 'virtual:config'
        ╵                    ~~~~~~~~~~~~~~~~

  You can mark the path "virtual:config" as external to exclude it from the bundle, which will
  remove this error and leave the unresolved path in the bundle.

15:48:42 [ERROR] [vite] error while updating dependencies:
Error: Build failed with 1 error:
node_modules/astro-pure/utils/date.ts:1:19: ERROR: Could not resolve "virtual:config"
    at failureErrorWithLog (/home/kong/code/node/my/kong/node_modules/esbuild/lib/main.js:1467:15)
    at /home/kong/code/node/my/kong/node_modules/esbuild/lib/main.js:926:25
    at /home/kong/code/node/my/kong/node_modules/esbuild/lib/main.js:1345:9
    at process.processTicksAndRejections (node:internal/process/task_queues:105:5)

这个是什么virtual:config加载顺序的问题吗？需要把utils也copy过来改引用吗？

[yizhixiaokong]

我有试一下把utils整个copy过来，然后好像把<script>中的import改了就没这个报错了。

<script>
-  import { showToast } from 'astro-pure/utils'
+  import { showToast } from '@/utils'

  // Copy link
  const copyLink = document.getElementById('copy-link')
  copyLink?.addEventListener('click', () => {
    navigator.clipboard.writeText(window.location.href)
    // Show toast
    showToast({ message: 'Link copied!' })
  })

......

</script>

对这方面确实不太懂😂

[cworld1]

virtual:config 是 vite 自定义模块，应该是可以随便用的才对。你那怎么出现问题的没看懂，不过能解决问题就好👍