{
"title": "xLog 开启自定义CSS",
"tags": [
"post",
"xLog"
],
"sources": [
"xlog"
],
"external_urls": [
"https://qfdk.xlog.app/xLog-kai-qi-zi-ding-yi-CSS"
],
"date_published": "2023-03-15T19:30:14.684Z",
"content": "### 碎碎念\n\n过年回国终于回来了, 路上折腾了很久,回来之后一直在忙单位的项目. 由于人手不够,不得不启用外包模式,然而外包的效果并不是很好. 临近上线了,发现 PO 居然没有做测试,这种东西没法忍... 导致这篇文章迟了很久...\n\n偶然的机会认识了xLog, 发现是一个很有意思的项目,只不过界面都是英文的,一开始看起来还是比较 **别扭**, 为什么这么说,工作环境本来就是外语环境 回家还要看到个非母语的东西,心里多少还是有些不舒服. bref... ~~以上纯属碎碎念,可以无视.~~\n\n说实话这个项目还是比较吸引人,正好自己也在做了个next.js的小项目,也提交了几个PR. 这个项目看起来可玩性还是很强的,就是缺少了一些说明, 动手看看代码还是很有意思的, 比如这里处理多用户的方式.\n自己也做过这样的SaaS平台,比如自动签发SSL,当时自己还想了很多方案,说不定也写篇文章.\n\n### 正文\n这篇文章主要的问题就是来讲述一下如何可以简单的改一下 css, 作为一个全栈, 可以写简单的CSS. 这个xLog的 默认的主题不是很符合自己的风格,所以希望做一个自己喜欢看起来简洁的主题. 配色呢我还是喜欢蓝色的风格.于是摸索的找到了css命名的风格,基本就是`xlog-xxx`,做了一个自己的蓝色风格主题.\n\n昨天终于闲了一下,看了一眼xLog的新闻, 居然支持i18n了, 这个恭喜一下 撒花. 那么问题来了, 之前修改的CSS还在不在? 果然看起来丑了亿点点,因为新的版本做了一些些修改. DIYgod 还贴心的引用了一下图片.那就顺手来个教程吧, 把那个丑陋站点 换成比较称心的存在吧,因为 前端有一点点修改, 导致了 图像变大. 之前 logo 是 `100px * 100px` 现在成了 `120px * 120px`, 类似于这样的改变\n\n### 开始修改\n\n代码可以拉回来本地跑起来, 开启自定义CSS, 首先要连接到自己的Dashboard 也就是 我们平常说的后台, 如果不知道的, 直接登录xlog.app 点击头像附近就好了. 点击 `站点设置` 然后就可以看到自定义css了.\n\n首先定义一下CSS环境变量, 这些定义的环境变量可以在后面使用,当然这样所有主题的颜色都会改变,并且后台的颜色也会跟着更改.\n\n```css\n:root {\n --theme-color: #0ea5e9;\n --theme-color-dark: #0284c7;\n --header-height: 100%;;\n --banner-bg-color: #fff;\n}\n```\n\n例子, 使用var的语法,这样就可以用上面定义的颜色了.\n\n```css\n.xlog-site-name {\n color: var(--theme-color); // 引用前面定义的颜色\n font-size: 1.5rem;\n line-height: 2rem;\n}\n```\n\n那问题来了,你从哪里找到的`xlog-site-name`呢 ? 这里就要使用 开发者工具了.\n这里建议使用Chrome来处理. 看下面的操作,F12打开 Chrome的控制台, 用元素选择器来选择需要修改的元素\n\n\n\n根据截图找到`xlog`开头的类, 记住这个类, 后面在自定义中可以修改. 在 **element.style** 这里,可以自己添加自己的元素然后进行测试,测试完毕之后就可以保存了.\n\n\n \n 这里就是一个简单的例子, 所有的类都可以重写,如果自定义的被覆盖掉了 可以使用 **!important** 来强制一下\n \n \n \n 手机版本我还是很喜欢的,毕竟手机用户还是比桌面用户多的.\n\n### 后记\n\n写了这么多字儿, 发现这些时间xLog还是做了很多的改变, 尤其是写作体验好了很多,比如现在上传图片对于现在写作的时候不用找图床了. xLog这个团队还是满活跃的,基本每周都有一个报告, 看看更新,看到产品更新还是很有意思的. \n\n### 有感而发\n产品上线的时候还是要照顾一下老用户数据的. 今天上线新的 candidate application, 就出现了一个问题,比如 preprod 与 prod 数据库结构不一致, 添加新的 字段 一定可以允许 null值的. 如果不允许null 老用户保存数据的时候 如果有检测 会出现boom. 其实这样的问题在开发的时候已经避免了, 但是一个项目拖了半年,临时一拍大腿说上线,逗我玩儿呢. 还好有随手记录东西的习惯......\n好了 碎碎念也完了~",
"attributes": [
{
"value": "xLog-kai-qi-zi-ding-yi-CSS",
"trait_type": "xlog_slug"
}
]
}
