添加Open Graph

2023-10-10 11:25:46 +08:00 · 2023-10-10 11:25:46 +08:00 · 18aef4454e
parent 0281dd6c48
commit 18aef4454e
24 changed files with 218 additions and 41 deletions
--- a/settings.yaml
+++ b/settings.yaml
@ -2800,6 +2800,16 @@ spec:
              validation: required
              value: 'https://npm.onmicrosoft.cn/hao-theme-static@1.3.7/templates/assets'
              help: '默认为npmJs的onmicrosoft加速地址，如果你有自己的cdn地址（请确保链接下assets文件夹下主题静态资源文件），可以填写，否则请勿修改！ '
+        - $formkit: group
+          name: opengraph
+          label: Open Graph
+          value:
+            image:
+          children:
+            - $formkit: attachment
+              name: image
+              label: 默认图片
+              help: 如果页面没有设置图片，那么将会使用此图片作为 Open Graph 图片
        - $formkit: group
          name: vanillaLazyload
          label: 懒加载
--- a/templates/about.html
+++ b/templates/about.html
@ -1,7 +1,13 @@
 <!DOCTYPE html>
 <html lang="en" xmlns:th="http://www.thymeleaf.org"
-      th:replace="~{modules/layouts/layout :: layout(content = ~{::content}, htmlType = 'about',title = ${'关于' + ' | ' + site.title})}">
-
+      th:replace="~{modules/layouts/layout :: layout(content = ~{::content}, htmlType = 'about',title = ${'关于' + ' | ' + site.title}, head = ~{::head})}">
+<th:block th:fragment="head">
+    <th:block th:replace="~{modules/common/open-graph :: open-graph(_title = ${singlePage.spec.title},
+                _permalink = ${singlePage.status.permalink},
+                _cover = ${singlePage.spec.cover},
+                _excerpt = ${singlePage.status.excerpt},
+                _type = 'website')}"></th:block>
+</th:block>
 <th:block th:fragment="content">

    <div class="page" id="body-wrap">
--- a/templates/album.html
+++ b/templates/album.html
@ -1,7 +1,13 @@
 <!DOCTYPE html>
 <html lang="en" xmlns:th="http://www.thymeleaf.org"
-      th:replace="~{modules/layouts/layout :: layout(content = ~{::content}, htmlType = 'page',title = ${singlePage.spec.title + ' | ' + site.title})}">
-
+      th:replace="~{modules/layouts/layout :: layout(content = ~{::content}, htmlType = 'page',title = ${singlePage.spec.title + ' | ' + site.title}, head = ~{::head})}">
+<th:block th:fragment="head">
+    <th:block th:replace="~{modules/common/open-graph :: open-graph(_title = ${singlePage.spec.title},
+                _permalink = ${singlePage.status.permalink},
+                _cover = ${singlePage.spec.cover},
+                _excerpt = ${singlePage.status.excerpt},
+                _type = 'website')}"></th:block>
+</th:block>
 <th:block th:fragment="content">

    <div class="page" id="body-wrap">
--- a/templates/archives.html
+++ b/templates/archives.html
@ -1,12 +1,18 @@
 <!DOCTYPE html>
 <html lang="en" xmlns:th="http://www.thymeleaf.org"
-      th:replace="~{modules/layouts/layout :: layout(content = ~{::content}, htmlType = 'archive',title = ${'文章' + ' | ' + site.title})}">
-
+      th:replace="~{modules/layouts/layout :: layout(content = ~{::content}, htmlType = 'archive',title = ${'文章归档' + ' | ' + site.title}, head = ~{::head})}">
+<th:block th:fragment="head">
+    <th:block th:replace="~{modules/common/open-graph :: open-graph(_title = '文章归档',
+                _permalink = '/archives',
+                _cover = ${theme.config.other.opengraph.image},
+                _excerpt = ${site.seo.description},
+                _type = 'website')}"></th:block>
+</th:block>
 <th:block th:fragment="content">

    <div class="page" id="body-wrap">
        <header class="not-top-img" id="page-header">
-            <nav th:replace="~{modules/nav :: nav(title = '文章')}"></nav>
+            <nav th:replace="~{modules/nav :: nav(title = '文章归档')}"></nav>
        </header>
        <main class="layout" id="content-inner">
            <!-- archive -->
