发帖带标签的样式参考discourse,可以开发这个功能的请联系我 New
发帖带标签的样式参考discourse,Discourse Meta - The Official Support Forum for Discourse可以开发这个功能的请联系我https://media.cmx.edu.kg/media_attachments/files/116/017/061/993/533/716/original/93f6c5a7e297726e.mp4我知道答案 回答被采纳将会获得1 贡献 已有11人回答 你这个要求DZ自带啊
.ce-block { margin-bottom: 20px;}.ce-block__content,.ce-toolbar__content { /* max-width:calc(100% - 50px) */ margin-left: auto; margin-right: auto;}.image-tool {--bg-color: #cdd1e0;--front-color: #388ae5;--border-color: #e8e8eb;}.image-tool__image { border-radius: 3px; overflow: hidden; margin-bottom: 10px;}.image-tool__image-picture { max-width: 100%; vertical-align: bottom; display: block; margin-left: auto; margin-right: auto; }.image-tool__image-preloader { width: 50px; height: 50px; border-radius: 50%; background-size: cover; margin: auto; position: relative; background-color: #cdd1e0; background-position: center center; }.image-tool__image-preloader::after { content: ""; position: absolute; z-index: 3; width: 60px; height: 60px; border-radius: 50%; border: 2px solid #cdd1e0; border-top-color: #388ae5; left: 50%; top: 50%; margin-top: -30px; margin-left: -30px; animation: image-preloader-spin 2s infinite linear; box-sizing: border-box; }.image-tool__caption::before { position: absolute !important; content: attr(data-placeholder); color: #707684; font-weight: normal; display: none; }.image-tool__caption:empty::before { display: block; }.image-tool__caption:empty:focus::before { display: none; }.image-tool--empty .image-tool__image { display: none; }.image-tool--empty .image-tool__caption, .image-tool--loading .image-tool__caption { display: none; }.image-tool .cdx-button { display: flex; align-items: center; justify-content: center;}.image-tool .cdx-button svg { height: auto; margin: 0 6px 0 0; }.image-tool--filled .cdx-button { display: none; }.image-tool--filled .image-tool__image-preloader { display: none; }.image-tool--loading .image-tool__image { min-height: 200px; display: flex; border: 1px solid #e8e8eb; background-color: #fff; }.image-tool--loading .image-tool__image-picture { display: none; }.image-tool--loading .cdx-button { display: none; }/** * Tunes * ---------------- */.image-tool--withBorder .image-tool__image { border: 1px solid #e8e8eb; }.image-tool--withBackground .image-tool__image { padding: 15px; background: #cdd1e0; }.image-tool--withBackground .image-tool__image-picture { max-width: 60%; margin: 0 auto; }.image-tool--stretched .image-tool__image-picture { width: 100%; }.image-tool__caption { text-align: center; font-size: 14px; color: #a3a3a3; }@keyframes image-preloader-spin {0% { transform: rotate(0deg);}100% { transform: rotate(360deg);}}.inline-code {background: rgba(250, 239, 240, 0.78);color: #b44437;padding: 3px 4px;border-radius: 5px;margin: 0 1px;font-family: inherit;font-size: 0.86em;font-weight: 500;letter-spacing: 0.3px;} 论坛目前发帖时发标签不方便,他有自带的发标签,但是隐藏的很深,
我也需要把它放到默认模板、手机模板和电脑模板发帖的标题上面。
这样用户直接就可以选择标签或者是自建标签发帖了
如能实现发帖带标签的样式参考discourse,哪就更优雅了 定制修改呗,都能实现
默认 就可以添加 标签的, 只是不在 标题栏 上
.ce-block { margin-bottom: 20px;}.ce-block__content,.ce-toolbar__content { /* max-width:calc(100% - 50px) */ margin-left: auto; margin-right: auto;}.image-tool {--bg-color: #cdd1e0;--front-color: #388ae5;--border-color: #e8e8eb;}.image-tool__image { border-radius: 3px; overflow: hidden; margin-bottom: 10px;}.image-tool__image-picture { max-width: 100%; vertical-align: bottom; display: block; margin-left: auto; margin-right: auto; }.image-tool__image-preloader { width: 50px; height: 50px; border-radius: 50%; background-size: cover; margin: auto; position: relative; background-color: #cdd1e0; background-position: center center; }.image-tool__image-preloader::after { content: ""; position: absolute; z-index: 3; width: 60px; height: 60px; border-radius: 50%; border: 2px solid #cdd1e0; border-top-color: #388ae5; left: 50%; top: 50%; margin-top: -30px; margin-left: -30px; animation: image-preloader-spin 2s infinite linear; box-sizing: border-box; }.image-tool__caption::before { position: absolute !important; content: attr(data-placeholder); color: #707684; font-weight: normal; display: none; }.image-tool__caption:empty::before { display: block; }.image-tool__caption:empty:focus::before { display: none; }.image-tool--empty .image-tool__image { display: none; }.image-tool--empty .image-tool__caption, .image-tool--loading .image-tool__caption { display: none; }.image-tool .cdx-button { display: flex; align-items: center; justify-content: center;}.image-tool .cdx-button svg { height: auto; margin: 0 6px 0 0; }.image-tool--filled .cdx-button { display: none; }.image-tool--filled .image-tool__image-preloader { display: none; }.image-tool--loading .image-tool__image { min-height: 200px; display: flex; border: 1px solid #e8e8eb; background-color: #fff; }.image-tool--loading .image-tool__image-picture { display: none; }.image-tool--loading .cdx-button { display: none; }/** * Tunes * ---------------- */.image-tool--withBorder .image-tool__image { border: 1px solid #e8e8eb; }.image-tool--withBackground .image-tool__image { padding: 15px; background: #cdd1e0; }.image-tool--withBackground .image-tool__image-picture { max-width: 60%; margin: 0 auto; }.image-tool--stretched .image-tool__image-picture { width: 100%; }.image-tool__caption { text-align: center; font-size: 14px; color: #a3a3a3; }@keyframes image-preloader-spin {0% { transform: rotate(0deg);}100% { transform: rotate(360deg);}}.ce-block { margin-bottom: 20px;}.ce-block__content,.ce-toolbar__content { /* max-width:calc(100% - 50px) */ margin-left: auto; margin-right: auto;}.ce-paragraph { line-height: 1.6em; outline: none; text-indent: 2em; font-size: 16px;}.ce-paragraph--right { text-align: right;}.ce-paragraph--center { text-align: center;}.ce-paragraph--left { text-align: left;}.ce-paragraph--justify { text-align: justify;}.ce-paragraph-text-indent { text-align: justify;}.ce-paragraph:empty::before{content: attr(data-placeholder);color: #707684;font-weight: normal;opacity: 0;}/** Show placeholder at the first paragraph if Editor is empty */.codex-editor--empty .ce-block:first-child .ce-paragraph:empty::before {opacity: 1;}.codex-editor--toolbox-opened .ce-block:first-child .ce-paragraph:empty::before,.codex-editor--empty .ce-block:first-child .ce-paragraph:empty:focus::before {opacity: 0;}.ce-paragraph p:first-of-type{ margin-top: 0;}.ce-paragraph p:last-of-type{ margin-bottom: 0;}.svg-icon { width: 1em; height: 1em;}.svg-icon path,.svg-icon polygon,.svg-icon rect { fill: #4691f6;}.svg-icon circle { stroke: #4691f6; stroke-width: 1;}.inline-code {background: rgba(250, 239, 240, 0.78);color: #b44437;padding: 3px 4px;border-radius: 5px;margin: 0 1px;font-family: inherit;font-size: 0.86em;font-weight: 500;letter-spacing: 0.3px;} 如能实现发帖带标签的样式参考discourse,哪就更优雅了,
现在DZ自带的输入标签时,不自动联想搜索 DZ都是高性能高负载考量的,自动联想搜索这种功能都是牺牲性能换来的,也就代表你每次变化输入框内容都需要想后端请求查询,这对于负载其实是很灾难的 参考discourse AI 有更好的方案,
搜索匹配分三种,第一种直接可以匹配,第二种就是匹配中国开头了。第三种就是带有中国的词语,用户输入两个字的时候开始到数据库匹配这种世界级的性能方案需要三级优化。第一级是热门标签,第二级是不热门标签,第二是第三是最冷的标签。 ai........
页:
[1]