mirror of
https://github.com/blossom-editor/blossom
synced 2024-11-17 14:39:21 +08:00
pref: 博客样式优化
This commit is contained in:
xiaozzzi
parent
7b1c898b90
commit
3c527ca86c
@ -5,11 +5,9 @@
|
||||
<link rel="icon" href="/favicon.png" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="referrer" content="no-referrer" />
|
||||
<!-- <title>Blossom</title> -->
|
||||
<script src="/config.js"></script>
|
||||
<style>
|
||||
* {
|
||||
font-family: 'Consolas', 'Menlo', 'PingFang SC', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
||||
@ -16,9 +16,6 @@ const userStore = useUserStore()
|
||||
onMounted(async () => {
|
||||
await userStore.getUserinfoOpen()
|
||||
initCustomTheme()
|
||||
console.log(userStore.userParams.WEB_BLOG_SHOW_ARTICLE_NAME);
|
||||
|
||||
|
||||
// 优先使用后台配置的博客名称, 否则使用默认
|
||||
if (isNotBlank(userStore.userParams.WEB_LOGO_NAME)) {
|
||||
document.title = userStore.userParams.WEB_LOGO_NAME
|
||||
@ -43,8 +40,7 @@ const THEME_STYLE_TAG_ID = 'blossom-blog-theme-css'
|
||||
*/
|
||||
const initCustomTheme = () => {
|
||||
const rgb = userStore.userParams.WEB_BLOG_COLOR
|
||||
console.log(rgb)
|
||||
if (!rgb.toLowerCase().startsWith('rgb(')) {
|
||||
if (rgb && !rgb.toLowerCase().startsWith('rgb(')) {
|
||||
return
|
||||
}
|
||||
const prefix = rgb.substring(4, rgb.length - 1)
|
||||
|
||||
@ -24,19 +24,9 @@ body {
|
||||
/** ================================== 滚动条 ================================== */
|
||||
/* 定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸 */
|
||||
::-webkit-scrollbar {
|
||||
/* 滚动条宽度 */
|
||||
width: 5px;
|
||||
/* 滚动条高度 */
|
||||
height: 5px;
|
||||
/* 滚动条里槽的背景色 */
|
||||
/* background-color: #eeeeee; */
|
||||
}
|
||||
|
||||
::-webkit-scrollbar:hover {
|
||||
/* width: 8px; */
|
||||
/* height: 8px; */
|
||||
}
|
||||
|
||||
/* 定义滑块 内阴影+圆角 */
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: #c7c7c7;
|
||||
|
||||
@ -70,6 +70,7 @@ const props = defineProps({
|
||||
}
|
||||
|
||||
.tag-content {
|
||||
font-family: 'Jetbrains Mono';
|
||||
font-size: inherit;
|
||||
font-weight: inherit;
|
||||
line-height: 12px;
|
||||
|
||||
@ -39,7 +39,7 @@
|
||||
<div class="name-wrapper" :style="{ maxWidth: isNotBlank(data.icon) ? 'calc(100% - 25px)' : '100%' }">
|
||||
{{ data.n }}
|
||||
</div>
|
||||
<bl-tag v-for="tag in tags(data)" style="margin-top: 3px" :bg-color="tag.bgColor" :icon="tag.icon">
|
||||
<bl-tag v-for="tag in tags(data)" :bg-color="tag.bgColor" :icon="tag.icon">
|
||||
{{ tag.content }}
|
||||
</bl-tag>
|
||||
</div>
|
||||
@ -66,24 +66,24 @@
|
||||
|
||||
<div class="toc-container" :style="tocStyle">
|
||||
<div class="viewer-toc">
|
||||
<div v-if="article.id != 0">
|
||||
<div class="toc-subtitle" style="font-size: 15px">{{ article.name }}</div>
|
||||
<div class="toc-subtitle">
|
||||
<div v-if="article.id != 0" class="doc-info">
|
||||
<div class="doc-name" style="font-size: 15px">{{ article.name }}</div>
|
||||
<div class="doc-subtitle">
|
||||
<span class="iconbl bl-pen-line"></span> {{ article.words }} 字 | <span class="iconbl bl-read-line"></span> {{ article.uv }} |
|
||||
<span class="iconbl bl-like-line"></span> {{ article.likes }}
|
||||
</div>
|
||||
<div class="toc-subtitle">
|
||||
<div class="doc-subtitle">
|
||||
<span class="iconbl bl-a-clock3-line"></span> 公开
|
||||
{{ article.openTime }}
|
||||
</div>
|
||||
<div class="toc-subtitle">
|
||||
<div class="doc-subtitle">
|
||||
<span class="iconbl bl-a-clock3-line"></span> 修改
|
||||
{{ article.syncTime }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="toc-title">目录</div>
|
||||
<div class="toc-content">
|
||||
<div v-for="toc in tocList" :key="toc.id" :class="[toc.clazz]" @click="toScroll(toc.id)">
|
||||
<div v-for="toc in tocList" :key="toc.id" :class="['toc-item', 'link', toc.clazz]" @click="toScroll(toc.id)">
|
||||
{{ toc.content }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -29,9 +29,9 @@ export const tags = (doc: DocTree) => {
|
||||
let icons: any = []
|
||||
doc.t.forEach((tag) => {
|
||||
if (tag.toLocaleLowerCase() === 'subject') {
|
||||
icons.unshift({ content: '专题', bgColor: '#939393', icon: 'bl-a-lowerrightpage-line' })
|
||||
icons.unshift({ content: '专题', bgColor: '#565656', icon: 'bl-a-lowerrightpage-line' })
|
||||
} else if (tag.toLocaleLowerCase() === 'toc') {
|
||||
icons.push({ content: '目录', bgColor: '#565656' })
|
||||
icons.push({ content: '目录', bgColor: '#939393' })
|
||||
} else {
|
||||
icons.push({ content: tag })
|
||||
}
|
||||
|
||||
@ -35,17 +35,6 @@
|
||||
font-size: 1.2em !important;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
/* 滚动条里槽的背景色 */
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
/* 定义滑块 内阴影+圆角 */
|
||||
::-webkit-scrollbar-thumb {
|
||||
border-radius: 4px;
|
||||
background-color: #967777;
|
||||
}
|
||||
|
||||
:deep(a) {
|
||||
color: var(--el-color-primary);
|
||||
font-weight: bold;
|
||||
@ -265,7 +254,7 @@
|
||||
overflow: hidden;
|
||||
|
||||
* {
|
||||
font-family: 'Jetbrains Mono' !important;
|
||||
font-family: 'Jetbrains Mono';
|
||||
font-size: 0.95em;
|
||||
}
|
||||
|
||||
|
||||
@ -1,8 +1,6 @@
|
||||
.toc-container {
|
||||
@include box(270px, 100%, 270px, 270px);
|
||||
border-left: 1px solid #eeeeee;
|
||||
overflow: auto;
|
||||
transition: 0.3s;
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: #ebebeb;
|
||||
@ -10,23 +8,22 @@
|
||||
|
||||
.viewer-toc {
|
||||
@include box(100%, 100%);
|
||||
color: #5e5e5e;
|
||||
padding: 10px;
|
||||
padding: 10px 5px 10px 10px;
|
||||
z-index: 1000;
|
||||
transition: 0.3s;
|
||||
|
||||
.toc-title {
|
||||
@include box(100%, 40px);
|
||||
@include font(25px, 700);
|
||||
line-height: 40px;
|
||||
margin-top: 10px;
|
||||
padding-top: 10px;
|
||||
border-top: 3px solid #bcbcbc;
|
||||
.doc-info {
|
||||
.doc-name {
|
||||
color: #ababab;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.toc-subtitle {
|
||||
.doc-subtitle {
|
||||
@include flex(row, flex-start, center);
|
||||
@include font(12px);
|
||||
font-family: 'Jetbrains Mono';
|
||||
width: 100%;
|
||||
color: #ababab;
|
||||
overflow: hidden;
|
||||
@ -35,58 +32,79 @@
|
||||
white-space: pre;
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.toc-title {
|
||||
@include box(100%, 50px);
|
||||
@include font(25px, 700);
|
||||
color: #4c4c4c;
|
||||
line-height: 40px;
|
||||
margin-top: 10px;
|
||||
padding-top: 10px;
|
||||
border-top: 3px solid #dedede;
|
||||
}
|
||||
|
||||
.toc-content {
|
||||
@include font(14px);
|
||||
width: 100%;
|
||||
font-family: 'Jetbrains Mono';
|
||||
height: calc(100% - 60px - 70px - 20px);
|
||||
margin-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
overflow-y: auto;
|
||||
margin-top: 20px;
|
||||
padding-left: 5px;
|
||||
|
||||
.toc-1,
|
||||
.toc-2,
|
||||
.toc-3,
|
||||
.toc-4,
|
||||
.toc-5,
|
||||
.toc-6 {
|
||||
min-height: 20px;
|
||||
.toc-item {
|
||||
width: auto;
|
||||
padding: 4px 0;
|
||||
color: #5e5e5e;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
font-weight: bold;
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: -5px;
|
||||
width: 2px;
|
||||
height: 60%;
|
||||
background: var(--el-color-primary-light-4);
|
||||
border-radius: 10px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.1s;
|
||||
}
|
||||
|
||||
.toc-1 {
|
||||
font-size: 1.1em;
|
||||
margin-top: 5px;
|
||||
|
||||
&:first-child {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
&:hover::after {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.toc-2 {
|
||||
padding-left: 10px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.toc-3 {
|
||||
padding-left: 20px;
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.toc-4 {
|
||||
padding-left: 30px;
|
||||
margin-left: 30px;
|
||||
}
|
||||
|
||||
.toc-5 {
|
||||
padding-left: 40px;
|
||||
margin-left: 40px;
|
||||
}
|
||||
|
||||
.toc-6 {
|
||||
padding-left: 50px;
|
||||
}
|
||||
}
|
||||
margin-left: 50px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: #ebebeb;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
.doc-tree-container {
|
||||
@include box(300px, 100%, 300px, 300px);
|
||||
font-family: 'Jetbrains Mono';
|
||||
border-right: 1px solid var(--el-border-color);
|
||||
transition: 0.1s;
|
||||
|
||||
|
||||
@ -61,7 +61,7 @@ const formartNumber = (param: number): string => {
|
||||
const renderChart = (callback?: any) => {
|
||||
chartLineLog.setOption({
|
||||
title: {
|
||||
bottom: 45,
|
||||
bottom: 25,
|
||||
right: 25,
|
||||
text: '历史笔记字数',
|
||||
textStyle: {
|
||||
|
||||
@ -49,6 +49,7 @@ const toToc = (articleId: number) => {
|
||||
.home-subject-root {
|
||||
@include box(100%, 100%);
|
||||
@include flex(row, flex-start, flex-start);
|
||||
font-family: 'Jetbrains Mono';
|
||||
flex-wrap: wrap;
|
||||
align-content: flex-start;
|
||||
padding: 20px;
|
||||
@ -71,18 +72,12 @@ const toToc = (articleId: number) => {
|
||||
.iconbl {
|
||||
font-size: 12px;
|
||||
margin-right: 5px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border: 0;
|
||||
box-shadow: 7px 7px 12px rgba(0, 0, 0, 0.5), -3px -3px 10px rgba(255, 255, 255, 0.1);
|
||||
|
||||
.iconbl {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.name {
|
||||
text-shadow: 5px 5px 15px #000, -3px -3px 10px rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
@ -52,6 +52,7 @@ const links = () => {
|
||||
.home-userinfo-root {
|
||||
@include box(100%, 100%);
|
||||
@include flex(column, center, center);
|
||||
font-family: 'Jetbrains Mono';
|
||||
|
||||
.userinfo-desc {
|
||||
@include flex(row, flex-start, flex-end);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user