--- a/templates/bangumis.html
+++ b/templates/bangumis.html
@ -1,7 +1,13 @@
 <!DOCTYPE html>
 <html lang="en" xmlns:th="http://www.thymeleaf.org"
-      th:replace="~{modules/layouts/layout :: layout(content = ~{::content}, htmlType = 'bangumis',title = ${'追番' + ' | ' + site.title})}">
-
+      th:replace="~{modules/layouts/layout :: layout(content = ~{::content}, htmlType = 'bangumis',title = ${'追番' + ' | ' + site.title}, head = ~{::head})}">
+<th:block th:fragment="head">
+    <th:block th:replace="~{modules/common/open-graph :: open-graph(_title = '追番',
+                _permalink = '/bangumis',
+                _cover = ${theme.config.other.opengraph.image},
+                _excerpt = ${site.seo.description},
+                _type = 'website')}"></th:block>
+</th:block>
 <th:block th:fragment="content">
    <div class="page" id="body-wrap">

--- a/templates/categories.html
+++ b/templates/categories.html
@ -1,7 +1,13 @@
 <!DOCTYPE html>
 <html lang="en" xmlns:th="http://www.thymeleaf.org"
-      th:replace="~{modules/layouts/layout :: layout(content = ~{::content}, htmlType = 'category',title = ${'分类' + ' | ' + site.title})}">
-
+      th:replace="~{modules/layouts/layout :: layout(content = ~{::content}, htmlType = 'category',title = ${'分类' + ' | ' + site.title}, head = ~{::head})}">
+<th:block th:fragment="head">
+    <th:block th:replace="~{modules/common/open-graph :: open-graph(_title = '分类目录',
+                _permalink = '/categories',
+                _cover = ${theme.config.other.opengraph.image},
+                _excerpt = ${site.seo.description},
+                _type = 'website')}"></th:block>
+</th:block>
 <th:block th:fragment="content">

    <div class="page" id="body-wrap">
--- a/templates/category.html
+++ b/templates/category.html
@ -1,7 +1,13 @@
 <!DOCTYPE html>
 <html lang="en" xmlns:th="http://www.thymeleaf.org"
-      th:replace="~{modules/layouts/layout :: layout(content = ~{::content}, htmlType = 'category',title = ${'分类' + ': ' + category.spec.displayName + ' | ' + site.title})}" >
-
+      th:replace="~{modules/layouts/layout :: layout(content = ~{::content}, htmlType = 'category',title = ${'分类' + ': ' + category.spec.displayName + ' | ' + site.title}, head = ~{::head})}" >
+<th:block th:fragment="head">
+    <th:block th:replace="~{modules/common/open-graph :: open-graph(_title = '分类',
+                _permalink = ${category.status.permalink},
+                _cover = ${category.spec.cover},
+                _excerpt = ${category.spec.description},
+                _type = 'website')}"></th:block>
+</th:block>
 <th:block th:fragment="content">

    <div class="page" id="body-wrap">
--- a/templates/comments.html
+++ b/templates/comments.html
@ -1,7 +1,13 @@
 <!DOCTYPE html>
 <html lang="en" xmlns:th="http://www.thymeleaf.org"
-      th:replace="~{modules/layouts/layout :: layout(content = ~{::content}, htmlType = 'comments',title = ${singlePage.spec.title + ' | ' + site.title})}">
-
+      th:replace="~{modules/layouts/layout :: layout(content = ~{::content}, htmlType = 'comments',title = ${singlePage.spec.title + ' | ' + site.title}, head = ~{::head})}">
+<th:block th:fragment="head">
+    <th:block th:replace="~{modules/common/open-graph :: open-graph(_title = ${singlePage.spec.title},
+                _permalink = ${singlePage.status.permalink},
+                _cover = ${singlePage.spec.cover},
+                _excerpt = ${singlePage.status.excerpt},
+                _type = 'website')}"></th:block>
+</th:block>
 <th:block th:fragment="content">

    <div class="page" id="body-wrap">
