d0zingcat/NotionNext
1
0
Fork 0
mirror of https://github.com/d0zingcat/NotionNext.git synced 2026-05-14 07:26:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

Starter Testimonials

Browse Source
This commit is contained in:
tangly1024.com
2024-02-20 14:56:04 +08:00
parent 26bbc449f2
commit b1e42b0868
4 changed files with 130 additions and 351 deletions
Download Patch File Download Diff File Expand all files Collapse all files

400
themes/starter/components/Testimonials.js
View File

@@ -1,14 +1,17 @@
/* eslint-disable react/no-unescaped-entities */
/* eslint-disable @next/next/no-img-element */
import { siteConfig } from '@/lib/config';
import { loadExternalResource } from '@/lib/utils';
import { useEffect } from 'react';
import CONFIG from '../config';
import { SVGLeftArrow } from './svg/SVGLeftArrow';
import { SVGRightArrow } from './svg/SVGRightArrow';
/**
* 一些外部js
*/
const loadExternal = async () => {
console.log('加载swiper')
await loadExternalResource('https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.css', 'css');
await loadExternalResource('https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.min.js', 'js');
@@ -49,6 +52,8 @@ export const Testimonials = () => {
useEffect(() => {
loadExternal()
}, [])
// 用户评分
const ratings = [1, 2, 3, 4, 5];
return <>
{/* <!-- ====== Testimonial Section Start --> */}
<section
@@ -60,16 +65,15 @@ export const Testimonials = () => {
<div class="w-full px-4">
<div class="mx-auto mb-[60px] max-w-[485px] text-center">
<span class="mb-2 block text-lg font-semibold text-primary">
Testimonials
{siteConfig('STARTER_TESTIMONIALS_TITLE', null, CONFIG)}
</span>
<h2
class="mb-3 text-3xl font-bold leading-[1.2] text-dark dark:text-white sm:text-4xl md:text-[40px]"
>
What our Clients Say
{siteConfig('STARTER_TESTIMONIALS_TEXT_1', null, CONFIG)}
</h2>
<p class="text-base text-body-color dark:text-dark-6">
There are many variations of passages of Lorem Ipsum available
but the majority have suffered alteration in some form.
{siteConfig('STARTER_TESTIMONIALS_TEXT_2', null, CONFIG)}
</p>
</div>
</div>
@@ -78,364 +82,60 @@ export const Testimonials = () => {
<div class="-m-5">
<div class="swiper testimonial-carousel common-carousel p-5">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div
class="rounded-xl bg-white px-4 py-[30px] shadow-testimonial dark:bg-dark sm:px-[30px]"
>
<div class="mb-[18px] flex items-center gap-[2px]">
<img
src="/images/starter/testimonials/icon-star.svg"
alt="star icon"
/>
<img
src="/images/starter/testimonials/icon-star.svg"
alt="star icon"
/>
<img
src="/images/starter/testimonials/icon-star.svg"
alt="star icon"
/>
<img
src="/images/starter/testimonials/icon-star.svg"
alt="star icon"
/>
<img
src="/images/starter/testimonials/icon-star.svg"
alt="star icon"
/>
</div>
<p class="mb-6 text-base text-body-color dark:text-dark-6">
“Our members are so impressed. It's intuitive. It's clean.
It's distraction free. If you're building a community.’’
</p>
{/* 用户评价卡牌 */}
{CONFIG.STARTER_TESTIMONIALS_ITEMS.map((item, index) => {
return <div key={index} class="swiper-slide">
<div
class="rounded-xl bg-white px-4 py-[30px] shadow-testimonial dark:bg-dark sm:px-[30px]"
>
<div class="mb-[18px] flex items-center gap-[2px]">
{ratings.map((rating, index) => (
<img key={index} alt="star icon"// 为每个图片设置唯一的 key 属性
src={siteConfig('STARTER_TESTIMONIALS_STAR_ICON', null, CONFIG)}/>
))}
</div>
<a href="#" class="flex items-center gap-4">
<div class="h-[50px] w-[50px] overflow-hidden rounded-full">
<img
src="/images/starter/testimonials/author-01.jpg"
alt="author"
class="h-[50px] w-[50px] overflow-hidden rounded-full"
/>
<p class="mb-6 text-base text-body-color dark:text-dark-6">
“{item.STARTER_TESTIMONIALS_ITEM_TEXT}”
</p>
<a href={item.STARTER_TESTIMONIALS_ITEM_URL} class="flex items-center gap-4">
<div class="h-[50px] w-[50px] overflow-hidden rounded-full">
<img
src={item.STARTER_TESTIMONIALS_ITEM_AVATAR}
alt="author"
class="h-[50px] w-[50px] overflow-hidden rounded-full object-cover"
/>
</div>
<div>
<h3
class="text-sm font-semibold text-dark dark:text-white"
>
{item.STARTER_TESTIMONIALS_ITEM_NICKNAME}
</h3>
<p class="text-xs text-body-secondary">
{item.STARTER_TESTIMONIALS_ITEM_DESCRIPTION}
</p>
</div>
</a>
</div>
<div>
<h3
class="text-sm font-semibold text-dark dark:text-white"
>
Sabo Masties
</h3>
<p class="text-xs text-body-secondary">Founder @ Rolex</p>
</div>
</a>
</div>
</div>
})}
<div class="swiper-slide">
<div
class="rounded-xl bg-white px-4 py-[30px] shadow-testimonial dark:bg-dark sm:px-[30px]"
>
<div class="mb-[18px] flex items-center gap-[2px]">
<img
src="/images/starter/testimonials/icon-star.svg"
alt="star icon"
/>
<img
src="/images/starter/testimonials/icon-star.svg"
alt="star icon"
/>
<img
src="/images/starter/testimonials/icon-star.svg"
alt="star icon"
/>
<img
src="/images/starter/testimonials/icon-star.svg"
alt="star icon"
/>
<img
src="/images/starter/testimonials/icon-star.svg"
alt="star icon"
/>
</div>
<p class="mb-6 text-base text-body-color dark:text-dark-6">
“Our members are so impressed. It's intuitive. It's clean.
It's distraction free. If you're building a community.’’
</p>
<a href="#" class="flex items-center gap-4">
<div class="h-[50px] w-[50px] overflow-hidden rounded-full">
<img
src="/images/starter/testimonials/author-02.jpg"
alt="author"
class="h-[50px] w-[50px] overflow-hidden rounded-full"
/>
</div>
<div>
<h3
class="text-sm font-semibold text-dark dark:text-white"
>
Musharof Chowdhury
</h3>
<p class="text-xs text-body-secondary">
Founder @ Ayro UI
</p>
</div>
</a>
</div>
</div>
<div class="swiper-slide">
<div
class="rounded-xl bg-white px-4 py-[30px] shadow-testimonial dark:bg-dark sm:px-[30px]"
>
<div class="mb-[18px] flex items-center gap-[2px]">
<img
src="/images/starter/testimonials/icon-star.svg"
alt="star icon"
/>
<img
src="/images/starter/testimonials/icon-star.svg"
alt="star icon"
/>
<img
src="/images/starter/testimonials/icon-star.svg"
alt="star icon"
/>
<img
src="/images/starter/testimonials/icon-star.svg"
alt="star icon"
/>
<img
src="/images/starter/testimonials/icon-star.svg"
alt="star icon"
/>
</div>
<p class="mb-6 text-base text-body-color dark:text-dark-6">
“Our members are so impressed. It's intuitive. It's clean.
It's distraction free. If you're building a community.’’
</p>
<a href="#" class="flex items-center gap-4">
<div class="h-[50px] w-[50px] overflow-hidden rounded-full">
<img
src="/images/starter/testimonials/author-03.jpg"
alt="author"
class="h-[50px] w-[50px] overflow-hidden rounded-full"
/>
</div>
<div>
<h3
class="text-sm font-semibold text-dark dark:text-white"
>
William Smith
</h3>
<p class="text-xs text-body-secondary">
Founder @ Trorex
</p>
</div>
</a>
</div>
</div>
<div class="swiper-slide">
<div
class="rounded-xl bg-white px-4 py-[30px] shadow-testimonial dark:bg-dark sm:px-[30px]"
>
<div class="mb-[18px] flex items-center gap-[2px]">
<img
src="/images/starter/testimonials/icon-star.svg"
alt="star icon"
/>
<img
src="/images/starter/testimonials/icon-star.svg"
alt="star icon"
/>
<img
src="/images/starter/testimonials/icon-star.svg"
alt="star icon"
/>
<img
src="/images/starter/testimonials/icon-star.svg"
alt="star icon"
/>
<img
src="/images/starter/testimonials/icon-star.svg"
alt="star icon"
/>
</div>
<p class="mb-6 text-base text-body-color dark:text-dark-6">
“Our members are so impressed. It's intuitive. It's clean.
It's distraction free. If you're building a community.’’
</p>
<a href="#" class="flex items-center gap-4">
<div class="h-[50px] w-[50px] overflow-hidden rounded-full">
<img
src="/images/starter/testimonials/author-01.jpg"
alt="author"
class="h-[50px] w-[50px] overflow-hidden rounded-full"
/>
</div>
<div>
<h3
class="text-sm font-semibold text-dark dark:text-white"
>
Sabo Masties
</h3>
<p class="text-xs text-body-secondary">Founder @ Rolex</p>
</div>
</a>
</div>
</div>
<div class="swiper-slide">
<div
class="rounded-xl bg-white px-4 py-[30px] shadow-testimonial dark:bg-dark sm:px-[30px]"
>
<div class="mb-[18px] flex items-center gap-[2px]">
<img
src="/images/starter/testimonials/icon-star.svg"
alt="star icon"
/>
<img
src="/images/starter/testimonials/icon-star.svg"
alt="star icon"
/>
<img
src="/images/starter/testimonials/icon-star.svg"
alt="star icon"
/>
<img
src="/images/starter/testimonials/icon-star.svg"
alt="star icon"
/>
<img
src="/images/starter/testimonials/icon-star.svg"
alt="star icon"
/>
</div>
<p class="mb-6 text-base text-body-color dark:text-dark-6">
“Our members are so impressed. It's intuitive. It's clean.
It's distraction free. If you're building a community.’’
</p>
<a href="#" class="flex items-center gap-4">
<div class="h-[50px] w-[50px] overflow-hidden rounded-full">
<img
src="/images/starter/testimonials/author-02.jpg"
alt="author"
class="h-[50px] w-[50px] overflow-hidden rounded-full"
/>
</div>
<div>
<h3
class="text-sm font-semibold text-dark dark:text-white"
>
Musharof Chowdhury
</h3>
<p class="text-xs text-body-secondary">
Founder @ Ayro UI
</p>
</div>
</a>
</div>
</div>
<div class="swiper-slide">
<div
class="rounded-xl bg-white px-4 py-[30px] shadow-testimonial dark:bg-dark sm:px-[30px]"
>
<div class="mb-[18px] flex items-center gap-[2px]">
<img
src="/images/starter/testimonials/icon-star.svg"
alt="star icon"
/>
<img
src="/images/starter/testimonials/icon-star.svg"
alt="star icon"
/>
<img
src="/images/starter/testimonials/icon-star.svg"
alt="star icon"
/>
<img
src="/images/starter/testimonials/icon-star.svg"
alt="star icon"
/>
<img
src="/images/starter/testimonials/icon-star.svg"
alt="star icon"
/>
</div>
<p class="mb-6 text-base text-body-color dark:text-dark-6">
“Our members are so impressed. It's intuitive. It's clean.
It's distraction free. If you're building a community.’’
</p>
<a href="#" class="flex items-center gap-4">
<div class="h-[50px] w-[50px] overflow-hidden rounded-full">
<img
src="/images/starter/testimonials/author-03.jpg"
alt="author"
class="h-[50px] w-[50px] overflow-hidden rounded-full"
/>
</div>
<div>
<h3
class="text-sm font-semibold text-dark dark:text-white"
>
William Smith
</h3>
<p class="text-xs text-body-secondary">
Founder @ Trorex
</p>
</div>
</a>
</div>
</div>
</div>
{/* 切换按钮 */}
<div class="mt-[60px] flex items-center justify-center gap-1">
<div class="swiper-button-prev">
<svg
class="fill-current"
width="22"
height="22"
viewBox="0 0 22 22"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M19.25 10.2437H4.57187L10.4156 4.29687C10.725 3.9875 10.725 3.50625 10.4156 3.19687C10.1062 2.8875 9.625 2.8875 9.31562 3.19687L2.2 10.4156C1.89062 10.725 1.89062 11.2063 2.2 11.5156L9.31562 18.7344C9.45312 18.8719 9.65937 18.975 9.86562 18.975C10.0719 18.975 10.2437 18.9062 10.4156 18.7687C10.725 18.4594 10.725 17.9781 10.4156 17.6688L4.60625 11.7906H19.25C19.6625 11.7906 20.0063 11.4469 20.0063 11.0344C20.0063 10.5875 19.6625 10.2437 19.25 10.2437Z"
/>
</svg>
<SVGLeftArrow/>
</div>
<div class="swiper-button-next">
<svg
class="fill-current"
width="22"
height="22"
viewBox="0 0 22 22"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M19.8 10.45L12.6844 3.2313C12.375 2.92192 11.8938 2.92192 11.5844 3.2313C11.275 3.54067 11.275 4.02192 11.5844 4.3313L17.3594 10.2094H2.75C2.3375 10.2094 1.99375 10.5532 1.99375 10.9657C1.99375 11.3782 2.3375 11.7563 2.75 11.7563H17.4281L11.5844 17.7032C11.275 18.0126 11.275 18.4938 11.5844 18.8032C11.7219 18.9407 11.9281 19.0094 12.1344 19.0094C12.3406 19.0094 12.5469 18.9407 12.6844 18.7688L19.8 11.55C20.1094 11.2407 20.1094 10.7594 19.8 10.45Z"
/>
</svg>
<SVGRightArrow/>
</div>
</div>
</div>
</div>
</div>

14
themes/starter/components/svg/SVGLeftArrow.js Normal file
View File

@@ -0,0 +1,14 @@
export const SVGLeftArrow = () => {
return <svg
class="fill-current"
width="22"
height="22"
viewBox="0 0 22 22"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M19.25 10.2437H4.57187L10.4156 4.29687C10.725 3.9875 10.725 3.50625 10.4156 3.19687C10.1062 2.8875 9.625 2.8875 9.31562 3.19687L2.2 10.4156C1.89062 10.725 1.89062 11.2063 2.2 11.5156L9.31562 18.7344C9.45312 18.8719 9.65937 18.975 9.86562 18.975C10.0719 18.975 10.2437 18.9062 10.4156 18.7687C10.725 18.4594 10.725 17.9781 10.4156 17.6688L4.60625 11.7906H19.25C19.6625 11.7906 20.0063 11.4469 20.0063 11.0344C20.0063 10.5875 19.6625 10.2437 19.25 10.2437Z"
/>
</svg>
}

14
themes/starter/components/svg/SVGRightArrow.js Normal file
View File

@@ -0,0 +1,14 @@
export const SVGRightArrow = () => {
return <svg
class="fill-current"
width="22"
height="22"
viewBox="0 0 22 22"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M19.8 10.45L12.6844 3.2313C12.375 2.92192 11.8938 2.92192 11.5844 3.2313C11.275 3.54067 11.275 4.02192 11.5844 4.3313L17.3594 10.2094H2.75C2.3375 10.2094 1.99375 10.5532 1.99375 10.9657C1.99375 11.3782 2.3375 11.7563 2.75 11.7563H17.4281L11.5844 17.7032C11.275 18.0126 11.275 18.4938 11.5844 18.8032C11.7219 18.9407 11.9281 19.0094 12.1344 19.0094C12.3406 19.0094 12.5469 18.9407 12.6844 18.7688L19.8 11.55C20.1094 11.2407 20.1094 10.7594 19.8 10.45Z"
/>
</svg>
}

53
themes/starter/config.js
View File

@@ -60,7 +60,7 @@ const CONFIG = {
STARTER_PRICING_TITLE: '价格表',
STARTER_PRICING_TEXT_1: '很棒的定价计划',
STARTER_PRICING_TEXT_2: '我们制定了灵活的付费模式，您可以按需选择。（这里仅做功能展示请勿下单！请勿购买！请勿付费！）',
STARTER_PRICING_TEXT_2: '我们制定了灵活的付费模式，您可以按需选择。（NotionNext完全免费，这里仅做主题功能演示。请勿下单！请勿购买！）',
STARTER_PRICING_1_TITLE: '入门版',
STARTER_PRICING_1_PRICE: '19.9',
@@ -90,6 +90,57 @@ const CONFIG = {
STARTER_PRICING_3_BUTTON_TEXT: '立即购买',
STARTER_PRICING_3_BUTTON_URL: 'https://tangly1024.lemonsqueezy.com/checkout/buy/df924d66-09dc-42a4-a632-a6b0c5cc4f28',
STARTER_TESTIMONIALS_TITLE: '用户反馈',
STARTER_TESTIMONIALS_TEXT_1: '我们的站长怎么说',
STARTER_TESTIMONIALS_TEXT_2: '有数千位站长使用NotionNext搭建他们的网站,通过帮助手册、交流社群以及技术咨询，站友们成功上线了自己的网站并且持续运行',
STARTER_TESTIMONIALS_STAR_ICON: '/images/starter/testimonials/icon-star.svg', // 评分图标
// 这里不支持CONFIG和环境变量，需要一一修改此处代码。
STARTER_TESTIMONIALS_ITEMS: [
{
STARTER_TESTIMONIALS_ITEM_TEXT: '感谢大佬的方法。之前尝试过Super、Potion等国外的第三方平台，实现效果一般，个性化程度远不如这个方法，已经用起来了！ ',
STARTER_TESTIMONIALS_ITEM_AVATAR: 'https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F22de3fcb-d90d-4271-bc01-f815f476122b%2F4FE0A0C0-E487-4C74-BF8E-6F01A27461B8-14186-000008094BC289A6.jpg?table=collection&id=a320a2cc-6ebe-4a8d-95cc-ea94e63bced9&width=200',
STARTER_TESTIMONIALS_ITEM_NICKNAME: 'Ryan_G',
STARTER_TESTIMONIALS_ITEM_DESCRIPTION: 'Ryan`Log 站长',
STARTER_TESTIMONIALS_ITEM_URL: 'https://blog.gaoran.xyz/'
},
{
STARTER_TESTIMONIALS_ITEM_TEXT: '很喜欢这个主题，本代码小白用三天台风假期搭建出来了，还根据大佬的教程弄了自定义域名，十分感谢，已请喝咖啡~',
STARTER_TESTIMONIALS_ITEM_AVATAR: 'https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F0d33d169-f932-41ff-ac6b-88a923c08e02%2F%25E5%25A4%25B4%25E5%2583%258F.jfif?table=collection&id=7787658d-d5c0-4f34-8e32-60c523dfaba3&width=400',
STARTER_TESTIMONIALS_ITEM_NICKNAME: 'Asenkits',
STARTER_TESTIMONIALS_ITEM_DESCRIPTION: '阿森的百宝袋 站长',
STARTER_TESTIMONIALS_ITEM_URL: 'https://asenkits.top/'
},
{
STARTER_TESTIMONIALS_ITEM_TEXT: '呜呜呜，经过一个下午的努力，终于把博客部署好啦，非常感谢Tangly1024大佬的框架和教程，这是我有生之年用过的最好用的博客框架┭┮﹏┭┮。从今之后，我就可以在自己的博客里bb啦，( •̀ ω •́ )y ',
STARTER_TESTIMONIALS_ITEM_AVATAR: 'https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F6c096b44-beb9-48ee-8f92-1efdde47f3a3%2F338962f1-d352-49c7-9a1b-746e35a7005c%2Fhf.png?table=block&id=ce5a48a9-d77a-4843-a3d9-a78cd4f794ce&spaceId=6c096b44-beb9-48ee-8f92-1efdde47f3a3&width=100&userId=27074aef-7216-41ed-baef-d9b53addd870&cache=v2',
STARTER_TESTIMONIALS_ITEM_NICKNAME: 'DWIND',
STARTER_TESTIMONIALS_ITEM_DESCRIPTION: '且听风吟 站长',
STARTER_TESTIMONIALS_ITEM_URL: 'https://www.dwind.top/'
},
{
STARTER_TESTIMONIALS_ITEM_TEXT: '感谢提供这么好的项目哈哈 之前一直不知道怎么部署(别的项目好难好复杂)这个相对非常简单 新手非常友好哦',
STARTER_TESTIMONIALS_ITEM_AVATAR: 'https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fd52f6766-3e32-4c3d-8529-46e1f214360f%2Ffavicon.svg?table=collection&id=7d76aad5-a2c4-4d9a-887c-c7913fae4eed&width=400',
STARTER_TESTIMONIALS_ITEM_NICKNAME: '迪升disheng ',
STARTER_TESTIMONIALS_ITEM_DESCRIPTION: 'AI资源分享 Blog',
STARTER_TESTIMONIALS_ITEM_URL: 'https://blog.disheng.org/'
},
{
STARTER_TESTIMONIALS_ITEM_TEXT: '灰常感谢大佬的博客项目，能将博客和notion结合起来，这一直是我挺期待的博客模式。',
STARTER_TESTIMONIALS_ITEM_AVATAR: 'https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fafb21381-f51b-4fd0-9998-800dbeb64dbe%2Favatar.png?table=block&id=195935d2-0d8d-49fc-bd81-1db42ee50840&spaceId=6c096b44-beb9-48ee-8f92-1efdde47f3a3&width=100&userId=27074aef-7216-41ed-baef-d9b53addd870&cache=v2',
STARTER_TESTIMONIALS_ITEM_NICKNAME: 'AnJhon',
STARTER_TESTIMONIALS_ITEM_DESCRIPTION: 'Anjhon`s Blog 站长',
STARTER_TESTIMONIALS_ITEM_URL: 'https://www.anjhon.top'
},
{
STARTER_TESTIMONIALS_ITEM_TEXT: '用好久了，太感谢了',
STARTER_TESTIMONIALS_ITEM_AVATAR: 'https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fe4f391d7-7d65-4c05-a82c-c6e2c40f06e4%2Fa2a7641a26b367608c6ef28ce9b7e983_(2).png?table=block&id=a386eb0e-4c07-4b18-9ece-bba4e79ce21c&spaceId=6c096b44-beb9-48ee-8f92-1efdde47f3a3&width=100&userId=27074aef-7216-41ed-baef-d9b53addd870&cache=v2',
STARTER_TESTIMONIALS_ITEM_NICKNAME: 'LUCEN',
STARTER_TESTIMONIALS_ITEM_DESCRIPTION: 'LUCEN考验辅导 站长',
STARTER_TESTIMONIALS_ITEM_URL: 'https://www.lucenczz.top/'
}
],
STARTER_NEWSLETTER: process.env.NEXT_PUBLIC_THEME_STARTER_NEWSLETTER || false // 是否开启邮件订阅 请先配置mailchimp功能 https://docs.tangly1024.com/article/notion-next-mailchimp
}
export default CONFIG