使用 Frontity 实现弹出菜单
在前一篇文章中我们介绍了如何创建一个基于 Frontity 的网站，从本篇文章开始，将介绍如何为网站添加新的功能，以及对原 WordPress 做兼容性适配。本篇文章首先介绍如何实现弹出式子菜单，获取的菜单项是点击量最高的文章列表（降序）。
首先增加一个子菜单是否开启的状态标志，在主题的状态中声明一个菜单开关变量，以及显示和关闭菜单的函数，如下：
sample-frontity-project/packages/frontity-chakra-theme/index.js
const chakraTheme = {
name: "frontity-chakra-theme",
...
state: {
isSubMenuPostsOpen: false, //菜单是否开启的标志
currentTaxId: 36, //当前的弹出菜单项所在目录id
taxIdWithSlug: [ //定义需要弹出菜单项的数组
{id:4, slug:"most-popular-posts"}, //slug 是获取文章用的 URL
{id:36, slug:"most-popular-posts"}
]
...
actions: {
theme: {
openSubMenuPosts: ({ state }) => { //显示菜单
state.theme.isSubMenuPostsOpen = true;
},
closeSubMenuPosts: ({ state }) => { //关闭菜单
state.theme.isSubMenuPostsOpen = false;
},
...第二步增加一个获取 Post 的 Handler，该 Handler 当调用 actions.source.fetch(link)时被调用，会到 WordPress 中提取文章数据，并把结果放到 State 中。Handler 中的 pattern 参数是 fetch 文章时的 URL 匹配规则，相应的语法规则请参考说明，参数 aid 定义传入的目录 id，该参数会合并到 params 对象中，同时合并状态中定义的一些初始参数（ state.source.params），然后根据 WordPress REST API 相应 Endpoint 的要求加入其它的参数。
sample-frontity-project/packages/frontity-chakra-theme/src/components/handler/popular-post-archive.js
const PopularPostArchive = {
pattern: "/most-popular-posts/:aid(\\d+)", //如匹配most-popular-posts/36
name: "most popular post archive",
priority: 10,
//调用WordPress REST API获取文章数据
func: async ({ link, params, state, libraries, force }) => {
const { api, populate, parse, getTotal, getTotalPages } = libraries.source;
const { page, query, route } = parse(link);
const response = await api.get({
endpoint: "posts", //返回 post
params: {
_embed: true,
page,
categories: params.aid, //post 限定目录id，url中传入
orderby: 'wpb_post_views_count', //根据文章点击数排序
order: "desc",
...state.source.params
},
})
const items = await populate({
response, state, force,
});
if (page > 1 && items.length === 0) throw new ServerError(`post archive doesn't have page ${page}`, 404);
const total = getTotal(response, items.length);
const totalPages = getTotalPages(response, 0);
const hasNewerPosts = page < totalPages;
const hasOlderPosts = page > 1;
const getPageLink = (page) =>
libraries.source.stringify({
route,
query,
page,
});
const currentPageData = state.source.data[link];
const newPageData = {
type: "post",
items,
total,
totalPages,
isArchive: true,
isPostArchive: true,
isPostTypeArchive: true,
...(hasOlderPosts && { previous: getPageLink(page - 1) }),
...(hasNewerPosts && { next: getPageLink(page + 1) }),
};
Object.assign(currentPageData, newPageData); //返回结果，console中可查看
}
}
export default PopularPostArchive;需要注意的是 Handler 使用前需要声明一下，可以放在主题的 index.js 中。
sample-frontity-project/packages/frontity-chakra-theme/src/index.js
...
const chakraTheme = {
name: "frontity-chakra-theme",
...
libraries: {
html2react: {
// Add a processor to html2react so it processes the <img> tags
// inside the content HTML. You can add your own processors too.
processors: [image, ...processors]
},
source: { //声明Handler
handlers: [HomePagePostArchive, PopularPostArchive, PostRelatedArchive, PostFormatArchive]
}
}
};第三步实现菜单数据的预取以及打开/关闭弹出菜单，比如当鼠标滑过主菜单项的时候可以提前到 WordPress 中提取文章数据。这需要到 Link 组件中的 onMouseEnter 事件中增加相关代码。
sample-frontity-project/packages/frontity-chakra-theme/src/components/link.js
import { Box } from "@chakra-ui/react";
import { connect } from "frontity";
import React from "react";
import { omitConnectProps } from "./helpers";
const Link = ({
state,
actions,
link,
className,
children,
rel,
"aria-current": ariaCurrent,
...props
}) => {
const isDisabled = props["aria-disabled"];
// If we're not in a frontity environment, let's just render the children
if (state == null)
return (
<a className={className} href={isDisabled ? undefined : "#"} {...props}>
{children}
</a>
);
// Check if the link is an external or internal link
const isExternal = link && link.startsWith("http");
const onClick = event => {
// Do nothing if it's an external link
if (isExternal || isDisabled) return;
event.preventDefault();
event.stopPropagation();
// Set the router to the new url.
actions.router.set(link);
// Scroll the page to the top
window.scrollTo(0, 0);
// if the menu modal is open, close it so it doesn't block rendering
if (state.theme.isMobileMenuOpen) {
actions.theme.closeMobileMenu();
}
// 当点击主菜单项时关闭弹出菜单
if(state.theme.isSubMenuPostsOpen) {
actions.theme.closeSubMenuPosts();
}
if (props.onClick) {
props.onClick(event);
}
};
return (
<Box
as="a"
href={isDisabled ? undefined : link}
onClick={onClick}
className={className}
aria-current={ariaCurrent}
rel={rel}
target={isExternal ? "_blank" : undefined}
onMouseEnter={event => {
// Prefetch the link's content when the user hovers on the link
if (!isExternal) {
if(props.idx) {
state.theme.taxIdWithSlug.map((item) => {actions.source.fetch(`/${item.slug}/${item.id}`);}); //子菜单数据预取
if(props.idx==1 || props.idx==2) { //鼠标滑过这两项时显示子菜单
props.idx==1?(state.theme.currentTaxId = 36)&&actions.theme.openSubMenuPosts():(state.theme.currentTaxId = 4)&&actions.theme.openSubMenuPosts();
}
else actions.theme.closeSubMenuPosts();
}
actions.source.fetch(link);
}
if (props.onMouseEnter) props.onMouseEnter(event);
}}
{...omitConnectProps(props)}
>
{children}
</Box>
);
};
export default connect(Link);第四步显示/关闭弹出菜单，使用了ChaKra 的 Popover 组件。
sample-frontity-project/packages/frontity-chakra-theme/src/components/menu/submenu-posts.js
import { Box, Popover, PopoverContent, SimpleGrid, SkeletonText, Flex, Heading } from "@chakra-ui/react";
import React from "react";
import { connect } from "frontity";
import Switch from "@frontity/components/switch";
import Image from "@frontity/components/image";
import { formatPostData } from "../helpers";
import Link from "../link";
const SubMenuPosts = ({state, actions}) => {
//构造获取子菜单的Url，在第一步中定义了相关的数据
const link = "/" + state.theme.taxIdWithSlug.filter(function(item){return item && item.id==state.theme.currentTaxId;})[0].slug + "/" + state.theme.currentTaxId;
//从状态中提取子菜单数据，此时如果没有，会到WordPress后台提取。
const data = state.source.get(link);
return (
<Popover
isOpen={state.theme.isSubMenuPostsOpen}
onClose={actions.theme.closeSubMenuPosts}
autoFocus={true}
trigger="hover"
>
<PopoverContent
width="70vw"
pos="fixed"
top="70px"
left="50px"
transition="transform ease .25s"
maxWidth="100%"
bg="rgba(251,251,251,0.98)"
css={{ backdropFilter: "blur(1px)" }}
>
<Switch>
<SkeletonText mt="8" noOfLines={5} spacing="8" when={data.isFetching} />
<SimpleGrid
columns={5} spacing={1}
when={data.isReady}
>
{data.items && data.items.map(({ type, id }, index) => {
const item = state.source[type][id];
const datafmt = formatPostData(state, item);
const { title, featured_media, link } = datafmt;
const { src, alt, srcSet } = featured_media;
return (
<Flex
direction="column"
position="relative"
bg="white"
as="article"
key={index}
>
{featured_media && featured_media.src && (
<Link link={link} >
<Box
role="group"
cursor="pointer"
height="90px"
width="100%"
pos="relative"
>
<Box
as={Image}
width="900"
height="550"
position="absolute"
boxSize="100%"
objectFit="cover"
top="0"
left="0"
maxWidth="100%"
src={src}
alt={alt}
srcSet={srcSet}
/>
</Box>
</Link>
)}
<Flex p="10px" flexGrow="1" direction="column">
<Heading fontSize="small" as="h6" textTransform="uppercase">
<Link link={link} dangerouslySetInnerHTML={{ __html: title }} ></Link>
</Heading>
</Flex>
</Flex>
);
})}
</SimpleGrid>
</Switch>
</PopoverContent>
</Popover>
);
}
export default connect(SubMenuPosts);最后，在网页的 Head 处理中加入第四步定义的子菜单组件。
sample-frontity-project/packages/frontity-chakra-theme/src/components/header/index.js
import { connect } from "frontity";
import React from "react";
import MainHeader from "./header";
import Navigation from "./navigation";
import SocialNav from "./social-menu";
import { SearchButton, SearchModal, SearchForm } from "../search";
import SubMenuPosts from "../menu/submenu-posts";
const Header = ({ state, actions }) => (
<MainHeader>
<Navigation menu={state.theme.menu} />
{state.theme.showSocialLinks && (
<SocialNav menu={state.theme.socialLinks} />
)}
<SearchButton onClick={actions.theme.openSearchModal} />
<SearchModal
isOpen={state.theme.isSearchModalOpen}
onClose={actions.theme.closeSearchModal}
>
<SearchForm />
</SearchModal>
//加入弹出子菜单显示组件
<SubMenuPosts/>
</MainHeader>
);
export default connect(Header);