Pour tout problème contactez-nous par mail : support@froggit.fr | La FAQ :grey_question: | Rejoignez-nous sur le Chat :speech_balloon:

Skip to content
Snippets Groups Projects
Commit 3a8f616e authored by Plumtree3D's avatar Plumtree3D
Browse files

feat: blog repository

parent 21590ec4
No related branches found
No related tags found
1 merge request!10Draft: Resolve "Howto filter blog article from erternal git repo"
node_modules/
build
public
blog
/blog.3/authors.yml
---
slug: mdx-blog-post
title: MDX Blog Post
authors: [slorber]
tags: [docusaurus]
---
Blog posts support [Docusaurus Markdown features](https://docusaurus.io/docs/markdown-features), such as [MDX](https://mdxjs.com/).
:::tip
Use the power of React to create interactive blog posts.
```js
<button onClick={() => alert('button clicked!')}>Click me!</button>
```
<button onClick={() => alert('button clicked!')}>Click me!</button>
:::
blog/2021-08-26-welcome/docusaurus-plushie-banner.jpeg

93.9 KiB

---
slug: welcome
title: Welcome
authors: [slorber, yangshun]
tags: [facebook, hello, docusaurus]
---
[Docusaurus blogging features](https://docusaurus.io/docs/blog) are powered by the [blog plugin](https://docusaurus.io/docs/api/plugins/@docusaurus/plugin-content-blog).
Simply add Markdown files (or folders) to the `blog` directory.
Regular blog authors can be added to `authors.yml`.
The blog post date can be extracted from filenames, such as:
- `2019-05-30-welcome.md`
- `2019-05-30-welcome/index.md`
A blog post folder can be convenient to co-locate blog post images:
![Docusaurus Plushie](./docusaurus-plushie-banner.jpeg)
The blog supports tags as well!
**And if you don't want a blog**: just delete this directory, and use `blog: false` in your Docusaurus config.
---
slug: Second-blog-post
title: Second Blog Post
authors:
name: Gao Wei
title: Docusaurus Core Team
url: https://github.com/wgao19
image_url: https://github.com/wgao19.png
tags: [hola, docusaurus]
---
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
import React from 'react';
import clsx from 'clsx';
import Layout from '@theme/Layout';
import BlogSidebar from '@theme/BlogSidebar';
export default function BlogLayout(props) {
const {sidebar, toc, children, ...layoutProps} = props;
const hasSidebar = sidebar && sidebar.items.length > 0;
return (
<Layout {...layoutProps}>
<div className="container margin-vert--lg">
<div className="row">
LOL
<BlogSidebar sidebar={sidebar} />
<main
className={clsx('col', {
'col--7': hasSidebar,
'col--9 col--offset-1': !hasSidebar,
})}
itemScope
itemType="http://schema.org/Blog">
lol
{children}
</main>
{toc && <div className="col col--2">{toc}</div>}
</div>
</div>
</Layout>
);
}
import React from 'react';
import clsx from 'clsx';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import {
PageMetadata,
HtmlClassNameProvider,
ThemeClassNames,
} from '@docusaurus/theme-common';
import BlogLayout from '@theme/BlogLayout';
import BlogListPaginator from '@theme/BlogListPaginator';
import SearchMetadata from '@theme/SearchMetadata';
import BlogPostItems from '@theme/BlogPostItems';
function BlogListPageMetadata(props) {
const {metadata} = props;
const {
siteConfig: {title: siteTitle},
} = useDocusaurusContext();
const {blogDescription, blogTitle, permalink} = metadata;
const isBlogOnlyMode = permalink === '/';
const title = isBlogOnlyMode ? siteTitle : blogTitle;
return (
<>
<PageMetadata title={title} description={blogDescription} />
<SearchMetadata tag="blog_posts_list" />
</>
);
}
function BlogListPageContent(props) {
const {metadata, items, sidebar} = props;
return (
<>
lol
<BlogLayout sidebar={sidebar}>
<BlogPostItems items={items} />
<BlogListPaginator metadata={metadata} />
</BlogLayout>
</>
);
}
export default function BlogListPage(props) {
return (
<HtmlClassNameProvider
className={clsx(
ThemeClassNames.wrapper.blogPages,
ThemeClassNames.page.blogListPage,
)}>
<BlogListPageMetadata {...props} />
<BlogListPageContent {...props} />
</HtmlClassNameProvider>
);
}
import React from 'react';
import clsx from 'clsx';
import Link from '@docusaurus/Link';
import styles from './styles.module.css';
export default function Tag({permalink, label, count}) {
return (
<Link
href={permalink}
className={clsx(
styles.tag,
count ? styles.tagWithCount : styles.tagRegular,
)}>
{label}
{count && <span>{count}</span>}
</Link>
);
}
:root {
--docusaurus-tag-list-border: var(--ifm-color-emphasis-300);
}
.tag {
border: 1px solid var(--docusaurus-tag-list-border);
transition: border var(--ifm-transition-fast);
}
.tag:hover {
--docusaurus-tag-list-border: var(--ifm-link-color);
text-decoration: none;
}
.tagRegular {
border-radius: var(--ifm-global-radius);
padding: 0.2rem 0.5rem 0.3rem;
font-size: 90%;
}
.tagWithCount {
display: flex;
align-items: center;
position: relative;
padding: 0 0.5rem 0 1rem;
border-left: 0;
}
.tagWithCount::before,
.tagWithCount::after {
content: '';
position: absolute;
top: 50%;
border: 1px solid var(--docusaurus-tag-list-border);
transition: inherit;
}
.tagWithCount::before {
right: 100%;
transform: translate(50%, -50%) rotate(-45deg);
width: 1.18rem;
height: 1.18rem;
border-right: 0;
border-bottom: 0;
}
.tagWithCount::after {
left: 0;
transform: translateY(-50%);
width: 0.5rem;
height: 0.5rem;
border-radius: 50%;
}
.tagWithCount span {
background: var(--ifm-color-secondary);
color: var(--ifm-color-black);
font-size: 0.7rem;
line-height: 1.2;
border-radius: var(--ifm-global-radius);
padding: 0.1rem 0.4rem;
margin-left: 0.3rem;
}
import React from 'react';
import {listTagsByLetters} from '@docusaurus/theme-common';
import Tag from '@theme/Tag';
import styles from './styles.module.css';
function TagLetterEntryItem({letterEntry}) {
return (
<article>
<h2>{letterEntry.letter}</h2>
<ul className="padding--none">
{letterEntry.tags.map((tag) => (
<li key={tag.permalink} className={styles.tag}>
LOLilol
<Tag {...tag} />
</li>
))}
</ul>
<hr />
</article>
);
}
export default function TagsListByLetter({tags}) {
const letterList = listTagsByLetters(tags);
return (
<section className="margin-vert--lg">
LOLOL
{letterList.map((letterEntry) => (
<TagLetterEntryItem
key={letterEntry.letter}
letterEntry={letterEntry}
/>
))}
</section>
);
}
.tag {
display: inline-block;
margin: 0.5rem 0.5rem 0 1rem;
}
import React from 'react';
import clsx from 'clsx';
import Translate from '@docusaurus/Translate';
import Tag from '@theme/Tag';
import styles from './styles.module.css';
export default function TagsListInline({tags}) {
return (
<>
<b>
<Translate
id="theme.tags.tagsListLabel"
description="The label alongside a tag list">
Tags:
</Translate>
</b>
<ul className={clsx(styles.tags, 'padding--none', 'margin-left--sm')}>
{tags.map(({label, permalink: tagPermalink}) => (
<li key={tagPermalink} className={styles.tag}>
<Tag label={label} permalink={tagPermalink} />
</li>
))}
</ul>
</>
);
}
.tags {
display: inline;
}
.tag {
margin: 0 0.4rem 0.5rem 0;
display: inline-block;
}
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment