we new

Blog居中调整(基于Next主题)

       今天在github上Next主题的issues碰巧看到一篇关于sidebar居中的讨论,而之前就对于主页里面 标题 和 read more 靠左感觉不舒服,想改成居中的模式。于是就在sublime里面对Next主题搜索 text-align: left, Searching 276 files for “text-align: left”,在276个文件里面找到了相关的设置 是在 themes\next\source\css\ _schemes\Mist\ _posts-expanded.styl 这个文件里面进行相关的修改。(注意我使用的是Mist场景,场景不同的小伙伴可以尝试将路径里的Mist改成自己使用的场景)

标题居中

1
.post-title,

改成

1
2
3
.post-title{
text-align: center;
}

详情居中

详情 即为 “发表于 | 分类于 | 阅读次数” 等 ,而在.post-meta中text-align: $site-meta-text-align 所以需要修改 $site-meta-text-align为center。在\themes\next\source\css\ _variables\Mist.styl 文件中找到 $site-meta-text-align = left; 并修改为 $site-meta-text-align = center;

内容居中

因为居中后的效果不是很好,所以我就没有改了,想改的朋友可以参考下面的步骤:
在 themes\next\source\css\ _common\components\post\post-expand.styl 文件中将

1
2
.posts-expand .post-body {
+desktop() { text-align: justify; }

改为
1
2
.posts-expand .post-body {
+desktop() { text-align: center; }

Read-More居中

将.post-more-link里面的 text-align: left; 改成 text-align: center;

标签居中

将.post-tags里面的 text-align: left; 改成 text-align: center;


声明: 本文转载前需与作者联系并标明出处
分享到: