Typora写简历主题不满意？Trae助你打造专属 CSS 渲染主题！

黑心萝卜三条杠2025-04-10 17:20

#金石焕新程#

用 Typora 写简历时，是不是总觉得找不到满意的 CSS 渲染主题？要么样式不够美观，要么细节不够贴合需求，总之总是差那么点意思。我自己也遇到过这个问题，每次找到的主题都想动手改一改，但问题是，我学的是嵌入式，对 CSS 根本不在行，写css代码时更是两眼一抹黑。

后来我想了个办法，既然自己写不来，那就找个"帮手"！于是，我找到了 Trae。它不仅能帮我写 CSS 渲染主题，还能根据需求一步步优化，直到我满意为止。通过它的帮助，我终于设计出了一个既符合需求又美观的简历主题，省了不少时间，也避免了"不会写 CSS"的尴尬。

步骤

step1:投喂预训练

为了写好一个主题，并让Trae知道一个合适的css渲染文件如何撰写，我们需要找到一个css文件喂给Trae让其知道格式是咋样的。

step2:

Trae初步撰写在 Trae 理解了 CSS 格式后，我们可以通过指令让它重新设计一个 CSS 渲染主题。Trae 会根据你的需求生成代码。

step3:标题微调

将 Trae 生成的 CSS 代码粘贴到 Typora 的主题文件夹中，并选择该主题查看效果。如果发现二级标题没有颜色，可以通过指令让 Trae 修改代码，调整颜色。

step4:样式更换

如果对 Trae 生成的样式不满意，比如分割线的设计，可以找到源码并粘贴发给 Trae，让它进一步优化。

step5:二级标题再次修改

如果二级标题的颜色仍然不符合预期，可以再次发送指令，让 Trae 调整颜色。

step5:修改二级标题背景

如果对二级标题的背景色不满意，可以通过指令让 Trae 更改背景色，直到达到理想效果。

报错解答

在使用过程中可能会遇到问题，比如链接无法访问或代码报错。可以将问题描述发给 Trae，它会帮助你分析可能的原因。

(注：微调过程过长，因此不做展示)

css源码

(注：由于微调过程较长，此处仅展示中间部分的 CSS 样例。)

css 复制代码 
:root {
    --primary-color: #2c3e50;
    --secondary-color: #3498db;
    --text-color: #333333;
    --border-color: #eaeaea;
    --background-color: #ffffff;
    --side-bar-bg-color: #fafafa;
    --control-text-color: #777;
}

@include-when-export url(https://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,700,400&subset=latin,latin-ext);

/* 字体定义 */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: normal;
    src: local('Open Sans Regular'), local('OpenSans-Regular'), url('./github/open-sans-v17-latin-ext_latin-regular.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD, U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Open Sans';
    font-style: italic;
    font-weight: normal;
    src: local('Open Sans Italic'), local('OpenSans-Italic'), url('./github/open-sans-v17-latin-ext_latin-italic.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD, U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: bold;
    src: local('Open Sans Bold'), local('OpenSans-Bold'), url('./github/open-sans-v17-latin-ext_latin-700.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD, U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Open Sans';
    font-style: italic;
    font-weight: bold;
    src: local('Open Sans Bold Italic'), local('OpenSans-BoldItalic'), url('./github/open-sans-v17-latin-ext_latin-700italic.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD, U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* 基础样式 */
html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
}

body {
    font-family: "Open Sans", "Clear Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: var(--text-color);
    line-height: 1.6;
}

#write {
    max-width: 860px;
    margin: 0 auto;
    padding: 30px;
    padding-bottom: 100px;
    background-color: var(--background-color);
}

/* 响应式布局 */
@media only screen and (min-width: 1400px) {
    #write {
        max-width: 1024px;
    }
}

@media only screen and (min-width: 1800px) {
    #write {
        max-width: 1200px;
    }
}

/* 标题样式 */
h1,
h2,
h3,
h4,
h5,
h6 {
    position: relative;
    margin-top: 1rem;
    margin-bottom: 1rem;
    font-weight: bold;
    line-height: 1.4;
    cursor: text;
}

h1 {
    font-size: 2.25em;
    line-height: 1.2;
    border-bottom: 2px solid var(--secondary-color);
    padding-bottom: 0.5rem;
    color: var(--primary-color);
    text-align: center;
    margin-bottom: 1.5em;
}

h2 {
    font-size: 1.75em;
    line-height: 1.225;
    margin: 25px 0 15px;
    transition: all 0.3s ease;
    display: inline-block;
    padding: 8px 15px;
    border-radius: 5px;
    background-color: #e6f3e6;
    color: #2ea44f;
}

h2:hover {
    transform: translateX(5px);
}

h3 {
    font-size: 1.5em;
    line-height: 1.43;
    color: var(--primary-color);
    border-left: 4px solid var(--secondary-color);
    padding-left: 10px;
}

h4 {
    font-size: 1.25em;
    color: #34495e;
}

h5 {
    font-size: 1em;
    color: #455a64;
}

h6 {
    font-size: 1em;
    color: #607d8b;
}

/* 链接样式 */
a {
    color: var(--secondary-color);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: all 0.3s ease;
}

a:hover {
    color: #2980b9;
    border-bottom-color: currentColor;
}

/* 列表样式 */
ul,
ol {
    padding-left: 2em;
    margin: 0.5em 0;
}

li {
    margin: 0.5em 0;
    line-height: 1.6;
}

/* 表格样式 */
table {
    width: 100%;
    border-collapse: collapse;
    margin: 1em 0;
    border-radius: 5px;
    overflow: hidden;
}

thead {
    background-color: var(--primary-color);
    color: white;
}

th,
td {
    padding: 12px;
    border: 1px solid var(--border-color);
}

tr:nth-child(even) {
    background-color: #f8f9fa;
}

/* 引用样式 */
blockquote {
    border-left: 4px solid var(--secondary-color);
    padding: 10px 15px;
    color: #666;
    background-color: #f8f9fa;
    margin: 1em 0;
}

/* 代码样式 */
code {
    background-color: #f5f7fa;
    padding: 2px 4px;
    border-radius: 3px;
    font-family: Consolas, Monaco, monospace;
    font-size: 0.9em;
    color: #e83e8c;
}

/* 打印优化 */
@media print {
    #write {
        padding: 0;
        max-width: none;
    }

    @page {
        margin: 2cm;
    }

    h1,
    h2,
    h3 {
        page-break-after: avoid;
    }

    table,
    figure {
        page-break-inside: avoid;
    }

    h2 {
        background-color: transparent !important;
        color: var(--primary-color) !important;
        border-bottom: 1px solid var(--border-color);
    }
}

