mirror of
https://gitee.com/SuperManito/LinuxMirrors
synced 2025-11-08 10:20:27 +08:00
为文档添加 AI 搜索与聊天
This commit is contained in:
Super Manito
122
docs/assets/css/orama-ui.css
Normal file
122
docs/assets/css/orama-ui.css
Normal 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;
|
||||
}
|
||||
@@ -1,4 +1,6 @@
|
||||
// 使用 mkdocs-material 与第三方 JavaScript 库集成的方法
|
||||
document$.subscribe(function () {
|
||||
ComponentSystem.reinitializeAll()
|
||||
// Orama AI Search
|
||||
loadOramaWebComponent()
|
||||
})
|
||||
|
||||
104
docs/assets/js/components/orama-ui/config.js
Normal file
104
docs/assets/js/components/orama-ui/config.js
Normal 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)
|
||||
}
|
||||
47
docs/assets/js/components/orama-ui/index-native.js
Normal file
47
docs/assets/js/components/orama-ui/index-native.js
Normal 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)
|
||||
})
|
||||
}
|
||||
30
docs/assets/js/components/orama-ui/index.js
Normal file
30
docs/assets/js/components/orama-ui/index.js
Normal 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)
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -49,7 +49,7 @@ hide:
|
||||
---
|
||||
|
||||
只需要一行命令就能直接运行，零技术门槛，无需安装任何依赖
|
||||
文档提供了各种场景的解决方案，Linux 初学者也能轻松上手
|
||||
文档集成了 AI 搜索与聊天，提供各种场景的解决方案
|
||||
|
||||
- :material-vector-polyline:{ .lg .middle } __系统支持广泛__
|
||||
|
||||
|
||||
@@ -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
7
docs/theme/main.html
vendored
Normal 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 %}
|
||||
5
docs/theme/partials/comments.html
vendored
5
docs/theme/partials/comments.html
vendored
@@ -21,22 +21,18 @@
|
||||
>
|
||||
</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() {
|
||||
@@ -46,7 +42,6 @@
|
||||
? "transparent_dark"
|
||||
: "light"
|
||||
|
||||
// Instruct Giscus to change theme
|
||||
var frame = document.querySelector(".giscus-frame")
|
||||
frame.contentWindow.postMessage(
|
||||
{ giscus: { setConfig: { theme } } },
|
||||
|
||||
17
docs/theme/partials/content.html
vendored
Normal file
17
docs/theme/partials/content.html
vendored
Normal 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
46
docs/theme/partials/search.html
vendored
Normal file
File diff suppressed because one or more lines are too long
@@ -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:
|
||||
|
||||
Reference in New Issue
Block a user