最后完成了一个简易的博客系统， 代码地址: https://github.com/Maricaya/nextjs-blog 预览地址：http://121.36.50.175/ 不得不说 SSR 真香，...来记录下学习（踩坑）的过程，这篇文章的代码都在https://github.com/Maricaya/nextjs-blog-1啦。 先来看看 Next.js 是什么吧。...创建项目 # nextjs-blog-1 是我们的项目名称 npm init next-app nextjs-blog-1 选择 Default starter app。...创建第一篇文章 根目录下创建 posts 文件夹，我们的文章放在这个路径下。...先在项目分别中使用 a 标签、Link 标签导航，实现首页和第一篇文章互相跳转。
# 打开链接http://127.0.0.1:3000/，这个时候就可以打开我们启动的页面了 添加CMS管理后台 切换到apps的目录执行安装strapi命令，演示作用我就没展示mysql的链接了，大家有兴趣我可以再下一个文章去写一下...由于strapi可以用草稿发布模式，我们文章就使用这个模式，你点击创建实体的时候会有让你选择的，默认是选择上的。...，上面我们说到我们在nextjs中需要引入shadcn/ui,这个是最近势头很猛的一个组件集合。...它不称自己为组件库，而是叫集合。全部的代码开源，也可以直接拷贝进去进行使用。现在我们就去我们的next14那里去集成一下这个ui。...，可以愉快的添加文章了 项目链接 blog-project
针对这些问题，Next.js提供了一个很好的解决方案，使开发人员可以将精力放在业务上，从繁琐的配置中解放出来。下面我们一起来看看它的一些特性。...About Page Hello Next.js ) export default Index 这时候就能通过点击链接进行导航了...'deploy-nextjs', title: 'Deploy apps with ZEIT' } ] } export default function Blog() { return (...，Highlight 组件不会被加载，加速了页面的展现，从而实现按需加载的效果。...更详细的使用介绍请看官方文档。
说明 前两篇文章介绍了 Hexo + github pages + travis ci 进行自动化部署，并介绍了 Hexo 的配置文件中的各个属性，相信通过前两篇文章的学习，你已经学会了如何搭建自己的博客...设置博客主题 先到这里 选择你喜欢的主题，点击它的标题（注意，点图片是进去 demo 站点，点标题才是跳转到对应到 github 仓库），跳转到 github 仓库，复制其仓库地址。...菜单导航配置 配置基本菜单导航的名称、路径url和图标icon. 1.菜单导航名称可以是中文也可以是英文(如：Index或主页) 2.图标icon 可以在Font Awesome 中查找 menu:...⚠️这里需要注意一点，如果你想要替换成自己的歌单时，会发现，后续歌单的更新是不会影响到它的，这也是我捣鼓半天才发现的，音乐插件使用的是 Aplayer 播放器，在 https://cdn.jsdelivr.net...中的 author 文章作者 img featureImages 中的某个值 文章特征图，推荐使用图床(腾讯云、七牛云、又拍云等)来做图片的路径.如: http://xxx.com/xxx.jpg top
博客网站的架构如下： 1.左上方头像区域，鼠标移入会有下拉菜单进行注册登录退出等操作 2.左下方博客导航栏区域 3.中间博客正文区域 3.右侧精选文章展示以及友情链接展示 我们可以先看下具体的首页效果...每个菜单选项就是一个el-dropdown-item，在el-dropdown-item下我直接使用router-link进行跳转到对应的界面。 ?...左右两侧导航栏实现完毕，接下来需要设置中间的博客主界面，实际上中间界面不是固定界面，而是由index.js中routes的components决定具体渲染哪一个vue文件作为博客主界面，在首页我们渲染的是...接着我们先来看看后端接口的实现，在项目根目录创建dao文件夹，关于数据库的业务逻辑全部放在dao层实现。首先在router层接收前端的参数，然后调用dao层查询数据库文章列表： ?...接口实现完成我们回到article.vue中开始文章列表的渲染工作，组件内放置一个class为content的div，使用v-for循环渲染文章列表，对文章标题和阅读全文按钮添加点击事件，点击按钮可以跳转到文章详情界面
添加打赏功能 打赏是读者对笔者支持的最大动力，作为经常写博客的笔者来说，打赏功能如果在自己的博客中出现，那真的是求之不得呀（虽然基本不会有人来打赏）！...获取Key，修改站点配置 完成Hexo Algolia后，回到Algolia官网的Dashboard，在左侧导航栏选择API Keys一项，跳转到如下图所示的页面。...笔者以为，写技术博客一方面作为个人知识积累外，更重要的是让读者通过阅读有所收获，而阅读数量作为一篇文章质量好坏的重要参考因素，可以为作者继续文章创作带来信心。...关于RSS的使用 最近有读者私信我，发现使用Safari订阅的文章无法访问： 笔者尝试了一下，发现了RSS的作用，之前文章中提到的RSS：...点击RSS后，会在浏览器的订阅栏中出现博客最新的5篇文章，而读者访问不了订阅文章的原因是配置RSS的时候，笔者使用的是inerdstack.com的域名，后来笔者更换了域名，RSS没有更新
正巧看到黑石博客有一篇建立分站的文章，于是就照着做了一番，建立了一个简洁的主题，效果不错。...（可以在顶部导航栏点击跳转到分站） 教程链接：为Hexo博客建立其他主题分站 - 黑石博客 - Hexo博客 (heson10.com) 正文 1.根据正常建立Hexo静态博客的步骤一样建站，并选择分站的主题...theme: next 2.同样在分站的根目录下修改_config.yml文件中的url和root。...image.png 4.设置主站渲染时跳过分站： 在主站的根目录下设置_config.yml文件中的skip_rende skip_render: - next/** 5....在主站的_config.butterfly.yml文件中设置导航栏分站选项 menu: 分站||fas fa-sitemap: Next: /next/ || fas fa-chevron-right
修改社交链接 在主题的 config.yml 文件中，默认支持 QQ、GitHub 和邮箱等的配置，你可以在主题文件的 /layout/_partial/social-link.ejs 文件中，新增、修改你需要的社交链接地址...author 根 _config.yml 中的 author 文章作者 img featureImages 中的某个值 文章特征图，推荐使用图床 top true 推荐文章（文章是否置顶），如果 top...值为 true，则会作为首页推荐文章 cover false v1.0.2 版本新增，表示该文章是否需要加入到首页轮播封面中 coverImg 无 v1.0.2 版本新增，表示该文章在首页轮播封面需要显示的图片路径...summary 无 文章摘要，自定义的文章摘要内容，如果这个属性有值，文章卡片摘要就显示这段文字，否则程序会自动截取文章的部分内容作为摘要 categories 无 文章分类，本主题的分类表示宏观上大的分类...date 的值尽量保证每篇文章是唯一的，因为本主题中 Gitalk 和 Gitment 识别 id 是通过 date 的值来作为唯一标识的。
本篇文章，我将和大家一起使用 React 和 Next.js 技术从0到1创建一个博客网站，通过本案例，你将会学习到 Next.js 的以下内容： 如何创建一个基本的页面 如何通过已有的 Markdown...并且 NextJS 还支持页面预加载，在链接页面时可以选择是否在打开本页时就预先获取被链接页面的代码，这样打开链接时就不需要再发送网络请求，直接渲染！... ); } 当点击 /about 链接时，Next.js 会以 Ajax 的方式加载内容一次，并缓存起来，并在页面中呈现它。...我们通常会在其目录下新建个 images目录，放置博客的图片，在页面里，我们可以使用 "/images/图片名" 路径引用图片。...未完待续 今天的案例就介绍到这里，想必大家对 Next.js 已有一个初步的认识，下一篇文章我们将一起学习基于现有的 MarkDown 文章生成动态路由和静态页面生成器的知识（Static Generation
release 包，解压到博客根目录 themes/ 文件夹下 2.主题应用 修改博客根目录下的 _config.yml 文件，修改theme配置信息： theme: xxxx （注意冒号后面有空格...主题样式作为说明 博客基本配置 _config.yml站点配置文件 基本信息配置 # 站点标题、子标题、网站描述、关键字(使用半角逗号,分隔多个关键词)、作者、语言、网站时区等博客资料 title...permalink 文章的 永久链接 格式 :year/:month/:day/:title/ permalink_defaults 永久链接中各部分的默认值 pretty_urls 改写 permalink...主题项目中的_config.yml复制并重命名为_config.butterfly.yml放置在博客根目录下，相关主题样式配置修改则直接变更即可 # 对应主题配置文件修改，导航编辑格式为‘/菜单名/ |...，从而可通过子目录的方式访问博客信息 需注意的是此处发布子目录的概念不是在原有的github.io仓库下新增子目录存放文件信息，而是借助github.io平台自动转到相应的子仓库 本地访问路径
博客之前换过一次域名，一直用301跳转解决。发现大半年过去了，百度那还剩160多条收录。每天通过搜索引擎的流量也不少，导致zmki.cn现在这个seo流量流失很严重!...PHP写了一个倒计时自动跳转到新域名的小工具。实现不影响用户访问之前的链接。也不会再去百度和现在的域名抢流量。...特点: 提取当前访问URL用拼接跳转到新域名 全程参数跟随 模板自适应 PC+手机端完美展示 JavaScript倒数显示，php自动跳转 制定404页面实现旧域名一键全站支持跳转 演示: 首页:blog.weidro.cn...文章:blog.weidro.cn/archives/41/ 标签:blog.weidro.cn/archives/tag/%E6%8F%92%E4%BB%B6 *新站做好来路域名处理后，不管来啥域名都可以准确跳转...部署： 宝塔为例 在旧域名根目录首页放一个index.php，实现首页跳转 在根目录放一个404.php，实现全站跳转 php格式的404页面默认不支持，需在宝塔-站点修改-配置修改中修改 如图：
在目录中创建不直接提供给客户端的文件 在特定目录中创建文件，这些文件不会直接作为页面提供给客户端，除非它们被显式地添加到page.tsx文件中。 5....：通过创建一个名为links的常量来定义你想要在导航栏中显示的链接。...映射链接：使用map方法遍历links数组，并为每个链接生成一个Link组件。 活动链接样式：使用usePathname钩子获取当前的路径。...通过以上步骤，你可以在Next.js应用中创建一个具有活动状态样式的导航栏，这不仅让用户界面看起来更加友好，还能提高用户的导航体验。...作为React开发者，掌握并应用这些新特性，将是我们适应和引领前端技术潮流的关键。让我们拥抱NextJS 14，共同开启前端开发的新篇章！
我的博客主题使用已接近两年，整体来说还是偏于简洁实用型，基本上没有什么其他扩展功能，既然在官方网站没找到合适的插件，也不会自己打造一个插件，就一直保持了下来，现在用起来不便，才到网上搜索查找与日历相关的插件...文件在博客的根目录，这也是最重要的数据文件，保存了你的所有文章的标题、链接、日期等信息，内容格式大致如下： {"2018-10":[ {"title":"Godot3游戏引擎入门之六：制作TileMap...root 属性值，也就是说你的博客内容并不是放在服务器根目录，而是某个文件夹，那么 Calendar 插件生成的 JSON 数据文件中的链接 link 将全部无效，这时候需要手动 Hack 一下插件的源代码...以我的博客为例，我在全局配置文件 _config.yml 中配置了博客根目录： root: /blog/ 所以内容放在服务器下名为 /blog/ 的文件夹下，因此日历上的链接路径也应该加上 /blog/.../calendar.json' //这里我添加了我的博客根目录 blog }; 特别注意代码中的两行注释，因为我的博客根目录 root 是在服务器的 /blog/ 文件夹下，所以添加了相应的路径，这和博客根目录下的配置文件
作者：小茗同学 链接：www.cnblogs.com/liuxianan 前言 使用github pages服务搭建博客的好处有： 全是静态文件，访问速度快； 免费方便，不用花一分钱就可以搭建一个自由的个人博客...并没有失效，而是会自动跳转到你的新域名。...原理 由于github pages存放的都是静态文件，博客存放的不只是文章内容，还有文章列表、分类、标签、翻页等动态内容，假如每次写完一篇文章都要手动更新博文目录和相关链接信息，相信谁都会疯掉，所以hexo...写博客 定位到我们的hexo根目录，执行命令： hexo new 'my-first-blog' hexo会帮我们在_posts下生成相关md文件： ?...最终部署时生成：hexo\public\my-second-blog\index.html，但是它不会作为文章出现在博文目录。 4.12.1. 写博客工具 那么用什么工具写博客呢？
转载此文章，请注明原文链接和作者，谢谢合作！移步我的个人博客：https://yafine-blog.cn，阅读体验更佳 前言 你了解Hexo吗？...主题配置 2.1 切换主题 注意：首先需要明白什么是站点配置文件，什么是主题配置文件，站点配置文件就是根目录下的配置文件，比如我的博客文件在F:\blog下，那么站点配置文件就是F:\blog\...中的 author 文章作者 img featureImages 中的某个值 文章特征图，推荐使用图床(腾讯云、七牛云、又拍云等)来做图片的路径.如: http://xxx.com/xxx.jpg top...true 推荐文章（文章是否置顶），如果 top 值为 true，则会作为首页推荐文章 cover false v1.0.2版本新增，表示该文章是否需要加入到首页轮播封面中 coverImg 无 v1.0.2...这个字段确保了在我们修改了Front-matter 内的博客标题title或创建日期date字段之后而不会改变链接地址。
它使用 Node.js作为构建引擎，上百个文件在几秒钟内便可构建完成；而且拥有着丰富的插件库，因开源而显得生机勃勃，可扩展性很好；最重要的，它支持 Markdown 作为书写语言，极大地方便了博客的撰写...，原来的你的用户名.github.io并没有失效，而是会自动跳转到你的新域名。...原理 由于github pages存放的都是静态文件，博客存放的不只是文章内容，还有文章列表、分类、标签、翻页等动态内容，假如每次写完一篇文章都要手动更新博文目录和相关链接信息，相信谁都会疯掉，所以hexo...写博客 定位到我们的hexo根目录，执行命令： hexo new 'my-first-blog' hexo会帮我们在_posts下生成相关md文件： 我们只需要打开这个文件就可以开始写博客了，默认生成如下内容...hexo new page "my-second-blog" 生成如下： 最终部署时生成：hexo\public\my-second-blog\index.html，但是它不会作为文章出现在博文目录
首先我们在 blog 应用的根目录下（models.py 所在目录）新建一个 feeds.py 文件以存放和 RSS 功能相关的代码。...import Post class AllPostsRssFeed(Feed): # 显示在聚合阅读器上的标题 title = "Django 博客教程演示项目" # 通过聚合阅读器跳转到网站的地址...link = "/" # 显示在聚合阅读器上的描述信息 description = "Django 博客教程演示项目测试文章" # 需要显示的内容条目 def..." title="订阅本站"> 运行服务器，在网站点击 RSS 订阅的链接，就跳转到 /all/rss/，你会看到一堆乱码一样的东西，这就是生成的...RSS 标准文档，当然这个文档不是给你读的，而是给 RSS 聚合阅读器工具读的。
博客提供 RSS 订阅应该是标配，这样读者就可以通过一些聚合阅读工具订阅你的博客，时时查看是否有文章更新，而不必每次都跳转到博客上来查看。现在我们就来为博客添加 RSS 订阅功能。...RSS 简介 RSS（Really Simple Syndication）是一种描述和同步网站内容的格式，它采用 XML 作为内容传递的格式。...首先我们在 blog 应用的根目录下（models.py 所在目录）新建一个 feeds.py 文件以存放和 RSS 功能相关的代码。...> RSS 订阅 运行开发服务器，在侧边栏点击 RSS 订阅的链接，就跳转到 /all/rss/，你会看到这对乱码一样的东西，这就是生成的 RSS 标准文档，当然这个文档不是给你读的...，而是给 RSS 聚合阅读器工具读的。
因为以前对域名进行了一些调整，所以实际上我的博客在历年来经历了两个域名 blog.walterlv.com（新）和 walterlv.com（旧）。...---- 背景 （新） walterlv.com （旧） 以前不会碰到这样的问题，是因为我并没有使用 GitHub Pages 服务来构建博客，然而现在是了。...不信你试试，点击链接 https://walterlv.com/post/multiple-domains-for-github-pages 会短暂进入一个“正在重定向……”的页面，然后随即跳转到新域名下相同的页面...在第二个仓库中，我们故意什么都不放，这样会触发 404，我们在 404 页面里面跳转到新的域名即完成了我们的目的。...欢迎转载、使用、重新发布，但务必保留文章署名 吕毅 （包含链接： https://blog.walterlv.com ），不得用于商业目的，基于本文修改后的作品务必以相同的许可发布。
4、在左侧导航栏，【网络与安全】安全组 ，然后单击安全组的ID链接查看安全组配置。 确保安全组开放了80端口访问，否则无法访问已搭建的WordPress个人博客。...将WordPress安装目录下的wp-config-sample.php文件复制到wp-config.php文件中，并将wp-config-sample.php文件作为备份。...在httpd.conf内，将DocumentRoot后的内容替换为wordpress根目录。本示例中根目录为/var/www/html/ 。...您可以单击【Write your first blog post】，开始编写您的第一篇博客。...接下来就是要不断的更新文章内容来充实博客，而关于博客文章的写作要持之以恒，说起来容易，做起来却难。很多人开通自己的独立博客之后的第一个月可能比较积极，当热度不再时就逐渐的懒惰起来了。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
