登录 注册

思源笔记折腾记录 -html 块 - 主题 css 颜色选择器

本贴最后更新于 784 天前，其中的信息可能已经事过景迁

首先是引入依赖,这里我们需要一个颜色选择器来修改主题样式,就用跟思源本身一样的 pickr 好了:

import Pickr from "@simonwep/pickr/dist/pickr.es5.min";
let pickClassic = `
.pickr{position:relative;overflow:visible;transform:translateY(0)}.pickr *{box-sizing:border-box;outline:none;border:none;-webkit-appearance:none}.pickr .pcr-button{position:relative;height:2em;width:2em;padding:0.5em;cursor:pointer;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Helvetica Neue",Arial,sans-serif;border-radius:.15em;background:url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" stroke="%2342445A" stroke-width="5px" stroke-linecap="round"><path d="M45,45L5,5"></path><path d="M45,5L5,45"></path></svg>') no-repeat center;background-size:0;transition:all 0.3s}.pickr .pcr-button::before{position:absolute;content:'';top:0;left:0;width:100%;height:100%;background:url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');background-size:.5em;border-radius:.15em;z-index:-1}.pickr .pcr-button::before{z-index:initial}.pickr .pcr-button::after{position:absolute;content:'';top:0;left:0;height:100%;width:100%;transition:background 0.3s;background:var(--pcr-color);border-radius:.15em}.pickr .pcr-button.clear{background-size:70%}.pickr .pcr-button.clear::before{opacity:0}.pickr .pcr-button.clear:focus{box-shadow:0 0 0 1px rgba(255,255,255,0.85),0 0 0 3px var(--pcr-color)}.pickr .pcr-button.disabled{cursor:not-allowed}.pickr *,.pcr-app *{box-sizing:border-box;outline:none;border:none;-webkit-appearance:none}.pickr input:focus,.pickr input.pcr-active,.pickr button:focus,.pickr button.pcr-active,.pcr-app input:focus,.pcr-app input.pcr-active,.pcr-app button:focus,.pcr-app button.pcr-active{box-shadow:0 0 0 1px rgba(255,255,255,0.85),0 0 0 3px var(--pcr-color)}.pickr .pcr-palette,.pickr .pcr-slider,.pcr-app .pcr-palette,.pcr-app .pcr-slider{transition:box-shadow 0.3s}.pickr .pcr-palette:focus,.pickr .pcr-slider:focus,.pcr-app .pcr-palette:focus,.pcr-app .pcr-slider:focus{box-shadow:0 0 0 1px rgba(255,255,255,0.85),0 0 0 3px rgba(0,0,0,0.25)}.pcr-app{position:fixed;display:flex;flex-direction:column;z-index:10000;border-radius:0.1em;background:#fff;opacity:0;visibility:hidden;transition:opacity 0.3s, visibility 0s 0.3s;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Helvetica Neue",Arial,sans-serif;box-shadow:0 0.15em 1.5em 0 rgba(0,0,0,0.1),0 0 1em 0 rgba(0,0,0,0.03);left:0;top:0}.pcr-app.visible{transition:opacity 0.3s;visibility:visible;opacity:1}.pcr-app .pcr-swatches{display:flex;flex-wrap:wrap;margin-top:0.75em}.pcr-app .pcr-swatches.pcr-last{margin:0}@supports (display: grid){.pcr-app .pcr-swatches{display:grid;align-items:center;grid-template-columns:repeat(auto-fit, 1.75em)}}.pcr-app .pcr-swatches>button{font-size:1em;position:relative;width:calc(1.75em - 5px);height:calc(1.75em - 5px);border-radius:0.15em;cursor:pointer;margin:2.5px;flex-shrink:0;justify-self:center;transition:all 0.15s;overflow:hidden;background:transparent;z-index:1}.pcr-app .pcr-swatches>button::before{position:absolute;content:'';top:0;left:0;width:100%;height:100%;background:url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');background-size:6px;border-radius:.15em;z-index:-1}.pcr-app .pcr-swatches>button::after{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:var(--pcr-color);border:1px solid rgba(0,0,0,0.05);border-radius:0.15em;box-sizing:border-box}.pcr-app .pcr-swatches>button:hover{filter:brightness(1.05)}.pcr-app .pcr-swatches>button:not(.pcr-active){box-shadow:none}.pcr-app .pcr-interaction{display:flex;flex-wrap:wrap;align-items:center;margin:0 -0.2em 0 -0.2em}.pcr-app .pcr-interaction>*{margin:0 0.2em}.pcr-app .pcr-interaction input{letter-spacing:0.07em;font-size:0.75em;text-align:center;cursor:pointer;color:#75797e;background:#f1f3f4;border-radius:.15em;transition:all 0.15s;padding:0.45em 0.5em;margin-top:0.75em}.pcr-app .pcr-interaction input:hover{filter:brightness(0.975)}.pcr-app .pcr-interaction input:focus{box-shadow:0 0 0 1px rgba(255,255,255,0.85),0 0 0 3px rgba(66,133,244,0.75)}.pcr-app .pcr-interaction .pcr-result{color:#75797e;text-align:left;flex:1 1 8em;min-width:8em;transition:all 0.2s;border-radius:.15em;background:#f1f3f4;cursor:text}.pcr-app .pcr-interaction .pcr-result::-moz-selection{background:#4285f4;color:#fff}.pcr-app .pcr-interaction .pcr-result::selection{background:#4285f4;color:#fff}.pcr-app .pcr-interaction .pcr-type.active{color:#fff;background:#4285f4}.pcr-app .pcr-interaction .pcr-save,.pcr-app .pcr-interaction .pcr-cancel,.pcr-app .pcr-interaction .pcr-clear{color:#fff;width:auto}.pcr-app .pcr-interaction .pcr-save,.pcr-app .pcr-interaction .pcr-cancel,.pcr-app .pcr-interaction .pcr-clear{color:#fff}.pcr-app .pcr-interaction .pcr-save:hover,.pcr-app .pcr-interaction .pcr-cancel:hover,.pcr-app .pcr-interaction .pcr-clear:hover{filter:brightness(0.925)}.pcr-app .pcr-interaction .pcr-save{background:#4285f4}.pcr-app .pcr-interaction .pcr-clear,.pcr-app .pcr-interaction .pcr-cancel{background:#f44250}.pcr-app .pcr-interaction .pcr-clear:focus,.pcr-app .pcr-interaction .pcr-cancel:focus{box-shadow:0 0 0 1px rgba(255,255,255,0.85),0 0 0 3px rgba(244,66,80,0.75)}.pcr-app .pcr-selection .pcr-picker{position:absolute;height:18px;width:18px;border:2px solid #fff;border-radius:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.pcr-app .pcr-selection .pcr-color-palette,.pcr-app .pcr-selection .pcr-color-chooser,.pcr-app .pcr-selection .pcr-color-opacity{position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:flex;flex-direction:column;cursor:grab;cursor:-webkit-grab}.pcr-app .pcr-selection .pcr-color-palette:active,.pcr-app .pcr-selection .pcr-color-chooser:active,.pcr-app .pcr-selection .pcr-color-opacity:active{cursor:grabbing;cursor:-webkit-grabbing}.pcr-app[data-theme='classic']{width:28.5em;max-width:95vw;padding:0.8em}.pcr-app[data-theme='classic'] .pcr-selection{display:flex;justify-content:space-between;flex-grow:1}.pcr-app[data-theme='classic'] .pcr-selection .pcr-color-preview{position:relative;z-index:1;width:2em;display:flex;flex-direction:column;justify-content:space-between;margin-right:0.75em}.pcr-app[data-theme='classic'] .pcr-selection .pcr-color-preview::before{position:absolute;content:'';top:0;left:0;width:100%;height:100%;background:url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');background-size:.5em;border-radius:.15em;z-index:-1}.pcr-app[data-theme='classic'] .pcr-selection .pcr-color-preview .pcr-last-color{cursor:pointer;border-radius:0.15em 0.15em 0 0;z-index:2}.pcr-app[data-theme='classic'] .pcr-selection .pcr-color-preview .pcr-current-color{border-radius:0 0 0.15em 0.15em}.pcr-app[data-theme='classic'] .pcr-selection .pcr-color-preview .pcr-last-color,.pcr-app[data-theme='classic'] .pcr-selection .pcr-color-preview .pcr-current-color{background:var(--pcr-color);width:100%;height:50%}.pcr-app[data-theme='classic'] .pcr-selection .pcr-color-palette{width:100%;height:8em;z-index:1}.pcr-app[data-theme='classic'] .pcr-selection .pcr-color-palette .pcr-palette{flex-grow:1;border-radius:.15em}.pcr-app[data-theme='classic'] .pcr-selection .pcr-color-palette .pcr-palette::before{position:absolute;content:'';top:0;left:0;width:100%;height:100%;background:url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');background-size:.5em;border-radius:.15em;z-index:-1}.pcr-app[data-theme='classic'] .pcr-selection .pcr-color-chooser,.pcr-app[data-theme='classic'] .pcr-selection .pcr-color-opacity{margin-left:0.75em}.pcr-app[data-theme='classic'] .pcr-selection .pcr-color-chooser .pcr-picker,.pcr-app[data-theme='classic'] .pcr-selection .pcr-color-opacity .pcr-picker{left:50%;transform:translateX(-50%)}.pcr-app[data-theme='classic'] .pcr-selection .pcr-color-chooser .pcr-slider,.pcr-app[data-theme='classic'] .pcr-selection .pcr-color-opacity .pcr-slider{width:8px;flex-grow:1;border-radius:50em}.pcr-app[data-theme='classic'] .pcr-selection .pcr-color-chooser .pcr-slider{background:linear-gradient(to bottom, red, #ff0, lime, cyan, blue, #f0f, red)}.pcr-app[data-theme='classic'] .pcr-selection .pcr-color-opacity .pcr-slider{background:linear-gradient(to bottom, transparent, black),url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');background-size:100%, 50%}

`;
​

