为文档添加 AI 搜索与聊天

This commit is contained in:
Super Manito
2025-05-18 10:57:10 +08:00
parent 14a716cd7e
commit 2efff3dcc8
12 changed files with 434 additions and 61 deletions

View File

@@ -0,0 +1,122 @@
.orama-ui {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-family: var(--md-text-font);
font-weight: 400;
text-rendering: optimizeLegibility;
vertical-align: baseline;
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
text-size-adjust: none;
--orama-base-font-size: 18;
--font-size-xxs: calc(10rem/var(--orama-base-font-size, 16));
--font-size-xs: calc(12rem/var(--orama-base-font-size, 16));
--font-size-sm: calc(14rem/var(--orama-base-font-size, 16));
--font-size-md: calc(16rem/var(--orama-base-font-size, 16));
--font-size-lg: calc(20rem/var(--orama-base-font-size, 16));
--font-weight-normal: 400;
--font-weight-semibold: 600;
--font-line-height-s: 1.25;
--font-line-height-m: 1.5;
--radius-xs: calc(6rem/var(--orama-base-font-size, 16));
--radius-s: calc(8rem/var(--orama-base-font-size, 16));
--radius-m: calc(12rem/var(--orama-base-font-size, 16));
--radius-l: calc(16rem/var(--orama-base-font-size, 16));
--radius-3xl: calc(40rem/var(--orama-base-font-size, 16));
--textarea-radius: calc(16rem/var(--orama-base-font-size, 16));
--spacing-2xs: calc(2rem/var(--orama-base-font-size, 16));
--spacing-xs: calc(4rem/var(--orama-base-font-size, 16));
--spacing-s: calc(8rem/var(--orama-base-font-size, 16));
--spacing-m: calc(12rem/var(--orama-base-font-size, 16));
--spacing-l: calc(16rem/var(--orama-base-font-size, 16));
--spacing-xl: calc(24rem/var(--orama-base-font-size, 16));
--spacing-2xl: calc(32rem/var(--orama-base-font-size, 16));
--spacing-3xl: calc(40rem/var(--orama-base-font-size, 16));
--textarea-shadow: var(--md-shadow-z1);
--text-color-primary: #151515;
--text-color-secondary: #838289;
--text-color-tertiary: #99989d;
--text-color-accent: var(--md-accent-fg-color);
--text-color-inactive: #99989d;
--text-color-reverse: #fff;
--background-color-primary: #fbfbfb;
--background-color-secondary: #fff;
--background-color-tertiary: var(--md-accent-fg-color--transparent);
--background-color-fourth: #efefef;
--background-color-reverse: #000;
--background-color-accent: var(--md-accent-fg-color);
--border-color-primary: #dadada;
--border-color-secondary: #efefef;
--border-color-tertiary: #151515;
--border-color-accent: var(--md-accent-fg-color);
--icon-color-primary: #151515;
--icon-color-secondary: #dadada;
--icon-color-tertiary: #838289;
--icon-color-inactive: #99989d;
--icon-color-reverse: #fbfbfb;
--shadow-color-primary: #fff;
--button-text-color-primary: #fbfbfb;
--button-text-color-secondary: #838289;
--button-background-color-primary: var(--md-accent-fg-color);
--button-background-color-secondary: hsla(240, 9%, 75%, 0.33);
--button-background-color-secondary-hover: var(--md-accent-fg-color--transparent);
--button-border-color-secondary: #dadada;
--backdrop-background-color-primary: hsla(0, 0%, 98%, .7);
--chat-button-border-color-gradientOne: transparent;
--chat-button-border-color-gradientTwo: transparent;
--chat-button-border-color-gradientThree: var(--md-accent-fg-color);
--chat-button-border-color-gradientFour: var(--md-accent-fg-color);
--chat-button-border-color-gradientFive: transparent;
--chat-button-border-color-gradientSix: transparent;
--chat-button-background-color-gradientOne: var(--md-accent-fg-color);
--chat-button-background-color-gradientTwo: transparent;
}
.orama-ui *,
.orama-ui:after,
.orama-ui:before {
box-sizing: border-box
}
[data-md-color-scheme="slate"] .orama-ui {
--text-color-primary: #fbfbfb;
--text-color-secondary: #dadada;
--text-color-tertiary: #838289;
--text-color-accent: var(--md-accent-fg-color);
--text-color-inactive: #99989d;
--text-color-reverse: #000;
--background-color-primary: var(--md-default-bg-color--dark);
--background-color-secondary: #1a1b20;
--background-color-tertiary: var(--md-accent-fg-color--transparent);
--background-color-fourth: #2e2e2e;
--background-color-reverse: #fff;
--background-color-accent: var(--md-accent-fg-color);
--border-color-primary: #2e2e2e;
--border-color-secondary: #151515;
--border-color-tertiary: #afafb1;
--border-color-accent: var(--md-accent-fg-color);
--icon-color-primary: #fbfbfb;
--icon-color-secondary: #dadada;
--icon-color-tertiary: #838289;
--icon-color-inactive: #99989d;
--icon-color-reverse: var(--md-default-bg-color--dark);
--shadow-color-primary: #000;
--button-text-color-primary: #fbfbfb;
--button-text-color-secondary: #99989d;
--button-background-color-primary: var(--md-accent-fg-color);
--button-background-color-secondary: hsla(var(--md-hue), 15%, 9%, 0.33);
--button-background-color-secondary-hover: var(--md-accent-fg-color--transparent);
--button-border-color-secondary: #2e2e2e;
--backdrop-background-color-primary: rgba(5, 5, 5, .7);
--chat-button-border-color-gradientOne: transparent;
--chat-button-border-color-gradientTwo: transparent;
--chat-button-border-color-gradientThree: var(--md-accent-fg-color);
--chat-button-border-color-gradientFour: var(--md-accent-fg-color);
--chat-button-border-color-gradientFive: transparent;
--chat-button-border-color-gradientSix: transparent;
--chat-button-background-color-gradientOne: var(--md-accent-fg-color);
--chat-button-background-color-gradientTwo: transparent;
}

