登录 订阅
建站笔记

给网站添加view-transition动画

给网站添加view-transition动画

view-transition是一个很专业的功能，可以通过CSS去实现网页动画，在跨网页浏览上启用view-transition，无需多余配置即可获得一个优雅的网站页面切换效果。

适用于多页面应用的跨文档视图过渡 | View Transitions | Chrome for Developers
开始在您的多页应用 (MPA) 中使用跨文档视图过渡。
Chrome for DevelopersX

demo：

Home
camelCase

配置

在Code injection里面添加如下代码即可：

<style>  

    @view-transition {
	navigation: auto;
    }  
   ::view-transition-group(root){
     animation-duration:600ms
   }
   
</style>

Read next

Fix ActivityPub Webhook Error

Fix ActivityPub Webhook Error

之前的Ghost托管在PikaPods上面，其实相当于是Managed Ghost，所以你不需要去操心服务器的配置。最近换了服务商，那么情况就不一样了，遇到的所有问题都需要自己去处理，其中一个就是ActivityPub无法正常使用。 错误排查 查看log后发现报错：No Webhook Secret Found。 原因分析 * /.ghost/activitypub/* * /.well-known/webfinger * /.well-known/nodeinfo 上面三个ActivityPub资源配置错误，并未通过https反对带至ap.ghost.org。 处理办法 将需要反代的路径添加至nginx配置文件即可： location ~ /.ghost/activitypub/* { proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; proxy_se
typenode
Ghost 设置页面图片宽度

Ghost 设置页面图片宽度

这个问题也是一个老大难的问题，我总觉得，Ghost几乎是把所有精力都放在了搞不懂的地方，都2025年了，还是没有媒体库，当然，想通过编辑器去调整图片宽度，没辙，不过皇天不负有心人，这里还是有一个不是那么完美的解决办法： 配置方法 在文章编辑页面，找到右边隐藏的控制面板，找到Code injection，然后在Post header的代码框，填入下面的内容即可 <style> img{ width: 100%;* padding-left: 0%; } </style> 调整参数 width: 100% 这个参数可以调整，例如固定宽度px，百分比%，自动大小auto等等，详细设置可以去学习CSS关于元素宽度的内容。 参考文章 Ghost: Markdown设置图片宽度，避免页面被撑开网上方法有很多 * [图片标题](url =xxx) * [图片标题](url){width样式定义} * img的http标签写法，加入限制宽度属性 * 在文章头部加入样式定义
typenode
Ghost添加阅读进度条

Ghost添加阅读进度条

进度条其实是一个不是很必要的功能，不过，有这个功能，在看文章的时候就能大概知道阅读的进度，总体上如果不是太耀眼，还是挺好的一个功能。要实现这个功能，只需要在Ghost后台的Code injection里面添加两段代码就可以了。 效果参考 Scroll progress widgetIn today’s fast-paced digital world, the boundaries between technology and creativity are increasingly blurred. Innovations in augmented reality (AR), blockchain, cloud computing, coding, design, gadgets, graphics, UI/UX, and virtual reality (VR) are reshaping industries and creating
typenode

Comments ()