--- a/templates/equipment.html
+++ b/templates/equipment.html
@ -1,7 +1,13 @@
 <!DOCTYPE html>
 <html lang="en" xmlns:th="http://www.thymeleaf.org"
-      th:replace="~{modules/layouts/layout :: layout(content = ~{::content}, htmlType = 'page',title = ${singlePage.spec.title + ' | ' + site.title})}">
-
+      th:replace="~{modules/layouts/layout :: layout(content = ~{::content}, htmlType = 'page',title = ${singlePage.spec.title + ' | ' + site.title}, head = ~{::head})}">
+<th:block th:fragment="head">
+    <th:block th:replace="~{modules/common/open-graph :: open-graph(_title = ${singlePage.spec.title},
+                _permalink = ${singlePage.status.permalink},
+                _cover = ${singlePage.spec.cover},
+                _excerpt = ${singlePage.status.excerpt},
+                _type = 'website')}"></th:block>
+</th:block>
 <th:block th:fragment="content">

    <div class="page" id="body-wrap">
--- a/templates/fcircle.html
+++ b/templates/fcircle.html
@ -1,7 +1,13 @@
 <!DOCTYPE html>
 <html lang="en" xmlns:th="http://www.thymeleaf.org"
-      th:replace="~{modules/layouts/layout :: layout(content = ~{::content}, htmlType = 'fcircle',title = ${singlePage.spec.title + ' | ' + site.title} )}">
-
+      th:replace="~{modules/layouts/layout :: layout(content = ~{::content}, htmlType = 'fcircle',title = ${singlePage.spec.title + ' | ' + site.title}, head = ~{::head} )}">
+<th:block th:fragment="head">
+    <th:block th:replace="~{modules/common/open-graph :: open-graph(_title = ${singlePage.spec.title},
+                _permalink = ${singlePage.status.permalink},
+                _cover = ${singlePage.spec.cover},
+                _excerpt = ${singlePage.status.excerpt},
+                _type = 'website')}"></th:block>
+</th:block>
 <th:block th:fragment="content">

    <div class="page" id="body-wrap">
--- a/templates/index.html
+++ b/templates/index.html
@ -1,7 +1,13 @@
 <!DOCTYPE html>
 <html lang="en" xmlns:th="http://www.thymeleaf.org"
-      th:replace="~{modules/layouts/layout :: layout(content = ~{::content}, htmlType = 'index', title = null)}">
-
+      th:replace="~{modules/layouts/layout :: layout(content = ~{::content}, htmlType = 'index', title = null, head = ~{::head})}">
+<th:block th:fragment="head">
+    <th:block th:replace="~{modules/common/open-graph :: open-graph(_title = ${site.title},
+                _permalink = '',
+                _cover = ${theme.config.other.opengraph.image},
+                _excerpt = '',
+                _type = 'website')}"></th:block>
+</th:block>
 <th:block th:fragment="content">

    <div class="page" id="body-wrap">
--- a/templates/links.html
+++ b/templates/links.html
@ -1,6 +1,13 @@
 <!DOCTYPE html>
 <html lang="en"  xmlns:th="http://www.thymeleaf.org"
-      th:replace="~{modules/layouts/layout :: layout(content = ~{::content}, htmlType = 'links',title = ${'友链' + ' | ' + site.title})}">
+      th:replace="~{modules/layouts/layout :: layout(content = ~{::content}, htmlType = 'links',title = ${'友链' + ' | ' + site.title}, head = ~{::head})}">
+<th:block th:fragment="head">
+    <th:block th:replace="~{modules/common/open-graph :: open-graph(_title = '友链',
+                _permalink = '/links',
+                _cover = ${theme.config.other.opengraph.image},
+                _excerpt = ${site.seo.description},
+                _type = 'website')}"></th:block>
+</th:block>
 <th:block th:fragment="content">

    <div class="page" id="body-wrap">
