Skip to content

Latest commit

 

History

History
181 lines (129 loc) · 6.47 KB

readme-zh.md

File metadata and controls

181 lines (129 loc) · 6.47 KB
Raw

logseq-developer-theme

更新于 2023-05-31

有不少用户反映 bullet 线条错乱，此处提供一个解决方案，即在 logseq/custom.css 中配置下述代码。更多细节可参考 logseq-dev-theme#95。

.ls-block[haschild] > div > .block-content-wrapper::before {
    /* 请尝试调整 left 的变量值，如 -21px */
    left: -21px;
}

.ls-block > div > div.items-center::before {
    /* 请尝试调整 right 的变量值，如 10px */
    right: 10px !important;
}

logseq-developer-theme 是将 logseq-dev-theme 主题作为上游的二次开发，您可以在 main.scss 看到 @import 引用信息。如果您想知道二者的区别，可以通过各自的网站清楚地比较 logseq-dev-theme 和 logseq-developer-theme 1 2，同时这个项目也在 这篇文章下进行跟进。

logseq-developer-theme 并不会成为 logseq-dev-theme 2.0，仅仅因为 logseq-dev-theme 让我更关注于开发期望的 css 样式，因此这个项目不是一个 fork，而是通过 @import 来引用它。

声明下，我并没有前端的开发经验，但是最好的学习方法应该从一个项目开始。尽管 scss 并不是很复杂，可我写的代码确实很差劲。所以我将持续优化代码，您也可以在 issues 中提醒我，或者参与进来。

✨Features

  • 代码块样式增强，尤其颜色
  • 支持部分标签高亮显示，如 #docs、#bug、#feat 等
  • 适配中文字体样式
  • 支持用户自定义主题颜色
  • 支持在插件市场下载 #297
  • 支持离线模式下使用
  • 支持自定义 pdf 页面相关颜色

🎉使用方法

快速开始

您可以借助  jsDelivr CDN 来快速在您的 custom.css 中配置

@import url("https://cdn.jsdelivr.net/gh/unickcheng/logseq-developer-theme@release/custom.css");

⚠️ 请注意，虽然  jsDelivr CDN 比使用 GitHub 自带的方式更快速，但是它无法做到实时更新到最新版本 3。

从插件市场下载（推荐）

如果您无法从插件市场下载，可以在 GitHub Release 进行下载，解压后再导入到 logseq

📌 从 1.0.0 版本开始，GitHub Release 或者 Plugin Marketplace 下载，支持离线使用。因为会一起将字体等依赖下载到本地 ~/.logseq/plugins 目录下。

效果图 (可能已过时)

修改主题样式

从 0.4.0 版本开始，您也可以自定义主题颜色 😎

@import url("https://cdn.jsdelivr.net/gh/unickcheng/logseq-developer-theme@release/custom.css");

.dark-theme,
html[data-theme=dark] {
    --ls-custom-theme-color: #6096BA;
    --ls-primary-background-color: #272C35;
    --ls-secondary-background-color: #313942;

    --ls-code-color: #fff;
    --ls-code-language-color: gray;
    --ls-code-background-color: #34343c;
    --ls-code-selected-background-color: #32445A;

    --ls-bullet-threading-background-color: #34343c;
    --ls-task-done-text-color: gray;
}

@import url("https://cdn.jsdelivr.net/gh/unickcheng/logseq-developer-theme@release/custom.css");
.white-theme,
html[data-theme=light] {
    --ls-custom-theme-color: rgb(224, 80, 27);
    --ls-primary-background-color: #ffC017;
    --ls-secondary-background-color: #ffcf4d;

    --ls-code-color: gray;
    --ls-code-language-color: gray;
    --ls-code-background-color: #fff;
    --ls-code-selected-background-color: #C0E6FD;

    --ls-bullet-threading-background-color: #ffcf4d;
    --ls-task-done-text-color: gray;
}

更多自定义颜色样式见 custom-color

标签的加强

考虑到可能会对您原先的文本产生影响，以及多个标签影响内容的阅读性等因素，目前只设置了上图中几个标签的加强。如果您有需要，可以在 custom.css 中进行设置，可参考 #4

🚀 本地开发

第一步，验证本地环境

node -v
npm -v
git -v

第二步，安装依赖

# > step 1 下载源码
git clone https://github.com/UNICKCHENG/logseq-developer-theme.git
cd logseq-developer-theme
# > step 2 安装依赖
npm install

第三步，修改 package.json 中的配置

  • 请将 localPath 变量值修改为您的文件路径
{
	...
    "config": {
        "localPath": "C:\\Users\\hi\\LocalStation\\BLOG\\docs"
    },
	...
}

⚠️ 这里的目的是直接将 SCSS 编译后输出到 ../logseq/custom.css

第四步，运行

# 如果您是 windows 用户
npm run dev:win

# 如果您是 Mac 或者 Linux 用户
npm run dev

✍️日志

您可以在 logseq-developer-theme 查看相关信息

💖 感谢

Footnotes

  1. https://pengx17.github.io/knowledge-garden/ ↩

  2. https://docs.unickcheng.cc ↩

  3. https://blog.juanertu.com/archives/cbcd1946 ↩