View File

@@ -1,4 +1,6 @@
// 使用 mkdocs-material 与第三方 JavaScript 库集成的方法
document$.subscribe(function () {
ComponentSystem.reinitializeAll()
// Orama AI Search
loadOramaWebComponent()
})

View File

@@ -0,0 +1,104 @@
// get search box config
function getOramaSearchBoxConfig() {
return {
themeConfig: {
// colors: {
// light: {
// '--text-color-accent': 'var(--md-accent-fg-color)',
// '--background-color-tertiary': 'var(--md-accent-fg-color--transparent)',
// '--background-color-accent': 'var(--md-accent-fg-color)',
// '--border-color-accent': 'var(--md-accent-fg-color)',
// '--button-background-color-primary': 'var(--md-accent-fg-color)',
// '--button-background-color-secondary': 'hsla(240, 9%, 75%, 0.33)',
// '--button-background-color-secondary-hover': 'var(--md-accent-fg-color--transparent)',
// '--chat-button-border-color-gradientThree': 'var(--md-accent-fg-color)',
// '--chat-button-border-color-gradientFour': 'var(--md-accent-fg-color)',
// '--chat-button-background-color-gradientOne': 'var(--md-accent-fg-color)',
// },
// dark: {
// '--text-color-accent': 'var(--md-accent-fg-color)',
// '--background-color-primary': 'var(--md-default-bg-color--dark)',
// '--background-color-secondary': '#1a1b20',
// '--background-color-tertiary': 'var(--md-accent-fg-color--transparent)',
// '--background-color-accent': 'var(--md-accent-fg-color)',
// '--border-color-accent': 'var(--md-accent-fg-color)',
// '--icon-color-reverse': 'var(--md-default-bg-color--dark)',
// '--button-background-color-primary': 'var(--md-accent-fg-color)',
// '--button-background-color-secondary': 'hsla(var(--md-hue), 15%, 9%, 0.33)',
// '--button-background-color-secondary-hover': 'var(--md-accent-fg-color--transparent)',
// '--chat-button-border-color-gradientThree': 'var(--md-accent-fg-color)',
// '--chat-button-border-color-gradientFour': 'var(--md-accent-fg-color)',
// '--chat-button-background-color-gradientOne': 'var(--md-accent-fg-color)',
// },
// },
// shadow: {
// '--textarea-shadow': 'var(--md-shadow-z1)',
// },
// typography: {
// '--font-primary': 'var(--md-font-family)',
// },
},
index: {
endpoint: 'https://cloud.orama.run/v1/indexes/linuxmirrors-cn-imxypv',
api_key: 'mBJ0b68dZIk79DqCkdUSJI6yQMo4L4o3',
},
facetProperty: 'category',
sourceBaseUrl: 'https://linuxmirrors.cn',
sourcesMap: {
title: 'title',
},
resultMap: {
title: 'title',
description: 'content',
section: 'category',
},
searchPlaceholder: '请输入要搜索的内容...',
chatPlaceholder: '有什么可以帮你的吗?',
suggestions: ['如何使用', '支持哪些系统'],
}
}
// localization search box component
function localizationOramaSearchBox(searchBox) {
if (!searchBox) return
const observer = new MutationObserver((mutations, obs) => {
const shadowRoot = searchBox.shadowRoot
if (shadowRoot) {
// Get a summary (Only PC)
const chatButton = shadowRoot.querySelector('.chat-button')
if (chatButton) {
const element = chatButton.querySelector('.button-label')
if (element && element.textContent !== '询问 AI') {
element.textContent = '询问 AI'
}
}
// Hide "Orama can make mistakes. Please verify the information."
const chatFormWrapper = shadowRoot.querySelector('.chat-form-wrapper')
if (chatFormWrapper) {
const element = chatFormWrapper.querySelector('p.small.text-center')
if (element) {
element.style = 'display: none;'
}
}
// Navigation bar (Only Mobile)
const navigationBar = shadowRoot.querySelector('orama-navigation-bar')
if (navigationBar) {
const toggler = navigationBar.querySelector('orama-toggler')
if (toggler) {
const searchSpan = toggler.querySelector('span:nth-child(1)')
if (searchSpan && searchSpan.textContent !== '搜索') {
searchSpan.textContent = '搜索'
searchSpan.style = 'max-height: fit-content;'
}
const askAISpan = toggler.querySelector('span:nth-child(2)')
if (askAISpan && askAISpan.textContent !== '询问 AI') {
askAISpan.textContent = '询问 AI'
askAISpan.style = 'max-height: fit-content;'
}
}
}
}
})
observer.observe(searchBox, { childList: true, subtree: true, attributes: true })
setTimeout(() => observer.disconnect(), 2000)
}

