Liquid中如何从Layout向Page传递变量？全局变量调用求助

嘿，这个需求我之前帮不少开发者解决过，其实核心就是实现Layout和Page之间的状态共享，我给你整理了几种不同场景下的靠谱思路，你可以根据自己用的框架来选：

方法1：用框架原生的状态共享方案（推荐复杂场景） #

如果你的项目用React或者Vue，它们自带的**Context API（React）/ Provide/Inject（Vue）**是处理这类跨组件变量共享的最佳方案，不会污染全局环境，还能很好地维护状态。

React（比如Next.js）示例： #

1. 先创建一个Context文件来管理全局变量：

// layout/PageContext.js
import { createContext, useContext, useState } from 'react';

// 创建Context
const PageContext = createContext();

// 封装Provider组件
export function PageProvider({ children }) {
  // 这里定义你需要的全局变量，比如页面名称
  const [pageName, setPageName] = useState('');

  return (
    <PageContext.Provider value={{ pageName, setPageName }}>
      {children}
    </PageContext.Provider>
  );
}

// 封装自定义Hook，方便组件调用
export function usePageContext() {
  return useContext(PageContext);
}

2. 在根组件（比如Next.js的_app.js）里用Provider包裹Layout和所有Page：

// pages/_app.js
import { PageProvider } from '../layout/PageContext';
import Layout from '../layout/Layout';

function MyApp({ Component, pageProps }) {
  return (
    <PageProvider>
      <Layout>
        <Component {...pageProps} />
      </Layout>
    </PageProvider>
  );
}

export default MyApp;

3. 最后在文章Page里读取/设置页面名称：

// pages/posts/[slug].js
import { usePageContext } from '../../layout/PageContext';
import { useEffect } from 'react';

export default function PostPage({ post }) {
  const { pageName, setPageName } = usePageContext();

  useEffect(() => {
    // 把文章标题设为页面名称
    setPageName(post.title);
  }, [post, setPageName]);

  return (
    <div>
      <h1>{post.title}</h1>
      {/* 打印页面名称 */}
      <p>当前页面名称：{pageName}</p>
      {/* 文章内容区域 */}
    </div>
  );
}

Vue（比如Nuxt.js）示例： #

1. 在Layout组件里provide全局变量：

<!-- Layout.vue -->
<template>
  <div class="layout-container">
    <!-- 插槽放Page内容 -->
    <slot></slot>
  </div>
</template>

<script setup>
import { ref, provide } from 'vue';

// 定义响应式的页面名称变量
const pageName = ref('');
// 把变量提供给所有子组件（包括Page）
provide('pageName', pageName);
</script>

2. 在文章Page里inject并使用：

<!-- PostPage.vue -->
<template>
  <div class="post-page">
    <h1>{{ post.title }}</h1>
    <p>当前页面名称：{{ pageName }}</p>
  </div>
</template>

<script setup>
import { inject, onMounted } from 'vue';
import { getPostDetail } from '../api/posts';

// 注入Layout提供的变量
const pageName = inject('pageName');
// 获取文章数据
const post = await getPostDetail();

onMounted(() => {
  // 动态设置页面名称为文章标题
  pageName.value = post.title;
});
</script>

方法2：利用路由元信息（适合带路由的项目） #

如果你的项目用了Vue Router、React Router或者Next.js的路由配置，直接在路由里定义页面名称的元信息，是最省心的方式，尤其是页面名称和路由强关联的场景。

Vue Router示例： #

1. 配置路由时添加meta字段：

// router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import Layout from '../views/Layout.vue';
import PostPage from '../views/PostPage.vue';

const routes = [
  {
    path: '/posts/:slug',
    component: Layout,
    children: [
      {
        path: '',
        component: PostPage,
        // 可以静态定义，也可以后续动态修改
        meta: { pageName: '文章详情页' }
      }
    ]
  }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;

2. 在Page里读取或修改元信息：

<!-- PostPage.vue -->
<template>
  <div>
    <p>当前页面名称：{{ $route.meta.pageName }}</p>
  </div>
</template>

<script setup>
import { useRoute } from 'vue-router';
import { getPostDetail } from '../api/posts';

const route = useRoute();
const post = await getPostDetail();

// 动态把文章标题设置为页面名称
route.meta.pageName = post.title;
</script>

Next.js示例： #

可以在数据获取函数里把页面名称作为props传递给Page：

// pages/posts/[slug].js
export async function getStaticProps({ params }) {
  // 获取文章数据
  const post = await fetch(`https://api.example.com/posts/${params.slug}`).then(res => res.json());
  return {
    props: {
      post,
      pageName: post.title // 把页面名称作为props传递
    }
  };
}

export default function PostPage({ post, pageName }) {
  return (
    <div>
      <h1>{post.title}</h1>
      <p>当前页面名称：{pageName}</p>
    </div>
  );
}

方法3：全局变量（仅适合小型简单项目） #

如果你的项目很小，不需要复杂的状态管理，也可以直接用全局变量，但要注意这种方式容易造成全局污染，大型项目不推荐：

1. 在Layout里定义全局变量：

// layout/Layout.js
// 挂载到window对象上
window.globalPageState = {
  pageName: ''
};

export default function Layout({ children }) {
  return <div className="layout">{children}</div>;
}

2. 在文章Page里使用：

// pages/posts/[slug].js
export default function PostPage({ post }) {
  // 设置页面名称
  window.globalPageState.pageName = post.title;
  return (
    <div>
      <p>当前页面名称：{window.globalPageState.pageName}</p>
    </div>
  );
}

内容的提问来源于stack exchange，提问作者zahaby