Article

���Ϳ�Դ - Ricocc Blog 2024

更新于:2024-11-01 5 min read

��վԤ��

Ԥ��ģ���ַ: https://blog-template.606design.art/

�ֿ��ַ: https://github.com/ricocc/public-portfolio-site

ricocc-wechat

����ջ

  • Astro.js 4.15.9
  • Sass 1.79.4
  • typescript: 5.6.2

����ѡ��

���ı������壺 ���������� �ٷ�����

�������壺˼Դ���� Google Font

Ӣ�����壺Special Elite Google Font

���������������������������еı��⣬��ѡ����ת��Ϊ SVG �ĸ�ʽǶ�롣���������������壬��ת����ʽ�滻��


�����÷�˵��

Data ��վ��Ҫ��Ϣ

��Ҫ����վ��Ϣ����Ҫ������ src/data/ ���棬����ͨ���޸��⼸���ļ��е��������޸�Ϊ�Լ�����վ��

  • content.ts ��վ�Ļ�����Ϣ��������ϵ��ʽ��������TDK ��
  • project.ts ��Ŀ��Ϣ����Ҫչʾ����Ŀ�б��У����Ǿ������Ŀ��ϸҳ�棬��Ҫ�ֶ�����
  • home.json ��ҳչʾ����Ʒ�б�����ѡ��չʾ��������Ϣ�Ƚ϶� About ҳ����Ҫ�ֶ������Լ��ĸ��˽��ܣ��������ݣ�ֻ��Ҫ�� content/blog/*�ļ����������� markdown �ļ�����, ���չ̶���ʽ�������б����Զ����ӱ����·��

��վ��Ҫ��Ϣ����� src/data/content.ts �޸������Ӧ�����ݼ��� ������Ҫ��ҳ�����ֶ��޸�

Indexҳ����Ŀչʾ

��Ŀ���ݴ�ŵ�ַ�� src/data/home.json

[
	{
		"id": "1",
		"cover": "/assets/cover/cover-todo.jpg",
		"title": "�����嵥��ҳ��",
		"desc": "һ���������Ƽ��� Todolist ��ҳ�汾",
		"url": "https://todo.606design.art/",
		"detail": "/detail/todo",
		"category": "web",
		"tag": "Web",
		"date": "2023-07-05",
		"mark": true,
	},
]
		"id" // ��Ŀid  ��ѡ��
		"title"  //��Ŀ����  ����
		"cover"  // ��Ŀ����ͼƬ  ��ѡ��
		"desc" // ��Ŀ����  ��ѡ��
		"url" /// ��Ŀ��ַ  ��ѡ��
		"detail" // ��Ŀ��ϸ����ҳ��·��  ��ѡ��
		"category" // ��Ŀ���� ��ѡ��, Ϊ����Ĭ�Ϸ��ൽ other
		"tag" // ��Ŀ��ǩ ��ѡ��, ����һ��Ҫ��д
		"date" // ��Ŀ����ʱ�� ��ѡ��
		"mark" // �Ƿ���ʾ�Ƽ���ǩ  ��ѡ�� Ĭ�� false

��Ŀ�б�

��Ŀ /project

export interface ProjectItem {
	id?: number; // Ψһ��ʶ��
	title: string // ��Ŀ����
	title_en?: string //Ӣ����Ŀ����
	description?: string  // ��Ŀ����
	date?: string		//��������
	detail?: string //��ϸҳ·��
  url?: string  //��������
	tags?: string[] //��ǩ
	cover?: string[] //����
}

��Ŀ��ϸ����

������Ŀ������Ҫ�½�ҳ��*.astro���ֶ��浵��url ��project.json �� detail ���Զ�Ӧ��д, ����д�Ļ�����ҳ��Ŀû������ src/pages/detail/


?? ��Ŀ�ṹ

Inside of your Astro project, you’ll see the following folders and files:

/
������ public/
��   ������ images/
��   ������ logo.svg
��   ������ favicon.ico
��   ������ ...
������ src/
��   ������ assets/
��   ��   ������ *Layout.astro*
��   ������ components/
��   ��   ������ *
��   ������ layouts/
��   ��   ������ Layout.astro
��   ������ content/
��   ��   ������ *
��   ������ data/
��   ��   ������ content.ts
��   ��   ������ project.ts
��   ��   ������ home.json
��   ������ effets/
��   ��   ������ *.astro
��   ������ layouts/
��   ��   ������ Layout.astro
��   ������ pages/
��       ������ index.astro
��       ������ about.astro
��       ������ project.astro
��       ������ blog.astro
��       ������ 404.astro
������ package.json

?? ����

All commands are run from the root of the project, from a terminal:

CommandAction
npm installInstalls dependencies
npm run devStarts local dev server at localhost:4321
npm run buildBuild your production site to ./dist/
npm run previewPreview your build locally, before deploying
npm run astro ...Run CLI commands like astro add, astro check
npm run astro --helpGet help using the Astro CLI

Yarn Command:

CommandAction
yarn installInstalls dependencies
yarn devStarts local dev server at localhost:4321
yarn buildBuild your production site to ./dist/
yarn previewPreview your build locally, before deploying
yarn astro ...Run CLI commands like astro add, astro check
yarn astro --helpGet help using the Astro CLI

��������

���� Rico�� Ŀ���dz�Ϊһ����������ʦ�ʹ��⿪���ߣ�Ŀǰרע����ҳ�Ӿ��ļ���ʵ�֣�Ҳ�о��о� 3D������վ��Ŀǰ���ڻ����Ĵ���һЩ��Ʒ������Ȥ�ʹ����ԵĶ���������Ȥ�Ļ���Ҳ���Թ�עһ���ҵ�С���� @Rico���������������ͨ���ʼ���ϵ��: hello@606design.art��

??֧������

����������������Ļ���һ���֧�־Ϳ��Դ���������ߵ����飬��л��

ricocc-wechat