--- a/templates/modules/common/open-graph.html
+++ b/templates/modules/common/open-graph.html
@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:th="http://www.thymeleaf.org">
+<th:block th:fragment="open-graph(_title,_permalink,_cover,_excerpt,_type)">
+    <!-- Open Graph Start -->
+    <meta property="og:site_name" th:content="${site.title}" />
+    <meta property="og:type" th:content="${_type}" />
+    <meta property="og:title" th:content="${_title}" />
+    <meta property="og:url" th:content="|${site.url}${_permalink}|" />
+    <meta
+            th:unless="${#strings.isEmpty(_excerpt) and #strings.isEmpty(site.seo.description)}"
+            property="og:description"
+            th:content="${excerpt ?: site.seo.description}"
+    />
+    <meta
+            th:unless="${#lists.isEmpty(_cover)}"
+            property="og:image"
+            th:content="${_cover}"
+    />
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:title" th:content="${_title}" />
+    <meta name="twitter:url" th:content="|${site.url}${_permalink}|" />
+    <meta
+            th:unless="${#strings.isEmpty(_excerpt) and #strings.isEmpty(site.seo.description)}"
+            name="twitter:description"
+            th:content="${_excerpt ?: site.seo.description}"
+    />
+    <meta
+            th:unless="${#lists.isEmpty(_cover)}"
+            name="twitter:image"
+            th:content="${_cover}"
+    />
+    <!-- Open Graph End -->
+</th:block>
+</html>
--- a/templates/modules/layouts/layout.html
+++ b/templates/modules/layouts/layout.html
@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" th:fragment="layout(content, htmlType, title)" xmlns:th="http://www.thymeleaf.org"
+<html lang="en" th:fragment="layout(content, htmlType, title, head)" xmlns:th="http://www.thymeleaf.org"
      th:with="assets_link=${theme.config.other.staticResource.use == 'onmicrosoft' ? 'https://npm.onmicrosoft.cn/hao-theme-static@' + theme.spec.version +'/templates/assets' :
      theme.config.other.staticResource.use == 'cbd' ? 'https://cdn.cbd.int/hao-theme-static@' + theme.spec.version +'/templates/assets' :
      theme.config.other.staticResource.use == 'custom' ? theme.config.other.staticResource.cdn_link : #theme.assets('/')},
@ -17,6 +17,10 @@
      rel="stylesheet" th:href="${not #strings.isEmpty(theme.config.comments.walines.walinesCss) ? theme.config.comments.walines.walinesCss : 'https://cdn.cbd.int/@waline/client@2.15.7/dist/waline.css' }">
    <!--  解决 katex pjax问题 -->
    <script th:if="${pluginFinder.available('plugin-katex')}" defer="" src="/plugins/plugin-katex/assets/static/katex.min.js"></script>
+
+    <th:block th:if="${head != null}">
+        <th:block th:replace="${head}" />
+    </th:block>
 </head>

 <body>
--- a/templates/moments.html
+++ b/templates/moments.html
@ -1,7 +1,13 @@
 <!DOCTYPE html>
 <html lang="en" xmlns:th="http://www.thymeleaf.org"
-      th:replace="~{modules/layouts/layout :: layout(content = ~{::content}, htmlType = 'moments',title = ${title + ' | ' + site.title})}">
-
+      th:replace="~{modules/layouts/layout :: layout(content = ~{::content}, htmlType = 'moments',title = ${title + ' | ' + site.title}, head = ~{::head})}">
+<th:block th:fragment="head">
+    <th:block th:replace="~{modules/common/open-graph :: open-graph(_title = '瞬间',
+                _permalink = '/moments',
+                _cover = ${theme.config.other.opengraph.image},
+                _excerpt = ${site.seo.description},
+                _type = 'website')}"></th:block>
+</th:block>
 <th:block th:fragment="content">

    <div class="page" id="body-wrap">
--- a/templates/music.html
+++ b/templates/music.html
@ -1,7 +1,13 @@
 <!DOCTYPE html>
 <html lang="en" xmlns:th="http://www.thymeleaf.org"
-      th:replace="~{modules/layouts/layout :: layout(content = ~{::content}, htmlType = 'music',title = ${singlePage.spec.title + ' | ' + site.title})}">
-
+      th:replace="~{modules/layouts/layout :: layout(content = ~{::content}, htmlType = 'music',title = ${singlePage.spec.title + ' | ' + site.title}, head = ~{::head})}">
+<th:block th:fragment="head">
+    <th:block th:replace="~{modules/common/open-graph :: open-graph(_title = ${singlePage.spec.title},
+                _permalink = ${singlePage.status.permalink},
+                _cover = ${singlePage.spec.cover},
+                _excerpt = ${singlePage.status.excerpt},
+                _type = 'website')}"></th:block>
+</th:block>
 <th:block th:fragment="content">

    <div class="page" id="body-wrap">
