chore: modify webmention display block css style

This commit is contained in:
sy
2023-03-31 23:50:48 +08:00
parent 80b39b4945
commit 05c4f95f9c
3 changed files with 20 additions and 10 deletions

View File

@@ -180,7 +180,8 @@ const BLOG = {
COMMENT_WEBMENTION: {
ENABLE: process.env.NEXT_PUBLIC_WEBMENTION_ENABLE || false,
AUTH: process.env.NEXT_PUBLIC_WEBMENTION_AUTH || '',
HOSTNAME: process.env.NEXT_PUBLIC_WEBMENTION_HOSTNAME || ''
HOSTNAME: process.env.NEXT_PUBLIC_WEBMENTION_HOSTNAME || '',
TWITTER_USERNAME: process.env.NEXT_PUBLIC_TWITTER_USERNAME || ''
},
// <---- 评论插件

View File

@@ -139,26 +139,30 @@ const WebmentionReplies = ({ target }) => {
const WebMentionBlock = ({ frontMatter }) => {
const router = useRouter()
const url = `https://${BLOG.COMMENT_WEBMENTION.HOSTNAME}/${router.asPath}`
const tweet = `${frontMatter.title} by @siygle ${url}`
const url = `https://${BLOG.COMMENT_WEBMENTION.HOSTNAME}${router.asPath}`
const tweet = `${frontMatter.title} by @${BLOG.COMMENT_WEBMENTION.TWITTER_USERNAME} ${url}`
console.log('ini', url, tweet, router.asPath)
return (
<div className='webmention-block'>
<h1 className='webmention-header'>
powered by WebMention
powered by <a href="https://webmention.io" target='_blank' rel='noreferrer'>WebMention.io</a>
</h1>
<div className='webmention-block-intro'>
This post is using{' '}
<a target="_blank" rel='noreferrer' href="https://webmention.io">
WebMention.io
</a>{' '}
as the comment system.{' '}
You can{' '}
<a
target="_blank"
id='tweet-post-url'
href={`https://twitter.com/intent/tweet?text=${encodeURI(tweet)}`}
rel="noopener noreferrer"
>Tweet this post</a>
>tweet this post</a>{' '}
or{' '}
<a
target='_blank'
id='tweet-discuss-url'
href={`https://www.twitter.com/search?q=${url}`}
rel='noopener noreferrer'
>discuss it on Twitter</a>
, the comments will show up here.
</div>
<div className='webmention-info'>

View File

@@ -238,6 +238,11 @@ nav {
margin-bottom: .5rem;
}
.webmention-block-intro a {
color: #0000EE;
text-decoration: underline;
}
.webmention {
margin-top: 1rem;
padding-top: 1rem;