然后再弄一个注册表,保证各个地方的颜色选择器获取到的颜色一致

import { 注册表 } from "siyuan-noob/commonStruct";
​

一开始的时候,我们就把主题目录下的 custom.css 重新插入回来(因为它被干掉了嘛)

let currentThemeElement =
  document.querySelector("#themeCustomStyle") ||
  document.querySelector("#themeStyle") ||
  document.querySelector("#themeDefaultStyle");
let currentThemeURL = currentThemeElement.getAttribute("href").split("?")[0];
if (!document.querySelector("#themeCustomStyle")) {
  let customThemeStyle = document.createElement("link");
  customThemeStyle.setAttribute("id", "themeCustomStyle");
  customThemeStyle.setAttribute("type", "text/css");
  customThemeStyle.setAttribute("rel", "stylesheet");
  customThemeStyle.setAttribute(
    "href",
    currentThemeURL.replace("theme.css", "custom.css")
  );
  document.head.appendChild(customThemeStyle);
}
​

然后还需要一个函数,用来从样式表元素(link 或者 style)来获取样式,就像这样

function getColor(element, name) {
  console.log(element.sheet)
  let rootRule
  for (let i = 0; i < element.sheet.cssRules.length; i++) {
    if (element.sheet.cssRules[i].selectorText === ":root") {
      rootRule = element.sheet.cssRules[i];
      break;
    }
  }
  let namedColor;
  namedColor = rootRule.style.getPropertyValue(name);
  namedColor = namedColor ? namedColor.trim() : null;
  return namedColor
}
​

再搞一个函数,用来临时设置样式

async function setstyle(items, save) {
  let tempstring = "";
  for (let item of items) {
    item.value !== undefined
      ? (tempstring = tempstring + item.id + ":" + item.value + ";\n")
      : null;
  }
  tempstring = "{" + tempstring + "}";
  let css = ":root" + tempstring;
  let styleSetterTemp = document.getElementById("styleSetterTemp");
  if (!styleSetterTemp) {
    styleSetterTemp = document.createElement("style");
    styleSetterTemp.innerText = css;
    styleSetterTemp.setAttribute("id", "styleSetterTemp");
    document.head.appendChild(styleSetterTemp);
  } else {
    styleSetterTemp.innerText = css;
    document.head.appendChild(styleSetterTemp);
  }
  save ? saveStyle(css) : null;
}
​

当确定下来之后,把它保存到 custom.css

async function saveStyle(css) {
  let blob = new Blob([css], {
    type: "text/css",
  });
  let file = new File([blob], "custom.css", {
    lastModified: Date.now(),
  });
  let data = new FormData();
  data.append(
    "path",
    "/conf/" + currentThemeURL.replace("theme.css", "custom.css")
  );
  data.append("file", file);
  data.append("isDir", false);
  data.append("modTime", Date.now());
  await fetch("/api/file/putFile", {
    method: "POST",
    body: data,
  });
  if (!document.querySelector("#themeCustomStyle")) {
    let customThemeStyle = document.createElement("link");
    customThemeStyle.setAttribute("id", "themeCustomStyle");
    customThemeStyle.setAttribute("type", "text/css");
    customThemeStyle.setAttribute("rel", "stylesheet");
    customThemeStyle.setAttribute(
      "href",
      currentThemeURL.replace("theme.css", "custom.css")
    );
    document.head.appendChild(customThemeStyle);
  } else {
    let customThemeStyle = document.querySelector("#themeCustomStyle");
    customThemeStyle.remove();
    document.head.appendChild(customThemeStyle);
  }
  document.querySelectorAll("#styleSetterTemp").forEach((el) => {
    el.remove();
  });
}
​

啊,终于可以开始写我们的 ThemeColorPicker 了

class ThemeColorPicker extends HTMLElement {
  constructor() {
    super();
    this.css变量注册表 = new 注册表("css变量");
  }
  getDefault() {
    try {
      let currentThemeElement =
        document.querySelector("#themeCustomStyle") ||
        document.querySelector("#themeStyle") ||
        document.querySelector("#themeDefaultStyle");
      this.defaultColor = getColor(currentThemeElement, this.name);
    } catch (e) {}
    if (!this.defaultColor) {
      this.defaultColor = getColor(
        document.querySelector("#themeStyle") ||
          document.querySelector("#themeDefaultStyle"),
        this.name
      );
    }
    if (!this.defaultColor) {
      this.defaultColor = getColor(
        document.querySelector("#themeDefaultStyle"),
        this.name
      );
    }
    return this.defaultColor;
  }
  connectedCallback() {
    document.getElementById("#pickrcss")
      ? null
      : document.head.insertAdjacentHTML(
          "beforeend",
          `      <style id='pickrcss'>
          ${pickClassic}

      </style>`
        );
    this.attachShadow({ mode: "open" });
    this.shadowRoot.innerHTML = `
    <style>
${pickClassic}
      </style>
      <link href="/stage/build/desktop/base.56dfeeea3d0c5f4a8fef.css" rel="stylesheet">
      <label class="b3-label fn__flex config__item">
    <div class="fn__flex-1 fn__flex-center">
    ${this.name}
    <div class="b3-label__text">${this.getAttribute("memo")}</div>
  
  </div>
    <span class="fn__space"></span>
    <span class="pickr"></span>

</label>
    `;
    if (this.getAttribute("simple")) {
      this.shadowRoot.innerHTML = `
      <style>
      ${pickClassic}
    
            </style>
            <link href="/stage/build/desktop/base.56dfeeea3d0c5f4a8fef.css" rel="stylesheet">
            <span class="pickr"></span>

    
      `;
    }
    this.pickr = Pickr.create({
      container: "body",
      el: this.shadowRoot.querySelector(".pickr"),
      default: this.getDefault(),
      theme: "classic", // or 'monolith', or 'nano'
      comparison: false,
      components: {
        preview: true,
        opacity: true,
        hue: true,
        interaction: {
          hex: true,
          rgba: true,
          hsla: true,
          hsva: true,
          cmyk: true,
          input: true,
          save: true,
          clear: true,
        },
      },
    });

    this.pickr.on("change", (color) => {
      let colorValue = color ? color.toRGBA() : "";
      this.css变量注册表.注册({
        id: this.name,
        value: colorValue,
      });
      setstyle(this.css变量注册表.list(), false);
    });
    this.pickr.on("save", (color) => {
      let colorValue = color ? color.toRGBA() : "";
      this.css变量注册表.注册({
        id: this.name,
        value: colorValue,
      });
      setstyle(this.css变量注册表.list(), true);
    });
    this.pickr.on("clear", (color) => {
      this.pickr.setColor(this.getDefault());
      this.css变量注册表.注销({
        id: this.name,
        value: undefined,
      });
      setstyle(this.css变量注册表.list(), true);
    });
  }

  static get observedAttributes() {
    return ["name"];
  }

  attributeChangedCallback(name, oldValue, newValue) {
    if (name === "name") {
      this.name = newValue;
    }
  }
}
customElements.define("theme-color-picker", ThemeColorPicker);
​

使用方法:

在主题中使用的时候,需要先运行这个代码片段,然后把运行产物(在 /snippets/jsInNote​里面)引入.

