烟海白崖

虽说不当日记写了，装修日记还是可以写一下的。

先前使用的是在hugo部署的静态博客，优点很多，装修自由度很高，完全可以根据自己的喜好进行全面改造；此次搬家到writefreely感觉拳脚未能完全施展，但清新淡雅也完全够用。

跟静态博客不同，这边完全只要修改CSS即可，write as的主题可以适配，虽然可供选择的样式实在是太少了，大多数情况还是要自己动手丰衣足食。

选用模板

本次先在write as的主题列表挑选了相对没那么白男审美的主题，将css代码直接粘贴到自己博客的css编辑框中，对一些功能进行删改。

自主修改

尝试、放弃和删除： · 删除首字下沉 · 删除原有插图 · 放弃加入字数统计 · 放弃强制页脚于最顶部

CSS代码存档（仅保留自主增加部分）

/* 引入思源宋体网页字体 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;700&display=swap');

/* 全局统一字体样式，优先加载思源宋体，Windows兜底宋体，苹果设备兜底苹方宋体、明朝体。这两条代码放在最前面。 */
* {
    font-family: "Noto Serif SC", SimSun, "Songti SC", serif !important;
}

/* 页面背景：错落圆点波点图案，使用主题色低透明度，双层错位排布 */
body {
    background-color: #ffffff;
    background-image: 
        radial-gradient(rgba(206, 214, 250, 0.28) 2px, transparent 2px),
        radial-gradient(rgba(206, 214, 250, 0.28) 2px, transparent 2px);
    background-size: 36px 36px;
    background-position: 0 0, 18px 18px;
}

/* 隐藏页面顶部浏览统计、访客计数类数字模块 */
.header-count, .stats-count {
    display: none !important;
}

/* Markdown高亮标记底色设置，使用主题浅透明色，适配正文阅读 */
mark {
    background-color: rgba(206, 214, 250, 0.35);
    color: #383838;
    padding: 2px 4px;
}

/* 全局统一文字字间距，解决字体拥挤问题 */
* {
  letter-spacing: 0.5px !important;
}

/* 单篇文章详情页日期样式：字号、上外边距上移紧贴标题、透明度弱化 */
#post article time {
    font-size: 0.9rem !important;
    margin-top: -30px !important;
    padding-top: 0px !important;
    opacity: 0.7;
}

/* 引用块美化：左侧主题色边线、浅底色、内边距优化摘抄阅读体验 */
#post blockquote {
    border-left: 4px solid #ced6fa;
    background: rgba(206, 214, 250, 0.15);
    padding: 12px 16px;
}

/* 折叠面板details整体外壳样式：边框、圆角、外边距、底色 */
details {
    border: 1px solid rgba(206, 214, 250, 0.4);
    border-radius: 8px;
    margin: 1rem 0;
    padding: 10px 16px;
    background-color: rgba(206, 214, 250, 0.06);
}

/* 折叠面板点击标题基础样式：鼠标手势、内边距、字重、加深蓝紫色文字 */
summary {
    cursor: pointer;
    padding: 6px 0;
    font-weight: 500;
    color: #6478d1;
}

/* 鼠标悬浮标题切换为主题浅蓝紫色 */
summary:hover {
    color: #ced6fa;
}

/* 面板展开后加深背景底色，区分收起/展开两种状态 */
details[open] {
    background-color: rgba(206, 214, 250, 0.12);
}

/* 展开后标题下方添加虚线分割线，隔开标题与正文内容 */
details[open] summary {
    margin-bottom: 8px;
    border-bottom: 1px dashed rgba(206, 214, 250, 0.3);
}

/* 首页文章列表日期样式：字号、上移间距、降低透明度弱化显示 */
#collection article time {
    font-size: 0.9rem !important;
    margin-top: -30px !important;
    opacity: 0.65 !important;
}

建议和不建议

因为writefreely功能有限，装修只靠css，复杂的js和html几乎都用不了，甚至css里繁杂些都会触发报错。所以在可控的美观方面多下了工夫，其他功能自然是不如hugo来得花哨了。

不过其实我也不是非要花哨不可！毕竟原本的hogo也是白底黑字呢！

因为过去装修hugo的代码基础让此次装修还算顺利满意，当然豆老师今天也帮了大忙。想当年我苦苦抄了8小时最后全部回滚，今天也是万幸了！

Writefreely的优缺点

先说优点：不用自己部署，不用买域名，不用涉及github，像注册fedi账号一样注册一个就可以了，小白友好。可以直接用fedi账号关注。

缺点：不支持复杂功能和装修，部分md语法会失效。行动端编辑文章不太方便。

---

tags: #Blog

---