注册静态资源路径

要让一个文件可以用url访问有很多方法。这里注册一个文件夹为静态资源路径，目的是后面如果还有其他文件需要被直接访问，也可以放到这个文件夹中，便于直接使用。

在主题 functions.js 文件中使用以下代码：

import path from "path";
add_action('init_express',()=>{
    register_static_url('/srcs', path.join(import.meta.dirname,"./srcs/") );
});

在 init_express 钩子中注册静态资源根路径/srcs，可以从localhost:8081/srcs访问。该路径指向到主题目录下的srcs文件夹（需新建此文件夹）。

添加后台菜单页面

在主题 functions.js 文件中使用以下代码：

add_submenu_page({
    parent_slug: "settings",
    page_title: "主题设置",
    menu_title: "主题设置",
    menu_slug: "theme-settings",
    power: 10,
    position: 999,
    component_url: "/srcs/settings.vue",
})

这样可以在网站后台/设置菜单中增加一个主题设置二级菜单。其中，component_url 是可以直接访问到的相对路径。因此还需要在这个路径下创建 settings.vue 文件。

注：如果需要增加独立的一级菜单，请参考add_menu_page方法。

添加设置页面文件

在主题目录的srcs文件夹中，新建一个settings.vue文件：

<template>
    <div class="nv-admin-page">
        <div class="page-title">主题设置页面示例</div>
        <div class="page-content flex-grow">
            <label>文本示例：</label>
            <input v-model="sample_option">
            <p><button class="nv-button primary" @click="saveData">保存</button></p>
        </div>
    </div>
</template>

<script>
const { defineComponent } = nv.Vue;
export default defineComponent({
    data(){return {
        sample_option: '',
    }},
    mounted() {
        this.requestData();
    },
    methods: {
        requestData() {
            this.$axios({
                method: 'post',
                url: this.$API + '/nv/get-options',
                data:{
                    names: ['sample_option']
                },
            })
            .then(({data})=>{
                this.sample_option = data.sample_option || '';
            })
            .catch((error)=>{
                $message.error('读取失败')
            })
        },
        saveData() {
            this.$axios({
                method: 'post',
                url: this.$API + '/nv/set-options',
                data: {
                    sample_option: this.sample_option
                }
            })
            .then(({data})=>{
                $message.success('保存成功')
            })
            .catch((error)=>{
                $message.error('保存失败')
            })
        }
    }
});
</script>

重启服务后，后台即可看到这个页面。

后台页面相关提示

nvPress后台暴露了常用的Vue组件、Axios请求模块等，详见 nvPress 后台 Admin API 文档