直接使用这个代码片段的话,在 html 块里面插入就行了

<theme-color-picker name="--b3-theme-background" memo="背景色" ></theme-color-picker>
​

​theme-color-picker​元素的 name​属性就是要调节的 css 变量,memo​是显示出来的提示.

当然你也可以整点别的,simple 属性为 true​,这样可以自己写其他的部分,最后的效果反正就是这样:

​image​​image​

‍

用思源笔记折腾记录 - 运行你的笔记 - 链滴 (ld246.com)里面的方法来弄,运行到代码片段之后就可以用了

搞完收工,自己写主题配色器去吧~~

如果你想要了解更多原理的话,就自己去搜一下 stylesheet 对象吧,这个可以获取各种样式元素的规则,我就不罗嗦了.

水完收工，如果这玩意对你有用可以去爱发电给我买杯咖啡哒

leolee9086 正在创作一些简单的技术教程和小工具,以及设计方面内容 | 爱发电 (afdian.net)

‍

‍

  • 思源笔记

    思源笔记是一款隐私优先的个人知识管理系统，支持完全离线使用，同时也支持端到端加密同步。

    融合块、大纲和双向链接，重构你的思维。

    25954 引用 • 107583 回帖
5 引用
豆沙绿等背景色分享 • tongzi
配色插件发布！ • zxhd86
思源笔记折腾记录 - 稍微汇总一下 • leolee
花里胡哨的第四步，思源笔记美化超进化！字体自定义配色插件发布！ 思源笔记折腾记录 - 稍微汇总一下
东京 位置
1 感谢
5 引用
871 338 21 236 15 2 259

相关帖子

回帖
思源笔记折腾记录 -html 块 - 主题 css 颜色选择器

欢迎来到这里！

我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。

注册 关于
请输入回帖内容 ...
leolee
东京
回帖
388
 帖子
101
 积分
4

近期热议