--- a/templates/new_comment.html
+++ b/templates/new_comment.html
@ -1,7 +1,13 @@
 <!DOCTYPE html>
 <html lang="en" xmlns:th="http://www.thymeleaf.org"
-      th:replace="~{modules/layouts/layout :: layout(content = ~{::content}, htmlType = 'newComment',title = ${singlePage.spec.title + ' | ' + site.title})}">
-
+      th:replace="~{modules/layouts/layout :: layout(content = ~{::content}, htmlType = 'newComment',title = ${singlePage.spec.title + ' | ' + site.title}, head = ~{::head})}">
+<th:block th:fragment="head">
+    <th:block th:replace="~{modules/common/open-graph :: open-graph(_title = ${singlePage.spec.title},
+                _permalink = ${singlePage.status.permalink},
+                _cover = ${singlePage.spec.cover},
+                _excerpt = ${singlePage.status.excerpt},
+                _type = 'website')}"></th:block>
+</th:block>
 <th:block th:fragment="content">

    <div class="page" id="body-wrap">
--- a/templates/page.html
+++ b/templates/page.html
@ -1,7 +1,13 @@
 <!DOCTYPE html>
 <html lang="en" xmlns:th="http://www.thymeleaf.org"
-      th:replace="~{modules/layouts/layout :: layout(content = ~{::content}, htmlType = 'page',title = ${singlePage.spec.title + ' | ' + site.title})}">
-
+      th:replace="~{modules/layouts/layout :: layout(content = ~{::content}, htmlType = 'page',title = ${singlePage.spec.title + ' | ' + site.title}, head = ~{::head})}">
+<th:block th:fragment="head">
+    <th:block th:replace="~{modules/common/open-graph :: open-graph(_title = ${singlePage.spec.title},
+                _permalink = ${singlePage.status.permalink},
+                _cover = ${singlePage.spec.cover},
+                _excerpt = ${singlePage.status.excerpt},
+                _type = 'website')}"></th:block>
+</th:block>
 <th:block th:fragment="content">

    <div class="page" id="body-wrap">
--- a/templates/page_links.html
+++ b/templates/page_links.html
@ -1,6 +1,13 @@
 <!DOCTYPE html>
 <html lang="en" xmlns:th="http://www.thymeleaf.org"
-      th:replace="~{modules/layouts/layout :: layout(content = ~{::content}, htmlType = 'page',title = ${singlePage.spec.title + ' | ' + site.title})}">
+      th:replace="~{modules/layouts/layout :: layout(content = ~{::content}, htmlType = 'page',title = ${singlePage.spec.title + ' | ' + site.title}, head = ~{::head})}">
+<th:block th:fragment="head">
+    <th:block th:replace="~{modules/common/open-graph :: open-graph(_title = ${singlePage.spec.title},
+                _permalink = ${singlePage.status.permalink},
+                _cover = ${singlePage.spec.cover},
+                _excerpt = ${singlePage.status.excerpt},
+                _type = 'website')}"></th:block>
+</th:block>
 <th:block th:fragment="content">

    <div class="page" id="body-wrap">
--- a/templates/photos.html
+++ b/templates/photos.html
@ -1,7 +1,13 @@
 <!DOCTYPE html>
 <html lang="en" xmlns:th="http://www.thymeleaf.org"
-      th:replace="~{modules/layouts/layout :: layout(content = ~{::content},htmlType = 'photos',title = ${title + ' | ' + site.title})}">
-
+      th:replace="~{modules/layouts/layout :: layout(content = ~{::content},htmlType = 'photos',title = ${title + ' | ' + site.title}, head = ~{::head})}">
+<th:block th:fragment="head">
+    <th:block th:replace="~{modules/common/open-graph :: open-graph(_title = '图库',
+                _permalink = '/photos',
+                _cover = ${theme.config.other.opengraph.image},
+                _excerpt = ${site.seo.description},
+                _type = 'website')}"></th:block>
+</th:block>
 <th:block th:fragment="content">

    <div class="page" id="body-wrap">
