mirror of
https://github.com/facebook/docusaurus.git
synced 2025-05-03 12:17:20 +02:00
feat(v2): bootstrap layout footer (#2635)
* feat(v2): add minor adjustements and footer component * fix(v2): margin and spacing of footer * fix(v2): spacings * fix(v2): remove unrelated links of the bootstrap template * fix(v2): remove unrelated links of the bootstrap template
This commit is contained in:
parent
852b5e8f13
commit
2bc54a80fc
4 changed files with 81 additions and 4 deletions
|
@ -7,12 +7,13 @@
|
|||
|
||||
import React from 'react';
|
||||
import BlogPostCard from '@theme/BlogPostItem';
|
||||
import Footer from '@theme/Footer';
|
||||
|
||||
function BlogListPage(props) {
|
||||
const {items} = props;
|
||||
|
||||
return (
|
||||
<div className="container-fluid my-5">
|
||||
<div className="container-fluid mt-5">
|
||||
<div className="row row-cols-1 row-cols-sm-1">
|
||||
{items.map(({content: BlogPostContent}) => (
|
||||
<div
|
||||
|
@ -26,6 +27,7 @@ function BlogListPage(props) {
|
|||
</BlogPostCard>
|
||||
</div>
|
||||
))}
|
||||
<Footer />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
@ -49,7 +49,7 @@ function BlogPostItem(props) {
|
|||
const day = parseInt(match[2], 10);
|
||||
|
||||
return (
|
||||
<article className="card h-100">
|
||||
<article className="card h-100 shadow">
|
||||
<div className="row no-gutters rows-col-2 m-3">
|
||||
<div className="col-xs mr-3">
|
||||
{authorImageURL && (
|
||||
|
|
|
@ -15,7 +15,7 @@ function BlogTagsListPage(props) {
|
|||
<Link
|
||||
href={tags[tag].permalink}
|
||||
key={tag}
|
||||
className="btn btn-primary m-2">
|
||||
className="btn btn-primary list-inline-item my-2">
|
||||
{tags[tag].name}{' '}
|
||||
<span className="badge badge-light">{tags[tag].count}</span>
|
||||
</Link>
|
||||
|
@ -26,7 +26,7 @@ function BlogTagsListPage(props) {
|
|||
return (
|
||||
<div className="container my-3 justify-content-center">
|
||||
<h1 className="text-primary">Tags</h1>
|
||||
<ul className="my-xl-4">{renderAllTags()}</ul>
|
||||
<ul className="my-xl-4 list-inline">{renderAllTags()}</ul>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -0,0 +1,75 @@
|
|||
/**
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
|
||||
import Link from '@docusaurus/Link';
|
||||
import useBaseUrl from '@docusaurus/useBaseUrl';
|
||||
|
||||
function FooterLink({to, href, label, ...props}) {
|
||||
const toUrl = useBaseUrl(to);
|
||||
|
||||
return (
|
||||
<Link
|
||||
{...(href
|
||||
? {
|
||||
target: '_blank',
|
||||
rel: 'noopener noreferrer',
|
||||
href,
|
||||
}
|
||||
: {
|
||||
to: toUrl,
|
||||
})}
|
||||
{...props}>
|
||||
{label}
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
|
||||
function Footer() {
|
||||
const context = useDocusaurusContext();
|
||||
const {siteConfig = {}} = context;
|
||||
const {themeConfig = {}} = siteConfig;
|
||||
const {footer} = themeConfig;
|
||||
|
||||
const {links} = footer || {};
|
||||
|
||||
return (
|
||||
<footer className="container p-0 m-0">
|
||||
<div className="row bg-light no-gutters justify-content-center">
|
||||
{links && links.length > 0 && (
|
||||
<>
|
||||
{links.map((linkItem, i) => (
|
||||
<div className="col col-xs-1 col-xl-1 mx-4 my-4" key={i}>
|
||||
{linkItem.title != null && <h5>{linkItem.title}</h5>}
|
||||
<ul className="list-unstyled">
|
||||
{linkItem.items.map((item, key) =>
|
||||
item.html ? (
|
||||
<li
|
||||
key={key}
|
||||
className="mb-2"
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: item.html,
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<li className="mb-1" key={item.href || item.to}>
|
||||
<FooterLink {...item} />
|
||||
</li>
|
||||
),
|
||||
)}
|
||||
</ul>
|
||||
</div>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
|
||||
export default Footer;
|
Loading…
Add table
Reference in a new issue