推荐标签 标签

  • B3log

    B3log 是一个开源组织，名字来源于“Bulletin Board Blog”缩写，目标是将独立博客与论坛结合，形成一种新的网络社区体验，详细请看 B3log 构思。目前 B3log 已经开源了多款产品：Sym、Solo、Vditor 和 思源笔记。

    1063 引用 • 3455 回帖 • 153 关注
  • 酷鸟浏览器

    安全 · 稳定 · 快速
    为跨境从业人员提供专业的跨境浏览器

    3 引用 • 59 回帖 • 49 关注
  • SOHO

    为成为自由职业者在家办公而努力吧！

    7 引用 • 55 回帖 • 1 关注
  • 微服务

    微服务架构是一种架构模式，它提倡将单一应用划分成一组小的服务。服务之间互相协调，互相配合，为用户提供最终价值。每个服务运行在独立的进程中。服务于服务之间才用轻量级的通信机制互相沟通。每个服务都围绕着具体业务构建，能够被独立的部署。

    96 引用 • 155 回帖 • 1 关注
  • Postman

    Postman 是一款简单好用的 HTTP API 调试工具。

    4 引用 • 3 回帖 • 2 关注
  • C

    C 语言是一门通用计算机编程语言，应用广泛。C 语言的设计目标是提供一种能以简易的方式编译、处理低级存储器、产生少量的机器码以及不需要任何运行环境支持便能运行的编程语言。

    86 引用 • 165 回帖
  • WebSocket

    WebSocket 是 HTML5 中定义的一种新协议，它实现了浏览器与服务器之间的全双工通信（full-duplex）。

    48 引用 • 206 回帖 • 287 关注
  • 印象笔记
    3 引用 • 16 回帖 • 1 关注
  • OAuth

    OAuth 协议为用户资源的授权提供了一个安全的、开放而又简易的标准。与以往的授权方式不同之处是 oAuth 的授权不会使第三方触及到用户的帐号信息（如用户名与密码），即第三方无需使用用户的用户名与密码就可以申请获得该用户资源的授权，因此 oAuth 是安全的。oAuth 是 Open Authorization 的简写。

    36 引用 • 103 回帖 • 35 关注
  • Log4j

    Log4j 是 Apache 开源的一款使用广泛的 Java 日志组件。

    20 引用 • 18 回帖 • 34 关注
  • 支付宝

    支付宝是全球领先的独立第三方支付平台，致力于为广大用户提供安全快速的电子支付/网上支付/安全支付/手机支付体验，及转账收款/水电煤缴费/信用卡还款/AA 收款等生活服务应用。

    29 引用 • 347 回帖
  • jsoup

    jsoup 是一款 Java 的 HTML 解析器，可直接解析某个 URL 地址、HTML 文本内容。它提供了一套非常省力的 API，可通过 DOM，CSS 以及类似于 jQuery 的操作方法来取出和操作数据。

    6 引用 • 1 回帖 • 490 关注
  • SMTP

    SMTP（Simple Mail Transfer Protocol）即简单邮件传输协议，它是一组用于由源地址到目的地址传送邮件的规则，由它来控制信件的中转方式。SMTP 协议属于 TCP/IP 协议簇，它帮助每台计算机在发送或中转信件时找到下一个目的地。

    4 引用 • 18 回帖 • 631 关注
  • 思源笔记

    思源笔记是一款隐私优先的个人知识管理系统，支持完全离线使用，同时也支持端到端加密同步。

    融合块、大纲和双向链接，重构你的思维。

    25954 引用 • 107579 回帖
  • 学习

    “梦想从学习开始，事业从实践起步” —— 习近平

    172 引用 • 534 回帖
  • SendCloud

    SendCloud 由搜狐武汉研发中心孵化的项目，是致力于为开发者提供高质量的触发邮件服务的云端邮件发送平台，为开发者提供便利的 API 接口来调用服务，让邮件准确迅速到达用户收件箱并获得强大的追踪数据。

    2 引用 • 8 回帖 • 502 关注
  • 又拍云

    又拍云是国内领先的 CDN 服务提供商,国家工信部认证通过的“可信云”，乌云众测平台认证的“安全云”，为移动时代的创业者提供新一代的 CDN 加速服务。

    20 引用 • 37 回帖 • 576 关注
  • 服务器

    服务器，也称伺服器，是提供计算服务的设备。由于服务器需要响应服务请求，并进行处理，因此一般来说服务器应具备承担服务并且保障服务的能力。

    125 引用 • 585 回帖
  • 前端

    前端技术一般分为前端设计和前端开发，前端设计可以理解为网站的视觉设计，前端开发则是网站的前台代码实现，包括 HTML、CSS 以及 JavaScript 等。

    246 引用 • 1338 回帖 • 2 关注
  • 链书

    链书（Chainbook）是 B3log 开源社区提供的区块链纸质书交易平台，通过 B3T 实现共享激励与价值链。可将你的闲置书籍上架到链书，我们共同构建这个全新的交易平台，让闲置书籍继续发挥它的价值。

    链书社

    链书目前已经下线，也许以后还有计划重制上线。

    14 引用 • 257 回帖
  • 分享

    有什么新发现就分享给大家吧！

    248 引用 • 1794 回帖 • 2 关注
  • 负能量

    上帝为你关上了一扇门，然后就去睡觉了....努力不一定能成功，但不努力一定很轻松 (° ー °〃)

    89 引用 • 1251 回帖 • 395 关注
  • Thymeleaf

    Thymeleaf 是一款用于渲染 XML/XHTML/HTML5 内容的模板引擎。类似 Velocity、 FreeMarker 等，它也可以轻易的与 Spring 等 Web 框架进行集成作为 Web 应用的模板引擎。与其它模板引擎相比，Thymeleaf 最大的特点是能够直接在浏览器中打开并正确显示模板页面，而不需要启动整个 Web 应用。

    11 引用 • 19 回帖 • 396 关注
  • SpaceVim

    SpaceVim 是一个社区驱动的模块化 vim/neovim 配置集合，以模块的方式组织管理插件以
    及相关配置，为不同的语言开发量身定制了相关的开发模块，该模块提供代码自动补全，
    语法检查、格式化、调试、REPL 等特性。用户仅需载入相关语言的模块即可得到一个开箱
    即用的 Vim-IDE。

    3 引用 • 31 回帖 • 111 关注
  • 坑

    一些有用的避坑指南。

    69 引用 • 93 回帖
  • webpack

    webpack 是一个用于前端开发的模块加载器和打包工具，它能把各种资源，例如 JS、CSS（less/sass）、图片等都作为模块来使用和处理。

    42 引用 • 130 回帖 • 251 关注
  • CSS

    CSS（Cascading Style Sheet）“层叠样式表”是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

    198 引用 • 543 回帖

最新标签