在上一节中，演示了使用 content 参数添加一个配置式的metabox，这显然让可以满足大部分的需求。然而，很多时候需要完全的自定义metabox的内容，这就需要使用 add_metabox 的另一个 component_url 参数了。使用该参数，可以在metabox中使用完全自定义的 vue 文件
注册静态资源路径
就像在后台添加自定义页面一样。要让自定义的vue文件能够被访问，也需要注册一个静态地址。
::: tip
如果你已经在自定义后台页面的时候注册了静态资源路径，那么你可以使用同一个路径，而不需要多次注册
:::
在主题 functions.js 文件中使用以下代码：
var path = require('path');
add_action('init_express',()=>{
register_static_url('/srcs', path.join(__dirname,"./srcs/") );
});
在 init_express 钩子中注册静态资源根路径/srcs，可以从localhost:8081/srcs访问。该路径指向到主题目录下的srcs文件夹（需新建此文件夹）。
::: warning
编辑主题或插件的 function.js 文件后，需要重启nvPress服务才可以生效
:::
注册metabox
完全的自定义metabox不需要使用content配置参数，只需要component_url指定vue文件的路径即可
add_meta_box({
post_types: ['article'],
meta_box_slug: "sample_metabox",
component_url: "/srcs/sample_metabox.vue"
})
自定义vue文件
/srcs/sample_metabox.vue文件内容如下（Vue-compositionAPI示例）
<template>
<pdCollapseBox title="完全的自定义Metabox" :default-expanded="true">
<p>这个metabox将在文章中保存按钮的点击次数：</p>
<NButton @click="handleClick">点击我</NButton>
<br><br>
<NAlert title="点击次数：" type="info">{{$props.metas.count || 0}}</NAlert>
</pdCollapseBox>
</template>
<script setup>
// 用到的组件
var {
pdCollapseBox // nv或pd开头的是nvPress提供的组件
} = nv.components;
var {NButton, NAlert} = nv.components.naiveUI;
// 接收父组件参数：metas，本文章中所有用到的metas都可以读取到。
var $props = defineProps({
metas: Object,
})
// 定义emit，用于向父组件更新meta数据
var $emit = defineEmits(["update:meta"])
// 点击按钮的回调效果
var handleClick = () => {
var count = $props.metas.count || 0;
var meta_option = {
meta_key: 'count',
value: count + 1
}
$emit("update:meta",meta_option);
}
</script>
在上面的例子中可以看到：
组件： nvPress将常用的组件暴露在全局的window.nv.components了，要使用的时候可以直接去取用（使用方法参考naive-ui）
meta数据： 文章所有的 meta 数据都作为参数传递给了本组件，使用时只需要接收就可以读取。
数据更新： 发生数据变更时，使用“update:meta”将数据 emit 给父组件即可