View File

@@ -0,0 +1,47 @@
function loadOramaWebComponent() {
const searchBox = document.querySelector('orama-search-box')
if (searchBox) {
Object.assign(searchBox, getOramaSearchBoxConfig())
}
// custom button style and localization
const searchButton = document.querySelector('orama-search-button')
if (searchButton) {
searchButton.textContent = '搜索'
const observer = new MutationObserver((mutations, obs) => {
if (searchButton.shadowRoot) {
const button = searchButton.shadowRoot.querySelector('button')
if (button) {
button.style = 'border-radius: 8px !important;'
button.querySelector('.button__label').style = 'height: 22px; padding: 2px 8px; font-size: 0.75rem;'
button.querySelector('span[slot="adorment-end"], .kyb-shortcut').style = 'display: none;'
// search icon style
const magnifyingGlassShadowRoot = button.querySelector('ph-magnifying-glass').shadowRoot
const styleElement = document.createElement('style')
styleElement.textContent = `
svg {
font-size: 24px;
}`
if (!magnifyingGlassShadowRoot.querySelector('style[data-custom="icon-style"]')) {
styleElement.setAttribute('data-custom', 'icon-style')
magnifyingGlassShadowRoot.appendChild(styleElement)
}
obs.disconnect()
}
}
})
observer.observe(searchButton, {
childList: true,
subtree: true,
attributes: true,
characterData: true,
})
setTimeout(() => observer.disconnect(), 2000)
}
searchButton.addEventListener('click', function () {
const searchBox = document.querySelector('orama-search-box')
// localization chat box component
localizationOramaSearchBox(searchBox)
})
}

