Gatsby静态网站导航高亮

Gatsby 是一款基于 React 和 GraphQL 的静态文档生成器。

思路：

获取路由，根据路由显示导航高亮；

this.props.location.pathname 获取路由；

若this.props.location.pathname获取不到值，可用window.location.pathname获取；

// layouts index.jsimport React, { Component } from "react"
import PropTypes from 'prop-types'
import Helmet from 'react-helmet' // 设置站点的title
import './reset.css'
import './index.css'
import Header from '../components/header'
import Footer from '../components/footer'class Layout extends Component {render() {const { children } = this.props;const { location } = window; // 获取路由return (<div className='wrapper'><Helmet><meta charSet="utf-8" /><title>title</title></Helmet><div className='content-wrapper'><div className='content'><Header location={ location }></Header><div className='content'>{children}</div><Footer></Footer></div></div></div>)}
}Layout.propTypes = {children: PropTypes.node.isRequired,
}export default Layout

// components/header.js
// location.pathname获取路由，根据路由导航显示高亮import React from 'react'
import { Link } from 'gatsby'
import './header.css'const Header = ({ location }) => (<header className='header'><div className='wrapper'><div className='logo-wrapper'><div className='img'><img src={'/img/logo.png'} alt='logo'/></div></div><div className='nav-list'><ul><li><Link className={location.pathname === "/" ? 'active' : ''} to="/">首页</Link></li><li><Link className={location.pathname.match(/\/About/i) ? 'active' : ''} to="/About/about">关于</Link></li><li><Link className={location.pathname.match(/\/Business/i) ? 'active' : ''} to="/Business/business">业务</Link></li><li><Link className={location.pathname.match(/\/News/i) ? 'active' : ''} to="/News/news">新闻</Link></li><li><Link className={location.pathname.match(/\/Partner/i) ? 'active' : ''} to="/Partner/partner">合作</Link></li><li><Link className={location.pathname.match(/\/Contact/i) ? 'active' : ''} to="/Contact/contact">联系</Link></li></ul></div></div></header>
)
export default Header

Gatsby静态网站导航高亮相关推荐

好看的极简网站导航源码自适应静态页
简介: 极简的网站导航源码自适应静态页,直接修改源码里的 index.js 即可! 网盘下载地址: http://kekewl.net/mwjkiWK49a00 图片:
webstack响应式网站导航html源码kyuan 本地静态化版
介绍: webstack响应式网站导航html源码安装方法:直接上传一言.和风天气的api建议大家自己注册换成自己的,每个注册的人有每日免费使用次数, 自带的一起用可能最后都显示不出来了. 以上提 ...
帝国网站导航config.php,帝国cms导航当前页面高亮实现另类方法：灵动标签＋逻辑非...
关于帝国cms制作的网站,当前页面导航高亮的实现方法,在华哥过去的这篇博文中(见:jquery实现帝国cms当前导航高亮的实践演练)已经有了成功实践.不过最近又碰到这个技术性问题,由于html代码结构 ...
基于 Vue 的轻量级静态网站生成器 VuePress
Vue.js 的创始人尤雨溪大大在 twitter 上发布了一个全新的基于 Vue 的静态网站生成器-,这对于广大 Vue 爱好者来说无疑是一个好消息! 什么是VuePress VuePress由两部 ...
【工具推荐】常用前端开源静态网站推荐
文章目录一.为什么要用静态网站二.推荐 1. Gatsby 2. Next.js 3. VuePress 4. MkDocs 5. Docsify 6. GitBook 7.docusaurus ...
页面静态化优缺点_静态网站生成器的优缺点
页面静态化优缺点很久以前,人们在遥远的互联网上手工建造自己的网站,将每个HTML标签都放在工匠的精心照顾下. 他们花了一整天的时间思考诸如"我应该使用<b>还是完全使用< ...
php 导航高亮,zblogphp导航高亮代码分享教程
导航高亮如本站演示,首页.列表页.文章页均可高亮.因为本站的主题是一个免费的zblogphp主题,所以一些好的东西可能没有,所以只好自己研究,本身自带导航高亮的功能,但是只有首页和列表页才有高亮显示, ...
自定义html托管,10分钟搞定“傻瓜式”的静态网站搭建托管之旅
原文发布于微信公众号:腾讯云存储(关注有惊喜) 静态网站:有别于动态网站,它就是只包含静态内容(如图片.音频.视频.HTML.CSS.JS)的网站,不依赖服务器端动态渲染页面. 那么静态网站托管应该如 ...
构建静态服务器_为静态网站构建无服务器联系表
构建静态服务器介绍 (Introduction) A few years ago AWS launched static hosting service S3, which was a paradi ...

Gatsby静态网站导航高亮

Gatsby静态网站导航高亮相关推荐

最新文章

热门文章