update README.md
This commit is contained in:
nxxy335top
+52
@@ -0,0 +1,52 @@
|
|||||||
|
{
|
||||||
|
"hash": "0ed7ed0d",
|
||||||
|
"configHash": "c707d7b6",
|
||||||
|
"lockfileHash": "4f412479",
|
||||||
|
"browserHash": "3aefc297",
|
||||||
|
"optimized": {
|
||||||
|
"vue": {
|
||||||
|
"src": "../../../node_modules/vue/dist/vue.runtime.esm-bundler.js",
|
||||||
|
"file": "vue.js",
|
||||||
|
"fileHash": "9027419d",
|
||||||
|
"needsInterop": false
|
||||||
|
},
|
||||||
|
"vitepress > @vue/devtools-api": {
|
||||||
|
"src": "../../../node_modules/@vue/devtools-api/dist/index.js",
|
||||||
|
"file": "vitepress___@vue_devtools-api.js",
|
||||||
|
"fileHash": "3cd67bf3",
|
||||||
|
"needsInterop": false
|
||||||
|
},
|
||||||
|
"vitepress > @vueuse/core": {
|
||||||
|
"src": "../../../node_modules/@vueuse/core/index.mjs",
|
||||||
|
"file": "vitepress___@vueuse_core.js",
|
||||||
|
"fileHash": "cda81787",
|
||||||
|
"needsInterop": false
|
||||||
|
},
|
||||||
|
"vitepress > @vueuse/integrations/useFocusTrap": {
|
||||||
|
"src": "../../../node_modules/@vueuse/integrations/useFocusTrap.mjs",
|
||||||
|
"file": "vitepress___@vueuse_integrations_useFocusTrap.js",
|
||||||
|
"fileHash": "7b4ec920",
|
||||||
|
"needsInterop": false
|
||||||
|
},
|
||||||
|
"vitepress > mark.js/src/vanilla.js": {
|
||||||
|
"src": "../../../node_modules/mark.js/src/vanilla.js",
|
||||||
|
"file": "vitepress___mark__js_src_vanilla__js.js",
|
||||||
|
"fileHash": "3efbcd2b",
|
||||||
|
"needsInterop": false
|
||||||
|
},
|
||||||
|
"vitepress > minisearch": {
|
||||||
|
"src": "../../../node_modules/minisearch/dist/es/index.js",
|
||||||
|
"file": "vitepress___minisearch.js",
|
||||||
|
"fileHash": "8ca06377",
|
||||||
|
"needsInterop": false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"chunks": {
|
||||||
|
"chunk-4USRTV5H": {
|
||||||
|
"file": "chunk-4USRTV5H.js"
|
||||||
|
},
|
||||||
|
"chunk-XY26LBYQ": {
|
||||||
|
"file": "chunk-XY26LBYQ.js"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
+9719
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
+13035
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
+3
@@ -0,0 +1,3 @@
|
|||||||
|
{
|
||||||
|
"type": "module"
|
||||||
|
}
|
||||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
@@ -0,0 +1,583 @@
|
|||||||
|
import {
|
||||||
|
DefaultMagicKeysAliasMap,
|
||||||
|
StorageSerializers,
|
||||||
|
TransitionPresets,
|
||||||
|
assert,
|
||||||
|
breakpointsAntDesign,
|
||||||
|
breakpointsBootstrapV5,
|
||||||
|
breakpointsElement,
|
||||||
|
breakpointsMasterCss,
|
||||||
|
breakpointsPrimeFlex,
|
||||||
|
breakpointsQuasar,
|
||||||
|
breakpointsSematic,
|
||||||
|
breakpointsTailwind,
|
||||||
|
breakpointsVuetify,
|
||||||
|
breakpointsVuetifyV2,
|
||||||
|
breakpointsVuetifyV3,
|
||||||
|
bypassFilter,
|
||||||
|
camelize,
|
||||||
|
clamp,
|
||||||
|
cloneFnJSON,
|
||||||
|
computedAsync,
|
||||||
|
computedEager,
|
||||||
|
computedInject,
|
||||||
|
computedWithControl,
|
||||||
|
containsProp,
|
||||||
|
controlledRef,
|
||||||
|
createEventHook,
|
||||||
|
createFetch,
|
||||||
|
createFilterWrapper,
|
||||||
|
createGlobalState,
|
||||||
|
createInjectionState,
|
||||||
|
createRef,
|
||||||
|
createReusableTemplate,
|
||||||
|
createSharedComposable,
|
||||||
|
createSingletonPromise,
|
||||||
|
createTemplatePromise,
|
||||||
|
createUnrefFn,
|
||||||
|
customStorageEventName,
|
||||||
|
debounceFilter,
|
||||||
|
defaultDocument,
|
||||||
|
defaultLocation,
|
||||||
|
defaultNavigator,
|
||||||
|
defaultWindow,
|
||||||
|
executeTransition,
|
||||||
|
extendRef,
|
||||||
|
formatDate,
|
||||||
|
formatTimeAgo,
|
||||||
|
get,
|
||||||
|
getLifeCycleTarget,
|
||||||
|
getSSRHandler,
|
||||||
|
hasOwn,
|
||||||
|
hyphenate,
|
||||||
|
identity,
|
||||||
|
increaseWithUnit,
|
||||||
|
injectLocal,
|
||||||
|
invoke,
|
||||||
|
isClient,
|
||||||
|
isDef,
|
||||||
|
isDefined,
|
||||||
|
isIOS,
|
||||||
|
isObject,
|
||||||
|
isWorker,
|
||||||
|
makeDestructurable,
|
||||||
|
mapGamepadToXbox360Controller,
|
||||||
|
noop,
|
||||||
|
normalizeDate,
|
||||||
|
notNullish,
|
||||||
|
now,
|
||||||
|
objectEntries,
|
||||||
|
objectOmit,
|
||||||
|
objectPick,
|
||||||
|
onClickOutside,
|
||||||
|
onElementRemoval,
|
||||||
|
onKeyDown,
|
||||||
|
onKeyPressed,
|
||||||
|
onKeyStroke,
|
||||||
|
onKeyUp,
|
||||||
|
onLongPress,
|
||||||
|
onStartTyping,
|
||||||
|
pausableFilter,
|
||||||
|
promiseTimeout,
|
||||||
|
provideLocal,
|
||||||
|
provideSSRWidth,
|
||||||
|
pxValue,
|
||||||
|
rand,
|
||||||
|
reactify,
|
||||||
|
reactifyObject,
|
||||||
|
reactiveComputed,
|
||||||
|
reactiveOmit,
|
||||||
|
reactivePick,
|
||||||
|
refAutoReset,
|
||||||
|
refDebounced,
|
||||||
|
refDefault,
|
||||||
|
refThrottled,
|
||||||
|
refWithControl,
|
||||||
|
resolveRef,
|
||||||
|
resolveUnref,
|
||||||
|
set,
|
||||||
|
setSSRHandler,
|
||||||
|
syncRef,
|
||||||
|
syncRefs,
|
||||||
|
templateRef,
|
||||||
|
throttleFilter,
|
||||||
|
timestamp,
|
||||||
|
toArray,
|
||||||
|
toReactive,
|
||||||
|
toRef,
|
||||||
|
toRefs,
|
||||||
|
toValue,
|
||||||
|
tryOnBeforeMount,
|
||||||
|
tryOnBeforeUnmount,
|
||||||
|
tryOnMounted,
|
||||||
|
tryOnScopeDispose,
|
||||||
|
tryOnUnmounted,
|
||||||
|
unrefElement,
|
||||||
|
until,
|
||||||
|
useActiveElement,
|
||||||
|
useAnimate,
|
||||||
|
useArrayDifference,
|
||||||
|
useArrayEvery,
|
||||||
|
useArrayFilter,
|
||||||
|
useArrayFind,
|
||||||
|
useArrayFindIndex,
|
||||||
|
useArrayFindLast,
|
||||||
|
useArrayIncludes,
|
||||||
|
useArrayJoin,
|
||||||
|
useArrayMap,
|
||||||
|
useArrayReduce,
|
||||||
|
useArraySome,
|
||||||
|
useArrayUnique,
|
||||||
|
useAsyncQueue,
|
||||||
|
useAsyncState,
|
||||||
|
useBase64,
|
||||||
|
useBattery,
|
||||||
|
useBluetooth,
|
||||||
|
useBreakpoints,
|
||||||
|
useBroadcastChannel,
|
||||||
|
useBrowserLocation,
|
||||||
|
useCached,
|
||||||
|
useClipboard,
|
||||||
|
useClipboardItems,
|
||||||
|
useCloned,
|
||||||
|
useColorMode,
|
||||||
|
useConfirmDialog,
|
||||||
|
useCountdown,
|
||||||
|
useCounter,
|
||||||
|
useCssVar,
|
||||||
|
useCurrentElement,
|
||||||
|
useCycleList,
|
||||||
|
useDark,
|
||||||
|
useDateFormat,
|
||||||
|
useDebounceFn,
|
||||||
|
useDebouncedRefHistory,
|
||||||
|
useDeviceMotion,
|
||||||
|
useDeviceOrientation,
|
||||||
|
useDevicePixelRatio,
|
||||||
|
useDevicesList,
|
||||||
|
useDisplayMedia,
|
||||||
|
useDocumentVisibility,
|
||||||
|
useDraggable,
|
||||||
|
useDropZone,
|
||||||
|
useElementBounding,
|
||||||
|
useElementByPoint,
|
||||||
|
useElementHover,
|
||||||
|
useElementSize,
|
||||||
|
useElementVisibility,
|
||||||
|
useEventBus,
|
||||||
|
useEventListener,
|
||||||
|
useEventSource,
|
||||||
|
useEyeDropper,
|
||||||
|
useFavicon,
|
||||||
|
useFetch,
|
||||||
|
useFileDialog,
|
||||||
|
useFileSystemAccess,
|
||||||
|
useFocus,
|
||||||
|
useFocusWithin,
|
||||||
|
useFps,
|
||||||
|
useFullscreen,
|
||||||
|
useGamepad,
|
||||||
|
useGeolocation,
|
||||||
|
useIdle,
|
||||||
|
useImage,
|
||||||
|
useInfiniteScroll,
|
||||||
|
useIntersectionObserver,
|
||||||
|
useInterval,
|
||||||
|
useIntervalFn,
|
||||||
|
useKeyModifier,
|
||||||
|
useLastChanged,
|
||||||
|
useLocalStorage,
|
||||||
|
useMagicKeys,
|
||||||
|
useManualRefHistory,
|
||||||
|
useMediaControls,
|
||||||
|
useMediaQuery,
|
||||||
|
useMemoize,
|
||||||
|
useMemory,
|
||||||
|
useMounted,
|
||||||
|
useMouse,
|
||||||
|
useMouseInElement,
|
||||||
|
useMousePressed,
|
||||||
|
useMutationObserver,
|
||||||
|
useNavigatorLanguage,
|
||||||
|
useNetwork,
|
||||||
|
useNow,
|
||||||
|
useObjectUrl,
|
||||||
|
useOffsetPagination,
|
||||||
|
useOnline,
|
||||||
|
usePageLeave,
|
||||||
|
useParallax,
|
||||||
|
useParentElement,
|
||||||
|
usePerformanceObserver,
|
||||||
|
usePermission,
|
||||||
|
usePointer,
|
||||||
|
usePointerLock,
|
||||||
|
usePointerSwipe,
|
||||||
|
usePreferredColorScheme,
|
||||||
|
usePreferredContrast,
|
||||||
|
usePreferredDark,
|
||||||
|
usePreferredLanguages,
|
||||||
|
usePreferredReducedMotion,
|
||||||
|
usePreferredReducedTransparency,
|
||||||
|
usePrevious,
|
||||||
|
useRafFn,
|
||||||
|
useRefHistory,
|
||||||
|
useResizeObserver,
|
||||||
|
useSSRWidth,
|
||||||
|
useScreenOrientation,
|
||||||
|
useScreenSafeArea,
|
||||||
|
useScriptTag,
|
||||||
|
useScroll,
|
||||||
|
useScrollLock,
|
||||||
|
useSessionStorage,
|
||||||
|
useShare,
|
||||||
|
useSorted,
|
||||||
|
useSpeechRecognition,
|
||||||
|
useSpeechSynthesis,
|
||||||
|
useStepper,
|
||||||
|
useStorage,
|
||||||
|
useStorageAsync,
|
||||||
|
useStyleTag,
|
||||||
|
useSupported,
|
||||||
|
useSwipe,
|
||||||
|
useTemplateRefsList,
|
||||||
|
useTextDirection,
|
||||||
|
useTextSelection,
|
||||||
|
useTextareaAutosize,
|
||||||
|
useThrottleFn,
|
||||||
|
useThrottledRefHistory,
|
||||||
|
useTimeAgo,
|
||||||
|
useTimeout,
|
||||||
|
useTimeoutFn,
|
||||||
|
useTimeoutPoll,
|
||||||
|
useTimestamp,
|
||||||
|
useTitle,
|
||||||
|
useToNumber,
|
||||||
|
useToString,
|
||||||
|
useToggle,
|
||||||
|
useTransition,
|
||||||
|
useUrlSearchParams,
|
||||||
|
useUserMedia,
|
||||||
|
useVModel,
|
||||||
|
useVModels,
|
||||||
|
useVibrate,
|
||||||
|
useVirtualList,
|
||||||
|
useWakeLock,
|
||||||
|
useWebNotification,
|
||||||
|
useWebSocket,
|
||||||
|
useWebWorker,
|
||||||
|
useWebWorkerFn,
|
||||||
|
useWindowFocus,
|
||||||
|
useWindowScroll,
|
||||||
|
useWindowSize,
|
||||||
|
watchArray,
|
||||||
|
watchAtMost,
|
||||||
|
watchDebounced,
|
||||||
|
watchDeep,
|
||||||
|
watchIgnorable,
|
||||||
|
watchImmediate,
|
||||||
|
watchOnce,
|
||||||
|
watchPausable,
|
||||||
|
watchThrottled,
|
||||||
|
watchTriggerable,
|
||||||
|
watchWithFilter,
|
||||||
|
whenever
|
||||||
|
} from "./chunk-4USRTV5H.js";
|
||||||
|
import "./chunk-XY26LBYQ.js";
|
||||||
|
export {
|
||||||
|
DefaultMagicKeysAliasMap,
|
||||||
|
StorageSerializers,
|
||||||
|
TransitionPresets,
|
||||||
|
assert,
|
||||||
|
computedAsync as asyncComputed,
|
||||||
|
refAutoReset as autoResetRef,
|
||||||
|
breakpointsAntDesign,
|
||||||
|
breakpointsBootstrapV5,
|
||||||
|
breakpointsElement,
|
||||||
|
breakpointsMasterCss,
|
||||||
|
breakpointsPrimeFlex,
|
||||||
|
breakpointsQuasar,
|
||||||
|
breakpointsSematic,
|
||||||
|
breakpointsTailwind,
|
||||||
|
breakpointsVuetify,
|
||||||
|
breakpointsVuetifyV2,
|
||||||
|
breakpointsVuetifyV3,
|
||||||
|
bypassFilter,
|
||||||
|
camelize,
|
||||||
|
clamp,
|
||||||
|
cloneFnJSON,
|
||||||
|
computedAsync,
|
||||||
|
computedEager,
|
||||||
|
computedInject,
|
||||||
|
computedWithControl,
|
||||||
|
containsProp,
|
||||||
|
computedWithControl as controlledComputed,
|
||||||
|
controlledRef,
|
||||||
|
createEventHook,
|
||||||
|
createFetch,
|
||||||
|
createFilterWrapper,
|
||||||
|
createGlobalState,
|
||||||
|
createInjectionState,
|
||||||
|
reactify as createReactiveFn,
|
||||||
|
createRef,
|
||||||
|
createReusableTemplate,
|
||||||
|
createSharedComposable,
|
||||||
|
createSingletonPromise,
|
||||||
|
createTemplatePromise,
|
||||||
|
createUnrefFn,
|
||||||
|
customStorageEventName,
|
||||||
|
debounceFilter,
|
||||||
|
refDebounced as debouncedRef,
|
||||||
|
watchDebounced as debouncedWatch,
|
||||||
|
defaultDocument,
|
||||||
|
defaultLocation,
|
||||||
|
defaultNavigator,
|
||||||
|
defaultWindow,
|
||||||
|
computedEager as eagerComputed,
|
||||||
|
executeTransition,
|
||||||
|
extendRef,
|
||||||
|
formatDate,
|
||||||
|
formatTimeAgo,
|
||||||
|
get,
|
||||||
|
getLifeCycleTarget,
|
||||||
|
getSSRHandler,
|
||||||
|
hasOwn,
|
||||||
|
hyphenate,
|
||||||
|
identity,
|
||||||
|
watchIgnorable as ignorableWatch,
|
||||||
|
increaseWithUnit,
|
||||||
|
injectLocal,
|
||||||
|
invoke,
|
||||||
|
isClient,
|
||||||
|
isDef,
|
||||||
|
isDefined,
|
||||||
|
isIOS,
|
||||||
|
isObject,
|
||||||
|
isWorker,
|
||||||
|
makeDestructurable,
|
||||||
|
mapGamepadToXbox360Controller,
|
||||||
|
noop,
|
||||||
|
normalizeDate,
|
||||||
|
notNullish,
|
||||||
|
now,
|
||||||
|
objectEntries,
|
||||||
|
objectOmit,
|
||||||
|
objectPick,
|
||||||
|
onClickOutside,
|
||||||
|
onElementRemoval,
|
||||||
|
onKeyDown,
|
||||||
|
onKeyPressed,
|
||||||
|
onKeyStroke,
|
||||||
|
onKeyUp,
|
||||||
|
onLongPress,
|
||||||
|
onStartTyping,
|
||||||
|
pausableFilter,
|
||||||
|
watchPausable as pausableWatch,
|
||||||
|
promiseTimeout,
|
||||||
|
provideLocal,
|
||||||
|
provideSSRWidth,
|
||||||
|
pxValue,
|
||||||
|
rand,
|
||||||
|
reactify,
|
||||||
|
reactifyObject,
|
||||||
|
reactiveComputed,
|
||||||
|
reactiveOmit,
|
||||||
|
reactivePick,
|
||||||
|
refAutoReset,
|
||||||
|
refDebounced,
|
||||||
|
refDefault,
|
||||||
|
refThrottled,
|
||||||
|
refWithControl,
|
||||||
|
resolveRef,
|
||||||
|
resolveUnref,
|
||||||
|
set,
|
||||||
|
setSSRHandler,
|
||||||
|
syncRef,
|
||||||
|
syncRefs,
|
||||||
|
templateRef,
|
||||||
|
throttleFilter,
|
||||||
|
refThrottled as throttledRef,
|
||||||
|
watchThrottled as throttledWatch,
|
||||||
|
timestamp,
|
||||||
|
toArray,
|
||||||
|
toReactive,
|
||||||
|
toRef,
|
||||||
|
toRefs,
|
||||||
|
toValue,
|
||||||
|
tryOnBeforeMount,
|
||||||
|
tryOnBeforeUnmount,
|
||||||
|
tryOnMounted,
|
||||||
|
tryOnScopeDispose,
|
||||||
|
tryOnUnmounted,
|
||||||
|
unrefElement,
|
||||||
|
until,
|
||||||
|
useActiveElement,
|
||||||
|
useAnimate,
|
||||||
|
useArrayDifference,
|
||||||
|
useArrayEvery,
|
||||||
|
useArrayFilter,
|
||||||
|
useArrayFind,
|
||||||
|
useArrayFindIndex,
|
||||||
|
useArrayFindLast,
|
||||||
|
useArrayIncludes,
|
||||||
|
useArrayJoin,
|
||||||
|
useArrayMap,
|
||||||
|
useArrayReduce,
|
||||||
|
useArraySome,
|
||||||
|
useArrayUnique,
|
||||||
|
useAsyncQueue,
|
||||||
|
useAsyncState,
|
||||||
|
useBase64,
|
||||||
|
useBattery,
|
||||||
|
useBluetooth,
|
||||||
|
useBreakpoints,
|
||||||
|
useBroadcastChannel,
|
||||||
|
useBrowserLocation,
|
||||||
|
useCached,
|
||||||
|
useClipboard,
|
||||||
|
useClipboardItems,
|
||||||
|
useCloned,
|
||||||
|
useColorMode,
|
||||||
|
useConfirmDialog,
|
||||||
|
useCountdown,
|
||||||
|
useCounter,
|
||||||
|
useCssVar,
|
||||||
|
useCurrentElement,
|
||||||
|
useCycleList,
|
||||||
|
useDark,
|
||||||
|
useDateFormat,
|
||||||
|
refDebounced as useDebounce,
|
||||||
|
useDebounceFn,
|
||||||
|
useDebouncedRefHistory,
|
||||||
|
useDeviceMotion,
|
||||||
|
useDeviceOrientation,
|
||||||
|
useDevicePixelRatio,
|
||||||
|
useDevicesList,
|
||||||
|
useDisplayMedia,
|
||||||
|
useDocumentVisibility,
|
||||||
|
useDraggable,
|
||||||
|
useDropZone,
|
||||||
|
useElementBounding,
|
||||||
|
useElementByPoint,
|
||||||
|
useElementHover,
|
||||||
|
useElementSize,
|
||||||
|
useElementVisibility,
|
||||||
|
useEventBus,
|
||||||
|
useEventListener,
|
||||||
|
useEventSource,
|
||||||
|
useEyeDropper,
|
||||||
|
useFavicon,
|
||||||
|
useFetch,
|
||||||
|
useFileDialog,
|
||||||
|
useFileSystemAccess,
|
||||||
|
useFocus,
|
||||||
|
useFocusWithin,
|
||||||
|
useFps,
|
||||||
|
useFullscreen,
|
||||||
|
useGamepad,
|
||||||
|
useGeolocation,
|
||||||
|
useIdle,
|
||||||
|
useImage,
|
||||||
|
useInfiniteScroll,
|
||||||
|
useIntersectionObserver,
|
||||||
|
useInterval,
|
||||||
|
useIntervalFn,
|
||||||
|
useKeyModifier,
|
||||||
|
useLastChanged,
|
||||||
|
useLocalStorage,
|
||||||
|
useMagicKeys,
|
||||||
|
useManualRefHistory,
|
||||||
|
useMediaControls,
|
||||||
|
useMediaQuery,
|
||||||
|
useMemoize,
|
||||||
|
useMemory,
|
||||||
|
useMounted,
|
||||||
|
useMouse,
|
||||||
|
useMouseInElement,
|
||||||
|
useMousePressed,
|
||||||
|
useMutationObserver,
|
||||||
|
useNavigatorLanguage,
|
||||||
|
useNetwork,
|
||||||
|
useNow,
|
||||||
|
useObjectUrl,
|
||||||
|
useOffsetPagination,
|
||||||
|
useOnline,
|
||||||
|
usePageLeave,
|
||||||
|
useParallax,
|
||||||
|
useParentElement,
|
||||||
|
usePerformanceObserver,
|
||||||
|
usePermission,
|
||||||
|
usePointer,
|
||||||
|
usePointerLock,
|
||||||
|
usePointerSwipe,
|
||||||
|
usePreferredColorScheme,
|
||||||
|
usePreferredContrast,
|
||||||
|
usePreferredDark,
|
||||||
|
usePreferredLanguages,
|
||||||
|
usePreferredReducedMotion,
|
||||||
|
usePreferredReducedTransparency,
|
||||||
|
usePrevious,
|
||||||
|
useRafFn,
|
||||||
|
useRefHistory,
|
||||||
|
useResizeObserver,
|
||||||
|
useSSRWidth,
|
||||||
|
useScreenOrientation,
|
||||||
|
useScreenSafeArea,
|
||||||
|
useScriptTag,
|
||||||
|
useScroll,
|
||||||
|
useScrollLock,
|
||||||
|
useSessionStorage,
|
||||||
|
useShare,
|
||||||
|
useSorted,
|
||||||
|
useSpeechRecognition,
|
||||||
|
useSpeechSynthesis,
|
||||||
|
useStepper,
|
||||||
|
useStorage,
|
||||||
|
useStorageAsync,
|
||||||
|
useStyleTag,
|
||||||
|
useSupported,
|
||||||
|
useSwipe,
|
||||||
|
useTemplateRefsList,
|
||||||
|
useTextDirection,
|
||||||
|
useTextSelection,
|
||||||
|
useTextareaAutosize,
|
||||||
|
refThrottled as useThrottle,
|
||||||
|
useThrottleFn,
|
||||||
|
useThrottledRefHistory,
|
||||||
|
useTimeAgo,
|
||||||
|
useTimeout,
|
||||||
|
useTimeoutFn,
|
||||||
|
useTimeoutPoll,
|
||||||
|
useTimestamp,
|
||||||
|
useTitle,
|
||||||
|
useToNumber,
|
||||||
|
useToString,
|
||||||
|
useToggle,
|
||||||
|
useTransition,
|
||||||
|
useUrlSearchParams,
|
||||||
|
useUserMedia,
|
||||||
|
useVModel,
|
||||||
|
useVModels,
|
||||||
|
useVibrate,
|
||||||
|
useVirtualList,
|
||||||
|
useWakeLock,
|
||||||
|
useWebNotification,
|
||||||
|
useWebSocket,
|
||||||
|
useWebWorker,
|
||||||
|
useWebWorkerFn,
|
||||||
|
useWindowFocus,
|
||||||
|
useWindowScroll,
|
||||||
|
useWindowSize,
|
||||||
|
watchArray,
|
||||||
|
watchAtMost,
|
||||||
|
watchDebounced,
|
||||||
|
watchDeep,
|
||||||
|
watchIgnorable,
|
||||||
|
watchImmediate,
|
||||||
|
watchOnce,
|
||||||
|
watchPausable,
|
||||||
|
watchThrottled,
|
||||||
|
watchTriggerable,
|
||||||
|
watchWithFilter,
|
||||||
|
whenever
|
||||||
|
};
|
||||||
|
//# sourceMappingURL=vitepress___@vueuse_core.js.map
|
||||||
@@ -0,0 +1,7 @@
|
|||||||
|
{
|
||||||
|
"version": 3,
|
||||||
|
"sources": [],
|
||||||
|
"sourcesContent": [],
|
||||||
|
"mappings": "",
|
||||||
|
"names": []
|
||||||
|
}
|
||||||
+1352
File diff suppressed because it is too large
Load Diff
+7
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
+1813
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
Vendored
+347
@@ -0,0 +1,347 @@
|
|||||||
|
import {
|
||||||
|
BaseTransition,
|
||||||
|
BaseTransitionPropsValidators,
|
||||||
|
Comment,
|
||||||
|
DeprecationTypes,
|
||||||
|
EffectScope,
|
||||||
|
ErrorCodes,
|
||||||
|
ErrorTypeStrings,
|
||||||
|
Fragment,
|
||||||
|
KeepAlive,
|
||||||
|
ReactiveEffect,
|
||||||
|
Static,
|
||||||
|
Suspense,
|
||||||
|
Teleport,
|
||||||
|
Text,
|
||||||
|
TrackOpTypes,
|
||||||
|
Transition,
|
||||||
|
TransitionGroup,
|
||||||
|
TriggerOpTypes,
|
||||||
|
VueElement,
|
||||||
|
assertNumber,
|
||||||
|
callWithAsyncErrorHandling,
|
||||||
|
callWithErrorHandling,
|
||||||
|
camelize,
|
||||||
|
capitalize,
|
||||||
|
cloneVNode,
|
||||||
|
compatUtils,
|
||||||
|
compile,
|
||||||
|
computed,
|
||||||
|
createApp,
|
||||||
|
createBaseVNode,
|
||||||
|
createBlock,
|
||||||
|
createCommentVNode,
|
||||||
|
createElementBlock,
|
||||||
|
createHydrationRenderer,
|
||||||
|
createPropsRestProxy,
|
||||||
|
createRenderer,
|
||||||
|
createSSRApp,
|
||||||
|
createSlots,
|
||||||
|
createStaticVNode,
|
||||||
|
createTextVNode,
|
||||||
|
createVNode,
|
||||||
|
customRef,
|
||||||
|
defineAsyncComponent,
|
||||||
|
defineComponent,
|
||||||
|
defineCustomElement,
|
||||||
|
defineEmits,
|
||||||
|
defineExpose,
|
||||||
|
defineModel,
|
||||||
|
defineOptions,
|
||||||
|
defineProps,
|
||||||
|
defineSSRCustomElement,
|
||||||
|
defineSlots,
|
||||||
|
devtools,
|
||||||
|
effect,
|
||||||
|
effectScope,
|
||||||
|
getCurrentInstance,
|
||||||
|
getCurrentScope,
|
||||||
|
getCurrentWatcher,
|
||||||
|
getTransitionRawChildren,
|
||||||
|
guardReactiveProps,
|
||||||
|
h,
|
||||||
|
handleError,
|
||||||
|
hasInjectionContext,
|
||||||
|
hydrate,
|
||||||
|
hydrateOnIdle,
|
||||||
|
hydrateOnInteraction,
|
||||||
|
hydrateOnMediaQuery,
|
||||||
|
hydrateOnVisible,
|
||||||
|
initCustomFormatter,
|
||||||
|
initDirectivesForSSR,
|
||||||
|
inject,
|
||||||
|
isMemoSame,
|
||||||
|
isProxy,
|
||||||
|
isReactive,
|
||||||
|
isReadonly,
|
||||||
|
isRef,
|
||||||
|
isRuntimeOnly,
|
||||||
|
isShallow,
|
||||||
|
isVNode,
|
||||||
|
markRaw,
|
||||||
|
mergeDefaults,
|
||||||
|
mergeModels,
|
||||||
|
mergeProps,
|
||||||
|
nextTick,
|
||||||
|
nodeOps,
|
||||||
|
normalizeClass,
|
||||||
|
normalizeProps,
|
||||||
|
normalizeStyle,
|
||||||
|
onActivated,
|
||||||
|
onBeforeMount,
|
||||||
|
onBeforeUnmount,
|
||||||
|
onBeforeUpdate,
|
||||||
|
onDeactivated,
|
||||||
|
onErrorCaptured,
|
||||||
|
onMounted,
|
||||||
|
onRenderTracked,
|
||||||
|
onRenderTriggered,
|
||||||
|
onScopeDispose,
|
||||||
|
onServerPrefetch,
|
||||||
|
onUnmounted,
|
||||||
|
onUpdated,
|
||||||
|
onWatcherCleanup,
|
||||||
|
openBlock,
|
||||||
|
patchProp,
|
||||||
|
popScopeId,
|
||||||
|
provide,
|
||||||
|
proxyRefs,
|
||||||
|
pushScopeId,
|
||||||
|
queuePostFlushCb,
|
||||||
|
reactive,
|
||||||
|
readonly,
|
||||||
|
ref,
|
||||||
|
registerRuntimeCompiler,
|
||||||
|
render,
|
||||||
|
renderList,
|
||||||
|
renderSlot,
|
||||||
|
resolveComponent,
|
||||||
|
resolveDirective,
|
||||||
|
resolveDynamicComponent,
|
||||||
|
resolveFilter,
|
||||||
|
resolveTransitionHooks,
|
||||||
|
setBlockTracking,
|
||||||
|
setDevtoolsHook,
|
||||||
|
setTransitionHooks,
|
||||||
|
shallowReactive,
|
||||||
|
shallowReadonly,
|
||||||
|
shallowRef,
|
||||||
|
ssrContextKey,
|
||||||
|
ssrUtils,
|
||||||
|
stop,
|
||||||
|
toDisplayString,
|
||||||
|
toHandlerKey,
|
||||||
|
toHandlers,
|
||||||
|
toRaw,
|
||||||
|
toRef,
|
||||||
|
toRefs,
|
||||||
|
toValue,
|
||||||
|
transformVNodeArgs,
|
||||||
|
triggerRef,
|
||||||
|
unref,
|
||||||
|
useAttrs,
|
||||||
|
useCssModule,
|
||||||
|
useCssVars,
|
||||||
|
useHost,
|
||||||
|
useId,
|
||||||
|
useModel,
|
||||||
|
useSSRContext,
|
||||||
|
useShadowRoot,
|
||||||
|
useSlots,
|
||||||
|
useTemplateRef,
|
||||||
|
useTransitionState,
|
||||||
|
vModelCheckbox,
|
||||||
|
vModelDynamic,
|
||||||
|
vModelRadio,
|
||||||
|
vModelSelect,
|
||||||
|
vModelText,
|
||||||
|
vShow,
|
||||||
|
version,
|
||||||
|
warn,
|
||||||
|
watch,
|
||||||
|
watchEffect,
|
||||||
|
watchPostEffect,
|
||||||
|
watchSyncEffect,
|
||||||
|
withAsyncContext,
|
||||||
|
withCtx,
|
||||||
|
withDefaults,
|
||||||
|
withDirectives,
|
||||||
|
withKeys,
|
||||||
|
withMemo,
|
||||||
|
withModifiers,
|
||||||
|
withScopeId
|
||||||
|
} from "./chunk-XY26LBYQ.js";
|
||||||
|
export {
|
||||||
|
BaseTransition,
|
||||||
|
BaseTransitionPropsValidators,
|
||||||
|
Comment,
|
||||||
|
DeprecationTypes,
|
||||||
|
EffectScope,
|
||||||
|
ErrorCodes,
|
||||||
|
ErrorTypeStrings,
|
||||||
|
Fragment,
|
||||||
|
KeepAlive,
|
||||||
|
ReactiveEffect,
|
||||||
|
Static,
|
||||||
|
Suspense,
|
||||||
|
Teleport,
|
||||||
|
Text,
|
||||||
|
TrackOpTypes,
|
||||||
|
Transition,
|
||||||
|
TransitionGroup,
|
||||||
|
TriggerOpTypes,
|
||||||
|
VueElement,
|
||||||
|
assertNumber,
|
||||||
|
callWithAsyncErrorHandling,
|
||||||
|
callWithErrorHandling,
|
||||||
|
camelize,
|
||||||
|
capitalize,
|
||||||
|
cloneVNode,
|
||||||
|
compatUtils,
|
||||||
|
compile,
|
||||||
|
computed,
|
||||||
|
createApp,
|
||||||
|
createBlock,
|
||||||
|
createCommentVNode,
|
||||||
|
createElementBlock,
|
||||||
|
createBaseVNode as createElementVNode,
|
||||||
|
createHydrationRenderer,
|
||||||
|
createPropsRestProxy,
|
||||||
|
createRenderer,
|
||||||
|
createSSRApp,
|
||||||
|
createSlots,
|
||||||
|
createStaticVNode,
|
||||||
|
createTextVNode,
|
||||||
|
createVNode,
|
||||||
|
customRef,
|
||||||
|
defineAsyncComponent,
|
||||||
|
defineComponent,
|
||||||
|
defineCustomElement,
|
||||||
|
defineEmits,
|
||||||
|
defineExpose,
|
||||||
|
defineModel,
|
||||||
|
defineOptions,
|
||||||
|
defineProps,
|
||||||
|
defineSSRCustomElement,
|
||||||
|
defineSlots,
|
||||||
|
devtools,
|
||||||
|
effect,
|
||||||
|
effectScope,
|
||||||
|
getCurrentInstance,
|
||||||
|
getCurrentScope,
|
||||||
|
getCurrentWatcher,
|
||||||
|
getTransitionRawChildren,
|
||||||
|
guardReactiveProps,
|
||||||
|
h,
|
||||||
|
handleError,
|
||||||
|
hasInjectionContext,
|
||||||
|
hydrate,
|
||||||
|
hydrateOnIdle,
|
||||||
|
hydrateOnInteraction,
|
||||||
|
hydrateOnMediaQuery,
|
||||||
|
hydrateOnVisible,
|
||||||
|
initCustomFormatter,
|
||||||
|
initDirectivesForSSR,
|
||||||
|
inject,
|
||||||
|
isMemoSame,
|
||||||
|
isProxy,
|
||||||
|
isReactive,
|
||||||
|
isReadonly,
|
||||||
|
isRef,
|
||||||
|
isRuntimeOnly,
|
||||||
|
isShallow,
|
||||||
|
isVNode,
|
||||||
|
markRaw,
|
||||||
|
mergeDefaults,
|
||||||
|
mergeModels,
|
||||||
|
mergeProps,
|
||||||
|
nextTick,
|
||||||
|
nodeOps,
|
||||||
|
normalizeClass,
|
||||||
|
normalizeProps,
|
||||||
|
normalizeStyle,
|
||||||
|
onActivated,
|
||||||
|
onBeforeMount,
|
||||||
|
onBeforeUnmount,
|
||||||
|
onBeforeUpdate,
|
||||||
|
onDeactivated,
|
||||||
|
onErrorCaptured,
|
||||||
|
onMounted,
|
||||||
|
onRenderTracked,
|
||||||
|
onRenderTriggered,
|
||||||
|
onScopeDispose,
|
||||||
|
onServerPrefetch,
|
||||||
|
onUnmounted,
|
||||||
|
onUpdated,
|
||||||
|
onWatcherCleanup,
|
||||||
|
openBlock,
|
||||||
|
patchProp,
|
||||||
|
popScopeId,
|
||||||
|
provide,
|
||||||
|
proxyRefs,
|
||||||
|
pushScopeId,
|
||||||
|
queuePostFlushCb,
|
||||||
|
reactive,
|
||||||
|
readonly,
|
||||||
|
ref,
|
||||||
|
registerRuntimeCompiler,
|
||||||
|
render,
|
||||||
|
renderList,
|
||||||
|
renderSlot,
|
||||||
|
resolveComponent,
|
||||||
|
resolveDirective,
|
||||||
|
resolveDynamicComponent,
|
||||||
|
resolveFilter,
|
||||||
|
resolveTransitionHooks,
|
||||||
|
setBlockTracking,
|
||||||
|
setDevtoolsHook,
|
||||||
|
setTransitionHooks,
|
||||||
|
shallowReactive,
|
||||||
|
shallowReadonly,
|
||||||
|
shallowRef,
|
||||||
|
ssrContextKey,
|
||||||
|
ssrUtils,
|
||||||
|
stop,
|
||||||
|
toDisplayString,
|
||||||
|
toHandlerKey,
|
||||||
|
toHandlers,
|
||||||
|
toRaw,
|
||||||
|
toRef,
|
||||||
|
toRefs,
|
||||||
|
toValue,
|
||||||
|
transformVNodeArgs,
|
||||||
|
triggerRef,
|
||||||
|
unref,
|
||||||
|
useAttrs,
|
||||||
|
useCssModule,
|
||||||
|
useCssVars,
|
||||||
|
useHost,
|
||||||
|
useId,
|
||||||
|
useModel,
|
||||||
|
useSSRContext,
|
||||||
|
useShadowRoot,
|
||||||
|
useSlots,
|
||||||
|
useTemplateRef,
|
||||||
|
useTransitionState,
|
||||||
|
vModelCheckbox,
|
||||||
|
vModelDynamic,
|
||||||
|
vModelRadio,
|
||||||
|
vModelSelect,
|
||||||
|
vModelText,
|
||||||
|
vShow,
|
||||||
|
version,
|
||||||
|
warn,
|
||||||
|
watch,
|
||||||
|
watchEffect,
|
||||||
|
watchPostEffect,
|
||||||
|
watchSyncEffect,
|
||||||
|
withAsyncContext,
|
||||||
|
withCtx,
|
||||||
|
withDefaults,
|
||||||
|
withDirectives,
|
||||||
|
withKeys,
|
||||||
|
withMemo,
|
||||||
|
withModifiers,
|
||||||
|
withScopeId
|
||||||
|
};
|
||||||
|
//# sourceMappingURL=vue.js.map
|
||||||
+7
@@ -0,0 +1,7 @@
|
|||||||
|
{
|
||||||
|
"version": 3,
|
||||||
|
"sources": [],
|
||||||
|
"sourcesContent": [],
|
||||||
|
"mappings": "",
|
||||||
|
"names": []
|
||||||
|
}
|
||||||
@@ -0,0 +1,126 @@
|
|||||||
|
import { defineConfig } from 'vitepress'
|
||||||
|
|
||||||
|
export default defineConfig({
|
||||||
|
title: "WarmIsland 暖屿",
|
||||||
|
description: "具有独特气质的生活博客主题",
|
||||||
|
lang: 'zh-CN',
|
||||||
|
head: [['link', { rel: 'icon', href: '/favicon.ico' }]],
|
||||||
|
themeConfig: {
|
||||||
|
logo: '/favicon.ico',
|
||||||
|
|
||||||
|
nav: [
|
||||||
|
{ text: '示例站点', link: 'https://nxxy335.top/' }
|
||||||
|
],
|
||||||
|
|
||||||
|
sidebar: [
|
||||||
|
{
|
||||||
|
text: '简介',
|
||||||
|
collapsed: false,
|
||||||
|
items: [
|
||||||
|
{ text: 'WarmIsland 是什么？', link: '/guide/introduction' },
|
||||||
|
{ text: '快速开始', link: '/guide/getting-started' },
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '配置',
|
||||||
|
collapsed: false,
|
||||||
|
items: [
|
||||||
|
{ text: '基础设置', link: '/config/basic' },
|
||||||
|
{ text: '样式设置', link: '/config/style' },
|
||||||
|
{ text: '导航栏', link: '/config/navbar' },
|
||||||
|
{ text: 'Hero 首屏', link: '/config/hero' },
|
||||||
|
{ text: '首页', link: '/config/home' },
|
||||||
|
{ text: '文章', link: '/config/article' },
|
||||||
|
{ text: '瞬间', link: '/config/moments' },
|
||||||
|
{ text: '图库', link: '/config/photos' },
|
||||||
|
{ text: '友情链接', link: '/config/links' },
|
||||||
|
{ text: '朋友圈', link: '/config/friends' },
|
||||||
|
{ text: '留言板', link: '/config/messageboard' },
|
||||||
|
{ text: '评论', link: '/config/comment' },
|
||||||
|
{ text: '页脚', link: '/config/footer' },
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '页面',
|
||||||
|
collapsed: false,
|
||||||
|
items: [
|
||||||
|
{ text: '首页', link: '/pages/home' },
|
||||||
|
{ text: '文章详情', link: '/pages/post' },
|
||||||
|
{ text: '归档', link: '/pages/archives' },
|
||||||
|
{ text: '分类与标签', link: '/pages/categories-tags' },
|
||||||
|
{ text: '瞬间', link: '/pages/moments' },
|
||||||
|
{ text: '图库', link: '/pages/photos' },
|
||||||
|
{ text: '友情链接', link: '/pages/links' },
|
||||||
|
{ text: '朋友圈', link: '/pages/friends' },
|
||||||
|
{ text: '自定义页面', link: '/pages/custom-page' },
|
||||||
|
{ text: '扩展页面', link: '/pages/extended' },
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '自定义',
|
||||||
|
collapsed: false,
|
||||||
|
items: [
|
||||||
|
{ text: '样式与配色', link: '/customize/style' },
|
||||||
|
{ text: 'CSS 变量', link: '/customize/css-variables' },
|
||||||
|
{ text: '自定义 CSS', link: '/customize/custom-css' },
|
||||||
|
{ text: '开发指南', link: '/customize/development' },
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '其他',
|
||||||
|
collapsed: false,
|
||||||
|
items: [
|
||||||
|
{ text: '常见问题', link: '/faq' },
|
||||||
|
{ text: '更新日志', link: '/changelog' },
|
||||||
|
]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
|
||||||
|
socialLinks: [
|
||||||
|
{ icon: 'github', link: 'https://github.com/nxxy335top/halo-theme-WarmIsland' }
|
||||||
|
],
|
||||||
|
|
||||||
|
search: {
|
||||||
|
provider: 'local',
|
||||||
|
options: {
|
||||||
|
locales: {
|
||||||
|
root: {
|
||||||
|
translations: {
|
||||||
|
button: { buttonText: '搜索文档', buttonAriaLabel: '搜索文档' },
|
||||||
|
modal: {
|
||||||
|
noResultsText: '无法找到相关结果',
|
||||||
|
resetButtonTitle: '清除查询条件',
|
||||||
|
footer: { selectText: '选择', navigateText: '切换', closeText: '关闭' }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
footer: {
|
||||||
|
message: '基于 GPL-3.0 许可发布',
|
||||||
|
copyright: '© 2024-present 暖心向阳335'
|
||||||
|
},
|
||||||
|
|
||||||
|
docFooter: {
|
||||||
|
prev: '上一篇',
|
||||||
|
next: '下一篇'
|
||||||
|
},
|
||||||
|
|
||||||
|
outline: {
|
||||||
|
label: '页面导航',
|
||||||
|
level: [2, 3]
|
||||||
|
},
|
||||||
|
|
||||||
|
lastUpdated: {
|
||||||
|
text: '最后更新于'
|
||||||
|
},
|
||||||
|
|
||||||
|
returnToTopLabel: '回到顶部',
|
||||||
|
sidebarMenuLabel: '菜单',
|
||||||
|
darkModeSwitchLabel: '主题',
|
||||||
|
lightModeSwitchTitle: '切换到浅色模式',
|
||||||
|
darkModeSwitchTitle: '切换到深色模式',
|
||||||
|
}
|
||||||
|
})
|
||||||
@@ -0,0 +1,14 @@
|
|||||||
|
import { h } from 'vue'
|
||||||
|
import type { Theme } from 'vitepress'
|
||||||
|
import DefaultTheme from 'vitepress/theme'
|
||||||
|
import './style.css'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
extends: DefaultTheme,
|
||||||
|
Layout: () => {
|
||||||
|
return h(DefaultTheme.Layout, null, {})
|
||||||
|
},
|
||||||
|
enhanceApp({ app, router, siteData }) {
|
||||||
|
// ...
|
||||||
|
}
|
||||||
|
} satisfies Theme
|
||||||
@@ -0,0 +1,62 @@
|
|||||||
|
:root {
|
||||||
|
--vp-c-brand-1: #d4764e;
|
||||||
|
--vp-c-brand-2: #c06840;
|
||||||
|
--vp-c-brand-3: #a85a35;
|
||||||
|
--vp-c-brand-soft: rgba(212, 118, 78, 0.14);
|
||||||
|
|
||||||
|
--vp-c-tip-1: var(--vp-c-brand-1);
|
||||||
|
--vp-c-tip-2: var(--vp-c-brand-2);
|
||||||
|
--vp-c-tip-3: var(--vp-c-brand-3);
|
||||||
|
--vp-c-tip-soft: var(--vp-c-brand-soft);
|
||||||
|
}
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--vp-button-brand-border: transparent;
|
||||||
|
--vp-button-brand-text: #fff;
|
||||||
|
--vp-button-brand-bg: var(--vp-c-brand-3);
|
||||||
|
--vp-button-brand-hover-border: transparent;
|
||||||
|
--vp-button-brand-hover-text: #fff;
|
||||||
|
--vp-button-brand-hover-bg: var(--vp-c-brand-2);
|
||||||
|
--vp-button-brand-active-border: transparent;
|
||||||
|
--vp-button-brand-active-text: #fff;
|
||||||
|
--vp-button-brand-active-bg: var(--vp-c-brand-1);
|
||||||
|
}
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--vp-home-hero-name-color: transparent;
|
||||||
|
--vp-home-hero-name-background: -webkit-linear-gradient(
|
||||||
|
120deg,
|
||||||
|
#d4764e 30%,
|
||||||
|
#e8a87c
|
||||||
|
);
|
||||||
|
|
||||||
|
--vp-home-hero-image-background-image: linear-gradient(
|
||||||
|
-45deg,
|
||||||
|
#d4764e 50%,
|
||||||
|
#e8a87c 50%
|
||||||
|
);
|
||||||
|
--vp-home-hero-image-filter: blur(44px);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 640px) {
|
||||||
|
:root {
|
||||||
|
--vp-home-hero-image-filter: blur(56px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 960px) {
|
||||||
|
:root {
|
||||||
|
--vp-home-hero-image-filter: blur(68px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--vp-custom-block-tip-border: transparent;
|
||||||
|
--vp-custom-block-tip-text: var(--vp-c-text-1);
|
||||||
|
--vp-custom-block-tip-bg: var(--vp-c-brand-soft);
|
||||||
|
--vp-custom-block-tip-code-bg: var(--vp-c-brand-soft);
|
||||||
|
}
|
||||||
|
|
||||||
|
.VPDocFooter .pager-link .title {
|
||||||
|
color: var(--vp-c-brand-1) !important;
|
||||||
|
}
|
||||||
@@ -0,0 +1,43 @@
|
|||||||
|
# 更新日志
|
||||||
|
|
||||||
|
## v1.0.0
|
||||||
|
|
||||||
|
首次发布 🎉
|
||||||
|
|
||||||
|
### 核心功能
|
||||||
|
|
||||||
|
- 🎨 暖色调设计语言，呼吸动效光球、毛玻璃导航栏
|
||||||
|
- 🌙 深色模式支持（跟随系统 / 浅色 / 深色三种方案）
|
||||||
|
- 📱 响应式布局，移动端专属菜单与交互体验
|
||||||
|
- ✨ 滚动渐入动画、光感跟随效果
|
||||||
|
|
||||||
|
### 页面模板
|
||||||
|
|
||||||
|
- 🏠 Hero 首屏（一言 API / 自定义描述 / 背景图片）
|
||||||
|
- 📝 文章详情页（侧边目录 / 阅读进度条 / 代码高亮 / 图片灯箱 / 点赞）
|
||||||
|
- 📂 归档页面（时间线布局）
|
||||||
|
- 🏷️ 分类和标签页面
|
||||||
|
- 💡 瞬间页面（Timeline / Cards / Masonry 三种样式）
|
||||||
|
- 📷 图库页面（Masonry / Grid / Carousel 三种样式）
|
||||||
|
- 🔗 友情链接页面（Cards / Grid / List 三种样式）
|
||||||
|
- 👥 朋友圈页面
|
||||||
|
- 💬 留言板自定义模板
|
||||||
|
- 📦 扩展页面支持（豆瓣 / 装备 / 足迹 / Steam）
|
||||||
|
|
||||||
|
### 导航与交互
|
||||||
|
|
||||||
|
- 🔍 搜索集成（支持 Ctrl+K 快捷键）
|
||||||
|
- 🎯 三种导航栏样式（Glass / Minimal / Float）
|
||||||
|
- 🌓 主题切换按钮
|
||||||
|
|
||||||
|
### 配置与自定义
|
||||||
|
|
||||||
|
- ⚙️ 丰富的主题设置面板（13 个配置分组）
|
||||||
|
- 🎨 可自定义强调色、圆角风格、容器宽度
|
||||||
|
- 📝 自定义 CSS 支持
|
||||||
|
- 🔧 页脚社交链接和自定义 HTML
|
||||||
|
|
||||||
|
### 错误页面
|
||||||
|
|
||||||
|
- 🐘 404 页面
|
||||||
|
- 🐘 500 页面
|
||||||
@@ -0,0 +1,131 @@
|
|||||||
|
# 文章
|
||||||
|
|
||||||
|
文章配置控制文章详情页的展示方式，包括封面图、元信息、目录导航、代码高亮等功能。这些设置影响每一篇文章的阅读体验。
|
||||||
|
|
||||||
|
## 配置项一览
|
||||||
|
|
||||||
|
| 配置项 | 类型 | 默认值 | 说明 |
|
||||||
|
| --- | --- | --- | --- |
|
||||||
|
| `article_show_cover` | 开关 | `true` | 显示封面图 |
|
||||||
|
| `article_show_date` | 开关 | `true` | 显示发布日期 |
|
||||||
|
| `article_show_category` | 开关 | `true` | 显示分类 |
|
||||||
|
| `article_show_tags` | 开关 | `true` | 显示标签 |
|
||||||
|
| `article_show_nav` | 开关 | `true` | 显示上下篇导航 |
|
||||||
|
| `article_show_toc` | 开关 | `true` | 显示文章目录 |
|
||||||
|
| `article_toc_position` | 下拉 | `left` | 目录位置：`left` / `right` |
|
||||||
|
| `article_show_word_count` | 开关 | `true` | 显示字数统计 |
|
||||||
|
| `article_show_visit_count` | 开关 | `true` | 显示阅读量统计 |
|
||||||
|
| `article_show_read_time` | 开关 | `false` | 显示预计阅读时间 |
|
||||||
|
| `article_code_theme` | 下拉 | `warm` | 代码高亮主题：`warm` / `cold` |
|
||||||
|
|
||||||
|
## 详细说明
|
||||||
|
|
||||||
|
### 封面图（article_show_cover）
|
||||||
|
|
||||||
|
开启后，文章详情页顶部会显示封面图（全宽展示）。封面图来自 Halo 后台编辑文章时设置的「封面图」字段。
|
||||||
|
|
||||||
|
::: tip
|
||||||
|
如果文章未设置封面图，即使开启此选项也不会显示任何内容，页面会自动调整布局。建议为重要文章设置封面图以获得最佳视觉效果。
|
||||||
|
:::
|
||||||
|
|
||||||
|
### 元信息展示
|
||||||
|
|
||||||
|
以下开关控制文章标题下方的元信息区域：
|
||||||
|
|
||||||
|
| 配置项 | 说明 |
|
||||||
|
| --- | --- |
|
||||||
|
| `article_show_date` | 显示文章发布日期 |
|
||||||
|
| `article_show_category` | 显示文章所属分类（可点击跳转） |
|
||||||
|
| `article_show_tags` | 显示文章标签列表（可点击跳转） |
|
||||||
|
| `article_show_word_count` | 显示文章字数统计 |
|
||||||
|
| `article_show_visit_count` | 显示文章阅读量 |
|
||||||
|
| `article_show_read_time` | 显示预计阅读时间（默认关闭） |
|
||||||
|
|
||||||
|
::: tip
|
||||||
|
预计阅读时间基于中文约 300 字/分钟、英文约 200 词/分钟的阅读速度估算。如需开启，建议同时开启字数统计，两者配合提供完整的阅读参考信息。
|
||||||
|
:::
|
||||||
|
|
||||||
|
### 上下篇导航（article_show_nav）
|
||||||
|
|
||||||
|
开启后，文章底部会显示「上一篇」和「下一篇文章」的导航链接，方便访客连续阅读。
|
||||||
|
|
||||||
|
### 文章目录（article_show_toc）
|
||||||
|
|
||||||
|
开启后，文章页面会显示基于标题层级自动生成的目录（Table of Contents），帮助读者快速定位和跳转到文章各章节。
|
||||||
|
|
||||||
|
#### 目录位置（article_toc_position）
|
||||||
|
|
||||||
|
| 值 | 说明 |
|
||||||
|
| --- | --- |
|
||||||
|
| `left` | 目录显示在正文左侧（默认） |
|
||||||
|
| `right` | 目录显示在正文右侧 |
|
||||||
|
|
||||||
|
#### 桌面端行为
|
||||||
|
|
||||||
|
- 目录以侧边栏形式固定显示
|
||||||
|
- 滚动时自动高亮当前阅读位置对应的目录项
|
||||||
|
- 点击目录项平滑滚动到对应章节
|
||||||
|
- 当文章标题较少（少于 2 个）时，目录区域自动隐藏
|
||||||
|
|
||||||
|
#### 移动端行为
|
||||||
|
|
||||||
|
- 目录不显示侧边栏，而是在文章标题下方显示一个可展开的目录按钮
|
||||||
|
- 点击按钮弹出目录面板，选择后自动关闭
|
||||||
|
- 这种设计避免了移动端屏幕空间不足的问题
|
||||||
|
|
||||||
|
::: tip
|
||||||
|
目录仅提取文章中的 `<h2>` 和 `<h3>` 标签生成。建议在撰写长文时合理使用二级和三级标题，以获得结构清晰的目录。
|
||||||
|
:::
|
||||||
|
|
||||||
|
### 代码高亮主题（article_code_theme）
|
||||||
|
|
||||||
|
WarmIsland 使用 Prism.js 实现代码语法高亮，提供两种主题风格：
|
||||||
|
|
||||||
|
| 值 | 说明 |
|
||||||
|
| --- | --- |
|
||||||
|
| `warm` | 暖色调代码主题，与暖屿整体风格一致（默认） |
|
||||||
|
| `cold` | 冷色调代码主题，类似经典代码编辑器风格，适合技术博客 |
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
# 技术博客推荐
|
||||||
|
article_code_theme: cold
|
||||||
|
|
||||||
|
# 生活博客推荐
|
||||||
|
article_code_theme: warm
|
||||||
|
```
|
||||||
|
|
||||||
|
::: tip
|
||||||
|
代码高亮支持多种编程语言，包括 JavaScript、Python、Java、Go、Rust、YAML、JSON、Bash 等。语言检测基于代码块的语言标记自动完成。
|
||||||
|
:::
|
||||||
|
|
||||||
|
## 阅读增强功能
|
||||||
|
|
||||||
|
除了可配置的项目外，文章详情页还包含以下内置功能：
|
||||||
|
|
||||||
|
### 阅读进度条
|
||||||
|
|
||||||
|
页面顶部显示一条阅读进度条，随滚动位置实时更新，让读者直观了解当前阅读进度。进度条颜色跟随强调色。
|
||||||
|
|
||||||
|
### 点赞按钮
|
||||||
|
|
||||||
|
文章底部提供点赞按钮，访客可以点击表达对文章的喜爱。点赞数据由 Halo 核心功能提供。
|
||||||
|
|
||||||
|
### LightGallery 图片灯箱
|
||||||
|
|
||||||
|
文章中的图片支持点击放大查看，基于 LightGallery 实现：
|
||||||
|
|
||||||
|
- 点击图片弹出灯箱查看大图
|
||||||
|
- 支持左右切换浏览多张图片
|
||||||
|
- 支持缩放、旋转等操作
|
||||||
|
- 按 `Esc` 或点击背景关闭灯箱
|
||||||
|
|
||||||
|
::: tip
|
||||||
|
LightGallery 会自动识别文章正文中的所有 `<img>` 标签并应用灯箱效果，无需手动配置。
|
||||||
|
:::
|
||||||
|
|
||||||
|
## 相关页面
|
||||||
|
|
||||||
|
- [首页](/config/home) — 首页文章列表配置
|
||||||
|
- [评论](/config/comment) — 文章评论样式配置
|
||||||
|
- [样式设置](/config/style) — 强调色与圆角配置
|
||||||
|
- [文章详情页](/pages/post) — 文章模板与结构说明
|
||||||
@@ -0,0 +1,80 @@
|
|||||||
|
# 基础设置
|
||||||
|
|
||||||
|
基础设置是 WarmIsland 主题的核心配置区域，用于定义站点的基本信息和全局标签文案。这些配置项会影响导航栏、页脚、SEO 以及全站多处显示内容。
|
||||||
|
|
||||||
|
## 配置项一览
|
||||||
|
|
||||||
|
| 配置项 | 类型 | 默认值 | 说明 |
|
||||||
|
| --- | --- | --- | --- |
|
||||||
|
| `owner_name` | 文本 | — | 站点名称，显示在导航栏、页脚等位置 |
|
||||||
|
| `site_description` | 多行文本 | — | 站点描述，用于 SEO meta 信息 |
|
||||||
|
| `logo` | 附件 | — | 自定义 Logo 图片 |
|
||||||
|
| `favicon` | 附件 | — | 自定义 Favicon 图标 |
|
||||||
|
| `label_search` | 文本 | `搜索` | 搜索按钮的标签文案 |
|
||||||
|
| `label_theme_switch` | 文本 | `切换主题` | 主题切换按钮的标签文案 |
|
||||||
|
| `label_archives_title` | 文本 | `归档` | 归档页面的标题文案 |
|
||||||
|
|
||||||
|
## 详细说明
|
||||||
|
|
||||||
|
### 站点名称（owner_name）
|
||||||
|
|
||||||
|
填写你的站点名称，该名称会出现在以下位置：
|
||||||
|
|
||||||
|
- 导航栏左侧（未设置 Logo 时作为文字 Logo 显示）
|
||||||
|
- 页脚版权信息区域
|
||||||
|
- 浏览器标签页标题（结合文章标题）
|
||||||
|
|
||||||
|
::: tip
|
||||||
|
如果未设置 `owner_name`，主题会尝试读取 Halo 后台的站点标题作为回退值。建议始终显式设置此项以确保显示一致。
|
||||||
|
:::
|
||||||
|
|
||||||
|
### 站点描述（site_description）
|
||||||
|
|
||||||
|
站点描述用于生成 HTML `<meta name="description">` 标签，对搜索引擎优化（SEO）至关重要。建议控制在 80–160 个字符之间，简洁地概括站点内容与定位。
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
# 示例
|
||||||
|
site_description: "一个关于技术、生活与思考的个人博客，记录温暖与灵感。"
|
||||||
|
```
|
||||||
|
|
||||||
|
### 自定义 Logo（logo）
|
||||||
|
|
||||||
|
上传自定义 Logo 图片，支持 PNG、SVG、JPG 等常见格式。设置后，Logo 将替代站点名称显示在导航栏左侧。
|
||||||
|
|
||||||
|
::: tip
|
||||||
|
推荐使用 SVG 格式的 Logo，在任何分辨率下都能保持清晰。建议 Logo 高度不超过 40px，宽度按比例缩放。
|
||||||
|
:::
|
||||||
|
|
||||||
|
### 自定义 Favicon（favicon）
|
||||||
|
|
||||||
|
Favicon 是显示在浏览器标签页上的小图标。上传一个正方形图标（推荐 32×32 或 64×64 像素的 PNG/ICO 格式）。
|
||||||
|
|
||||||
|
::: warning
|
||||||
|
部分浏览器对 Favicon 有缓存机制，更换后可能需要清除浏览器缓存或使用无痕模式查看效果。
|
||||||
|
:::
|
||||||
|
|
||||||
|
### 标签文案自定义
|
||||||
|
|
||||||
|
WarmIsland 主题允许你自定义界面中出现的标签文案，方便进行多语言适配或个性化表达：
|
||||||
|
|
||||||
|
- **`label_search`** — 导航栏搜索按钮的显示文字，默认为「搜索」
|
||||||
|
- **`label_theme_switch`** — 导航栏主题切换按钮的显示文字，默认为「切换主题」
|
||||||
|
- **`label_archives_title`** — 归档页面的标题，默认为「归档」
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
# 英文站点示例
|
||||||
|
label_search: "Search"
|
||||||
|
label_theme_switch: "Switch Theme"
|
||||||
|
label_archives_title: "Archives"
|
||||||
|
```
|
||||||
|
|
||||||
|
::: tip
|
||||||
|
标签文案的修改会即时生效，无需重启 Halo。如果使用多语言场景，可以配合 Halo 的多语言插件实现更完整的国际化。
|
||||||
|
:::
|
||||||
|
|
||||||
|
## 相关页面
|
||||||
|
|
||||||
|
- [样式设置](/config/style) — 调整配色、圆角、动画等视觉表现
|
||||||
|
- [导航栏](/config/navbar) — 配置导航栏样式与功能按钮
|
||||||
|
- [页脚](/config/footer) — 配置页脚版权信息与社交链接
|
||||||
|
- [快速开始](/guide/getting-started) — 主题安装与初始配置指南
|
||||||
@@ -0,0 +1,75 @@
|
|||||||
|
# 评论
|
||||||
|
|
||||||
|
评论配置控制全站评论区域的外观样式，影响文章详情页、留言板等所有包含评论组件的页面。WarmIsland 基于 Halo 的 `halo:comment` 组件提供评论功能，并提供了样式定制选项。
|
||||||
|
|
||||||
|
## 配置项一览
|
||||||
|
|
||||||
|
| 配置项 | 类型 | 默认值 | 说明 |
|
||||||
|
| --- | --- | --- | --- |
|
||||||
|
| `comment_style` | 下拉 | `warm` | 评论样式：`warm` / `minimal` |
|
||||||
|
| `comment_show_avatar` | 开关 | `true` | 显示头像 |
|
||||||
|
|
||||||
|
## 详细说明
|
||||||
|
|
||||||
|
### 评论样式（comment_style）
|
||||||
|
|
||||||
|
| 值 | 说明 |
|
||||||
|
| --- | --- |
|
||||||
|
| `warm` | 暖色风格，与暖屿主题整体风格一致，圆角卡片、柔和配色（默认） |
|
||||||
|
| `minimal` | 极简风格，去除装饰性元素，线条简洁，适合内容导向型站点 |
|
||||||
|
|
||||||
|
::: tip
|
||||||
|
`warm` 样式与暖屿的整体设计语言最为协调，推荐大多数用户使用。`minimal` 样式适合希望让评论区域更低调、不抢夺正文注意力的场景。
|
||||||
|
:::
|
||||||
|
|
||||||
|
### 显示头像（comment_show_avatar）
|
||||||
|
|
||||||
|
开启后，每条评论左侧会显示评论者的头像。关闭后，评论以纯文本形式排列，节省空间。
|
||||||
|
|
||||||
|
::: tip
|
||||||
|
如果站点评论以匿名或短评为主，可以考虑关闭头像以获得更紧凑的布局。如果评论互动较多，建议保持开启以增强社交感。
|
||||||
|
:::
|
||||||
|
|
||||||
|
## 评论功能说明
|
||||||
|
|
||||||
|
WarmIsland 的评论系统基于 Halo 的 `halo:comment` 组件实现，提供以下核心功能：
|
||||||
|
|
||||||
|
### 回复
|
||||||
|
|
||||||
|
支持多级嵌套回复，访客可以针对特定评论进行回复，形成讨论线程。
|
||||||
|
|
||||||
|
### 点赞
|
||||||
|
|
||||||
|
每条评论支持点赞功能，访客可以表达对评论的认同。
|
||||||
|
|
||||||
|
### Markdown 支持
|
||||||
|
|
||||||
|
评论内容支持 Markdown 基础语法，包括：
|
||||||
|
|
||||||
|
- **粗体** 和 *斜体*
|
||||||
|
- 代码（行内 `` `code` `` 和代码块）
|
||||||
|
- 链接
|
||||||
|
- 列表
|
||||||
|
|
||||||
|
::: warning
|
||||||
|
为安全起见，评论中的 Markdown 支持是受限的，不支持 HTML 标签注入、JavaScript 执行等危险操作。
|
||||||
|
:::
|
||||||
|
|
||||||
|
### 评论管理
|
||||||
|
|
||||||
|
评论数据通过 Halo 后台统一管理：
|
||||||
|
|
||||||
|
1. 登录 Halo 后台管理控制台
|
||||||
|
2. 进入 **评论** 管理页面
|
||||||
|
3. 可以查看、审核、回复和删除评论
|
||||||
|
4. 支持设置评论审核规则（如需审核后发布）
|
||||||
|
|
||||||
|
::: tip
|
||||||
|
建议开启评论审核功能以防止垃圾评论。可以在 Halo 后台 → **设置** → **评论** 中配置评论审核策略。
|
||||||
|
:::
|
||||||
|
|
||||||
|
## 相关页面
|
||||||
|
|
||||||
|
- [留言板](/config/messageboard) — 留言板页面配置
|
||||||
|
- [文章](/config/article) — 文章详情页配置
|
||||||
|
- [样式设置](/config/style) — 全局样式与配色配置
|
||||||
@@ -0,0 +1,166 @@
|
|||||||
|
# 页脚
|
||||||
|
|
||||||
|
页脚是站点全局可见的底部区域，用于展示版权信息、备案号、社交链接以及自定义 HTML 内容。WarmIsland 提供了灵活的页脚配置，满足法律合规、社交推广和数据分析等多种需求。
|
||||||
|
|
||||||
|
## 配置项一览
|
||||||
|
|
||||||
|
| 配置项 | 类型 | 默认值 | 说明 |
|
||||||
|
| --- | --- | --- | --- |
|
||||||
|
| `footer_copyright` | 文本 | — | 版权信息（留空则使用默认格式 © 年份 站点标题） |
|
||||||
|
| `footer_icp` | 文本 | — | ICP 备案号 |
|
||||||
|
| `footer_socials` | 重复器 | — | 社交链接（平台名称 / 图标类名 / 链接地址） |
|
||||||
|
| `footer_show_powered` | 开关 | `true` | 显示「Powered by Halo」 |
|
||||||
|
| `footer_show_theme` | 开关 | `true` | 显示主题版本 |
|
||||||
|
| `footer_custom_html` | 代码 | — | 自定义 HTML（统计代码等） |
|
||||||
|
|
||||||
|
## 详细说明
|
||||||
|
|
||||||
|
### 版权信息（footer_copyright）
|
||||||
|
|
||||||
|
自定义页脚版权信息文本。留空时，主题会自动生成默认格式的版权信息：`© 当前年份 站点标题`。
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
# 自定义版权信息
|
||||||
|
footer_copyright: "© 2024 暖屿 All Rights Reserved"
|
||||||
|
|
||||||
|
# 留空使用默认格式
|
||||||
|
footer_copyright: ""
|
||||||
|
# 自动生成：© 2026 暖屿
|
||||||
|
```
|
||||||
|
|
||||||
|
::: tip
|
||||||
|
如果需要更复杂的版权信息（如包含链接），可以使用 `footer_custom_html` 配置项通过 HTML 实现。
|
||||||
|
:::
|
||||||
|
|
||||||
|
### ICP 备案号（footer_icp）
|
||||||
|
|
||||||
|
填写你的 ICP 备案号，显示在页脚版权信息下方。如果站点部署在中国大陆的服务器上，根据法规要求需要展示备案号。
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
footer_icp: "京ICP备12345678号-1"
|
||||||
|
```
|
||||||
|
|
||||||
|
::: warning
|
||||||
|
ICP 备案号通常需要链接到工信部的备案查询页面。主题会自动为备案号添加指向 `https://beian.miit.gov.cn/` 的链接。
|
||||||
|
:::
|
||||||
|
|
||||||
|
### 社交链接（footer_socials）
|
||||||
|
|
||||||
|
通过重复器（Repeater）添加多个社交链接，每条链接包含三个字段：
|
||||||
|
|
||||||
|
| 字段 | 说明 |
|
||||||
|
| --- | --- |
|
||||||
|
| `platform` | 平台名称，如 GitHub、微博、Twitter 等 |
|
||||||
|
| `icon` | 图标类名，使用 Font Awesome 图标类名 |
|
||||||
|
| `url` | 链接地址 |
|
||||||
|
|
||||||
|
#### Font Awesome 图标类名示例
|
||||||
|
|
||||||
|
社交链接的图标使用 Font Awesome 图标库，以下是常用平台的图标类名：
|
||||||
|
|
||||||
|
| 平台 | 图标类名 |
|
||||||
|
| --- | --- |
|
||||||
|
| GitHub | `fa-brands fa-github` |
|
||||||
|
| 微博 | `fa-brands fa-weibo` |
|
||||||
|
| Twitter / X | `fa-brands fa-x-twitter` |
|
||||||
|
| 微信 | `fa-brands fa-weixin` |
|
||||||
|
| Bilibili | `fa-brands fa-bilibili` |
|
||||||
|
| 知乎 | `fa-brands fa-zhihu` |
|
||||||
|
| 邮箱 | `fa-solid fa-envelope` |
|
||||||
|
| RSS | `fa-solid fa-rss` |
|
||||||
|
| 抖音 | `fa-brands fa-tiktok` |
|
||||||
|
| 小红书 | `fa-solid fa-book-open` |
|
||||||
|
| Telegram | `fa-brands fa-telegram` |
|
||||||
|
| Discord | `fa-brands fa-discord` |
|
||||||
|
| YouTube | `fa-brands fa-youtube` |
|
||||||
|
| Spotify | `fa-brands fa-spotify` |
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
# 社交链接配置示例
|
||||||
|
footer_socials:
|
||||||
|
- platform: GitHub
|
||||||
|
icon: fa-brands fa-github
|
||||||
|
url: https://github.com/your-username
|
||||||
|
- platform: 微博
|
||||||
|
icon: fa-brands fa-weibo
|
||||||
|
url: https://weibo.com/your-username
|
||||||
|
- platform: 邮箱
|
||||||
|
icon: fa-solid fa-envelope
|
||||||
|
url: mailto:your@email.com
|
||||||
|
- platform: RSS
|
||||||
|
icon: fa-solid fa-rss
|
||||||
|
url: /rss.xml
|
||||||
|
```
|
||||||
|
|
||||||
|
::: tip
|
||||||
|
你可以在 [Font Awesome 官网](https://fontawesome.com/icons) 搜索更多图标。WarmIsland 主题内置了 Font Awesome 图标库，无需额外引入。
|
||||||
|
:::
|
||||||
|
|
||||||
|
### 显示「Powered by Halo」（footer_show_powered）
|
||||||
|
|
||||||
|
开启后，页脚会显示「Powered by Halo」文字，链接到 Halo 官网。这是对 Halo 开源项目的支持与致谢。
|
||||||
|
|
||||||
|
### 显示主题版本（footer_show_theme）
|
||||||
|
|
||||||
|
开启后，页脚会显示当前 WarmIsland 主题的名称和版本号，如「Theme WarmIsland v1.0.0」。
|
||||||
|
|
||||||
|
::: tip
|
||||||
|
保持开启主题版本显示有助于访客了解你使用的主题，也可能帮助你在遇到问题时快速确认当前版本号。
|
||||||
|
:::
|
||||||
|
|
||||||
|
### 自定义 HTML（footer_custom_html）
|
||||||
|
|
||||||
|
在此处编写自定义 HTML 代码，会注入到页脚区域的末尾。最常见的用途是添加网站统计代码。
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!-- 百度统计 -->
|
||||||
|
<script>
|
||||||
|
var _hmt = _hmt || [];
|
||||||
|
(function() {
|
||||||
|
var hm = document.createElement("script");
|
||||||
|
hm.src = "https://hm.baidu.com/hm.js?your-site-id";
|
||||||
|
var s = document.getElementsByTagName("script")[0];
|
||||||
|
s.parentNode.insertBefore(hm, s);
|
||||||
|
})();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<!-- Google Analytics -->
|
||||||
|
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
|
||||||
|
<script>
|
||||||
|
window.dataLayer = window.dataLayer || [];
|
||||||
|
function gtag(){dataLayer.push(arguments);}
|
||||||
|
gtag('js', new Date());
|
||||||
|
gtag('config', 'G-XXXXXXXXXX');
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<!-- 自定义页脚内容 -->
|
||||||
|
<p style="text-align:center;margin-top:1rem;">
|
||||||
|
Made with ❤️ by WarmIsland
|
||||||
|
</p>
|
||||||
|
```
|
||||||
|
|
||||||
|
::: warning
|
||||||
|
自定义 HTML 会直接注入到页面中，请确保代码安全可靠。不要在此处添加可能影响页面性能或安全性的代码。统计代码建议放置在 `<script>` 标签中，并使用 `async` 属性以避免阻塞页面渲染。
|
||||||
|
:::
|
||||||
|
|
||||||
|
## 页脚布局
|
||||||
|
|
||||||
|
页脚区域从上到下依次为：
|
||||||
|
|
||||||
|
```
|
||||||
|
┌─────────────────────────────────────┐
|
||||||
|
│ 社交链接图标区域 │ ← footer_socials
|
||||||
|
├─────────────────────────────────────┤
|
||||||
|
│ © 2026 暖屿 | 京ICP备xxxxx号 │ ← 版权信息 + 备案号
|
||||||
|
├─────────────────────────────────────┤
|
||||||
|
│ Powered by Halo | Theme 暖屿 │ ← 可选的引擎与主题信息
|
||||||
|
├─────────────────────────────────────┤
|
||||||
|
│ 自定义 HTML 区域 │ ← footer_custom_html
|
||||||
|
└─────────────────────────────────────┘
|
||||||
|
```
|
||||||
|
|
||||||
|
## 相关页面
|
||||||
|
|
||||||
|
- [基础设置](/config/basic) — 站点名称配置
|
||||||
|
- [导航栏](/config/navbar) — 导航栏配置
|
||||||
|
- [样式设置](/config/style) — 强调色与圆角配置
|
||||||
@@ -0,0 +1,65 @@
|
|||||||
|
# 朋友圈
|
||||||
|
|
||||||
|
朋友圈模块用于聚合展示你订阅的站点最新动态，类似于 RSS 阅读器的社交化呈现。访客可以在你的站点上浏览友站最新文章，发现更多优质内容。
|
||||||
|
|
||||||
|
## 配置项一览
|
||||||
|
|
||||||
|
| 配置项 | 类型 | 默认值 | 说明 |
|
||||||
|
| --- | --- | --- | --- |
|
||||||
|
| `friends_page_title` | 文本 | `朋友圈` | 页面标题 |
|
||||||
|
|
||||||
|
## 前置依赖
|
||||||
|
|
||||||
|
::: danger
|
||||||
|
朋友圈功能依赖 Halo 的 **plugin-friends** 插件。如果未安装此插件，朋友圈页面将无法正常工作。
|
||||||
|
|
||||||
|
安装方式：Halo 后台 → **插件** → **安装** → 搜索「Friends」或从 [GitHub Releases](https://github.com/halo-sigs/plugin-friends) 下载安装。
|
||||||
|
:::
|
||||||
|
|
||||||
|
## 详细说明
|
||||||
|
|
||||||
|
### 页面标题（friends_page_title）
|
||||||
|
|
||||||
|
朋友圈页面的标题，显示在页面顶部。
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
friends_page_title: "朋友圈" # 默认
|
||||||
|
friends_page_title: "友圈" # 简称
|
||||||
|
friends_page_title: "Friends" # 英文站点
|
||||||
|
```
|
||||||
|
|
||||||
|
## RSS 订阅说明
|
||||||
|
|
||||||
|
朋友圈的核心机制是通过 RSS 订阅聚合友站内容：
|
||||||
|
|
||||||
|
1. 在 Halo 后台的 Friends 插件设置中添加友站的 RSS 订阅地址
|
||||||
|
2. 插件会定期抓取这些 RSS 源的最新文章
|
||||||
|
3. 朋友圈页面按时间倒序展示所有订阅源的最新文章
|
||||||
|
|
||||||
|
### 添加订阅源
|
||||||
|
|
||||||
|
1. 登录 Halo 后台管理控制台
|
||||||
|
2. 进入 **朋友圈** 或 **Friends** 管理页面
|
||||||
|
3. 点击 **添加订阅** 填写：
|
||||||
|
- **站点名称** — 友站名称
|
||||||
|
- **RSS 地址** — 友站的 RSS/Atom 订阅地址
|
||||||
|
- **Logo** — 友站 Logo（可选）
|
||||||
|
4. 保存后，插件会在下次抓取周期自动拉取内容
|
||||||
|
|
||||||
|
::: tip
|
||||||
|
大多数博客平台都提供 RSS 订阅功能。常见的 RSS 地址格式：
|
||||||
|
- WordPress：`/feed/`
|
||||||
|
- Halo：`/rss.xml` 或 `/feed/`
|
||||||
|
- Hexo：`/atom.xml` 或 `/rss2.xml`
|
||||||
|
- Typecho：`/feed/`
|
||||||
|
:::
|
||||||
|
|
||||||
|
::: warning
|
||||||
|
RSS 抓取频率取决于插件配置，通常为每 30 分钟到数小时一次。新添加的订阅源可能需要等待一个抓取周期才能在页面显示内容。
|
||||||
|
:::
|
||||||
|
|
||||||
|
## 相关页面
|
||||||
|
|
||||||
|
- [友情链接](/config/links) — 友情链接页面配置
|
||||||
|
- [页脚](/config/footer) — 页脚社交链接配置
|
||||||
|
- [朋友圈页面](/pages/friends) — 朋友圈模板与结构说明
|
||||||
@@ -0,0 +1,137 @@
|
|||||||
|
# Hero 首屏
|
||||||
|
|
||||||
|
Hero 首屏是 WarmIsland 主题的标志性区域，占据首页首屏的全部视口高度，以渐变背景、呼吸光球和动态文案营造沉浸式的第一印象。
|
||||||
|
|
||||||
|
## 配置项一览
|
||||||
|
|
||||||
|
| 配置项 | 类型 | 默认值 | 说明 |
|
||||||
|
| --- | --- | --- | --- |
|
||||||
|
| `hero_enabled` | 开关 | `true` | 启用 Hero 模块 |
|
||||||
|
| `hero_title` | 文本 | — | 主标题（留空则使用站点标题） |
|
||||||
|
| `hero_subtitle` | 文本 | — | 副标题（留空则使用站点副标题） |
|
||||||
|
| `hero_description_mode` | 下拉 | `hitokoto` | 描述文案来源：`none` / `hitokoto` / `custom` |
|
||||||
|
| `hero_hitokoto_api` | URL | `https://v1.hitokoto.cn/` | 一言 API 地址 |
|
||||||
|
| `hero_hitokoto_categories` | 多选 | `d, i, k` | 一言句子类型 |
|
||||||
|
| `hero_custom_description` | 多行文本 | — | 自定义描述文案 |
|
||||||
|
| `hero_background_image` | 附件 | — | 背景图片 |
|
||||||
|
|
||||||
|
## 详细说明
|
||||||
|
|
||||||
|
### 启用 Hero 模块（hero_enabled）
|
||||||
|
|
||||||
|
关闭后，首页将不再显示 Hero 区域，直接展示文章列表。适合内容导向型站点或不需要首屏视觉冲击的场景。
|
||||||
|
|
||||||
|
### 主标题与副标题
|
||||||
|
|
||||||
|
- **`hero_title`** — Hero 区域的主标题，字体最大、最醒目。留空时自动使用 [基础设置](/config/basic) 中的 `owner_name` 作为回退。
|
||||||
|
- **`hero_subtitle`** — 主标题下方的副标题，字号较小。留空时自动使用 Halo 后台设置的站点副标题。
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
# 示例
|
||||||
|
hero_title: "暖屿"
|
||||||
|
hero_subtitle: "记录温暖与灵感"
|
||||||
|
```
|
||||||
|
|
||||||
|
### 描述文案来源（hero_description_mode）
|
||||||
|
|
||||||
|
控制 Hero 区域主标题下方显示的描述文案，提供三种模式：
|
||||||
|
|
||||||
|
| 值 | 说明 |
|
||||||
|
| --- | --- |
|
||||||
|
| `none` | 不显示描述文案 |
|
||||||
|
| `hitokoto` | 从一言 API 实时获取随机句子（默认） |
|
||||||
|
| `custom` | 显示自定义的描述文案 |
|
||||||
|
|
||||||
|
### 一言模式（hitokoto）
|
||||||
|
|
||||||
|
选择 `hitokoto` 模式后，Hero 区域会从一言 API 获取随机句子，每次刷新页面都会展示不同的内容。
|
||||||
|
|
||||||
|
#### 一言 API 地址（hero_hitokoto_api）
|
||||||
|
|
||||||
|
默认使用官方 API `https://v1.hitokoto.cn/`。如果你部署了一言的私有实例，可以修改为自建 API 地址。
|
||||||
|
|
||||||
|
::: tip
|
||||||
|
自建一言 API 可以提升加载速度并避免第三方服务不稳定的问题。部署方式请参考 [hitokoto 官方文档](https://developer.hitokoto.cn/)。
|
||||||
|
:::
|
||||||
|
|
||||||
|
#### 一言句子类型（hero_hitokoto_categories）
|
||||||
|
|
||||||
|
通过勾选来筛选获取的句子类型，支持多选：
|
||||||
|
|
||||||
|
| 值 | 类型 | 说明 |
|
||||||
|
| --- | --- | --- |
|
||||||
|
| `a` | 动画 | 动画作品中的经典台词 |
|
||||||
|
| `b` | 漫画 | 漫画作品中的句子 |
|
||||||
|
| `c` | 游戏 | 游戏中的对白与文案 |
|
||||||
|
| `d` | 文学 | 文学作品中的名句（默认选中） |
|
||||||
|
| `e` | 原创 | 一言社区原创投稿 |
|
||||||
|
| `f` | 来自网络 | 网络流传的金句 |
|
||||||
|
| `g` | 其他 | 其他来源 |
|
||||||
|
| `h` | 影视 | 影视剧中的台词 |
|
||||||
|
| `i` | 诗词 | 古诗词名句（默认选中） |
|
||||||
|
| `k` | 哲学 | 哲学思辨类句子（默认选中） |
|
||||||
|
| `l` | 抖机灵 | 幽默风趣的句子 |
|
||||||
|
|
||||||
|
默认选中 `d`（文学）、`i`（诗词）、`k`（哲学），与暖屿的文艺气质相契合。
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
# 示例：只获取文学和诗词类句子
|
||||||
|
hero_hitokoto_categories:
|
||||||
|
- d
|
||||||
|
- i
|
||||||
|
```
|
||||||
|
|
||||||
|
### 自定义模式（custom）
|
||||||
|
|
||||||
|
选择 `custom` 模式后，需要在 `hero_custom_description` 中填写自定义的描述文案。此配置项仅在 `hero_description_mode` 为 `custom` 时显示。
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
hero_description_mode: custom
|
||||||
|
hero_custom_description: "用文字记录生活，用代码构建世界。"
|
||||||
|
```
|
||||||
|
|
||||||
|
::: tip
|
||||||
|
自定义描述支持多行文本，但建议控制在 1–2 行以内，过长的文案在移动端可能需要滚动才能完整显示。
|
||||||
|
:::
|
||||||
|
|
||||||
|
### 背景图片（hero_background_image）
|
||||||
|
|
||||||
|
上传自定义背景图片，将作为 Hero 区域的背景展示。未设置时，Hero 区域使用渐变色背景。
|
||||||
|
|
||||||
|
::: warning
|
||||||
|
背景图片会自动应用模糊和暗化处理，以确保前景文字的可读性。建议选择色彩柔和、不包含大量细节的图片作为背景，避免干扰文案阅读。
|
||||||
|
:::
|
||||||
|
|
||||||
|
## 视觉效果
|
||||||
|
|
||||||
|
Hero 区域包含以下精心设计的视觉效果：
|
||||||
|
|
||||||
|
### 渐变背景
|
||||||
|
|
||||||
|
基于强调色生成的多层渐变背景，在浅色和深色模式下分别适配不同的色调。渐变方向从左上到右下，营造温暖的视觉基调。
|
||||||
|
|
||||||
|
### 呼吸光球
|
||||||
|
|
||||||
|
多个半透明的光球在背景中缓慢浮动和脉动，产生「呼吸」般的节奏感。此效果可通过 [样式设置](/config/style) 中的 `animation_breath` 开关控制。
|
||||||
|
|
||||||
|
### 滚动模糊
|
||||||
|
|
||||||
|
当页面向下滚动时，Hero 区域会逐渐应用高斯模糊效果，使焦点自然过渡到下方的内容区域。
|
||||||
|
|
||||||
|
### 内容淡出
|
||||||
|
|
||||||
|
随着滚动距离增加，Hero 区域内的标题、副标题和描述文案会逐渐淡出并上移，形成视差效果。
|
||||||
|
|
||||||
|
### 滚动指示器
|
||||||
|
|
||||||
|
Hero 区域底部有一个向下滚动的指示动画（小箭头 + 弹跳动画），引导访客继续浏览下方内容。
|
||||||
|
|
||||||
|
::: tip
|
||||||
|
以上所有视觉效果均通过 CSS 和少量 JavaScript 实现，对性能影响极小。如果需要禁用动画效果，可在 [样式设置](/config/style) 中关闭对应的动画开关。
|
||||||
|
:::
|
||||||
|
|
||||||
|
## 相关页面
|
||||||
|
|
||||||
|
- [首页](/config/home) — 首页文章列表配置
|
||||||
|
- [样式设置](/config/style) — 动画效果与配色配置
|
||||||
|
- [基础设置](/config/basic) — 站点名称与描述配置
|
||||||
@@ -0,0 +1,163 @@
|
|||||||
|
# 首页
|
||||||
|
|
||||||
|
首页是访客进入站点后看到的第一个内容页面（Hero 区域下方），以文章卡片列表为核心展示形式。WarmIsland 提供了丰富的首页配置选项，涵盖卡片信息展示、摘要行数、加载方式以及各种文案自定义。
|
||||||
|
|
||||||
|
## 配置项一览
|
||||||
|
|
||||||
|
| 配置项 | 类型 | 默认值 | 说明 |
|
||||||
|
| --- | --- | --- | --- |
|
||||||
|
| `home_pinned_title` | 文本 | `置顶` | 置顶模块标题 |
|
||||||
|
| `home_posts_title` | 文本 | `文章` | 文章模块标题 |
|
||||||
|
| `home_card_show_visit` | 开关 | `true` | 文章卡片显示阅读量 |
|
||||||
|
| `home_card_show_wordcount` | 开关 | `true` | 文章卡片显示字数 |
|
||||||
|
| `home_card_show_category` | 开关 | `true` | 文章卡片显示分类 |
|
||||||
|
| `home_card_show_tags` | 开关 | `true` | 文章卡片显示标签 |
|
||||||
|
| `home_excerpt_lines` | 数字 | `3` | 文章简介显示行数 |
|
||||||
|
| `home_post_loading` | 下拉 | `pagination` | 文章加载方式：`pagination` / `infinite_scroll` |
|
||||||
|
| `home_label_newer` | 文本 | `较新` | 分页-较新标签 |
|
||||||
|
| `home_label_older` | 文本 | `较旧` | 分页-较旧标签 |
|
||||||
|
| `home_label_loading` | 文本 | `加载中...` | 无限滚动-加载中文案 |
|
||||||
|
| `home_label_all_loaded` | 文本 | `已加载全部文章` | 无限滚动-全部加载文案 |
|
||||||
|
| `home_label_no_posts` | 文本 | `暂无文章。` | 暂无文章文案 |
|
||||||
|
| `home_label_post_count` | 文本 | `共 {total} 篇文章` | 文章数量文案（`{total}` 为占位符） |
|
||||||
|
|
||||||
|
## 详细说明
|
||||||
|
|
||||||
|
### 模块标题
|
||||||
|
|
||||||
|
首页文章列表分为两个模块区域，各自拥有独立的标题：
|
||||||
|
|
||||||
|
- **`home_pinned_title`** — 置顶文章区域的标题，默认为「置顶」。只有存在置顶文章时此区域才会显示。
|
||||||
|
- **`home_posts_title`** — 普通文章区域的标题，默认为「文章」。
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
# 英文站点示例
|
||||||
|
home_pinned_title: "Pinned"
|
||||||
|
home_posts_title: "Posts"
|
||||||
|
```
|
||||||
|
|
||||||
|
::: tip
|
||||||
|
置顶文章需要在 Halo 后台编辑文章时手动设置置顶属性。置顶文章会显示在列表最前方的独立区域中，与普通文章区域以标题分隔。
|
||||||
|
:::
|
||||||
|
|
||||||
|
### 文章卡片信息展示
|
||||||
|
|
||||||
|
通过四个开关控制文章卡片上显示的元信息：
|
||||||
|
|
||||||
|
| 配置项 | 说明 |
|
||||||
|
| --- | --- |
|
||||||
|
| `home_card_show_visit` | 显示文章阅读量（依赖 Halo 统计功能） |
|
||||||
|
| `home_card_show_wordcount` | 显示文章字数统计 |
|
||||||
|
| `home_card_show_category` | 显示文章所属分类 |
|
||||||
|
| `home_card_show_tags` | 显示文章标签列表 |
|
||||||
|
|
||||||
|
::: tip
|
||||||
|
关闭不需要的元信息可以让卡片更简洁，在移动端尤其有效。建议至少保留分类或标签中的一项，帮助访客快速了解文章主题。
|
||||||
|
:::
|
||||||
|
|
||||||
|
### 文章简介显示行数（home_excerpt_lines）
|
||||||
|
|
||||||
|
控制文章卡片中摘要文本的最大显示行数。超出部分会被截断并显示省略号。
|
||||||
|
|
||||||
|
- 设为 `0` 时不显示摘要
|
||||||
|
- 设为 `2`–`3` 适合紧凑布局
|
||||||
|
- 设为 `4`–`5` 适合需要更多预览内容的场景
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
home_excerpt_lines: 3 # 默认，显示 3 行摘要
|
||||||
|
```
|
||||||
|
|
||||||
|
::: warning
|
||||||
|
此设置使用 CSS `-webkit-line-clamp` 实现多行截断，在所有现代浏览器中均可正常工作。摘要内容来自 Halo 后台文章编辑时的「摘要」字段，如未填写则自动从正文提取。
|
||||||
|
:::
|
||||||
|
|
||||||
|
### 文章加载方式（home_post_loading）
|
||||||
|
|
||||||
|
| 值 | 说明 |
|
||||||
|
| --- | --- |
|
||||||
|
| `pagination` | 传统分页，页面底部显示「较新/较旧」导航按钮（默认） |
|
||||||
|
| `infinite_scroll` | 无限滚动，滚动到底部自动加载下一页文章 |
|
||||||
|
|
||||||
|
#### 分页模式文案
|
||||||
|
|
||||||
|
选择 `pagination` 模式时，可自定义分页按钮的文案：
|
||||||
|
|
||||||
|
- **`home_label_newer`** — 指向较新文章的按钮文案，默认「较新」
|
||||||
|
- **`home_label_older`** — 指向较旧文章的按钮文案，默认「较旧」
|
||||||
|
|
||||||
|
#### 无限滚动模式文案
|
||||||
|
|
||||||
|
选择 `infinite_scroll` 模式时，可自定义加载状态的文案：
|
||||||
|
|
||||||
|
- **`home_label_loading`** — 正在加载时的提示文案，默认「加载中...」
|
||||||
|
- **`home_label_all_loaded`** — 所有文章加载完毕后的提示文案，默认「已加载全部文章」
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
# 英文站点示例
|
||||||
|
home_post_loading: pagination
|
||||||
|
home_label_newer: "Newer"
|
||||||
|
home_label_older: "Older"
|
||||||
|
|
||||||
|
# 或使用无限滚动
|
||||||
|
home_post_loading: infinite_scroll
|
||||||
|
home_label_loading: "Loading..."
|
||||||
|
home_label_all_loaded: "All posts loaded"
|
||||||
|
```
|
||||||
|
|
||||||
|
### 暂无文章文案（home_label_no_posts）
|
||||||
|
|
||||||
|
当站点没有任何已发布文章时，首页文章区域显示的提示文案。
|
||||||
|
|
||||||
|
### 文章数量文案（home_label_post_count）
|
||||||
|
|
||||||
|
显示在文章列表上方的文章总数统计文案。`{total}` 是占位符，会被替换为实际的文章数量。
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
# 默认
|
||||||
|
home_label_post_count: "共 {total} 篇文章"
|
||||||
|
# 显示效果：共 12 篇文章
|
||||||
|
|
||||||
|
# 英文示例
|
||||||
|
home_label_post_count: "{total} posts in total"
|
||||||
|
# 显示效果：12 posts in total
|
||||||
|
```
|
||||||
|
|
||||||
|
::: tip
|
||||||
|
`{total}` 占位符是必须的，如果文案中不包含此占位符，文章数量将无法正确显示。
|
||||||
|
:::
|
||||||
|
|
||||||
|
## 页面布局结构
|
||||||
|
|
||||||
|
首页的整体布局从上到下依次为：
|
||||||
|
|
||||||
|
```
|
||||||
|
┌─────────────────────────────┐
|
||||||
|
│ Hero 首屏区域 │ ← 可选，参见 Hero 配置
|
||||||
|
├─────────────────────────────┤
|
||||||
|
│ 置顶模块标题（置顶） │ ← home_pinned_title
|
||||||
|
│ ┌─────┐ ┌─────┐ ┌─────┐ │
|
||||||
|
│ │置顶1 │ │置顶2 │ │置顶3 │ │ ← 置顶文章卡片
|
||||||
|
│ └─────┘ └─────┘ └─────┘ │
|
||||||
|
├─────────────────────────────┤
|
||||||
|
│ 文章模块标题（文章） │ ← home_posts_title
|
||||||
|
│ ┌─────┐ ┌─────┐ ┌─────┐ │
|
||||||
|
│ │文章1 │ │文章2 │ │文章3 │ │ ← 普通文章卡片
|
||||||
|
│ └─────┘ └─────┘ └─────┘ │
|
||||||
|
│ ┌─────┐ ┌─────┐ ┌─────┐ │
|
||||||
|
│ │文章4 │ │文章5 │ │文章6 │ │
|
||||||
|
│ └─────┘ └─────┘ └─────┘ │
|
||||||
|
├─────────────────────────────┤
|
||||||
|
│ 较新 ← → 较旧 │ ← 分页导航（或无限滚动）
|
||||||
|
└─────────────────────────────┘
|
||||||
|
```
|
||||||
|
|
||||||
|
::: tip
|
||||||
|
文章卡片在桌面端以多列网格排列，在平板和移动端自动调整为单列或双列布局，确保在各种屏幕尺寸下的阅读体验。
|
||||||
|
:::
|
||||||
|
|
||||||
|
## 相关页面
|
||||||
|
|
||||||
|
- [Hero 首屏](/config/hero) — Hero 区域配置
|
||||||
|
- [文章](/config/article) — 文章详情页配置
|
||||||
|
- [样式设置](/config/style) — 容器宽度与动画效果配置
|
||||||
|
- [首页页面](/pages/home) — 首页模板与结构说明
|
||||||
@@ -0,0 +1,70 @@
|
|||||||
|
# 友情链接
|
||||||
|
|
||||||
|
友情链接模块用于展示与其他站点的互链关系，是博客社交属性的重要体现。WarmIsland 提供了三种展示样式，适配不同的视觉偏好。
|
||||||
|
|
||||||
|
## 配置项一览
|
||||||
|
|
||||||
|
| 配置项 | 类型 | 默认值 | 说明 |
|
||||||
|
| --- | --- | --- | --- |
|
||||||
|
| `links_page_title` | 文本 | `友情链接` | 页面标题 |
|
||||||
|
| `links_style` | 下拉 | `cards` | 展示样式：`grid` / `list` / `cards` |
|
||||||
|
|
||||||
|
## 前置依赖
|
||||||
|
|
||||||
|
::: danger
|
||||||
|
友情链接功能依赖 Halo 的 **PluginLinks** 插件。如果未安装此插件，友情链接页面将无法正常工作。
|
||||||
|
|
||||||
|
安装方式：Halo 后台 → **插件** → **安装** → 搜索「Links」→ 安装并启用。
|
||||||
|
:::
|
||||||
|
|
||||||
|
## 详细说明
|
||||||
|
|
||||||
|
### 页面标题（links_page_title）
|
||||||
|
|
||||||
|
友情链接页面的标题，显示在页面顶部。
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
links_page_title: "友情链接" # 默认
|
||||||
|
links_page_title: "友链" # 简称
|
||||||
|
links_page_title: "Friends" # 英文站点
|
||||||
|
```
|
||||||
|
|
||||||
|
### 展示样式（links_style）
|
||||||
|
|
||||||
|
| 值 | 说明 |
|
||||||
|
| --- | --- |
|
||||||
|
| `grid` | 网格样式，友链以均匀的网格卡片排列，紧凑整齐 |
|
||||||
|
| `list` | 列表样式，友链以水平列表项排列，信息展示更完整 |
|
||||||
|
| `cards` | 卡片样式，友链以独立卡片展示，视觉层次丰富（默认） |
|
||||||
|
|
||||||
|
::: tip
|
||||||
|
`cards` 样式最为推荐，它在视觉效果和信息展示之间取得了最佳平衡。`grid` 样式适合友链数量较多的站点，`list` 样式适合需要展示详细描述信息的场景。
|
||||||
|
:::
|
||||||
|
|
||||||
|
## 链接管理
|
||||||
|
|
||||||
|
友情链接的数据通过 Halo 后台管理，而非主题设置面板。管理步骤如下：
|
||||||
|
|
||||||
|
1. 登录 Halo 后台管理控制台
|
||||||
|
2. 进入 **链接** → **新建** 添加友情链接
|
||||||
|
3. 填写链接信息：
|
||||||
|
- **名称** — 站点名称
|
||||||
|
- **URL** — 站点地址
|
||||||
|
- **Logo** — 站点 Logo 或头像
|
||||||
|
- **描述** — 站点简介
|
||||||
|
- **分组** — 链接分组（可选）
|
||||||
|
4. 保存后，友情链接页面会自动展示
|
||||||
|
|
||||||
|
::: tip
|
||||||
|
建议为每个友链填写 Logo 和描述信息，这样在 `cards` 和 `grid` 样式下展示效果更佳。Logo 推荐使用正方形图片。
|
||||||
|
:::
|
||||||
|
|
||||||
|
### 分组管理
|
||||||
|
|
||||||
|
PluginLinks 支持链接分组功能。你可以将友链按不同类别分组（如「技术博客」「生活博客」「工具站点」等），页面会以分组为单位展示。
|
||||||
|
|
||||||
|
## 相关页面
|
||||||
|
|
||||||
|
- [朋友圈](/config/friends) — 朋友圈页面配置
|
||||||
|
- [页脚](/config/footer) — 页脚社交链接配置
|
||||||
|
- [友情链接页面](/pages/links) — 友链模板与结构说明
|
||||||
@@ -0,0 +1,63 @@
|
|||||||
|
# 留言板
|
||||||
|
|
||||||
|
留言板是 WarmIsland 主题提供的互动页面，访客可以在此留下评论和祝福。留言板基于 Halo 的评论系统实现，拥有独立的标题和副标题配置。
|
||||||
|
|
||||||
|
## 配置项一览
|
||||||
|
|
||||||
|
| 配置项 | 类型 | 默认值 | 说明 |
|
||||||
|
| --- | --- | --- | --- |
|
||||||
|
| `messageboard_title` | 文本 | `留言板` | 留言板标题 |
|
||||||
|
| `messageboard_subtitle` | 多行文本 | `在这里留下你的足迹吧 🌙` | 留言板副标题 |
|
||||||
|
|
||||||
|
## 详细说明
|
||||||
|
|
||||||
|
### 留言板标题（messageboard_title）
|
||||||
|
|
||||||
|
留言板页面的主标题，显示在页面顶部最醒目的位置。
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
messageboard_title: "留言板" # 默认
|
||||||
|
messageboard_title: "留言" # 简称
|
||||||
|
messageboard_title: "Guestbook" # 英文站点
|
||||||
|
```
|
||||||
|
|
||||||
|
### 留言板副标题（messageboard_subtitle）
|
||||||
|
|
||||||
|
标题下方的副标题，用于引导访客留言。默认为「在这里留下你的足迹吧 🌙」，支持 Emoji 和多行文本。
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
messageboard_subtitle: "在这里留下你的足迹吧 🌙" # 默认
|
||||||
|
messageboard_subtitle: "说点什么吧 ✨" # 替代方案
|
||||||
|
messageboard_subtitle: "Leave a message 🌙" # 英文站点
|
||||||
|
```
|
||||||
|
|
||||||
|
::: tip
|
||||||
|
副标题是营造留言板氛围的重要元素，建议使用温暖、亲切的措辞，配合 Emoji 效果更佳。
|
||||||
|
:::
|
||||||
|
|
||||||
|
## 自定义模板使用步骤
|
||||||
|
|
||||||
|
留言板页面需要通过 Halo 后台创建自定义页面来使用，具体步骤如下：
|
||||||
|
|
||||||
|
1. 登录 Halo 后台管理控制台
|
||||||
|
2. 进入 **页面** → **新建**
|
||||||
|
3. 填写页面基本信息：
|
||||||
|
- **标题** — 建议与 `messageboard_title` 保持一致
|
||||||
|
- **别名** — 如 `messageboard` 或 `guestbook`
|
||||||
|
4. 在页面模板选择中，选择 **留言板**（messageboard）模板
|
||||||
|
5. 发布页面
|
||||||
|
6. 将页面链接添加到导航菜单中
|
||||||
|
|
||||||
|
::: warning
|
||||||
|
如果未选择留言板模板，页面将使用默认模板渲染，不会显示留言板专属的标题、副标题和评论组件。请务必在创建页面时选择正确的模板。
|
||||||
|
:::
|
||||||
|
|
||||||
|
::: tip
|
||||||
|
留言板的评论功能依赖 Halo 的评论系统。确保已在 Halo 后台 → **设置** → **评论** 中开启评论功能，并在页面设置中允许评论。
|
||||||
|
:::
|
||||||
|
|
||||||
|
## 相关页面
|
||||||
|
|
||||||
|
- [评论](/config/comment) — 评论样式配置
|
||||||
|
- [导航栏](/config/navbar) — 将留言板添加到导航菜单
|
||||||
|
- [自定义页面](/pages/custom-page) — 自定义页面创建指南
|
||||||
@@ -0,0 +1,82 @@
|
|||||||
|
# 瞬间
|
||||||
|
|
||||||
|
瞬间是 WarmIsland 主题支持的内容模块之一，用于发布简短的想法、动态和碎片化内容。类似于社交媒体的「朋友圈」或「微博」，适合记录日常灵感和即时想法。
|
||||||
|
|
||||||
|
## 配置项一览
|
||||||
|
|
||||||
|
| 配置项 | 类型 | 默认值 | 说明 |
|
||||||
|
| --- | --- | --- | --- |
|
||||||
|
| `moments_page_title` | 文本 | `瞬间` | 页面标题 |
|
||||||
|
| `moments_style` | 下拉 | `timeline` | 展示样式：`timeline` / `cards` / `masonry` |
|
||||||
|
| `moments_loading_mode` | 下拉 | `infinite_scroll` | 加载方式：`infinite_scroll` / `pagination` |
|
||||||
|
| `moments_page_size` | 数字 | `10` | 每页显示数量 |
|
||||||
|
|
||||||
|
## 前置依赖
|
||||||
|
|
||||||
|
::: danger
|
||||||
|
瞬间功能依赖 Halo 的 **PluginMoments** 插件。如果未安装此插件，瞬间页面将无法正常工作。
|
||||||
|
|
||||||
|
安装方式：Halo 后台 → **插件** → **安装** → 搜索「Moments」→ 安装并启用。
|
||||||
|
:::
|
||||||
|
|
||||||
|
## 详细说明
|
||||||
|
|
||||||
|
### 页面标题（moments_page_title）
|
||||||
|
|
||||||
|
瞬间页面的标题，显示在页面顶部。可以根据个人偏好自定义：
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
moments_page_title: "瞬间" # 默认
|
||||||
|
moments_page_title: "动态" # 替代方案
|
||||||
|
moments_page_title: "Moments" # 英文站点
|
||||||
|
```
|
||||||
|
|
||||||
|
### 展示样式（moments_style）
|
||||||
|
|
||||||
|
| 值 | 说明 |
|
||||||
|
| --- | --- |
|
||||||
|
| `timeline` | 时间线样式，按时间顺序垂直排列，左侧有时间轴连线（默认） |
|
||||||
|
| `cards` | 卡片样式，以网格卡片形式展示，每条瞬间独立成卡 |
|
||||||
|
| `masonry` | 瀑布流样式，类似 Pinterest 的错落排列，适合图片较多的瞬间 |
|
||||||
|
|
||||||
|
::: tip
|
||||||
|
如果你的瞬间以文字为主，推荐 `timeline` 样式，时间感更强；如果图片较多，推荐 `masonry` 样式，能更好地展示图片内容。
|
||||||
|
:::
|
||||||
|
|
||||||
|
### 加载方式（moments_loading_mode）
|
||||||
|
|
||||||
|
| 值 | 说明 |
|
||||||
|
| --- | --- |
|
||||||
|
| `infinite_scroll` | 无限滚动，滚动到底部自动加载更多（默认） |
|
||||||
|
| `pagination` | 传统分页，页面底部显示分页导航 |
|
||||||
|
|
||||||
|
### 每页显示数量（moments_page_size）
|
||||||
|
|
||||||
|
每次加载/每页显示的瞬间数量。默认为 10 条。
|
||||||
|
|
||||||
|
- 设为较小值（5–8）可加快首屏加载速度
|
||||||
|
- 设为较大值（15–20）可减少翻页/加载次数
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
moments_page_size: 10 # 默认
|
||||||
|
```
|
||||||
|
|
||||||
|
## 内置功能
|
||||||
|
|
||||||
|
### 图片网格
|
||||||
|
|
||||||
|
瞬间中包含的多张图片会以网格形式排列展示，自动计算列数和尺寸，确保图片不变形。
|
||||||
|
|
||||||
|
### 点赞与评论
|
||||||
|
|
||||||
|
每条瞬间支持点赞和评论功能，由 Halo 核心和 PluginMoments 插件提供。
|
||||||
|
|
||||||
|
### 图片灯箱
|
||||||
|
|
||||||
|
瞬间中的图片支持点击放大查看，基于 LightGallery 实现，与文章详情页的灯箱体验一致。
|
||||||
|
|
||||||
|
## 相关页面
|
||||||
|
|
||||||
|
- [图库](/config/photos) — 图库页面配置
|
||||||
|
- [评论](/config/comment) — 评论样式配置
|
||||||
|
- [瞬间页面](/pages/moments) — 瞬间模板与结构说明
|
||||||
@@ -0,0 +1,78 @@
|
|||||||
|
# 导航栏
|
||||||
|
|
||||||
|
导航栏是站点全局可见的核心组件，承载着页面导航、搜索入口和主题切换等功能。WarmIsland 提供了三种导航栏样式和灵活的功能开关。
|
||||||
|
|
||||||
|
## 配置项一览
|
||||||
|
|
||||||
|
| 配置项 | 类型 | 默认值 | 说明 |
|
||||||
|
| --- | --- | --- | --- |
|
||||||
|
| `navbar_style` | 下拉 | `glass` | 导航栏样式：`glass` / `minimal` / `float` |
|
||||||
|
| `navbar_show_search` | 开关 | `true` | 显示搜索按钮 |
|
||||||
|
| `navbar_show_theme_switch` | 开关 | `true` | 显示主题切换按钮 |
|
||||||
|
|
||||||
|
## 详细说明
|
||||||
|
|
||||||
|
### 导航栏样式（navbar_style）
|
||||||
|
|
||||||
|
| 值 | 说明 |
|
||||||
|
| --- | --- |
|
||||||
|
| `glass` | 毛玻璃效果，背景模糊半透明，与页面内容产生层次感（默认） |
|
||||||
|
| `minimal` | 极简风格，纯色背景，线条简洁，适合内容导向型站点 |
|
||||||
|
| `float` | 浮动样式，导航栏悬浮于内容之上，带有圆角和阴影 |
|
||||||
|
|
||||||
|
::: tip
|
||||||
|
`glass` 样式在滚动时会产生毛玻璃模糊效果，视觉效果最佳但需要浏览器支持 `backdrop-filter`。在不支持的浏览器中会自动降级为半透明背景。
|
||||||
|
:::
|
||||||
|
|
||||||
|
### 显示搜索按钮（navbar_show_search）
|
||||||
|
|
||||||
|
开启后，导航栏右侧会显示搜索按钮。点击按钮或按 `Ctrl + K`（macOS 为 `⌘ + K`）快捷键即可打开搜索面板。
|
||||||
|
|
||||||
|
::: danger
|
||||||
|
搜索功能依赖 Halo 的 **PluginSearchWidget** 插件。如果未安装此插件，搜索按钮将无法正常工作。请确保已在 Halo 后台安装并启用该插件。
|
||||||
|
|
||||||
|
安装方式：Halo 后台 → **插件** → **安装** → 搜索「Search Widget」→ 安装并启用。
|
||||||
|
:::
|
||||||
|
|
||||||
|
### 显示主题切换按钮（navbar_show_theme_switch）
|
||||||
|
|
||||||
|
开启后，导航栏右侧会显示主题切换按钮，访客可以在浅色/深色模式之间切换。按钮的标签文案可在 [基础设置](/config/basic) 中的 `label_theme_switch` 配置项自定义。
|
||||||
|
|
||||||
|
## 菜单配置
|
||||||
|
|
||||||
|
导航栏的菜单项通过 Halo 后台管理，而非主题设置面板。配置步骤如下：
|
||||||
|
|
||||||
|
1. 登录 Halo 后台管理控制台
|
||||||
|
2. 进入 **菜单** → 创建或编辑菜单组
|
||||||
|
3. 添加菜单项，支持以下类型：
|
||||||
|
- **页面** — 链接到已创建的页面
|
||||||
|
- **分类** — 链接到文章分类
|
||||||
|
- **自定义链接** — 任意 URL
|
||||||
|
4. 确保菜单组被设置为主菜单（主题会自动读取主菜单渲染导航栏）
|
||||||
|
|
||||||
|
::: tip
|
||||||
|
建议菜单项数量控制在 5–7 个以内，过多会导致移动端体验下降。移动端会自动切换为汉堡菜单（☰），点击后展开侧滑菜单面板。
|
||||||
|
:::
|
||||||
|
|
||||||
|
## 快捷键
|
||||||
|
|
||||||
|
| 快捷键 | 功能 |
|
||||||
|
| --- | --- |
|
||||||
|
| `Ctrl + K` / `⌘ + K` | 打开搜索面板 |
|
||||||
|
| `Esc` | 关闭搜索面板 |
|
||||||
|
|
||||||
|
## 移动端适配
|
||||||
|
|
||||||
|
在移动端（屏幕宽度 ≤ 768px），导航栏会自动进行以下调整：
|
||||||
|
|
||||||
|
- 菜单项折叠为汉堡菜单（☰）
|
||||||
|
- 点击汉堡图标展开侧滑菜单面板
|
||||||
|
- 搜索和主题切换按钮移入侧滑菜单
|
||||||
|
- 导航栏高度适当缩减以节省屏幕空间
|
||||||
|
|
||||||
|
## 相关页面
|
||||||
|
|
||||||
|
- [基础设置](/config/basic) — 站点名称、Logo、标签文案配置
|
||||||
|
- [样式设置](/config/style) — 配色方案与动画效果配置
|
||||||
|
- [Hero 首屏](/config/hero) — 首屏区域配置
|
||||||
|
- [快速开始](/guide/getting-started) — 导航菜单配置步骤
|
||||||
@@ -0,0 +1,101 @@
|
|||||||
|
# 图库
|
||||||
|
|
||||||
|
图库是 WarmIsland 主题支持的照片展示模块，提供多种布局样式和分组功能，适合摄影师、设计师或任何需要展示图片集合的用户。
|
||||||
|
|
||||||
|
## 配置项一览
|
||||||
|
|
||||||
|
| 配置项 | 类型 | 默认值 | 说明 |
|
||||||
|
| --- | --- | --- | --- |
|
||||||
|
| `photos_page_title` | 文本 | `图库` | 页面标题 |
|
||||||
|
| `photos_style` | 下拉 | `masonry` | 展示样式：`masonry` / `grid` / `carousel` |
|
||||||
|
| `photos_columns` | 数字 | `3` | 列数 |
|
||||||
|
| `photos_show_ungrouped` | 开关 | `false` | 显示未分组图片 |
|
||||||
|
| `photos_show_group_title` | 开关 | `true` | 显示分组标题 |
|
||||||
|
|
||||||
|
## 前置依赖
|
||||||
|
|
||||||
|
::: danger
|
||||||
|
图库功能依赖 Halo 的 **PluginPhotos** 插件。如果未安装此插件，图库页面将无法正常工作。
|
||||||
|
|
||||||
|
安装方式：Halo 后台 → **插件** → **安装** → 搜索「Photos」→ 安装并启用。
|
||||||
|
:::
|
||||||
|
|
||||||
|
## 详细说明
|
||||||
|
|
||||||
|
### 页面标题（photos_page_title）
|
||||||
|
|
||||||
|
图库页面的标题，显示在页面顶部。
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
photos_page_title: "图库" # 默认
|
||||||
|
photos_page_title: "相册" # 替代方案
|
||||||
|
photos_page_title: "Gallery" # 英文站点
|
||||||
|
```
|
||||||
|
|
||||||
|
### 展示样式（photos_style）
|
||||||
|
|
||||||
|
| 值 | 说明 |
|
||||||
|
| --- | --- |
|
||||||
|
| `masonry` | 瀑布流样式，图片按原始比例错落排列，充分利用空间（默认） |
|
||||||
|
| `grid` | 网格样式，图片统一裁剪为正方形或固定比例，整齐划一 |
|
||||||
|
| `carousel` | 轮播样式，图片以轮播方式逐张展示，适合精选照片 |
|
||||||
|
|
||||||
|
::: tip
|
||||||
|
`masonry` 样式适合图片尺寸差异较大的场景（如混合横竖版照片）；`grid` 样式适合图片尺寸统一的场景（如统一裁剪的摄影作品）；`carousel` 样式适合精选少量优质照片展示。
|
||||||
|
:::
|
||||||
|
|
||||||
|
### 列数（photos_columns）
|
||||||
|
|
||||||
|
控制网格和瀑布流布局中的图片列数。默认为 3 列。
|
||||||
|
|
||||||
|
- 桌面端按设定列数显示
|
||||||
|
- 平板端自动缩减列数
|
||||||
|
- 移动端固定为 1–2 列
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
photos_columns: 3 # 默认，3 列
|
||||||
|
photos_columns: 4 # 更紧凑的布局
|
||||||
|
photos_columns: 2 # 更宽松的布局
|
||||||
|
```
|
||||||
|
|
||||||
|
::: tip
|
||||||
|
列数选择建议：2 列适合大图展示，3 列是通用平衡选择，4 列及以上适合缩略图式浏览。
|
||||||
|
:::
|
||||||
|
|
||||||
|
### 显示未分组图片（photos_show_ungrouped）
|
||||||
|
|
||||||
|
开启后，「全部」视图中会显示未分配到任何分组的图片。未分组图片区域的标题为「全部」。
|
||||||
|
|
||||||
|
关闭时，未分组的图片仅在「全部」视图中以合并方式展示，不单独标注分组。
|
||||||
|
|
||||||
|
### 显示分组标题（photos_show_group_title）
|
||||||
|
|
||||||
|
控制「全部」视图中是否显示各分组的标题。
|
||||||
|
|
||||||
|
- **开启**（默认）— 每个分组的图片前会显示分组名称作为分隔标题
|
||||||
|
- **关闭** — 所有图片合并展示，不显示分组标题
|
||||||
|
|
||||||
|
::: tip
|
||||||
|
如果分组较多且每个分组图片较少，建议关闭分组标题以获得更流畅的浏览体验。如果分组清晰且每个分组图片较多，建议开启以帮助访客快速定位。
|
||||||
|
:::
|
||||||
|
|
||||||
|
## 内置功能
|
||||||
|
|
||||||
|
### 分组导航
|
||||||
|
|
||||||
|
图库页面顶部显示分组导航标签，访客可以按分组筛选查看图片。点击「全部」查看所有图片，点击具体分组名称只查看该分组的图片。
|
||||||
|
|
||||||
|
### 图片灯箱
|
||||||
|
|
||||||
|
所有图片支持点击放大查看，基于 LightGallery 实现：
|
||||||
|
|
||||||
|
- 点击图片弹出灯箱查看大图
|
||||||
|
- 支持左右切换浏览同组图片
|
||||||
|
- 支持缩放、全屏等操作
|
||||||
|
- 按 `Esc` 或点击背景关闭灯箱
|
||||||
|
|
||||||
|
## 相关页面
|
||||||
|
|
||||||
|
- [瞬间](/config/moments) — 瞬间页面配置
|
||||||
|
- [样式设置](/config/style) — 圆角与容器宽度配置
|
||||||
|
- [图库页面](/pages/photos) — 图库模板与结构说明
|
||||||
@@ -0,0 +1,147 @@
|
|||||||
|
# 样式设置
|
||||||
|
|
||||||
|
样式设置控制 WarmIsland 主题的全局视觉表现，包括配色方案、强调色、圆角风格、容器宽度、动画效果以及自定义 CSS。通过这些配置，你可以快速打造出独一无二的站点外观。
|
||||||
|
|
||||||
|
## 配置项一览
|
||||||
|
|
||||||
|
| 配置项 | 类型 | 默认值 | 说明 |
|
||||||
|
| --- | --- | --- | --- |
|
||||||
|
| `color_scheme` | 单选 | `system` | 配色方案：`system` / `light` / `dark` |
|
||||||
|
| `accent_color` | 颜色 | `#d4764e` | 全局强调色 |
|
||||||
|
| `border_radius` | 下拉 | `medium` | 圆角风格：`small` / `medium` / `large` |
|
||||||
|
| `layout_container_width` | 下拉 | `medium` | 容器宽度：`narrow` / `medium` / `wide` |
|
||||||
|
| `layout_sidebar` | 开关 | `false` | 启用侧边栏（开发中） |
|
||||||
|
| `animation_enabled` | 开关 | `true` | 全局动画总开关 |
|
||||||
|
| `animation_breath` | 开关 | `true` | 呼吸动画效果 |
|
||||||
|
| `animation_scroll_reveal` | 开关 | `true` | 滚动渐入动画 |
|
||||||
|
| `animation_cursor_glow` | 开关 | `false` | 光感跟随效果 |
|
||||||
|
| `custom_css` | 代码 | — | 自定义 CSS 代码 |
|
||||||
|
|
||||||
|
## 详细说明
|
||||||
|
|
||||||
|
### 配色方案（color_scheme）
|
||||||
|
|
||||||
|
控制站点的明暗模式，提供三种选择：
|
||||||
|
|
||||||
|
| 值 | 说明 |
|
||||||
|
| --- | --- |
|
||||||
|
| `system` | 跟随系统偏好，自动适配用户操作系统的深色/浅色模式设置 |
|
||||||
|
| `light` | 始终使用浅色模式 |
|
||||||
|
| `dark` | 始终使用深色模式 |
|
||||||
|
|
||||||
|
::: tip
|
||||||
|
选择 `system` 时，主题会监听操作系统的 `prefers-color-scheme` 媒体查询，实时响应用户的系统设置变化。访问者也可以通过导航栏的主题切换按钮手动覆盖当前模式。
|
||||||
|
:::
|
||||||
|
|
||||||
|
### 强调色（accent_color）
|
||||||
|
|
||||||
|
强调色是 WarmIsland 主题的灵魂，它会影响全站以下元素的颜色：
|
||||||
|
|
||||||
|
- 链接悬停色
|
||||||
|
- 按钮背景色
|
||||||
|
- 标签高亮色
|
||||||
|
- 进度条颜色
|
||||||
|
- 选中状态颜色
|
||||||
|
- Hero 区域渐变色的组成部分
|
||||||
|
|
||||||
|
默认值 `#d4764e` 是暖屿标志性的暖橘色，与主题的温暖气质相呼应。
|
||||||
|
|
||||||
|
::: tip
|
||||||
|
选择强调色时，建议同时考虑浅色和深色模式下的可读性。可以在 [CSS 变量](/customize/css-variables) 页面查看所有受影响的变量，进行更精细的调整。
|
||||||
|
:::
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
# 常见强调色参考
|
||||||
|
accent_color: "#d4764e" # 暖橘（默认）
|
||||||
|
accent_color: "#6366f1" # 靛蓝
|
||||||
|
accent_color: "#10b981" # 翠绿
|
||||||
|
accent_color: "#f43f5e" # 玫红
|
||||||
|
accent_color: "#8b5cf6" # 紫罗兰
|
||||||
|
```
|
||||||
|
|
||||||
|
### 圆角风格（border_radius）
|
||||||
|
|
||||||
|
控制全站组件的圆角大小，影响卡片、按钮、输入框等元素：
|
||||||
|
|
||||||
|
| 值 | 说明 | 适用场景 |
|
||||||
|
| --- | --- | --- |
|
||||||
|
| `small` | 小圆角，偏硬朗风格 | 技术博客、极简风格 |
|
||||||
|
| `medium` | 中等圆角，平衡美观与严谨 | 通用场景（默认） |
|
||||||
|
| `large` | 大圆角，柔和亲切 | 生活博客、个人日记 |
|
||||||
|
|
||||||
|
### 容器宽度（layout_container_width）
|
||||||
|
|
||||||
|
控制页面主内容区域的最大宽度：
|
||||||
|
|
||||||
|
| 值 | 说明 |
|
||||||
|
| --- | --- |
|
||||||
|
| `narrow` | 窄容器，适合以文字阅读为主的站点 |
|
||||||
|
| `medium` | 中等宽度，兼顾阅读体验与信息密度（默认） |
|
||||||
|
| `wide` | 宽容器，适合图片较多的站点或需要更大展示空间的场景 |
|
||||||
|
|
||||||
|
### 侧边栏（layout_sidebar）
|
||||||
|
|
||||||
|
::: danger
|
||||||
|
侧边栏功能目前仍在开发中，此选项暂不可用。开启后不会产生实际效果，请关注后续版本更新。
|
||||||
|
:::
|
||||||
|
|
||||||
|
### 动画效果
|
||||||
|
|
||||||
|
WarmIsland 提供了丰富的动画效果，所有动画都可以独立开关：
|
||||||
|
|
||||||
|
#### 全局动画总开关（animation_enabled）
|
||||||
|
|
||||||
|
关闭后，以下所有动画效果将一并禁用。适合追求极致性能或偏好静态页面的用户。
|
||||||
|
|
||||||
|
#### 呼吸动画（animation_breath）
|
||||||
|
|
||||||
|
启用后，Hero 区域的背景光球会产生缓慢的呼吸脉动效果，营造温暖柔和的氛围感。光球的大小和透明度会周期性变化。
|
||||||
|
|
||||||
|
#### 滚动渐入（animation_scroll_reveal）
|
||||||
|
|
||||||
|
启用后，页面元素在滚动进入视口时会以淡入+上移的方式渐次出现，增强浏览的节奏感。
|
||||||
|
|
||||||
|
::: tip
|
||||||
|
滚动渐入动画基于 Intersection Observer API 实现，对性能影响极小。如果页面内容较多，建议保持开启以提升浏览体验。
|
||||||
|
:::
|
||||||
|
|
||||||
|
#### 光感跟随（animation_cursor_glow）
|
||||||
|
|
||||||
|
启用后，鼠标移动时会在光标附近产生柔和的光晕跟随效果，为页面增添灵动感。
|
||||||
|
|
||||||
|
::: warning
|
||||||
|
光感跟随效果在移动端不会生效（因为移动端没有鼠标光标）。在低端设备上可能会影响渲染性能，如遇卡顿建议关闭。
|
||||||
|
:::
|
||||||
|
|
||||||
|
### 自定义 CSS（custom_css）
|
||||||
|
|
||||||
|
在此处编写自定义 CSS 代码，会注入到全站所有页面的 `<style>` 标签中。可以用来覆盖主题默认样式或添加全新样式。
|
||||||
|
|
||||||
|
```css
|
||||||
|
/* 示例：修改正文字体 */
|
||||||
|
body {
|
||||||
|
font-family: "LXGW WenKai", sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 示例：自定义卡片悬停效果 */
|
||||||
|
.post-card:hover {
|
||||||
|
transform: translateY(-4px);
|
||||||
|
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 示例：隐藏特定元素 */
|
||||||
|
.hero-scroll-indicator {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
::: tip
|
||||||
|
如需更系统地自定义样式，推荐使用 [CSS 变量](/customize/css-variables) 方式，只需修改变量值即可影响全站，无需逐个覆盖选择器。详见 [自定义 CSS](/customize/custom-css) 页面。
|
||||||
|
:::
|
||||||
|
|
||||||
|
## 相关页面
|
||||||
|
|
||||||
|
- [CSS 变量](/customize/css-variables) — 全部可用的 CSS 变量列表
|
||||||
|
- [自定义 CSS](/customize/custom-css) — 深入了解自定义样式的方法
|
||||||
|
- [基础设置](/config/basic) — 站点名称、Logo 等基础信息配置
|
||||||
|
- [导航栏](/config/navbar) — 导航栏样式与功能配置
|
||||||
@@ -0,0 +1,244 @@
|
|||||||
|
# CSS 变量
|
||||||
|
|
||||||
|
WarmIsland 主题使用 CSS 自定义属性（CSS Variables）构建完整的样式系统，方便用户通过覆盖变量来自定义主题外观。
|
||||||
|
|
||||||
|
## 颜色变量
|
||||||
|
|
||||||
|
### 浅色模式
|
||||||
|
|
||||||
|
```css
|
||||||
|
:root {
|
||||||
|
--bg: #faf7f2;
|
||||||
|
--bg-raised: #f3ede5;
|
||||||
|
--bg-overlay: rgba(250, 247, 242, 0.85);
|
||||||
|
--ink: #2c2420;
|
||||||
|
--ink-2: #7a6e64;
|
||||||
|
--ink-3: #b5a99e;
|
||||||
|
--rule: #e8e0d6;
|
||||||
|
--accent: #d4764e;
|
||||||
|
--accent-hover: #c4613a;
|
||||||
|
--accent-bg: #fdf0e8;
|
||||||
|
--mist-pink: #f0e4de;
|
||||||
|
--sea-salt: #e8e0d6;
|
||||||
|
--caramel: #8b6f5e;
|
||||||
|
--glass-bg: rgba(250, 247, 242, 0.72);
|
||||||
|
--glass-border: rgba(232, 224, 214, 0.5);
|
||||||
|
--shadow-sm: 0 1px 3px rgba(44, 36, 32, 0.06);
|
||||||
|
--shadow-md: 0 4px 16px rgba(44, 36, 32, 0.08);
|
||||||
|
--shadow-lg: 0 8px 32px rgba(44, 36, 32, 0.12);
|
||||||
|
--shadow-glow: 0 0 40px rgba(212, 118, 78, 0.15);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### 深色模式
|
||||||
|
|
||||||
|
```css
|
||||||
|
html.dark {
|
||||||
|
--bg: #1a1614;
|
||||||
|
--bg-raised: #242018;
|
||||||
|
--bg-overlay: rgba(26, 22, 20, 0.85);
|
||||||
|
--ink: #ede6de;
|
||||||
|
--ink-2: #9a8e84;
|
||||||
|
--ink-3: #5e544a;
|
||||||
|
--rule: #2e2822;
|
||||||
|
--accent: #e8955f;
|
||||||
|
--accent-hover: #f0a872;
|
||||||
|
--accent-bg: #2a1e16;
|
||||||
|
--mist-pink: #2e2420;
|
||||||
|
--sea-salt: #2e2822;
|
||||||
|
--caramel: #a08878;
|
||||||
|
--glass-bg: rgba(26, 22, 20, 0.72);
|
||||||
|
--glass-border: rgba(46, 40, 34, 0.5);
|
||||||
|
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2);
|
||||||
|
--shadow-md: 0 4px 16px rgba(0, 0, 0, 0.25);
|
||||||
|
--shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.35);
|
||||||
|
--shadow-glow: 0 0 40px rgba(232, 149, 95, 0.12);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## 字体变量
|
||||||
|
|
||||||
|
```css
|
||||||
|
:root {
|
||||||
|
--font-sans: 'Noto Serif SC', 'Source Han Serif SC', Georgia, serif;
|
||||||
|
--font-body: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||||
|
--font-mono: 'JetBrains Mono', 'Fira Code', monospace;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
| 变量 | 用途 |
|
||||||
|
|------|------|
|
||||||
|
| `--font-sans` | 标题、强调文字（衬线体） |
|
||||||
|
| `--font-body` | 正文、UI 文字（无衬线体） |
|
||||||
|
| `--font-mono` | 代码（等宽体） |
|
||||||
|
|
||||||
|
## 字号变量
|
||||||
|
|
||||||
|
使用 `clamp()` 实现响应式字号：
|
||||||
|
|
||||||
|
```css
|
||||||
|
:root {
|
||||||
|
--text-xs: clamp(0.7rem, 0.66rem + 0.2vw, 0.75rem);
|
||||||
|
--text-sm: clamp(0.8rem, 0.76rem + 0.2vw, 0.875rem);
|
||||||
|
--text-base: clamp(0.938rem, 0.89rem + 0.24vw, 1rem);
|
||||||
|
--text-md: clamp(1.05rem, 0.99rem + 0.3vw, 1.125rem);
|
||||||
|
--text-lg: clamp(1.15rem, 1.06rem + 0.45vw, 1.25rem);
|
||||||
|
--text-xl: clamp(1.3rem, 1.16rem + 0.7vw, 1.5rem);
|
||||||
|
--text-2xl: clamp(1.55rem, 1.34rem + 1.05vw, 1.875rem);
|
||||||
|
--text-3xl: clamp(1.85rem, 1.52rem + 1.65vw, 2.25rem);
|
||||||
|
--text-4xl: clamp(2.15rem, 1.7rem + 2.25vw, 3rem);
|
||||||
|
--text-5xl: clamp(2.6rem, 1.9rem + 3.5vw, 3.75rem);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
| 变量 | 最小值 | 最大值 | 典型用途 |
|
||||||
|
|------|--------|--------|----------|
|
||||||
|
| `--text-xs` | 0.7rem | 0.75rem | 辅助标签、日期 |
|
||||||
|
| `--text-sm` | 0.8rem | 0.875rem | 次要文字、描述 |
|
||||||
|
| `--text-base` | 0.938rem | 1rem | 正文 |
|
||||||
|
| `--text-md` | 1.05rem | 1.125rem | 页面正文 |
|
||||||
|
| `--text-lg` | 1.15rem | 1.25rem | 卡片标题 |
|
||||||
|
| `--text-xl` | 1.3rem | 1.5rem | 小节标题 |
|
||||||
|
| `--text-2xl` | 1.55rem | 1.875rem | 区块标题 |
|
||||||
|
| `--text-3xl` | 1.85rem | 2.25rem | 页面标题 |
|
||||||
|
| `--text-4xl` | 2.15rem | 3rem | 大标题 |
|
||||||
|
| `--text-5xl` | 2.6rem | 3.75rem | Hero 标题 |
|
||||||
|
|
||||||
|
## 间距变量
|
||||||
|
|
||||||
|
```css
|
||||||
|
:root {
|
||||||
|
--space-xs: 0.25rem;
|
||||||
|
--space-sm: 0.5rem;
|
||||||
|
--space-md: 1rem;
|
||||||
|
--space-lg: 1.5rem;
|
||||||
|
--space-xl: 2rem;
|
||||||
|
--space-2xl: 3rem;
|
||||||
|
--space-3xl: 4rem;
|
||||||
|
--space-4xl: 6rem;
|
||||||
|
--container-sm: 640px;
|
||||||
|
--container-md: 768px;
|
||||||
|
--container-lg: 1024px;
|
||||||
|
--container-xl: 1200px;
|
||||||
|
--content-max: 800px;
|
||||||
|
--section-spacing: clamp(3rem, 2rem + 3vw, 6rem);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## 圆角变量
|
||||||
|
|
||||||
|
圆角使用 SCSS 变量定义，不在运行时作为 CSS 变量暴露：
|
||||||
|
|
||||||
|
```scss
|
||||||
|
$border-radius-sm: 8px;
|
||||||
|
$border-radius-md: 12px;
|
||||||
|
$border-radius-lg: 16px;
|
||||||
|
$border-radius-xl: 24px;
|
||||||
|
$border-radius-full: 9999px;
|
||||||
|
```
|
||||||
|
|
||||||
|
## 阴影变量
|
||||||
|
|
||||||
|
```css
|
||||||
|
:root {
|
||||||
|
--shadow-sm: 0 1px 3px rgba(44, 36, 32, 0.06);
|
||||||
|
--shadow-md: 0 4px 16px rgba(44, 36, 32, 0.08);
|
||||||
|
--shadow-lg: 0 8px 32px rgba(44, 36, 32, 0.12);
|
||||||
|
--shadow-glow: 0 0 40px rgba(212, 118, 78, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
html.dark {
|
||||||
|
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2);
|
||||||
|
--shadow-md: 0 4px 16px rgba(0, 0, 0, 0.25);
|
||||||
|
--shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.35);
|
||||||
|
--shadow-glow: 0 0 40px rgba(232, 149, 95, 0.12);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## 动画变量
|
||||||
|
|
||||||
|
```css
|
||||||
|
:root {
|
||||||
|
--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
|
||||||
|
--ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
|
||||||
|
--ease-in-out-cubic: cubic-bezier(0.65, 0, 0.35, 1);
|
||||||
|
--duration-fast: 150ms;
|
||||||
|
--duration-normal: 300ms;
|
||||||
|
--duration-slow: 500ms;
|
||||||
|
--duration-breath: 3s;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## 行高变量
|
||||||
|
|
||||||
|
```css
|
||||||
|
:root {
|
||||||
|
--leading-none: 1;
|
||||||
|
--leading-tight: 1.2;
|
||||||
|
--leading-snug: 1.35;
|
||||||
|
--leading-normal: 1.6;
|
||||||
|
--leading-relaxed: 1.75;
|
||||||
|
--leading-loose: 2;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
| 变量 | 值 | 用途 |
|
||||||
|
|------|-----|------|
|
||||||
|
| `--leading-none` | 1 | 紧凑元素 |
|
||||||
|
| `--leading-tight` | 1.2 | 标题 |
|
||||||
|
| `--leading-snug` | 1.35 | 小标题 |
|
||||||
|
| `--leading-normal` | 1.6 | 正文 |
|
||||||
|
| `--leading-relaxed` | 1.75 | 长文阅读 |
|
||||||
|
| `--leading-loose` | 2 | 宽松排版 |
|
||||||
|
|
||||||
|
## 字间距变量
|
||||||
|
|
||||||
|
```css
|
||||||
|
:root {
|
||||||
|
--tracking-tight: -0.02em;
|
||||||
|
--tracking-normal: 0;
|
||||||
|
--tracking-wide: 0.04em;
|
||||||
|
--tracking-wider: 0.08em;
|
||||||
|
--tracking-widest: 0.12em;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
| 变量 | 值 | 用途 |
|
||||||
|
|------|-----|------|
|
||||||
|
| `--tracking-tight` | -0.02em | 大标题 |
|
||||||
|
| `--tracking-normal` | 0 | 正文 |
|
||||||
|
| `--tracking-wide` | 0.04em | 辅助文字 |
|
||||||
|
| `--tracking-wider` | 0.08em | 标签、日期 |
|
||||||
|
| `--tracking-widest` | 0.12em | 大写标签 |
|
||||||
|
|
||||||
|
## 如何覆盖变量
|
||||||
|
|
||||||
|
### 方法一：主题设置
|
||||||
|
|
||||||
|
在 Halo 后台 → **外观** → **主题** → **样式设置** 中的「自定义 CSS」字段添加覆盖规则：
|
||||||
|
|
||||||
|
```css
|
||||||
|
:root {
|
||||||
|
--accent: #e85d75;
|
||||||
|
--accent-hover: #d44a64;
|
||||||
|
--accent-bg: #fdf0f3;
|
||||||
|
}
|
||||||
|
|
||||||
|
html.dark {
|
||||||
|
--accent: #f07090;
|
||||||
|
--accent-hover: #f5889f;
|
||||||
|
--accent-bg: #2a1a1e;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### 方法二：外部 CSS
|
||||||
|
|
||||||
|
在 Halo 后台 → **外观** → **主题** → **页脚设置** 中的「自定义 HTML」字段引入外部 CSS：
|
||||||
|
|
||||||
|
```html
|
||||||
|
<link rel="stylesheet" href="https://your-cdn.com/custom.css" />
|
||||||
|
```
|
||||||
|
|
||||||
|
::: warning
|
||||||
|
覆盖变量时，务必同时覆盖深色模式的对应变量（`html.dark` 选择器下），否则深色模式下可能出现颜色不协调的问题。
|
||||||
|
:::
|
||||||
@@ -0,0 +1,300 @@
|
|||||||
|
# 自定义 CSS
|
||||||
|
|
||||||
|
WarmIsland 主题提供了灵活的自定义 CSS 能力，让你无需修改源码即可调整主题外观。
|
||||||
|
|
||||||
|
## 两种方法
|
||||||
|
|
||||||
|
### 方法一：主题设置（推荐）
|
||||||
|
|
||||||
|
在 Halo 后台 → **外观** → **主题** → **样式设置** 中找到「自定义 CSS」字段，直接输入 CSS 代码。
|
||||||
|
|
||||||
|
**优点**：
|
||||||
|
- 随主题数据保存，升级主题不丢失
|
||||||
|
- 无需额外的网络请求
|
||||||
|
- 实时生效
|
||||||
|
|
||||||
|
**缺点**：
|
||||||
|
- 不适合大量 CSS 代码
|
||||||
|
- 没有语法高亮和自动补全
|
||||||
|
|
||||||
|
### 方法二：外部 CSS 文件
|
||||||
|
|
||||||
|
在 Halo 后台 → **外观** → **主题** → **页脚设置** 中的「自定义 HTML」字段引入外部 CSS：
|
||||||
|
|
||||||
|
```html
|
||||||
|
<link rel="stylesheet" href="https://your-cdn.com/custom.css" />
|
||||||
|
```
|
||||||
|
|
||||||
|
**优点**：
|
||||||
|
- 可以使用代码编辑器编写，有完整的开发体验
|
||||||
|
- 适合大量自定义样式
|
||||||
|
- 可以版本控制
|
||||||
|
|
||||||
|
**缺点**：
|
||||||
|
- 需要额外的网络请求
|
||||||
|
- 需要自己托管 CSS 文件
|
||||||
|
- 主题升级后需要检查兼容性
|
||||||
|
|
||||||
|
## 实用示例
|
||||||
|
|
||||||
|
### 更改强调色
|
||||||
|
|
||||||
|
将默认的赤陶橙改为玫瑰粉：
|
||||||
|
|
||||||
|
```css
|
||||||
|
:root {
|
||||||
|
--accent: #e85d75;
|
||||||
|
--accent-hover: #d44a64;
|
||||||
|
--accent-bg: #fdf0f3;
|
||||||
|
}
|
||||||
|
|
||||||
|
html.dark {
|
||||||
|
--accent: #f07090;
|
||||||
|
--accent-hover: #f5889f;
|
||||||
|
--accent-bg: #2a1a1e;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
改为薄荷绿：
|
||||||
|
|
||||||
|
```css
|
||||||
|
:root {
|
||||||
|
--accent: #3d9970;
|
||||||
|
--accent-hover: #2d8060;
|
||||||
|
--accent-bg: #edf7f2;
|
||||||
|
}
|
||||||
|
|
||||||
|
html.dark {
|
||||||
|
--accent: #5cb895;
|
||||||
|
--accent-hover: #72c8a8;
|
||||||
|
--accent-bg: #1a2a22;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
改为靛蓝：
|
||||||
|
|
||||||
|
```css
|
||||||
|
:root {
|
||||||
|
--accent: #5b6abf;
|
||||||
|
--accent-hover: #4a59ae;
|
||||||
|
--accent-bg: #eef0f8;
|
||||||
|
}
|
||||||
|
|
||||||
|
html.dark {
|
||||||
|
--accent: #7b8ad0;
|
||||||
|
--accent-hover: #95a0dd;
|
||||||
|
--accent-bg: #1e1e2a;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
::: tip
|
||||||
|
更改强调色时，需要同时修改 `--accent`、`--accent-hover` 和 `--accent-bg` 三个变量，并分别为浅色和深色模式设置。
|
||||||
|
:::
|
||||||
|
|
||||||
|
### 更改字体
|
||||||
|
|
||||||
|
#### 使用 Google Fonts CDN 引入字体
|
||||||
|
|
||||||
|
在「自定义 HTML」中添加：
|
||||||
|
|
||||||
|
```html
|
||||||
|
<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=LXGW+WenKai:wght@400;700&display=swap" rel="stylesheet" />
|
||||||
|
```
|
||||||
|
|
||||||
|
在「自定义 CSS」中覆盖字体变量：
|
||||||
|
|
||||||
|
```css
|
||||||
|
:root {
|
||||||
|
--font-sans: 'LXGW WenKai', serif;
|
||||||
|
--font-body: 'LXGW WenKai', sans-serif;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 使用国内 CDN 镜像
|
||||||
|
|
||||||
|
如果 Google Fonts 访问不稳定，可以使用国内镜像：
|
||||||
|
|
||||||
|
```html
|
||||||
|
<link href="https://fonts.loli.net/css2?family=LXGW+WenKai:wght@400;700&display=swap" rel="stylesheet" />
|
||||||
|
```
|
||||||
|
|
||||||
|
其他可用的国内镜像：
|
||||||
|
|
||||||
|
| 镜像 | 地址 |
|
||||||
|
|------|------|
|
||||||
|
| loli.net | `https://fonts.loli.net` |
|
||||||
|
| fonts.font.im | `https://fonts.font.im` |
|
||||||
|
|
||||||
|
#### 仅更改标题字体
|
||||||
|
|
||||||
|
```css
|
||||||
|
:root {
|
||||||
|
--font-sans: 'LXGW WenKai', serif;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 仅更改正文字体
|
||||||
|
|
||||||
|
```css
|
||||||
|
:root {
|
||||||
|
--font-body: 'LXGW WenKai', sans-serif;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### 增加行高
|
||||||
|
|
||||||
|
如果觉得正文行高偏小，可以增加：
|
||||||
|
|
||||||
|
```css
|
||||||
|
:root {
|
||||||
|
--leading-relaxed: 2;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
或直接针对文章正文：
|
||||||
|
|
||||||
|
```css
|
||||||
|
.wi-post__content {
|
||||||
|
line-height: 2;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### 隐藏元素
|
||||||
|
|
||||||
|
#### 隐藏阅读进度条
|
||||||
|
|
||||||
|
```css
|
||||||
|
.wi-reading-progress {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 隐藏文章点赞按钮
|
||||||
|
|
||||||
|
```css
|
||||||
|
.wi-post__like {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 隐藏文章上下篇导航
|
||||||
|
|
||||||
|
```css
|
||||||
|
.wi-post__nav {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 隐藏 Hero 区域
|
||||||
|
|
||||||
|
```css
|
||||||
|
.wi-hero {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 隐藏页脚
|
||||||
|
|
||||||
|
```css
|
||||||
|
.wi-footer {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### 自定义卡片样式
|
||||||
|
|
||||||
|
#### 增加卡片圆角
|
||||||
|
|
||||||
|
```css
|
||||||
|
.wi-card {
|
||||||
|
border-radius: 20px !important;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 卡片添加边框
|
||||||
|
|
||||||
|
```css
|
||||||
|
.wi-card {
|
||||||
|
border: 1px solid var(--rule) !important;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 卡片悬停变色
|
||||||
|
|
||||||
|
```css
|
||||||
|
.wi-card:hover {
|
||||||
|
background: var(--accent-bg) !important;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### 自定义 Hero 区域
|
||||||
|
|
||||||
|
#### 更改 Hero 背景渐变
|
||||||
|
|
||||||
|
```css
|
||||||
|
.wi-hero {
|
||||||
|
background: linear-gradient(135deg, #faf7f2 0%, #e8d5c4 50%, #d4a98e 100%) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html.dark .wi-hero {
|
||||||
|
background: linear-gradient(135deg, #1a1614 0%, #2a2018 50%, #3a2e22 100%) !important;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 隐藏 Hero 光球动画
|
||||||
|
|
||||||
|
```css
|
||||||
|
.wi-hero__orb {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 调整 Hero 标题大小
|
||||||
|
|
||||||
|
```css
|
||||||
|
.wi-hero__title {
|
||||||
|
font-size: clamp(2.5rem, 2rem + 4vw, 4.5rem) !important;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## 注意事项
|
||||||
|
|
||||||
|
### 特异性问题
|
||||||
|
|
||||||
|
主题的 CSS 经过构建后具有较高的特异性。如果你的自定义样式不生效，可以：
|
||||||
|
|
||||||
|
1. **使用 `!important`**：简单粗暴但有效
|
||||||
|
2. **增加选择器特异性**：如 `body .wi-card` 代替 `.wi-card`
|
||||||
|
3. **使用 `:where()` 降权**：如果主题使用了 `:where()`，你可以直接覆盖
|
||||||
|
|
||||||
|
### 深色模式兼容
|
||||||
|
|
||||||
|
::: warning 重要
|
||||||
|
自定义 CSS 时务必同时考虑深色模式！使用 `html.dark` 选择器为深色模式提供对应的样式。
|
||||||
|
:::
|
||||||
|
|
||||||
|
```css
|
||||||
|
.wi-card {
|
||||||
|
background: #ffffff;
|
||||||
|
border: 1px solid #e0e0e0;
|
||||||
|
}
|
||||||
|
|
||||||
|
html.dark .wi-card {
|
||||||
|
background: #242018;
|
||||||
|
border: 1px solid #2e2822;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### 主题升级兼容
|
||||||
|
|
||||||
|
- 优先使用 CSS 变量覆盖而非直接修改元素样式
|
||||||
|
- 避免依赖主题内部的类名结构（可能随版本变化）
|
||||||
|
- 使用 `!important` 时添加注释说明原因
|
||||||
|
|
||||||
|
### 性能考虑
|
||||||
|
|
||||||
|
- 避免使用过多的 `!important`
|
||||||
|
- 外部 CSS 文件建议压缩后部署
|
||||||
|
- 避免使用 `*` 通配符选择器
|
||||||
@@ -0,0 +1,323 @@
|
|||||||
|
# 开发指南
|
||||||
|
|
||||||
|
本文档面向 WarmIsland 主题的开发者，介绍如何搭建开发环境、构建主题以及参与贡献。
|
||||||
|
|
||||||
|
## 环境要求
|
||||||
|
|
||||||
|
| 工具 | 最低版本 | 推荐版本 |
|
||||||
|
|------|----------|----------|
|
||||||
|
| Node.js | 18.x | 20.x LTS |
|
||||||
|
| pnpm | 8.x | 9.x |
|
||||||
|
| Git | 2.x | 最新 |
|
||||||
|
|
||||||
|
### 安装 pnpm
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm install -g pnpm
|
||||||
|
```
|
||||||
|
|
||||||
|
### 验证环境
|
||||||
|
|
||||||
|
```bash
|
||||||
|
node -v # v20.x.x
|
||||||
|
pnpm -v # 9.x.x
|
||||||
|
git --version # git version 2.x.x
|
||||||
|
```
|
||||||
|
|
||||||
|
## 克隆与安装
|
||||||
|
|
||||||
|
```bash
|
||||||
|
git clone https://github.com/your-username/WarmIsland.git
|
||||||
|
cd WarmIsland
|
||||||
|
pnpm install
|
||||||
|
```
|
||||||
|
|
||||||
|
## 开发模式
|
||||||
|
|
||||||
|
### 启动开发服务器
|
||||||
|
|
||||||
|
```bash
|
||||||
|
pnpm dev
|
||||||
|
```
|
||||||
|
|
||||||
|
启动后，Astro 开发服务器会在 `http://localhost:4321` 运行，支持热更新。
|
||||||
|
|
||||||
|
### 使用 Halo DevTools
|
||||||
|
|
||||||
|
WarmIsland 使用 `vite-plugin-halo-theme` 插件，可以与 Halo 实例联动开发：
|
||||||
|
|
||||||
|
1. 确保本地 Halo 实例正在运行
|
||||||
|
2. 在 Halo 后台安装主题的开发版本
|
||||||
|
3. 修改源码后，主题会自动重新构建并推送到 Halo
|
||||||
|
|
||||||
|
```bash
|
||||||
|
pnpm dev:halo
|
||||||
|
```
|
||||||
|
|
||||||
|
## 构建
|
||||||
|
|
||||||
|
### 生产构建
|
||||||
|
|
||||||
|
```bash
|
||||||
|
pnpm build
|
||||||
|
```
|
||||||
|
|
||||||
|
构建产物位于 `dist/` 目录，包含所有模板文件和静态资源。
|
||||||
|
|
||||||
|
### 打包主题
|
||||||
|
|
||||||
|
```bash
|
||||||
|
pnpm package
|
||||||
|
```
|
||||||
|
|
||||||
|
生成 `.zip` 主题包，可直接在 Halo 后台上传安装。
|
||||||
|
|
||||||
|
## 项目结构
|
||||||
|
|
||||||
|
```
|
||||||
|
WarmIsland/
|
||||||
|
├── src/ # 源代码
|
||||||
|
│ ├── components/ # Astro 组件
|
||||||
|
│ │ ├── HeroSection.astro # Hero 首屏
|
||||||
|
│ │ ├── PostCard.astro # 文章卡片
|
||||||
|
│ │ ├── Pagination.astro # 分页组件
|
||||||
|
│ │ ├── TableOfContents.astro # 目录组件
|
||||||
|
│ │ ├── ReadingProgress.astro # 阅读进度条
|
||||||
|
│ │ ├── LikeButton.astro # 点赞按钮
|
||||||
|
│ │ ├── CommentSection.astro # 评论区
|
||||||
|
│ │ ├── Footer.astro # 页脚
|
||||||
|
│ │ └── ...
|
||||||
|
│ ├── layouts/ # 布局组件
|
||||||
|
│ │ ├── BaseLayout.astro # 基础布局
|
||||||
|
│ │ └── PostLayout.astro # 文章布局
|
||||||
|
│ ├── lib/ # 工具库
|
||||||
|
│ │ ├── pages.ts # 页面路由定义
|
||||||
|
│ │ └── utils.ts # 工具函数
|
||||||
|
│ ├── pages/ # 页面入口
|
||||||
|
│ │ ├── index.astro # 首页
|
||||||
|
│ │ ├── post.astro # 文章详情
|
||||||
|
│ │ ├── archives.astro # 归档
|
||||||
|
│ │ ├── categories.astro # 分类
|
||||||
|
│ │ ├── tags.astro # 标签
|
||||||
|
│ │ ├── moments.astro # 瞬间
|
||||||
|
│ │ ├── photos.astro # 图库
|
||||||
|
│ │ ├── links.astro # 友情链接
|
||||||
|
│ │ ├── friends.astro # 朋友圈
|
||||||
|
│ │ ├── page.astro # 自定义页面
|
||||||
|
│ │ ├── page_messageboard.astro # 留言板
|
||||||
|
│ │ ├── douban.astro # 豆瓣
|
||||||
|
│ │ ├── equipments.astro # 装备
|
||||||
|
│ │ ├── footprints.astro # 足迹
|
||||||
|
│ │ └── steam.astro # Steam
|
||||||
|
│ └── styles/ # 样式文件
|
||||||
|
│ ├── main.scss # 主样式入口
|
||||||
|
│ ├── _variables.scss # SCSS 变量
|
||||||
|
│ ├── _colors.scss # 颜色定义
|
||||||
|
│ ├── _typography.scss # 排版
|
||||||
|
│ ├── _spacing.scss # 间距
|
||||||
|
│ ├── _animations.scss # 动画
|
||||||
|
│ ├── _mixins.scss # 混入
|
||||||
|
│ └── components/ # 组件样式
|
||||||
|
├── templates/ # Thymeleaf 模板（构建输出）
|
||||||
|
├── public/ # 静态资源
|
||||||
|
│ └── assets/ # 编译后的 CSS/JS
|
||||||
|
├── docs/ # 文档
|
||||||
|
├── theme.yaml # 主题元信息
|
||||||
|
├── settings.yaml # 主题设置定义
|
||||||
|
├── astro.config.mjs # Astro 配置
|
||||||
|
├── package.json # 项目依赖
|
||||||
|
├── tsconfig.json # TypeScript 配置
|
||||||
|
└── vite.config.ts # Vite 配置
|
||||||
|
```
|
||||||
|
|
||||||
|
## 技术栈
|
||||||
|
|
||||||
|
### 核心框架
|
||||||
|
|
||||||
|
| 技术 | 版本 | 用途 |
|
||||||
|
|------|------|------|
|
||||||
|
| [Astro](https://astro.build) | 5.x | 静态站点生成，组件开发 |
|
||||||
|
| [vite-plugin-halo-theme](https://github.com/halo-sigs/vite-plugin-halo-theme) | - | Halo 主题开发集成 |
|
||||||
|
| [Thymeleaf](https://www.thymeleaf.org/) | - | Halo 服务端模板引擎 |
|
||||||
|
|
||||||
|
### 前端技术
|
||||||
|
|
||||||
|
| 技术 | 用途 |
|
||||||
|
|------|------|
|
||||||
|
| [Vue 3](https://vuejs.org/) | 交互组件（目录、点赞、无限滚动等） |
|
||||||
|
| [SCSS](https://sass-lang.com/) | 样式预处理 |
|
||||||
|
| [Prism.js](https://prismjs.com/) | 代码高亮 |
|
||||||
|
| [LightGallery](https://www.lightgalleryjs.com/) | 图片灯箱 |
|
||||||
|
|
||||||
|
### 构建工具
|
||||||
|
|
||||||
|
| 技术 | 用途 |
|
||||||
|
|------|------|
|
||||||
|
| [Vite](https://vitejs.dev/) | 构建打包 |
|
||||||
|
| [pnpm](https://pnpm.io/) | 包管理 |
|
||||||
|
| [TypeScript](https://www.typescriptlang.org/) | 类型安全 |
|
||||||
|
|
||||||
|
## 模板语法
|
||||||
|
|
||||||
|
WarmIsland 使用 Astro 编写组件，构建后输出为 Thymeleaf 模板供 Halo 使用。
|
||||||
|
|
||||||
|
### Astro 组件 → Thymeleaf 模板
|
||||||
|
|
||||||
|
Astro 组件中的前端代码会被 `vite-plugin-halo-theme` 转换为 Thymeleaf 模板：
|
||||||
|
|
||||||
|
```astro
|
||||||
|
---
|
||||||
|
// Astro 前置脚本
|
||||||
|
const title = "Hello";
|
||||||
|
---
|
||||||
|
<h1>{title}</h1>
|
||||||
|
```
|
||||||
|
|
||||||
|
转换为 Thymeleaf：
|
||||||
|
|
||||||
|
```html
|
||||||
|
<h1 th:text="${title}">Hello</h1>
|
||||||
|
```
|
||||||
|
|
||||||
|
### Halo Finder API
|
||||||
|
|
||||||
|
在模板中使用 Halo 的 Finder API 获取数据：
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!-- 获取文章列表 -->
|
||||||
|
<th:block th:each="post : ${postFinder.list(1, 10)}">
|
||||||
|
<a th:href="@{${post.status.permalink}}" th:text="${post.spec.title}"></a>
|
||||||
|
</th:block>
|
||||||
|
|
||||||
|
<!-- 获取分类 -->
|
||||||
|
<th:block th:each="category : ${categoryFinder.listAll()}">
|
||||||
|
<span th:text="${category.spec.displayName}"></span>
|
||||||
|
</th:block>
|
||||||
|
|
||||||
|
<!-- 获取标签 -->
|
||||||
|
<th:block th:each="tag : ${tagFinder.listAll()}">
|
||||||
|
<span th:text="${tag.spec.displayName}"></span>
|
||||||
|
</th:block>
|
||||||
|
```
|
||||||
|
|
||||||
|
### Vue 3 交互组件
|
||||||
|
|
||||||
|
需要客户端交互的组件使用 Vue 3 编写，通过 `<script>` 标签引入：
|
||||||
|
|
||||||
|
```html
|
||||||
|
<div id="toc-app"></div>
|
||||||
|
<script type="module" src="/assets/js/toc.js"></script>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Docker 部署
|
||||||
|
|
||||||
|
### 构建镜像
|
||||||
|
|
||||||
|
```bash
|
||||||
|
docker build -t warmisland-theme .
|
||||||
|
```
|
||||||
|
|
||||||
|
### 运行
|
||||||
|
|
||||||
|
```bash
|
||||||
|
docker run -d \
|
||||||
|
--name warmisland \
|
||||||
|
-p 8090:8090 \
|
||||||
|
-v ~/.halo2:/root/.halo2 \
|
||||||
|
warmisland-theme
|
||||||
|
```
|
||||||
|
|
||||||
|
### Docker Compose
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
version: '3'
|
||||||
|
services:
|
||||||
|
halo:
|
||||||
|
image: warmisland-theme
|
||||||
|
ports:
|
||||||
|
- "8090:8090"
|
||||||
|
volumes:
|
||||||
|
- ./halo2:/root/.halo2
|
||||||
|
restart: unless-stopped
|
||||||
|
```
|
||||||
|
|
||||||
|
## 贡献指南
|
||||||
|
|
||||||
|
### 提交 Issue
|
||||||
|
|
||||||
|
- 使用 GitHub Issues 提交 Bug 报告或功能建议
|
||||||
|
- 请提供详细的复现步骤和环境信息
|
||||||
|
- 附上截图或错误日志
|
||||||
|
|
||||||
|
### 提交 Pull Request
|
||||||
|
|
||||||
|
1. Fork 本仓库
|
||||||
|
2. 创建特性分支：`git checkout -b feature/your-feature`
|
||||||
|
3. 提交更改：`git commit -m 'feat: add your feature'`
|
||||||
|
4. 推送分支：`git push origin feature/your-feature`
|
||||||
|
5. 提交 Pull Request
|
||||||
|
|
||||||
|
### Commit 规范
|
||||||
|
|
||||||
|
使用 [Conventional Commits](https://www.conventionalcommits.org/) 规范：
|
||||||
|
|
||||||
|
| 类型 | 说明 |
|
||||||
|
|------|------|
|
||||||
|
| `feat` | 新功能 |
|
||||||
|
| `fix` | 修复 Bug |
|
||||||
|
| `docs` | 文档更新 |
|
||||||
|
| `style` | 样式调整（不影响功能） |
|
||||||
|
| `refactor` | 代码重构 |
|
||||||
|
| `perf` | 性能优化 |
|
||||||
|
| `test` | 测试相关 |
|
||||||
|
| `chore` | 构建/工具变更 |
|
||||||
|
|
||||||
|
## 代码规范
|
||||||
|
|
||||||
|
### BEM 命名
|
||||||
|
|
||||||
|
WarmIsland 使用 BEM（Block Element Modifier）命名规范，前缀为 `wi-`：
|
||||||
|
|
||||||
|
```
|
||||||
|
.wi-block
|
||||||
|
.wi-block__element
|
||||||
|
.wi-block__element--modifier
|
||||||
|
```
|
||||||
|
|
||||||
|
**示例**：
|
||||||
|
|
||||||
|
```css
|
||||||
|
.wi-post { } /* Block */
|
||||||
|
.wi-post__title { } /* Element */
|
||||||
|
.wi-post__title--large { } /* Modifier */
|
||||||
|
.wi-post__content { } /* Element */
|
||||||
|
.wi-post__meta { } /* Element */
|
||||||
|
.wi-post__meta-item { } /* Element */
|
||||||
|
.wi-post__like { } /* Element */
|
||||||
|
.wi-post__like--active { } /* Modifier */
|
||||||
|
```
|
||||||
|
|
||||||
|
### SCSS 规范
|
||||||
|
|
||||||
|
- 使用 SCSS 变量（`$variable`）定义设计 token
|
||||||
|
- 使用 CSS 变量（`--variable`）暴露可覆盖的值
|
||||||
|
- 嵌套不超过 3 层
|
||||||
|
- 使用 `@mixin` 封装复用样式
|
||||||
|
- 使用 `@include` 引入混入
|
||||||
|
|
||||||
|
### Vue 组件规范
|
||||||
|
|
||||||
|
- 使用 Composition API
|
||||||
|
- 使用 `<script setup>` 语法
|
||||||
|
- Props 使用 TypeScript 类型定义
|
||||||
|
- 事件使用 `defineEmits`
|
||||||
|
|
||||||
|
### 文件命名
|
||||||
|
|
||||||
|
| 类型 | 规范 | 示例 |
|
||||||
|
|------|------|------|
|
||||||
|
| Astro 组件 | PascalCase | `PostCard.astro` |
|
||||||
|
| Vue 组件 | PascalCase | `TableOfContents.vue` |
|
||||||
|
| SCSS 文件 | kebab-case | `_variables.scss` |
|
||||||
|
| 页面文件 | kebab-case | `page_messageboard.astro` |
|
||||||
|
| 工具文件 | camelCase | `utils.ts` |
|
||||||
@@ -0,0 +1,207 @@
|
|||||||
|
# 样式与配色
|
||||||
|
|
||||||
|
WarmIsland 主题的视觉设计围绕「暖夜中的小岛」这一意象展开，追求温暖、宁静、有质感的阅读体验。
|
||||||
|
|
||||||
|
## 设计哲学
|
||||||
|
|
||||||
|
### 暖夜小岛
|
||||||
|
|
||||||
|
想象一座深夜里温暖的小岛——远处是深邃的夜空，近处是篝火般的暖光。这就是 WarmIsland 的设计基调：
|
||||||
|
|
||||||
|
- **温暖**：以暖色调为基础，避免冷硬的科技感
|
||||||
|
- **宁静**：克制的动效和留白，不喧宾夺主
|
||||||
|
- **质感**：毛玻璃、渐变光晕、细腻的阴影层次
|
||||||
|
- **呼吸**：元素有节奏地律动，如岛上的微风
|
||||||
|
|
||||||
|
### 设计原则
|
||||||
|
|
||||||
|
1. **内容优先**：所有视觉设计服务于内容阅读
|
||||||
|
2. **克制装饰**：每个装饰元素都有其存在的理由
|
||||||
|
3. **层次分明**：通过颜色、字号、间距建立清晰的信息层级
|
||||||
|
4. **温暖一致**：从配色到动效，保持统一的温暖气质
|
||||||
|
|
||||||
|
## 色彩系统
|
||||||
|
|
||||||
|
### 浅色模式
|
||||||
|
|
||||||
|
| 变量 | 色值 | 用途 |
|
||||||
|
|------|------|------|
|
||||||
|
| `--bg` | `#faf7f2` | 页面背景，温暖的米白色 |
|
||||||
|
| `--bg-raised` | `#f3ede5` | 卡片背景，略深的暖色 |
|
||||||
|
| `--bg-overlay` | `rgba(250, 247, 242, 0.85)` | 遮罩层背景 |
|
||||||
|
| `--ink` | `#2c2420` | 主文字色，深棕黑 |
|
||||||
|
| `--ink-2` | `#7a6e64` | 次要文字，中灰棕 |
|
||||||
|
| `--ink-3` | `#b5a99e` | 辅助文字，浅灰棕 |
|
||||||
|
| `--rule` | `#e8e0d6` | 分隔线、边框 |
|
||||||
|
| `--accent` | `#d4764e` | 强调色，温暖的赤陶橙 |
|
||||||
|
| `--accent-hover` | `#c4613a` | 强调色悬停态，更深的赤陶 |
|
||||||
|
| `--accent-bg` | `#fdf0e8` | 强调色浅底，用于标签背景 |
|
||||||
|
| `--mist-pink` | `#f0e4de` | 薄雾粉，Hero 渐变用 |
|
||||||
|
| `--sea-salt` | `#e8e0d6` | 海盐色，与 rule 相同 |
|
||||||
|
| `--caramel` | `#8b6f5e` | 焦糖色，滚动条用 |
|
||||||
|
| `--glass-bg` | `rgba(250, 247, 242, 0.72)` | 毛玻璃背景 |
|
||||||
|
| `--glass-border` | `rgba(232, 224, 214, 0.5)` | 毛玻璃边框 |
|
||||||
|
|
||||||
|
### 深色模式
|
||||||
|
|
||||||
|
通过 `html.dark` 选择器切换，所有颜色变量重新定义：
|
||||||
|
|
||||||
|
| 变量 | 色值 | 说明 |
|
||||||
|
|------|------|------|
|
||||||
|
| `--bg` | `#1a1614` | 深棕黑背景 |
|
||||||
|
| `--bg-raised` | `#242018` | 略浅的卡片背景 |
|
||||||
|
| `--ink` | `#ede6de` | 浅色主文字 |
|
||||||
|
| `--ink-2` | `#9a8e84` | 次要文字 |
|
||||||
|
| `--ink-3` | `#5e544a` | 辅助文字 |
|
||||||
|
| `--accent` | `#e8955f` | 更亮的强调色（保证对比度） |
|
||||||
|
| `--accent-hover` | `#f0a872` | 更亮的悬停态 |
|
||||||
|
| `--accent-bg` | `#2a1e16` | 深色强调底 |
|
||||||
|
|
||||||
|
### 阴影系统
|
||||||
|
|
||||||
|
| 变量 | 浅色模式 | 深色模式 | 用途 |
|
||||||
|
|------|----------|----------|------|
|
||||||
|
| `--shadow-sm` | `0 1px 3px rgba(44, 36, 32, 0.06)` | `0 1px 3px rgba(0, 0, 0, 0.2)` | 轻微阴影 |
|
||||||
|
| `--shadow-md` | `0 4px 16px rgba(44, 36, 32, 0.08)` | `0 4px 16px rgba(0, 0, 0, 0.25)` | 中等阴影 |
|
||||||
|
| `--shadow-lg` | `0 8px 32px rgba(44, 36, 32, 0.12)` | `0 8px 32px rgba(0, 0, 0, 0.35)` | 大阴影 |
|
||||||
|
| `--shadow-glow` | `0 0 40px rgba(212, 118, 78, 0.15)` | `0 0 40px rgba(232, 149, 95, 0.12)` | 强调色光晕 |
|
||||||
|
|
||||||
|
## 深色模式
|
||||||
|
|
||||||
|
### 切换机制
|
||||||
|
|
||||||
|
深色模式通过 `html.dark` 类名控制：
|
||||||
|
|
||||||
|
1. **跟随系统**（默认）：根据 `prefers-color-scheme` 媒体查询
|
||||||
|
2. **手动切换**：通过导航栏的主题切换按钮
|
||||||
|
3. **配置指定**：通过 `color_scheme` 配置项强制指定
|
||||||
|
|
||||||
|
### 切换逻辑
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
// 优先级：localStorage > 配置项 > 系统偏好
|
||||||
|
var stored = localStorage.getItem("wi-theme");
|
||||||
|
var prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
|
||||||
|
var scheme = document.currentScript.getAttribute("data-scheme");
|
||||||
|
|
||||||
|
if (stored === "dark") { isDark = true; }
|
||||||
|
else if (stored === "light") { isDark = false; }
|
||||||
|
else if (scheme === "dark") { isDark = true; }
|
||||||
|
else if (scheme === "light") { isDark = false; }
|
||||||
|
else if (!stored && prefersDark) { isDark = true; }
|
||||||
|
```
|
||||||
|
|
||||||
|
### 设计要点
|
||||||
|
|
||||||
|
- 深色模式不是简单的反色，而是重新定义了所有颜色变量
|
||||||
|
- 强调色在深色模式下更亮，保证足够的对比度
|
||||||
|
- 阴影在深色模式下使用纯黑，更自然
|
||||||
|
- 文字颜色保持温暖色调，不是纯白
|
||||||
|
|
||||||
|
## 字体系统
|
||||||
|
|
||||||
|
### 字体栈
|
||||||
|
|
||||||
|
| 变量 | 字体栈 | 用途 |
|
||||||
|
|------|--------|------|
|
||||||
|
| `--font-sans` | `'Noto Serif SC', 'Source Han Serif SC', Georgia, serif` | 标题、强调文字 |
|
||||||
|
| `--font-body` | `'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif` | 正文、UI 文字 |
|
||||||
|
| `--font-mono` | `'JetBrains Mono', 'Fira Code', monospace` | 代码 |
|
||||||
|
|
||||||
|
### 设计思路
|
||||||
|
|
||||||
|
- **标题用衬线体**：Noto Serif SC 赋予标题优雅的文艺气质
|
||||||
|
- **正文用无衬线体**：Noto Sans SC 保证长文阅读的舒适度
|
||||||
|
- **代码用等宽体**：JetBrains Mono 专为代码设计
|
||||||
|
|
||||||
|
::: tip
|
||||||
|
这些字体不会自动加载，需要在 Halo 后台或 HTML 中引入对应的字体 CSS。推荐使用 Google Fonts 或国内 CDN 镜像。
|
||||||
|
:::
|
||||||
|
|
||||||
|
## 间距系统
|
||||||
|
|
||||||
|
| 变量 | 值 | 用途 |
|
||||||
|
|------|-----|------|
|
||||||
|
| `--space-xs` | `0.25rem` | 极小间距 |
|
||||||
|
| `--space-sm` | `0.5rem` | 小间距 |
|
||||||
|
| `--space-md` | `1rem` | 标准间距 |
|
||||||
|
| `--space-lg` | `1.5rem` | 大间距 |
|
||||||
|
| `--space-xl` | `2rem` | 超大间距 |
|
||||||
|
| `--space-2xl` | `3rem` | 区块间距 |
|
||||||
|
| `--space-3xl` | `4rem` | 大区块间距 |
|
||||||
|
| `--space-4xl` | `6rem` | 页面级间距 |
|
||||||
|
|
||||||
|
### 容器宽度
|
||||||
|
|
||||||
|
| 变量 | 值 | 用途 |
|
||||||
|
|------|-----|------|
|
||||||
|
| `--container-sm` | `640px` | 小容器 |
|
||||||
|
| `--container-md` | `768px` | 中容器 |
|
||||||
|
| `--container-lg` | `1024px` | 大容器 |
|
||||||
|
| `--container-xl` | `1200px` | 最大容器 |
|
||||||
|
| `--content-max` | `800px` | 内容最大宽度 |
|
||||||
|
|
||||||
|
### 区块间距
|
||||||
|
|
||||||
|
`--section-spacing: clamp(3rem, 2rem + 3vw, 6rem)` — 响应式区块间距，在小屏幕上更紧凑。
|
||||||
|
|
||||||
|
## 圆角系统
|
||||||
|
|
||||||
|
| SCSS 变量 | 值 | 用途 |
|
||||||
|
|-----------|-----|------|
|
||||||
|
| `$border-radius-sm` | `8px` | 小元素（标签、代码块） |
|
||||||
|
| `$border-radius-md` | `12px` | 中等元素（卡片、图片） |
|
||||||
|
| `$border-radius-lg` | `16px` | 大元素（卡片、面板） |
|
||||||
|
| `$border-radius-xl` | `24px` | 超大元素 |
|
||||||
|
| `$border-radius-full` | `9999px` | 胶囊按钮、头像 |
|
||||||
|
|
||||||
|
### 配置项
|
||||||
|
|
||||||
|
通过 `border_radius` 配置项可全局调整圆角风格：
|
||||||
|
|
||||||
|
| 选项 | 效果 |
|
||||||
|
|------|------|
|
||||||
|
| `small` | 较小的圆角 |
|
||||||
|
| `medium` | 中等圆角（默认） |
|
||||||
|
| `large` | 较大的圆角 |
|
||||||
|
|
||||||
|
## 动画系统
|
||||||
|
|
||||||
|
### 时间曲线
|
||||||
|
|
||||||
|
| 变量 | 值 | 用途 |
|
||||||
|
|------|-----|------|
|
||||||
|
| `--ease-out-expo` | `cubic-bezier(0.16, 1, 0.3, 1)` | 弹性出场，用于悬停和展开 |
|
||||||
|
| `--ease-out-quart` | `cubic-bezier(0.25, 1, 0.5, 1)` | 平滑出场，用于颜色过渡 |
|
||||||
|
| `--ease-in-out-cubic` | `cubic-bezier(0.65, 0, 0.35, 1)` | 对称缓动，用于循环动画 |
|
||||||
|
|
||||||
|
### 时长
|
||||||
|
|
||||||
|
| 变量 | 值 | 用途 |
|
||||||
|
|------|-----|------|
|
||||||
|
| `--duration-fast` | `150ms` | 快速反馈（颜色变化） |
|
||||||
|
| `--duration-normal` | `300ms` | 标准过渡（悬停效果） |
|
||||||
|
| `--duration-slow` | `500ms` | 慢速过渡（大位移） |
|
||||||
|
| `--duration-breath` | `3s` | 呼吸动画周期 |
|
||||||
|
|
||||||
|
### 关键帧动画
|
||||||
|
|
||||||
|
| 动画名 | 效果 | 用途 |
|
||||||
|
|--------|------|------|
|
||||||
|
| `breathe` | 透明度 0.4→0.7 + 缩放 1→1.08 | Hero 光球呼吸 |
|
||||||
|
| `fadeInUp` | 透明度 0→1 + 上移 20px | 元素入场 |
|
||||||
|
| `float` | 上下浮动 6px | 装饰元素 |
|
||||||
|
| `shimmer` | 背景位置平移 | 加载占位 |
|
||||||
|
| `scrollHint` | 透明度 + 下移 8px | 滚动指示器 |
|
||||||
|
| `likeHeartbeat` | 缩放 1→1.3→0.9→1 | 点赞心跳 |
|
||||||
|
|
||||||
|
### 动画开关
|
||||||
|
|
||||||
|
| 配置 | 说明 | 默认值 |
|
||||||
|
|------|------|--------|
|
||||||
|
| `animation_enabled` | 启用动效 | `true` |
|
||||||
|
| `animation_breath` | 呼吸动画 | `true` |
|
||||||
|
| `animation_scroll_reveal` | 滚动渐入 | `true` |
|
||||||
|
| `animation_cursor_glow` | 光感跟随 | `false` |
|
||||||
|
|
||||||
|
关闭动效时，`html` 元素添加 `wi-no-animations` 类名。
|
||||||
+109
@@ -0,0 +1,109 @@
|
|||||||
|
# 常见问题
|
||||||
|
|
||||||
|
## 安装相关
|
||||||
|
|
||||||
|
### 主题安装后页面空白？
|
||||||
|
|
||||||
|
检查以下几点：
|
||||||
|
|
||||||
|
1. 确认 Halo 版本 >= 2.24.0
|
||||||
|
2. 确认主题已启用
|
||||||
|
3. 清除浏览器缓存后重试（Ctrl+Shift+R 强制刷新）
|
||||||
|
4. 检查 Halo 后台日志是否有报错
|
||||||
|
|
||||||
|
### 主题设置保存后没有生效？
|
||||||
|
|
||||||
|
1. 清除浏览器缓存（Ctrl+Shift+R 强制刷新）
|
||||||
|
2. 如果使用 Docker 部署，尝试重启容器：`docker restart halo`
|
||||||
|
3. 检查 Halo 缓存设置
|
||||||
|
|
||||||
|
### Docker 部署后主题文件更新不生效？
|
||||||
|
|
||||||
|
手动更新主题文件后需要重启容器：
|
||||||
|
|
||||||
|
```bash
|
||||||
|
docker cp templates/ halo:/root/.halo2/themes/warm-island/
|
||||||
|
docker restart halo
|
||||||
|
```
|
||||||
|
|
||||||
|
## 功能相关
|
||||||
|
|
||||||
|
### 搜索按钮不显示？
|
||||||
|
|
||||||
|
搜索功能依赖 Halo 搜索插件：
|
||||||
|
|
||||||
|
1. 确认已安装 [搜索插件](https://www.halo.run/store/apps/app-search-widget)
|
||||||
|
2. 确认主题设置中「显示搜索按钮」已开启
|
||||||
|
3. 确认插件已启用
|
||||||
|
4. 支持快捷键 `Ctrl+K`（macOS 为 `⌘K`）唤起搜索
|
||||||
|
|
||||||
|
### 瞬间/图库/友链页面显示插件未安装？
|
||||||
|
|
||||||
|
这些页面需要安装对应的 Halo 插件：
|
||||||
|
|
||||||
|
| 页面 | 所需插件 |
|
||||||
|
|------|----------|
|
||||||
|
| 瞬间 | [PluginMoments](https://www.halo.run/store/apps/app-moments) |
|
||||||
|
| 图库 | [PluginPhotos](https://www.halo.run/store/apps/app-photos) |
|
||||||
|
| 友链 | [PluginLinks](https://www.halo.run/store/apps/app-links) |
|
||||||
|
| 朋友圈 | 朋友圈插件 |
|
||||||
|
|
||||||
|
安装并启用插件后，页面会自动显示内容。未安装插件时页面会显示友好的提示信息。
|
||||||
|
|
||||||
|
### 一言 API 加载失败？
|
||||||
|
|
||||||
|
1. 检查网络是否能访问 `https://v1.hitokoto.cn/`
|
||||||
|
2. 如果在国内服务器，可能存在网络延迟
|
||||||
|
3. 可以在主题设置中更换一言 API 地址为自建镜像
|
||||||
|
|
||||||
|
### 文章目录不显示？
|
||||||
|
|
||||||
|
1. 确认文章内容中包含标题（h2-h6）
|
||||||
|
2. 确认主题设置中「显示文章目录」已开启
|
||||||
|
3. 桌面端需要屏幕宽度 >= 1280px 才会显示侧边目录
|
||||||
|
4. 移动端通过右下角悬浮按钮打开目录抽屉
|
||||||
|
|
||||||
|
### 代码高亮不生效？
|
||||||
|
|
||||||
|
1. 确认代码块使用了正确的语言标记（如 \`\`\`python）
|
||||||
|
2. Prism.js 支持自动语言检测，但部分语言需要手动标记
|
||||||
|
3. 检查浏览器控制台是否有 Prism.js 加载错误
|
||||||
|
|
||||||
|
## 样式相关
|
||||||
|
|
||||||
|
### 如何更换强调色？
|
||||||
|
|
||||||
|
在主题设置 → 样式设置 → 强调色 中选择或输入颜色值。也可以通过自定义 CSS 覆盖 `--accent` 变量，详见 [自定义 CSS](/customize/custom-css)。
|
||||||
|
|
||||||
|
### 深色模式下某些元素颜色不对？
|
||||||
|
|
||||||
|
1. 尝试清除浏览器缓存
|
||||||
|
2. 检查是否有自定义 CSS 只设置了浅色模式的值
|
||||||
|
3. 确保深色模式的变量覆盖在 `html.dark` 选择器下
|
||||||
|
|
||||||
|
### 自定义 CSS 不生效？
|
||||||
|
|
||||||
|
1. 检查 CSS 语法是否正确
|
||||||
|
2. 确认选择器特异性足够覆盖默认样式
|
||||||
|
3. 使用浏览器开发者工具检查元素的实际样式
|
||||||
|
4. 尝试添加 `!important` 提高优先级
|
||||||
|
|
||||||
|
## 其他
|
||||||
|
|
||||||
|
### 浏览器控制台出现 Tracking Prevention 警告？
|
||||||
|
|
||||||
|
这是浏览器的追踪防护功能拦截了第三方脚本（如 Microsoft Clarity），不是主题代码问题，不影响网站功能。
|
||||||
|
|
||||||
|
### icon-192x192.png 404 错误？
|
||||||
|
|
||||||
|
这是 Halo 系统 PWA manifest 配置问题，需要在 Halo 后台设置 PWA 图标，与主题无关。
|
||||||
|
|
||||||
|
### 如何报告 Bug？
|
||||||
|
|
||||||
|
请在 [GitHub Issues](https://github.com/nxxy335top/halo-theme-WarmIsland/issues) 中提交，包含以下信息：
|
||||||
|
|
||||||
|
- Halo 版本
|
||||||
|
- 主题版本
|
||||||
|
- 问题描述和复现步骤
|
||||||
|
- 浏览器和设备信息
|
||||||
|
- 相关截图
|
||||||
@@ -0,0 +1,97 @@
|
|||||||
|
# 快速开始
|
||||||
|
|
||||||
|
WarmIsland（暖屿）是一款为 [Halo](https://halo.run) 打造的生活博客主题，具有独特的暖色调设计语言和丰富的功能模块。
|
||||||
|
|
||||||
|
## 主题特色
|
||||||
|
|
||||||
|
- 🎨 **暖色调设计** — 呼吸光球、毛玻璃导航栏、滚动渐入动画
|
||||||
|
- 🌙 **深色模式** — 跟随系统/浅色/深色三种方案，平滑切换
|
||||||
|
- 📱 **响应式布局** — 桌面到手机完美适配
|
||||||
|
- 📝 **沉浸阅读** — 侧边目录、进度条、代码高亮、图片灯箱
|
||||||
|
- 🔌 **插件生态** — 瞬间、图库、友链、朋友圈、豆瓣、装备、Steam
|
||||||
|
- ⚙️ **灵活配置** — 全维度自定义面板，无需改代码
|
||||||
|
|
||||||
|
## 前置要求
|
||||||
|
|
||||||
|
- Halo >= 2.24.0
|
||||||
|
- 已安装并运行 Halo 实例
|
||||||
|
|
||||||
|
## 安装方式
|
||||||
|
|
||||||
|
### 方式一：应用市场安装（推荐）
|
||||||
|
|
||||||
|
1. 登录 Halo 后台管理控制台
|
||||||
|
2. 进入 **主题** → **安装**
|
||||||
|
3. 搜索「WarmIsland 暖屿」或从应用市场安装
|
||||||
|
4. 点击 **启用** 激活主题
|
||||||
|
|
||||||
|
### 方式二：本地上传安装
|
||||||
|
|
||||||
|
1. 从 [GitHub Releases](https://github.com/nxxy335top/halo-theme-WarmIsland/releases) 下载最新版本的 `.zip` 安装包
|
||||||
|
2. 登录 Halo 后台管理控制台
|
||||||
|
3. 进入 **主题** → **安装** → 选择 **本地上传**
|
||||||
|
4. 上传下载的 `.zip` 文件
|
||||||
|
5. 点击 **启用** 激活主题
|
||||||
|
|
||||||
|
### 方式三：Git 克隆安装
|
||||||
|
|
||||||
|
1. SSH 登录服务器，进入 Halo 主题目录：
|
||||||
|
|
||||||
|
```bash
|
||||||
|
cd ~/.halo2/themes
|
||||||
|
```
|
||||||
|
|
||||||
|
2. 克隆主题仓库：
|
||||||
|
|
||||||
|
```bash
|
||||||
|
git clone https://github.com/nxxy335top/halo-theme-WarmIsland.git warm-island
|
||||||
|
```
|
||||||
|
|
||||||
|
3. 在 Halo 后台 **主题** 管理页面中找到 WarmIsland，点击 **启用**
|
||||||
|
|
||||||
|
## 初始配置
|
||||||
|
|
||||||
|
安装并启用主题后，建议按以下顺序进行初始配置：
|
||||||
|
|
||||||
|
### 第一步：基础信息
|
||||||
|
|
||||||
|
进入 **主题** → **设置** → **基础设置**：
|
||||||
|
|
||||||
|
- 填写 **站点名称**（显示在导航栏和页脚）
|
||||||
|
- 填写 **站点描述**（用于 SEO）
|
||||||
|
- 上传 **自定义 Logo** 和 **Favicon**
|
||||||
|
|
||||||
|
### 第二步：外观样式
|
||||||
|
|
||||||
|
进入 **样式设置**：
|
||||||
|
|
||||||
|
- 选择 **配色方案**（跟随系统/浅色/深色）
|
||||||
|
- 设置 **强调色**（默认 `#d4764e` 暖橘色）
|
||||||
|
- 选择 **圆角风格** 和 **容器宽度**
|
||||||
|
|
||||||
|
### 第三步：导航菜单
|
||||||
|
|
||||||
|
1. 进入 Halo 后台 → **菜单** → 创建新菜单
|
||||||
|
2. 添加菜单项（首页、归档、瞬间等）
|
||||||
|
3. 主题自动读取主菜单渲染导航栏
|
||||||
|
|
||||||
|
### 第四步：Hero 首屏
|
||||||
|
|
||||||
|
进入 **Hero 首屏** 设置：
|
||||||
|
|
||||||
|
- 设置主标题和副标题
|
||||||
|
- 选择描述文案来源（一言/自定义/无）
|
||||||
|
- 可选上传背景图片
|
||||||
|
|
||||||
|
### 第五步：页脚信息
|
||||||
|
|
||||||
|
进入 **页脚** 设置：
|
||||||
|
|
||||||
|
- 填写版权信息
|
||||||
|
- 添加社交链接（GitHub、微博等）
|
||||||
|
- 可选添加自定义 HTML（统计代码等）
|
||||||
|
|
||||||
|
## 下一步
|
||||||
|
|
||||||
|
- [基础设置](/config/basic) — 完整的主题配置说明
|
||||||
|
- [样式设置](/config/style) — 调整配色、圆角、动画
|
||||||
@@ -0,0 +1,93 @@
|
|||||||
|
# WarmIsland 是什么？
|
||||||
|
|
||||||
|
**WarmIsland（暖屿）** 是一款为 [Halo](https://halo.run) 打造的生活博客主题。
|
||||||
|
|
||||||
|
它的名字来源于一个画面——深夜里温暖的小岛。我们希望每一个来到你站点的访客，都能感受到那份安静而舒适的氛围。
|
||||||
|
|
||||||
|
## 设计理念
|
||||||
|
|
||||||
|
暖屿的设计围绕三个核心词展开：**温暖、沉浸、精致**。
|
||||||
|
|
||||||
|
### 温暖
|
||||||
|
|
||||||
|
默认的暖橘强调色 `#d4764e`、Hero 区域缓缓呼吸的光球、柔和的毛玻璃导航栏——这些细节共同营造出一种温暖而不灼人的视觉感受。我们相信，博客不仅是内容的容器，更是一种情绪的传递。
|
||||||
|
|
||||||
|
### 沉浸
|
||||||
|
|
||||||
|
阅读应该是专注的。文章详情页提供了侧边悬浮目录、阅读进度条、代码语法高亮和图片灯箱，让读者可以沉浸在内容中而不被干扰。滚动时 Hero 区域的模糊渐隐、元素的渐入动画，都在为这种沉浸感服务。
|
||||||
|
|
||||||
|
### 精致
|
||||||
|
|
||||||
|
每一个圆角、每一处阴影、每一次过渡动画都经过打磨。从导航栏的三种样式选择到页脚的社交链接配置，从首页的置顶卡片到瞬间的三种布局——精致不是堆砌，而是对每个细节的在意。
|
||||||
|
|
||||||
|
## 核心特性
|
||||||
|
|
||||||
|
### 🎨 视觉体验
|
||||||
|
|
||||||
|
- **暖色调设计语言** — 橘色强调色 + 呼吸光球 + 渐变背景
|
||||||
|
- **三种导航栏样式** — Glass（毛玻璃）/ Minimal（极简）/ Float（浮动胶囊）
|
||||||
|
- **深色模式** — 跟随系统、浅色、深色三种方案，一键切换平滑过渡
|
||||||
|
- **动效系统** — 滚动渐入、光感跟随、呼吸动画，均可独立开关
|
||||||
|
|
||||||
|
### 📝 阅读体验
|
||||||
|
|
||||||
|
- **文章目录** — 桌面端侧边悬浮 + 移动端底部抽屉
|
||||||
|
- **阅读进度条** — 实时显示阅读进度
|
||||||
|
- **代码高亮** — Prism.js 支持，Warm / Cold 双主题
|
||||||
|
- **图片灯箱** — 点击放大，支持左右切换
|
||||||
|
- **点赞功能** — 一键点赞，状态持久化
|
||||||
|
|
||||||
|
### 📱 响应式
|
||||||
|
|
||||||
|
- 从桌面到手机完美适配
|
||||||
|
- 移动端专属汉堡菜单
|
||||||
|
- 文章卡片自动切换为上下布局
|
||||||
|
- 目录自动切换为悬浮按钮 + 抽屉
|
||||||
|
|
||||||
|
### 🔌 插件生态
|
||||||
|
|
||||||
|
深度集成 Halo 插件，提供丰富的扩展页面：
|
||||||
|
|
||||||
|
| 页面 | 插件 | 特色 |
|
||||||
|
|------|------|------|
|
||||||
|
| 瞬间 | PluginMoments | Timeline / Cards / Masonry 三种布局 |
|
||||||
|
| 图库 | PluginPhotos | Masonry / Grid / Carousel + 分组浏览 |
|
||||||
|
| 友情链接 | PluginLinks | Cards / Grid / List 三种布局 |
|
||||||
|
| 朋友圈 | plugin-friends | 友站动态时间线 |
|
||||||
|
| 豆瓣 | 豆瓣插件 | 观影/读书/音乐记录 |
|
||||||
|
| 装备 | 装备插件 | 按分组展示装备清单 |
|
||||||
|
| Steam | Steam 插件 | 游戏资料与徽章 |
|
||||||
|
|
||||||
|
### ⚙️ 灵活配置
|
||||||
|
|
||||||
|
13 个配置分组，覆盖站点的方方面面：
|
||||||
|
|
||||||
|
- 基础信息、样式、导航栏、Hero 首屏
|
||||||
|
- 首页、文章、瞬间、图库、友情链接
|
||||||
|
- 朋友圈、留言板、评论、页脚
|
||||||
|
|
||||||
|
所有配置都在 Halo 后台的图形化面板中完成，无需修改代码。
|
||||||
|
|
||||||
|
## 技术栈
|
||||||
|
|
||||||
|
- **Astro** — 静态站点生成器，编译模板
|
||||||
|
- **vite-plugin-halo-theme** — Halo 主题 Vite 插件
|
||||||
|
- **Thymeleaf** — Halo 使用的服务端模板引擎
|
||||||
|
- **Vue 3** — 部分交互组件（搜索、主题切换、光感跟随）
|
||||||
|
- **SCSS** — CSS 预处理器
|
||||||
|
- **Prism.js** — 代码语法高亮
|
||||||
|
- **LightGallery** — 图片灯箱
|
||||||
|
|
||||||
|
## 适用场景
|
||||||
|
|
||||||
|
WarmIsland 适合以下类型的站点：
|
||||||
|
|
||||||
|
- 📖 **个人博客** — 记录生活、分享思考
|
||||||
|
- 📸 **摄影站** — 图库页面展示作品
|
||||||
|
- 🎮 **游戏博客** — Steam 页面展示游戏资料
|
||||||
|
- 📚 **读书笔记** — 豆瓣页面展示阅读记录
|
||||||
|
- 💭 **碎碎念** — 瞬间页面记录日常灵感
|
||||||
|
|
||||||
|
## 下一步
|
||||||
|
|
||||||
|
- [快速开始](/guide/getting-started) — 安装主题并完成初始配置
|
||||||
@@ -0,0 +1,32 @@
|
|||||||
|
---
|
||||||
|
layout: home
|
||||||
|
|
||||||
|
hero:
|
||||||
|
name: "WarmIsland"
|
||||||
|
text: "暖屿主题文档"
|
||||||
|
tagline: 具有独特气质的生活博客主题，为 Halo 打造
|
||||||
|
actions:
|
||||||
|
- theme: brand
|
||||||
|
text: 快速开始
|
||||||
|
link: /guide/getting-started
|
||||||
|
- theme: alt
|
||||||
|
text: 配置项
|
||||||
|
link: /config/basic
|
||||||
|
- theme: alt
|
||||||
|
text: GitHub
|
||||||
|
link: https://github.com/nxxy335top/halo-theme-WarmIsland
|
||||||
|
|
||||||
|
features:
|
||||||
|
- title: 🎨 精致视觉
|
||||||
|
details: 暖色调设计语言，呼吸动效光球、毛玻璃导航栏、滚动渐入动画，每一处细节都经过打磨
|
||||||
|
- title: 📱 响应式布局
|
||||||
|
details: 从桌面到手机完美适配，移动端专属菜单与交互体验
|
||||||
|
- title: 🌙 深色模式
|
||||||
|
details: 支持跟随系统、浅色、深色三种配色方案，一键切换平滑过渡
|
||||||
|
- title: 📝 沉浸阅读
|
||||||
|
details: 文章目录侧边悬浮、阅读进度条、代码高亮、图片灯箱，打造专注的阅读体验
|
||||||
|
- title: 🔌 插件生态
|
||||||
|
details: 深度集成瞬间、图库、友情链接、朋友圈、豆瓣、装备、Steam 等插件页面
|
||||||
|
- title: ⚙️ 灵活配置
|
||||||
|
details: 丰富的主题设置面板，涵盖样式、导航、首页、文章、评论等全维度自定义
|
||||||
|
---
|
||||||
Generated
+2550
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,11 @@
|
|||||||
|
{
|
||||||
|
"scripts": {
|
||||||
|
"docs:dev": "vitepress dev",
|
||||||
|
"docs:build": "vitepress build",
|
||||||
|
"docs:preview": "vitepress preview"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"vitepress": "^1.6.3",
|
||||||
|
"vue": "^3.5.13"
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,27 @@
|
|||||||
|
# 归档
|
||||||
|
|
||||||
|
归档页面按时间线展示所有已发布的文章，方便读者按时间浏览。
|
||||||
|
|
||||||
|
## 页面布局
|
||||||
|
|
||||||
|
归档页面以年份和月份分组，形成清晰的时间线结构：
|
||||||
|
|
||||||
|
- 页面标题（默认「归档」，可在基础设置中自定义）
|
||||||
|
- 文章总数统计
|
||||||
|
- 按年月分组的时间线列表
|
||||||
|
- 每个分组显示年份和月份
|
||||||
|
- 每篇文章显示标题，可点击跳转
|
||||||
|
|
||||||
|
## 视觉设计
|
||||||
|
|
||||||
|
时间线采用圆点 + 竖线的经典设计：
|
||||||
|
|
||||||
|
- 每个月份分组左侧有圆点标记
|
||||||
|
- 分组之间用竖线连接
|
||||||
|
- 文章标题悬停时变为强调色
|
||||||
|
- 支持分页导航
|
||||||
|
|
||||||
|
## 相关配置
|
||||||
|
|
||||||
|
- [基础设置](/config/basic) — 归档页标题文案
|
||||||
|
- [首页配置](/config/home) — 文章数量文案模板
|
||||||
@@ -0,0 +1,39 @@
|
|||||||
|
# 分类与标签
|
||||||
|
|
||||||
|
分类和标签是文章的两种组织方式，主题提供了独立的列表页面和详情页面。
|
||||||
|
|
||||||
|
## 分类列表页
|
||||||
|
|
||||||
|
展示所有分类，每个分类显示：
|
||||||
|
|
||||||
|
- 分类名称
|
||||||
|
- 该分类下的文章数量
|
||||||
|
- 可点击进入分类详情
|
||||||
|
|
||||||
|
## 分类详情页
|
||||||
|
|
||||||
|
展示某个分类下的所有文章，布局与首页文章列表类似。URL 格式为 `/categories/{slug}`。
|
||||||
|
|
||||||
|
## 标签列表页
|
||||||
|
|
||||||
|
展示所有标签，以标签云的形式呈现：
|
||||||
|
|
||||||
|
- 标签名称
|
||||||
|
- 该标签下的文章数量
|
||||||
|
- 可点击进入标签详情
|
||||||
|
|
||||||
|
## 标签详情页
|
||||||
|
|
||||||
|
展示某个标签下的所有文章。URL 格式为 `/tags/{slug}`。
|
||||||
|
|
||||||
|
## 使用方式
|
||||||
|
|
||||||
|
分类和标签在 Halo 后台的文章编辑器中设置：
|
||||||
|
|
||||||
|
1. 编辑文章时，在侧边栏中添加分类和标签
|
||||||
|
2. 主题会自动读取并渲染分类/标签页面
|
||||||
|
3. 通过菜单管理添加分类/标签页面的导航链接
|
||||||
|
|
||||||
|
::: tip
|
||||||
|
建议在导航菜单中添加「分类」和「标签」的链接，方便访客浏览。分类链接为 `/categories`，标签链接为 `/tags`。
|
||||||
|
:::
|
||||||
@@ -0,0 +1,38 @@
|
|||||||
|
# 自定义页面
|
||||||
|
|
||||||
|
自定义页面是 Halo 的独立页面功能，用于创建关于、友链等独立内容页面。
|
||||||
|
|
||||||
|
## 使用方式
|
||||||
|
|
||||||
|
1. 进入 Halo 后台 → **页面** → **新建**
|
||||||
|
2. 填写页面标题和内容
|
||||||
|
3. 可选择自定义模板
|
||||||
|
4. 发布页面
|
||||||
|
|
||||||
|
## 页面模板
|
||||||
|
|
||||||
|
主题提供以下自定义页面模板：
|
||||||
|
|
||||||
|
| 模板 | 文件 | 说明 |
|
||||||
|
|------|------|------|
|
||||||
|
| 默认 | page.html | 标准内容页面 |
|
||||||
|
| 留言板 | page_messageboard.html | 带评论的留言板页面 |
|
||||||
|
|
||||||
|
### 留言板模板
|
||||||
|
|
||||||
|
选择留言板模板后，页面会自动集成评论组件，访客可以直接留言。标题和副标题使用主题设置中的配置。
|
||||||
|
|
||||||
|
使用步骤：
|
||||||
|
|
||||||
|
1. 新建页面，选择自定义模板为「留言板」
|
||||||
|
2. 在主题设置 → 留言板中配置标题和副标题
|
||||||
|
3. 发布页面，添加到导航菜单
|
||||||
|
|
||||||
|
## 页面功能
|
||||||
|
|
||||||
|
自定义页面支持：
|
||||||
|
|
||||||
|
- 富文本编辑器内容
|
||||||
|
- 封面图
|
||||||
|
- 评论组件
|
||||||
|
- 自定义模板选择
|
||||||
@@ -0,0 +1,41 @@
|
|||||||
|
# 扩展页面
|
||||||
|
|
||||||
|
WarmIsland 主题深度集成了多款 Halo 插件，提供了丰富的扩展页面。
|
||||||
|
|
||||||
|
## 支持的扩展页面
|
||||||
|
|
||||||
|
| 页面 | 所需插件 | 路由 |
|
||||||
|
|------|----------|------|
|
||||||
|
| 瞬间 | PluginMoments | /moments |
|
||||||
|
| 图库 | PluginPhotos | /photos |
|
||||||
|
| 友情链接 | PluginLinks | /links |
|
||||||
|
| 朋友圈 | plugin-friends | /friends |
|
||||||
|
| 豆瓣 | 豆瓣插件 | /douban |
|
||||||
|
| 装备 | 装备插件 | /equipments |
|
||||||
|
| 足迹 | 足迹插件 | /footprints |
|
||||||
|
| Steam | Steam 插件 | /steam |
|
||||||
|
|
||||||
|
## 豆瓣页面
|
||||||
|
|
||||||
|
展示豆瓣观影/读书/音乐记录，支持按类型和状态筛选。
|
||||||
|
|
||||||
|
## 装备页面
|
||||||
|
|
||||||
|
展示个人装备清单，按分组分类展示。
|
||||||
|
|
||||||
|
## 足迹页面
|
||||||
|
|
||||||
|
展示个人足迹地图。
|
||||||
|
|
||||||
|
## Steam 页面
|
||||||
|
|
||||||
|
展示 Steam 游戏资料，包括：
|
||||||
|
|
||||||
|
- 玩家头像和昵称
|
||||||
|
- 游戏统计
|
||||||
|
- 徽章展示
|
||||||
|
- 最近游戏
|
||||||
|
|
||||||
|
::: info
|
||||||
|
扩展页面需要安装对应的 Halo 插件才能使用。如果插件未安装，页面会显示友好的提示信息。
|
||||||
|
:::
|
||||||
@@ -0,0 +1,25 @@
|
|||||||
|
# 朋友圈
|
||||||
|
|
||||||
|
朋友圈页面展示订阅的友站最新文章动态，需要安装 [朋友圈插件](https://www.halo.run/store/apps/app-friends)。
|
||||||
|
|
||||||
|
## 功能说明
|
||||||
|
|
||||||
|
页面以时间线形式展示友站更新，每条动态包含：
|
||||||
|
|
||||||
|
- 友站名称和头像
|
||||||
|
- 文章标题和链接
|
||||||
|
- 发布时间
|
||||||
|
|
||||||
|
## 使用方式
|
||||||
|
|
||||||
|
1. 在 Halo 后台安装并启用朋友圈插件
|
||||||
|
2. 在插件设置中添加友站 RSS 订阅源
|
||||||
|
3. 主题自动读取并展示友站动态
|
||||||
|
|
||||||
|
::: tip
|
||||||
|
朋友圈插件负责数据抓取，主题负责前端展示。如需调整抓取频率或内容，请在插件设置中操作。
|
||||||
|
:::
|
||||||
|
|
||||||
|
## 相关配置
|
||||||
|
|
||||||
|
- [朋友圈配置](/config/friends) — 页面标题
|
||||||
@@ -0,0 +1,68 @@
|
|||||||
|
# 首页
|
||||||
|
|
||||||
|
首页是网站的入口，由 Hero 首屏、置顶文章和文章列表三个模块组成。
|
||||||
|
|
||||||
|
## 页面结构
|
||||||
|
|
||||||
|
首页从上到下依次为：
|
||||||
|
|
||||||
|
1. **Hero 首屏** — 全屏展示区（可通过 Hero 设置关闭）
|
||||||
|
2. **置顶文章** — 显示置顶的文章，大卡片布局
|
||||||
|
3. **文章列表** — 非置顶文章的流式布局
|
||||||
|
|
||||||
|
## Hero 首屏
|
||||||
|
|
||||||
|
Hero 区域占据整个视口高度，包含：
|
||||||
|
|
||||||
|
- **主标题**：默认使用站点标题，可在主题设置中自定义
|
||||||
|
- **副标题**：默认使用站点副标题
|
||||||
|
- **描述文案**：支持一言 API、自定义文案或关闭
|
||||||
|
- **视觉效果**：渐变背景 + 呼吸光球 + 滚动模糊
|
||||||
|
|
||||||
|
页面滚动时，Hero 区域会产生模糊效果，内容向上淡出，底部有向下箭头提示滚动。
|
||||||
|
|
||||||
|
Hero 设置详见 [Hero 首屏配置](/config/hero)。
|
||||||
|
|
||||||
|
## 置顶文章
|
||||||
|
|
||||||
|
在 Halo 后台将文章设置为「置顶」后，该文章会出现在首页置顶区域：
|
||||||
|
|
||||||
|
- 单篇置顶：全宽大卡片展示
|
||||||
|
- 多篇置顶：两列网格布局
|
||||||
|
- 显示分类、日期、标题和摘要
|
||||||
|
- 支持封面图，悬停时图片微缩放
|
||||||
|
|
||||||
|
## 文章列表
|
||||||
|
|
||||||
|
非置顶文章以流式卡片布局展示：
|
||||||
|
|
||||||
|
- **有封面图**：左侧内容 + 右侧缩略图
|
||||||
|
- **无封面图**：纯文字布局
|
||||||
|
- **移动端**：统一为上下布局
|
||||||
|
|
||||||
|
每张卡片显示以下信息（均可通过主题设置控制显隐）：
|
||||||
|
|
||||||
|
- 分类标签
|
||||||
|
- 发布日期
|
||||||
|
- 文章标题
|
||||||
|
- 文章摘要（可配置行数）
|
||||||
|
- 标签列表
|
||||||
|
- 阅读量
|
||||||
|
|
||||||
|
## 文章加载方式
|
||||||
|
|
||||||
|
支持两种加载方式，在 [首页配置](/config/home) 中设置：
|
||||||
|
|
||||||
|
### 分页
|
||||||
|
|
||||||
|
传统翻页导航，页面底部显示「较新」「较旧」按钮和页码信息。
|
||||||
|
|
||||||
|
### 无限滚动
|
||||||
|
|
||||||
|
滚动到页面底部时自动加载下一页文章，新文章以渐入动画出现。加载过程中显示旋转加载指示器，全部加载完毕后显示提示文案。
|
||||||
|
|
||||||
|
## 相关配置
|
||||||
|
|
||||||
|
- [首页配置](/config/home) — 置顶/文章模块、卡片显示项、加载方式
|
||||||
|
- [Hero 首屏配置](/config/hero) — 标题、描述、视觉效果
|
||||||
|
- [样式设置](/config/style) — 配色、圆角、动画
|
||||||
@@ -0,0 +1,31 @@
|
|||||||
|
# 友情链接
|
||||||
|
|
||||||
|
友情链接页面展示友站信息，需要安装 [链接管理插件](https://www.halo.run/store/apps/app-links)。
|
||||||
|
|
||||||
|
## 展示样式
|
||||||
|
|
||||||
|
主题提供三种友链展示样式，在 [友情链接配置](/config/links) 中设置：
|
||||||
|
|
||||||
|
### Cards（卡片）
|
||||||
|
|
||||||
|
默认样式，每个友链以卡片形式展示，包含头像、名称和描述。视觉效果丰富。
|
||||||
|
|
||||||
|
### Grid（网格）
|
||||||
|
|
||||||
|
紧凑的网格布局，以图标和名称为主，适合友链数量较多的站点。
|
||||||
|
|
||||||
|
### List（列表）
|
||||||
|
|
||||||
|
列表布局，每行一个友链，信息密度适中。
|
||||||
|
|
||||||
|
## 友链管理
|
||||||
|
|
||||||
|
友情链接通过 Halo 后台的 **链接** 管理功能添加：
|
||||||
|
|
||||||
|
1. 进入 Halo 后台 → **链接** → **新建**
|
||||||
|
2. 填写链接名称、URL、描述和头像
|
||||||
|
3. 可将链接分组，主题会按分组展示
|
||||||
|
|
||||||
|
## 相关配置
|
||||||
|
|
||||||
|
- [友情链接配置](/config/links) — 展示样式
|
||||||
@@ -0,0 +1,35 @@
|
|||||||
|
# 瞬间
|
||||||
|
|
||||||
|
瞬间页面展示短内容动态，需要安装 [瞬间插件](https://www.halo.run/store/apps/app-moments)。
|
||||||
|
|
||||||
|
## 展示样式
|
||||||
|
|
||||||
|
主题提供三种瞬间展示样式，在 [瞬间配置](/config/moments) 中设置：
|
||||||
|
|
||||||
|
### Timeline（时间线）
|
||||||
|
|
||||||
|
默认样式，左侧竖线 + 圆点的时间线布局，每条瞬间以卡片形式展示。适合按时间顺序浏览。
|
||||||
|
|
||||||
|
### Cards（卡片）
|
||||||
|
|
||||||
|
网格卡片布局，使用毛玻璃效果背景。适合图片较多的瞬间。
|
||||||
|
|
||||||
|
### Masonry（瀑布流）
|
||||||
|
|
||||||
|
瀑布流多列布局，自动适应内容高度。适合内容长度不一的混合瞬间。
|
||||||
|
|
||||||
|
## 功能特性
|
||||||
|
|
||||||
|
- 支持图片展示（多图自动网格布局，单图大图展示）
|
||||||
|
- 支持点赞功能
|
||||||
|
- 支持评论功能（点击评论按钮展开评论区）
|
||||||
|
- 支持无限滚动或分页加载
|
||||||
|
- 图片点击放大（灯箱效果）
|
||||||
|
|
||||||
|
## 插件依赖
|
||||||
|
|
||||||
|
如果未安装瞬间插件，页面会显示友好的提示信息：「瞬间功能需要安装「瞬间」插件，前往应用市场安装」。
|
||||||
|
|
||||||
|
## 相关配置
|
||||||
|
|
||||||
|
- [瞬间配置](/config/moments) — 展示样式、加载方式、每页数量
|
||||||
@@ -0,0 +1,36 @@
|
|||||||
|
# 图库
|
||||||
|
|
||||||
|
图库页面展示照片集，需要安装 [图库插件](https://www.halo.run/store/apps/app-photos)。
|
||||||
|
|
||||||
|
## 展示样式
|
||||||
|
|
||||||
|
主题提供三种图库展示样式，在 [图库配置](/config/photos) 中设置：
|
||||||
|
|
||||||
|
### Masonry（瀑布流）
|
||||||
|
|
||||||
|
默认样式，图片以瀑布流方式排列，自动适应不同尺寸，视觉效果自然流畅。
|
||||||
|
|
||||||
|
### Grid（网格）
|
||||||
|
|
||||||
|
等高网格布局，所有图片统一裁剪为相同尺寸，整齐划一。
|
||||||
|
|
||||||
|
### Carousel（轮播）
|
||||||
|
|
||||||
|
轮播展示，适合精选照片展示。
|
||||||
|
|
||||||
|
## 分组浏览
|
||||||
|
|
||||||
|
图库支持分组浏览：
|
||||||
|
|
||||||
|
- 顶部显示分组标签栏，可切换不同分组
|
||||||
|
- 「全部」视图显示所有分组的图片
|
||||||
|
- 可选择是否显示分组标题
|
||||||
|
- 可选择是否显示未分组图片
|
||||||
|
|
||||||
|
## 灯箱效果
|
||||||
|
|
||||||
|
点击图片会打开灯箱全屏查看，支持左右切换和关闭操作。
|
||||||
|
|
||||||
|
## 相关配置
|
||||||
|
|
||||||
|
- [图库配置](/config/photos) — 展示样式、列数、分组设置
|
||||||
@@ -0,0 +1,61 @@
|
|||||||
|
# 文章详情
|
||||||
|
|
||||||
|
文章详情页是阅读体验的核心页面，提供沉浸式的阅读环境。
|
||||||
|
|
||||||
|
## 页面元素
|
||||||
|
|
||||||
|
文章详情页包含以下元素（从上到下）：
|
||||||
|
|
||||||
|
1. **阅读进度条** — 页面顶部的进度指示条
|
||||||
|
2. **封面图** — 文章封面（可配置显隐）
|
||||||
|
3. **文章标题** — 大号标题 + 强调线装饰
|
||||||
|
4. **元信息** — 日期、作者、分类、标签、字数、阅读量
|
||||||
|
5. **正文内容** — 文章主体
|
||||||
|
6. **文章目录** — 侧边悬浮（桌面端）或底部抽屉（移动端）
|
||||||
|
7. **点赞按钮** — 文章底部的爱心点赞
|
||||||
|
8. **上下篇导航** — 上一篇/下一篇文章
|
||||||
|
9. **评论区** — Halo 评论组件
|
||||||
|
|
||||||
|
## 阅读进度条
|
||||||
|
|
||||||
|
页面顶部有一条细进度条，宽度随滚动位置实时更新，帮助读者了解当前阅读进度。进度条使用强调色显示。
|
||||||
|
|
||||||
|
## 文章目录（TOC）
|
||||||
|
|
||||||
|
目录自动从文章内容的标题（h1-h6）中提取生成。
|
||||||
|
|
||||||
|
### 桌面端（1280px+）
|
||||||
|
|
||||||
|
目录以固定侧边栏形式显示在文章旁边，位置可选左侧或右侧。目录会跟随滚动高亮当前标题，支持点击跳转。当屏幕空间不足以容纳目录时，目录自动隐藏。
|
||||||
|
|
||||||
|
### 移动端（<1280px）
|
||||||
|
|
||||||
|
目录隐藏，右下角显示目录悬浮按钮（FAB），点击后从底部弹出目录抽屉面板。抽屉内目录项可点击跳转，点击遮罩层或关闭按钮关闭抽屉。
|
||||||
|
|
||||||
|
## 代码高亮
|
||||||
|
|
||||||
|
使用 Prism.js 实现代码块语法高亮，支持自动语言检测。可在主题设置中选择两种主题：
|
||||||
|
|
||||||
|
- **Warm**：浅色代码高亮，与暖色调设计一致
|
||||||
|
- **Cold**：深色代码高亮（Tomorrow Night），适合代码密集型文章
|
||||||
|
|
||||||
|
## 图片灯箱
|
||||||
|
|
||||||
|
文章中的图片支持点击放大查看，使用 LightGallery 实现。放大后支持左右切换、缩放和关闭操作。
|
||||||
|
|
||||||
|
## 点赞功能
|
||||||
|
|
||||||
|
文章底部的点赞按钮使用 Halo 内置 API：
|
||||||
|
|
||||||
|
- 点赞后按钮变为高亮状态，显示爱心填充图标
|
||||||
|
- 同一文章不可重复点赞（基于 localStorage 判断）
|
||||||
|
- 点赞数实时更新
|
||||||
|
|
||||||
|
## 上下篇导航
|
||||||
|
|
||||||
|
文章底部显示上一篇和下一篇文章的链接，帮助读者连续浏览。可通过主题设置控制显隐。
|
||||||
|
|
||||||
|
## 相关配置
|
||||||
|
|
||||||
|
- [文章配置](/config/article) — 封面图、目录、代码高亮、点赞等
|
||||||
|
- [评论配置](/config/comment) — 评论样式和头像显示
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
Reference in New Issue
Block a user