View File

@@ -0,0 +1,30 @@
function loadOramaWebComponent() {
const searchBox = document.querySelector('orama-search-box')
if (searchBox) {
Object.assign(searchBox, getOramaSearchBoxConfig())
}
// define global function
window.openOramaSearch = function (event) {
const element = document.querySelector('orama-search-box')
if (element) {
element.open = true
localizationOramaSearchBox(element)
}
return false
}
// localization chat box component
if (searchBox) {
const openObserver = new MutationObserver((mutations) => {
mutations.forEach((mutation) => {
if (mutation.type === 'attributes' && mutation.attributeName === 'open' && searchBox.hasAttribute('open')) {
localizationOramaSearchBox(searchBox)
}
})
})
openObserver.observe(searchBox, { attributes: true })
if (searchBox.hasAttribute('open')) {
localizationOramaSearchBox(searchBox)
}
}
}

View File

@@ -49,7 +49,7 @@ hide:
---
只需要一行命令就能直接运行,零技术门槛,无需安装任何依赖
文档提供各种场景的解决方案Linux 初学者也能轻松上手
文档集成了 AI 搜索与聊天,提供各种场景的解决方案
- :material-vector-polyline:{ .lg .middle } __系统支持广泛__

View File

@@ -2,7 +2,7 @@
--md-text-font: system-ui, -apple-system, 'Roboto', 'PingFang SC', 'Microsoft YaHei', 'Hiragino Sans GB', 'Segoe UI', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
--md-code-font: 'SF Mono';
--md-primary-fg-color--light: hsl(0, 0%, 100%, 0.33);
--md-default-bg-color--light: #ffffff;
--md-default-bg-color--light: #fff;
--md-default-bg-color--dark: hsla(var(--md-hue), 15%, 14%, 1);
--view-transition-z-index-foreground: 999;
--view-transition-z-index-background: 1;

7
docs/theme/main.html vendored Normal file
View File

@@ -0,0 +1,7 @@
{% extends "base.html" %}
{% block scripts %}
<script type="module" src="https://cdn.jsdelivr.net/npm/@orama/wc-components@latest/dist/orama-ui/orama-ui.esm.js"></script>
<script nomodule src="https://cdn.jsdelivr.net/npm/@orama/wc-components@latest/dist/cjs/orama-ui.cjs.js"></script>
{{ super() }}
{% endblock %}

View File