/* 其他元素样式 */
hr {
    height: 2px;
    border: none;
    background: linear-gradient(to right, var(--border-color), var(--secondary-color), var(--border-color));
    margin: 2em 0;
}

.md-footnote {
    color: var(--secondary-color);
}

.md-toc {
    margin: 2em 0;
    padding: 1em;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    background-color: #fafafa;
}

效果展示

(注：由于微调过程较长，此处仅展示中间部分的 CSS 样例的渲染结果。)

总结

Trae，一个能帮我写 CSS 渲染主题的"帮手"。通过它的帮助，我不仅快速生成了符合需求的 CSS 代码，还能一步步优化细节，比如调整标题颜色、背景色、分割线样式等，直到满意为止。最终，我成功设计出了一个既美观又实用的简历主题，既省下了学习 CSS 的时间，也避免了"不会写代码"的尴尬。

如果你也有类似困扰，不妨试试 Trae，或许它能成为你设计简历主题的得力助手！

相关推荐
和和和1 小时前
前端面试中常见的 CSS 相关问题
前端·css
韩振方1 小时前
为什么 scroll 事件无法被 e.preventDefault 阻止?
前端·javascript·css
江城开朗的豌豆2 小时前
CSS篇：前端开发者必须掌握的CSS核心知识：选择器与优先级详解
前端·css·面试
江城开朗的豌豆2 小时前
CSS篇：前端布局新思路：左侧宽度智能调节，右侧自适应填充的5种实现
前端·css·面试
孟陬3 小时前
利用 caniuse 结合 browserslist 对 JS 做兼容性检测
typescript·eslint·trae
凌览3 小时前
密码太多记不住？用Trae开发一个密码管理插件
前端·后端·trae
无名友15 小时前
HTML — 定位
前端·css·html
web_Hsir16 小时前
CSS 学习01 定位、阴影与伪元素
前端·css·学习
秋夜白16 小时前
【CSS 选择器组合规则详解】
前端·css
勘察加熊人17 小时前
vue模拟扑克效果
javascript·css·vue.js
热门推荐
01我决定放弃搞 Java 了02RAG 实践- Ollama+RagFlow 部署本地知识库03如何在WPS和Word/Excel中直接使用DeepSeek功能04游戏引擎学习第217天05DeepSeek RAGFlow构建本地知识库系统06DeepSeek各版本说明与优缺点分析07【大模型+本地自建知识图谱/GraphRAG/neo4j/ollama+Qwen千问（或llama3）】 python实战（中）08汽车上的各种质量：整备质量、总质量、装载质量、簧上质量、簧下质量09从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑10第八节：Nodify 编辑器属性