主页设计|PostX|📰

分享
主页设计|PostX|📰

漂亮的主题是难🉐的,之前用了很长一段时间的Ghost,主题实在设计精美,最近转至WordPress,试了多款主题,都不怎么让人🈵意。还好有很多经典的样板主题可以参考,同时还有好用的免费工具PostX可以轻松实现美观的界面。

好的设计

Ghost官方主题

Ghost Themes – The Marketplac

Ghost官方主题是我非常喜欢的,也是我之前多次转Ghost的原因。首先是官方默认主题Casper,有巧妙的设计,非常适合入门使用。

Headline的设计非常巧妙,简单的界面,实现了非常灵活的功能。

image-4

Ghost的主题库的主题质量非常高,当然大部分是付费的,看看就可以了,免费的已经非常好了。

Wpzoom

这家主题商店有很多漂亮的主题,Inspiro就是他家设计的。官网有很多漂亮的主题,都是功能丰富、设计精巧,很多界面都是值得借鉴的。例如,我觉得Prime News就是一款非常漂亮的新闻/博客主题。

全站编辑

虽然我很喜欢全站编辑这个方案,但是目前很多主题都不成熟,很多功能还需要开发者的耕耘,配套的几个模块只能完成基本的操作,而且很多Block插件目前还不支持全站编辑主题。

PostX

PostX – Gutenberg Post Blocks for Post Grid – WPXPO

这款Block拥有非常强大的功能,免费的版本已经够使用。官方免费的模板目前有3个,都是非常好看且好用的。

实现方法

目前PoxtX还不能很好兼容全站编辑主题,不过可以通过新建页面,来跟更成熟的传统主题配合使用,整体效果更好。点击右上角的PostX Library,就会弹出一个对话框,筛选Free,就可以看到3个免费的模板。由于这是块编辑器,虽然3个免费的模板是官方定制好的,你也可以单独使用个别元素进行随意组合。

图片大小不一致的解决办法

当然,目前有一个问题,需要手动配置,那就是主页上文章网格图片没有统一大小,不过这个问题可以通过简单的方式进行解决。

找到需要调整高度的区块,然后在Advanced选项卡找到Custom CSS,输入如下内容,即可:(图片的高度请自行调整)

{{ULTP}} .ultp-block-image {
height:255px;  
}

我的设计

主题选择

由于全站编辑主题与PostX的兼容性存在问题,最后我选择Blocksy,当然Kadence也不错,(Kadence的性能更强,速度更快)。

透明页眉

Blocksy和Kadence都支持透明页眉,Blocksy需要安装配套的插件,才能实现,Kadence直接就可以选择透明页眉。然后很重要的一步,就是配置好哪些页面需要透明页眉,我的建议就是主页和文章页使用透明页眉就可以了。

模块选择

我喜欢大的图片作为透明页眉的底图,同时,将谋篇文章作为顶部的展示(不是静态的内容),那么可以选择PostX的免费模板的中间那个样式,导入后,将第一个大图文章选中,在弹出的对话框中,选择对其方式为全幅,那么这篇文章的展示图就会铺满整个页眉,实现沉浸式的效果。

文章页面也配置好透明页眉,实现整个网站的风格的统一。

整体效果

www.hostens.com_

阅读更多

更好的字幕翻译工具

更好的字幕翻译工具

如果你还在找一个更好的字幕翻译工具,那么就是是“沉浸式翻译”这个浏览器插件把,免费版本可以使用微软翻译、硅基流动翻译、GlM-4 Flash和Babel lite。 我测试了一下《挽救计划》的英文字幕,翻译成中文。这部电影的字幕其实难度还是挺大的,不过就我测试了硅基流动翻译、GlM-4 Flash和Babel lite 3个模型的翻译效果,这里推荐Babel lite模型。原因如下: 字幕里面有一个断句的 文本,Babel lite能准确翻译出原文表达的意思: 00:09:4900:09:52Over the next 30 years, the Earth could在未来 30 年,地球可能会 00:09:5200:09:55cool maybe 10凉爽,也许 10

By typenode
给网站添加view-transition动画

给网站添加view-transition动画

view-transition是一个很专业的功能,可以通过CSS去实现网页动画,在跨网页浏览上启用view-transition,无需多余配置即可获得一个优雅的网站页面切换效果。 适用于多页面应用的跨文档视图过渡 | View Transitions | Chrome for Developers开始在您的多页应用 (MPA) 中使用跨文档视图过渡。Chrome for DevelopersX demo: HomecamelCase 配置 在Code injection里面添加如下代码即可: <style> @view-transition { navigation: auto; } ::view-transition-group(root){ animation-duration:600ms } </style>

By typenode
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