@@ -1,59 +1,54 @@
{% if page.meta.comments %}
<h2 id="__comments">{{ lang.t("meta.comments") }}</h2>
{% if page.meta.comments_description %}
<blockquote>{{ page.meta.comments_description }}</blockquote>
{% endif %}
<script src="https://giscus.app/client.js"
data-repo="SuperManito/LinuxMirrors"
data-repo-id="MDEwOlJlcG9zaXRvcnkzMzI2Nzg5NzI="
data-category="General"
data-category-id="DIC_kwDOE9RHPM4CWOQP"
data-mapping="pathname"
data-strict="0"
data-reactions-enabled="1"
data-emit-metadata="0"
data-input-position="top"
data-theme="preferred_color_scheme"
data-lang="zh-CN"
data-loading="lazy"
crossorigin="anonymous"
async
>
</script>
<!-- Synchronize Giscus theme with palette -->
<script>
var giscus = document.querySelector("script[src*=giscus]")
// Set palette on initial load
var palette = __md_get("__palette")
if (palette && typeof palette.color === "object") {
var theme = palette.color.scheme === "slate"
? "transparent_dark"
: "light"
// Instruct Giscus to set theme
giscus.setAttribute("data-theme", theme)
}
// Register event handlers after documented loaded
document.addEventListener("DOMContentLoaded", function() {
var ref = document.querySelector("[data-md-component=palette]")
ref.addEventListener("change", function() {
var palette = __md_get("__palette")
if (palette && typeof palette.color === "object") {
var theme = palette.color.scheme === "slate"
? "transparent_dark"
: "light"
// Instruct Giscus to change theme
var frame = document.querySelector(".giscus-frame")
frame.contentWindow.postMessage(
{ giscus: { setConfig: { theme } } },
"https://giscus.app"
)
}
})
})
</script>
{% endif %}
{% if page.meta.comments %}
<h2 id="__comments">{{ lang.t("meta.comments") }}</h2>
{% if page.meta.comments_description %}
<blockquote>{{ page.meta.comments_description }}</blockquote>
{% endif %}
<script src="https://giscus.app/client.js"
data-repo="SuperManito/LinuxMirrors"
data-repo-id="MDEwOlJlcG9zaXRvcnkzMzI2Nzg5NzI="
data-category="General"
data-category-id="DIC_kwDOE9RHPM4CWOQP"
data-mapping="pathname"
data-strict="0"
data-reactions-enabled="1"
data-emit-metadata="0"
data-input-position="top"
data-theme="preferred_color_scheme"
data-lang="zh-CN"
data-loading="lazy"
crossorigin="anonymous"
async
>
</script>
<script>
var giscus = document.querySelector("script[src*=giscus]")
var palette = __md_get("__palette")
if (palette && typeof palette.color === "object") {
var theme = palette.color.scheme === "slate"
? "transparent_dark"
: "light"
giscus.setAttribute("data-theme", theme)
}
document.addEventListener("DOMContentLoaded", function() {
var ref = document.querySelector("[data-md-component=palette]")
ref.addEventListener("change", function() {
var palette = __md_get("__palette")
if (palette && typeof palette.color === "object") {
var theme = palette.color.scheme === "slate"
? "transparent_dark"
: "light"
var frame = document.querySelector(".giscus-frame")
frame.contentWindow.postMessage(
{ giscus: { setConfig: { theme } } },
"https://giscus.app"
)
}
})
})
</script>
{% endif %}

17
docs/theme/partials/content.html vendored Normal file
View File

@@ -0,0 +1,17 @@
{% include "partials/tags.html" %}
{% include "partials/actions.html" %}
{% if "\x3ch1" not in page.content %}
<h1>{{ page.title | d(config.site_name, true)}}</h1>
{% endif %}
{{ page.content }}
{% include "partials/source-file.html" %}
{% include "partials/feedback.html" %}
{% include "partials/comments.html" %}
<orama-search-box class="orama-ui"></orama-search-box>

46
docs/theme/partials/search.html vendored Normal file

File diff suppressed because one or more lines are too long

View File

@@ -8,6 +8,8 @@ extra_javascript:
- assets/js/modules/vue.global.prod.js
- assets/js/modules/tdesign.min.js
- assets/js/modules/tdesign-theme.js
- assets/js/components/orama-ui/config.js
- assets/js/components/orama-ui/index.js
- assets/js/useThemeTransition.js
- assets/js/common.js
- assets/js/component.js
@@ -15,6 +17,7 @@ extra_javascript:
- assets/js/components/mirrors-table/index.js
extra_css:
- assets/css/tdesign.min.css
- assets/css/orama-ui.css
- stylesheets/extra.css
theme: