【网站出海】静态网站迁移至Astro架构

最新推荐文章于 2024-08-10 08:45:00 发布

开发者码神

最新推荐文章于 2024-08-10 08:45:00 发布

阅读量1.1k

点赞数 29

文章标签：前端框架开发语言前端程序人生

本文链接：https://blog.csdn.net/developermasheng/article/details/139234772

版权

本文来自公众号：开发者码神。欢迎关注第一时间阅读精华文章。

Astro 是最适合构建像博客、营销网站、电子商务网站这样的以内容驱动的网站的 Web 框架。Astro 以开创了一种新的前端架构而闻名，与其他框架相比它减少了 JavaScript 的开销和复杂性。如果你需要一个加载速度快、具有良好 SEO 的网站，那么 Astro 就是你的选择。

如果你想要你的网站有好的排名，除了优质的内容，其次就是好的网站结构。

本文就是将市面上的好看的html静态模板转换为Astro格式。

在阅读本文之前，建议先通篇阅读Astro基础教程。

https://docs.astro.build/zh-cn/getting-started/

1、安装

npm create astro@latest

2、迁移全局样式

在src/styles/创建一个新文件（你需要先创建一个styles文件夹）。
把下面代码复制到你新创建的文件src/styles中：

3、迁移图片和js资源

1、在src下面创建图片文件夹、创建js文件夹

---
import '../styles/style.css';
import '../styles/colors/default.css';
import '../styles/responsive.css';
import '../styles/fontawesome-free-5.14.0-web/css/all.min.css';
import '../styles/icofont/css/icofont.css';
import '../styles/googleapos.css';
---
<img alt='img' src='src/images/demo/silverspies_avatar-60x60.png' class='avatar' height='60' width='60' loading='lazy'/></a>

<Footer />
<!-- end #footer -->
 

<!-- Footer Theme output -->
 <script>
    import "../js/custom.js";
    import "../js/jquery.sticky-kit.js";
    import "../js/masonry.min.js";
    import "../js/jquery-3.6.0.min.js";
 </script>
</body>
</html>

4、创建组件

分析一下网页，有哪些组件是复用的。

导航拦组件

创建一个新文件：src/components/Navigation.astro
导入并使用

Footer组件

创建组件

导入组件

社交媒体组件

创建Social.astro

导入

Header组件

创建header组件

引入

5、创建布局

你现在仍然在每个页面上重复渲染一些 Astro 组件。是时候再次重构，创建一个共享的页面布局

基础而布局-BaseLayout

创建一个新文件：src/layouts/BaseLayout.astro（你需要首先创建一个 layouts 文件夹）

将静态文件中的index中的通用部分放到这里，比如head，header、footer、js、css，并预留这样可以加载index网页的内容进入布局。

文章布局-MarkdownPostLayout

因为文章也是包含header和footer的，所有可以把之前的基础布局引入。

这里有个注意点，就是本地静态文件的路径要写绝对路径，不能写相对，如下

在看看文章页

因为我没打算用markdown写文章，所有就这里只放文章的内容，这里引入了我们刚刚创建的MarkdownPostLayout布局，这时候访问http://localhost:4321/posts/post-1，就能展示文章内容了。

6、动态展示文章列表

1、引入文章集合变量。

const allPosts = await Astro.glob('../pages/posts/*.md');
做循环
<img width="250" height="300" src={post.frontmatter.image.url} class="attachment-qefood-wp-thumbnail-blog-grid" alt="img" loading="lazy" /><a href="blog-post.html"></a>