--- a/templates/post.html
+++ b/templates/post.html
@ -1,7 +1,13 @@
 <!DOCTYPE html>
 <html lang="en" xmlns:th="http://www.thymeleaf.org"
-      th:replace="~{modules/layouts/layout :: layout(content = ~{::content}, htmlType = 'post',title = ${post.spec.title + ' | ' + site.title})}">
-
+      th:replace="~{modules/layouts/layout :: layout(content = ~{::content}, htmlType = 'post',title = ${post.spec.title + ' | ' + site.title}, head = ~{::head})}">
+<th:block th:fragment="head">
+    <th:block th:replace="~{modules/common/open-graph :: open-graph(_title = ${post.spec.title},
+                _permalink = ${post.status.permalink},
+                _cover = ${post.spec.cover},
+                _excerpt = ${post.status.excerpt},
+                _type = 'article')}"></th:block>
+</th:block>
 <th:block th:fragment="content">
    <div class="post" id="body-wrap">

--- a/templates/tag.html
+++ b/templates/tag.html
@ -1,7 +1,13 @@
 <!DOCTYPE html>
 <html lang="en" xmlns:th="http://www.thymeleaf.org"
-      th:replace="~{modules/layouts/layout :: layout(content = ~{::content}, htmlType = 'tag',title = ${'标签' + ': ' + tag.spec.displayName + ' | ' + site.title})}">
-
+      th:replace="~{modules/layouts/layout :: layout(content = ~{::content}, htmlType = 'tag',title = ${'标签' + ': ' + tag.spec.displayName + ' | ' + site.title}, head = ~{::head})}">
+<th:block th:fragment="head">
+    <th:block th:replace="~{modules/common/open-graph :: open-graph(_title = ${tag.spec.displayName},
+                _permalink = ${tag.status.permalink},
+                _cover = ${tag.spec.cover},
+                _excerpt = ${site.seo.description},
+                _type = 'website')}"></th:block>
+</th:block>
 <th:block th:fragment="content">

    <div class="page" id="body-wrap">
--- a/templates/tags.html
+++ b/templates/tags.html
@ -1,7 +1,14 @@
 <!DOCTYPE html>
 <html lang="en" xmlns:th="http://www.thymeleaf.org"
-      th:replace="~{modules/layouts/layout :: layout(content = ~{::content},htmlType = 'tag',title = ${'标签' + ' | ' + site.title})}">
+      th:replace="~{modules/layouts/layout :: layout(content = ~{::content},htmlType = 'tag',title = ${'标签' + ' | ' + site.title}, head = ~{::head})}">

+<th:block th:fragment="head">
+    <th:block th:replace="~{modules/common/open-graph :: open-graph(_title = '标签',
+                _permalink = '/tags',
+                _cover = ${theme.config.other.opengraph.image},
+                _excerpt = ${site.seo.description},
+                _type = 'website')}"></th:block>
+</th:block>
 <th:block th:fragment="content">

    <div class="page" id="body-wrap">
--- a/templates/todolist.html
+++ b/templates/todolist.html
@ -1,7 +1,13 @@
 <!DOCTYPE html>
 <html lang="en" xmlns:th="http://www.thymeleaf.org"
-      th:replace="~{modules/layouts/layout :: layout(content = ~{::content}, htmlType = 'page',title = ${singlePage.spec.title + ' | ' + site.title})}">
-
+      th:replace="~{modules/layouts/layout :: layout(content = ~{::content}, htmlType = 'page',title = ${singlePage.spec.title + ' | ' + site.title}, head = ~{::head})}">
+<th:block th:fragment="head">
+    <th:block th:replace="~{modules/common/open-graph :: open-graph(_title = ${singlePage.spec.title},
+                _permalink = ${singlePage.status.permalink},
+                _cover = ${singlePage.spec.cover},
+                _excerpt = ${singlePage.status.excerpt},
+                _type = 'website')}"></th:block>
+</th:block>
 <th:block th:fragment="content">

    <div class="page" id="body-wrap">