mirror of
https://github.com/Sevichecc/Urara-Blog.git
synced 2025-04-30 23:19:30 +08:00
revert: remove template in code block
This commit is contained in:
sevichecc
parent
d990868296
commit
e21f200413
2 changed files with 24 additions and 108 deletions
|
|
@ -1,102 +1,22 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { onMount, createEventDispatcher } from 'svelte'
|
|
||||||
import { site } from '$lib/config/site'
|
import { site } from '$lib/config/site'
|
||||||
import { header as headerConfig } from '$lib/config/general'
|
import { header as headerConfig } from '$lib/config/general'
|
||||||
import Typeahead from 'svelte-typeahead'
|
|
||||||
import { page } from '$app/stores'
|
|
||||||
// ref : https://github.com/saadeghi/daisyui/blob/master/src/docs/src/components/Search.svelte
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<form>
|
<form
|
||||||
<input type="checkbox" id="search-modal" class="modal-toggle " />
|
action={headerConfig?.search?.provider === 'duckduckgo' ? '//duckduckgo.com/' : '//google.com/search'}
|
||||||
<label for="search-modal" class="modal cursor-pointer w-full items-start pt-16 ">
|
method="get"
|
||||||
<label class="modal-box w-11/12 max-w-4xl " for="">
|
accept-charset="UTF-8"
|
||||||
<div class="form-control">
|
class="flex-1">
|
||||||
<span
|
<input
|
||||||
class="i-heroicons-outline-search text-base-content pointer-events-none absolute z-10 my-2 ml-3 stroke-current opacity-60 w-5" />
|
type="text"
|
||||||
</div>
|
name="q"
|
||||||
<Typeahead placeholder="Search is not avaible …" limit={8} label="Search" inputAfterSelect="clear">
|
class="input input-ghost input-bordered xl:bg-base-100 xl:text-base-content transition-all w-full h-12" />
|
||||||
<div class="py-1 text-sm" />
|
<input
|
||||||
</Typeahead>
|
type="hidden"
|
||||||
<div class="pointer-events-none absolute right-14 top-8 gap-1 opacity-50 hidden lg:flex">
|
name={headerConfig?.search?.provider === 'duckduckgo' ? 'sites' : 'sitesearch'}
|
||||||
<kbd class="kbd kbd-sm">ESC</kbd>
|
value={site.protocol + site.domain} />
|
||||||
</div>
|
<button type="submit" class="btn btn-square btn-ghost ml-2">
|
||||||
</label>
|
<span class="i-heroicons-outline-search" />
|
||||||
</label>
|
</button>
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
<!-- <script lang="ts">
|
|
||||||
import { onMount, createEventDispatcher } from "svelte"
|
|
||||||
import { page } from "$app/stores"
|
|
||||||
import { goto } from "$app/navigation"
|
|
||||||
import Typeahead from "svelte-typeahead"
|
|
||||||
import { pages } from "@src/lib/data.js"
|
|
||||||
const dispatch = createEventDispatcher()
|
|
||||||
let searchIndex = []
|
|
||||||
pages.forEach((group) => {
|
|
||||||
group.items.forEach((item) => {
|
|
||||||
searchIndex.push(item)
|
|
||||||
})
|
|
||||||
})
|
|
||||||
|
|
||||||
let seachboxEl
|
|
||||||
function handleKeydown(e) {
|
|
||||||
if ((e.keyCode === 75 && e.metaKey) || (e.keyCode === 75 && e.ctrlKey)) {
|
|
||||||
e.preventDefault()
|
|
||||||
seachboxEl.querySelector("input[type=search]").focus()
|
|
||||||
dispatch("focus")
|
|
||||||
}
|
|
||||||
}
|
|
||||||
function onSelect({ detail }) {
|
|
||||||
goto(searchIndex[detail.originalIndex].href)
|
|
||||||
dispatch("search", detail)
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<svelte:window on:keydown={handleKeydown} />
|
|
||||||
-->
|
|
||||||
<style global>
|
|
||||||
.searchbox [data-svelte-typeahead] {
|
|
||||||
background: none;
|
|
||||||
width: 100%;
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
[data-svelte-search] label {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
[data-svelte-search] input {
|
|
||||||
background-color: transparent;
|
|
||||||
color: inherit;
|
|
||||||
border-radius: 0.5em;
|
|
||||||
padding-left: 2em;
|
|
||||||
}
|
|
||||||
[data-svelte-search] input::placeholder {
|
|
||||||
color: inherit;
|
|
||||||
}
|
|
||||||
[data-svelte-search] input:focus {
|
|
||||||
outline-color: hsla(var(--bc) / 0.2);
|
|
||||||
background-color: hsl(var(--b1));
|
|
||||||
color: hsla(var(--bc));
|
|
||||||
}
|
|
||||||
[data-svelte-typeahead] .svelte-typeahead-list {
|
|
||||||
transform: translateY(0.5em);
|
|
||||||
background: hsl(var(--b1));
|
|
||||||
border-radius: var(--rounded-btn);
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
[data-svelte-typeahead] .svelte-typeahead-list .selected,
|
|
||||||
[data-svelte-typeahead] .svelte-typeahead-list .selected:hover {
|
|
||||||
background: hsl(var(--n));
|
|
||||||
color: hsl(var(--nc));
|
|
||||||
}
|
|
||||||
[data-svelte-typeahead] .svelte-typeahead-list li {
|
|
||||||
color: hsl(var(--bc));
|
|
||||||
}
|
|
||||||
[data-svelte-typeahead] .svelte-typeahead-list li:hover {
|
|
||||||
background: hsl(var(--b2));
|
|
||||||
color: hsl(var(--bc));
|
|
||||||
}
|
|
||||||
[data-svelte-typeahead] .svelte-typeahead-list li:not(:last-of-type) {
|
|
||||||
border-bottom-color: hsla(var(--bc) / 0.1);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
---
|
---
|
||||||
title: nuxt2 安装3d轮播图插件vue-3d-carousel
|
title: nuxt2安装3d轮播图插件vue-3d-carousel
|
||||||
created: 2022-10-03
|
created: 2022-10-03
|
||||||
summary: Using Vue-3d-carousel in nuxt2
|
summary: Using Vue-3d-carousel in nuxt2
|
||||||
tags:
|
tags:
|
||||||
|
|
@ -48,14 +48,10 @@ export.module{
|
||||||
需要包裹在`<client-only>`里面
|
需要包裹在`<client-only>`里面
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<template>
|
<client-only>
|
||||||
<div>
|
|
||||||
<client-only>
|
|
||||||
<carousel-3d>
|
<carousel-3d>
|
||||||
<slide :index="0">Slide 1 Content</slide>
|
<slide :index="0">Slide 1 Content</slide>
|
||||||
<slide :index="1">Slide 2 Content</slide>
|
<slide :index="1">Slide 2 Content</slide>
|
||||||
</carousel-3d>
|
</carousel-3d>
|
||||||
</client-only>
|
</client-only>
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
```
|
```
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue