自动生成博客题图

Ruanxingzhi commented 2 years ago

https://www.ruanx.net/auto-blog-banner/

Ghost 在文章内没有图片时，会采用博客首页图片作为 OG 标签，导致分享到第三方平台时抓取到的图片与内容无关。我们造一个自动生成题图的工具。

n-WN commented 1 year ago

你的博客是使用 Ghost 构建的吗，我也想拥有和你的同款博客，可以开放模版吗

Ruanxingzhi commented 1 year ago

@n-WN 你的博客是使用 Ghost 构建的吗，我也想拥有和你的同款博客，可以开放模版吗

Code injection 如下：

<!-- link href="https://fonts.googleapis.com/css?family=Noto+Serif+SC&display=swap" rel="stylesheet" -->

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fira+Mono&family=Noto+Serif+SC&display=swap" rel="stylesheet">

<style>
    .post-content,.post-card-excerpt{
        font-family: 'Noto Serif SC', "PingFang SC","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
    }
    .post-full-content{font-size: 100%;}
    .post-full-custom-excerpt {font-size: 1.8rem;}
    .post-full-title {font-size:3.2rem;}
    .post-full-content blockquote{margin:20px;padding: 1em;  background-color: #3eb0ef14; }
    .post-full-content blockquote p {font-style:normal;}
    .post-full-image {display:none;}

    /* .post-full-content figcaption {margin: .4em 0 .5em  !important} */

    .kg-callout-card {width: 100%; margin-bottom: 1em;}

    .post-full-content figure {margin: 0.8em 0 1em;}

    p {margin: 0.2em 0 0.5em !important;}

    .post-full-content img{border-radius:5px;}

    code {font-family: 'Noto Serif SC';}
</style>

<style>
    .kg-bookmark-metadata > .kg-bookmark-publisher:before {
    content: "" !important;
    margin: 0 !important;
}
</style>

mathjax 和 highlight.js 可参考官方文档引入。

n-WN commented 1 year ago

@n-WN 你的博客是使用 Ghost 构建的吗，我也想拥有和你的同款博客，可以开放模版吗

Code injection 如下：

<!-- link href="https://fonts.googleapis.com/css?family=Noto+Serif+SC&display=swap" rel="stylesheet" -->

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fira+Mono&family=Noto+Serif+SC&display=swap" rel="stylesheet">

<style>
    .post-content,.post-card-excerpt{
        font-family: 'Noto Serif SC', "PingFang SC","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
    }
    .post-full-content{font-size: 100%;}
    .post-full-custom-excerpt {font-size: 1.8rem;}
    .post-full-title {font-size:3.2rem;}
    .post-full-content blockquote{margin:20px;padding: 1em;  background-color: #3eb0ef14; }
    .post-full-content blockquote p {font-style:normal;}
    .post-full-image {display:none;}

    /* .post-full-content figcaption {margin: .4em 0 .5em  !important} */

    .kg-callout-card {width: 100%; margin-bottom: 1em;}

    .post-full-content figure {margin: 0.8em 0 1em;}

    p {margin: 0.2em 0 0.5em !important;}

    .post-full-content img{border-radius:5px;}

    code {font-family: 'Noto Serif SC';}
</style>

<style>
    .kg-bookmark-metadata > .kg-bookmark-publisher:before {
    content: "" !important;
    margin: 0 !important;
}
</style>

mathjax 和 highlight.js 可参考官方文档引入。

非常感谢！

Ruanxingzhi / blogComment

自动生成博客题图 #80