{
"title": "xLog 开启自定义CSS",
"tags": [
"post",
"xLog"
],
"summary": "碎碎念 过年回国终于回来了, 路上折腾了很久,回来之后一直在忙单位的项目. 由于人手不够,不得不启用外包模式,然而外包的效果并不是很好. 临近上线了,发现 PO 居然没有做测试,这种东西没法忍... 导致这篇文章迟了很久...\n\n偶然的机会认识了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，发现它是一个很有意思的项目。只不过界面都是英文的，一开始看起来还是比较别扭。毕竟工作环境本来就是外语环境，回家还要看到个非母语的东西，心里多少还是有些不舒服。总之，以上纯属碎碎念，可以无视。\n\n说实话这个项目还是比较吸引人的。正好自己也在做一个 Next.js 的小项目，也提交了几个 PR。这个项目看起来可玩性还是很强的，只是缺少了一些说明。动手看看代码还是很有意思的，比如处理多用户的方式。自己也做过这样的 SaaS 平台，比如自动签发 SSL，当时自己还想了很多方案，说不定也会写篇文章。\n\n### 正文\n\n这篇文章主要讲述了如何通过简单修改 CSS 实现自定义主题。作为一个全栈工程师，我们能够轻松地编辑 CSS 样式。然而 xLog 默认主题并不符合我的个人风格，因此我决定创建一个自己喜欢的、简洁明了的主题。在选择颜色时，我偏爱蓝色。我尝试着查找 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在产品上线的时候，需要考虑老用户数据的情况。今天我们上线了一个新的 \"online apply \"，但出现了一个问题：在 preprod 和 prod 数据库中，数据结构不一致，添加新的字段时，必须允许空值。如果不允许空值，在老用户保存数据时，如果有检查，就会出现问题。其实，在开发过程中，我们已经尽力避免这种情况了，但是这个项目已经拖了半年，临时决定上线，真是令人头疼。好在我有记录所有细节的习惯......\n\n好了 碎碎念也完了~",
"attributes": [
{
"value": "xLog-kai-qi-zi-ding-yi-CSS",
"trait_type": "xlog_slug"
}
]
}
