Discourse Vincent 主题

Johani · 2017 年12 月 23 日 12:49

This post is a WIP

Beta testers needed for a new theme.

Theme repo:

GitHub - discourse/discourse-vincent-theme: v0.77

Compressed Screenshots:

will look much better on your screen, image compression cases artifacts / blur. Also, I will update the screenshots as the theme takes shape

Homepage

Composer

Topic page

Topic replies

Color schemes

Vincent Dark Blue

Vincent Dark Red

Vincent Dark Green

Vincent Dark Magenta

Vincent Dark Orange

Vincent Dark Teal

custom backgrounds

(these are samples only, you need to provide your own background images)

Installation:

Don’t forget to set the color scheme to one of the color schemes that come with the theme

The thin header is optional. If you want the thin header you need to add a theme component which you can find here:

This is a beta theme. Kindly report any issues in this post.

Feedback / suggestions welcome

schap · 2020 年3 月 10 日 15:23

有人在创建分类时遇到问题吗？每次点击汉堡菜单，它只是在下方添加一个“+”，并没有跳转到任何地方。

cjk77 · 2020 年3 月 11 日 11:09

这里也有同样的行为：

我之前没注意到，因为有一段时间没有创建新分类了。

simon · 2020 年3 月 11 日 17:21

我刚刚测试了这个问题，也遇到了同样的情况。看来 Discourse 中用于创建分类管理下拉菜单的代码已经发生了变化。将主题更新为使用以下代码来创建下拉菜单似乎可以解决这个问题：

{{#if showCategoryAdmin}}
    {{categories-admin-dropdown
    onChange=(action "selectCategoryAdminDropdownAction")
  }}
{{/if}}

我们会尽快修复这个问题。

schap · 2020 年3 月 17 日 12:03

新手问题，但我应该在哪里应用这个？

simon · 2020 年3 月 17 日 19:33

我通过编辑主题的 /head 部分应用了它。我将以下代码块：

  {{#if showCategoryAdmin}}
    {{categories-admin-dropdown
      create=createCategory
      reorder=reorderCategories}}
  {{/if}}

替换为：

  {{#if showCategoryAdmin}}
      {{categories-admin-dropdown onChange=(action "selectCategoryAdminDropdownAction") }}
  {{/if}}

不过，手动编辑主题并不是最理想的方案。我们将修复此问题，以便可以通过点击主题的“更新到最新版本”按钮来完成更改。

Anatolia · 2020 年3 月 26 日 23:08

我该如何更改此主题的主文本颜色？

此外，以下问题仍然存在：

除非有新主题，否则“新”和“未读”菜单应像原版 Discourse 主题一样保持隐藏。

这项工作是否仍在进行中？

Bill · 2020 年4 月 19 日 14:13

是的，我也遇到了同样的问题。我是通过切换到另一个主题，创建分类，然后再切换回 Vincent 主题来解决的。

Bill · 2020 年4 月 19 日 14:39

如何获取原帖中展示的其他配色方案的访问权限？我想切换到“深绿色”方案，但在我的设置中只看到了“文森特深色”可用。

CaZsm · 2020 年9 月 1 日 15:28

由于此话题已被移至 #theme:broken-theme，该主题似乎已不再维护。我在我们的论坛上使用一套通过 Chrome 扩展程序实现的微调方案，因为 Vincent 主题本身已经足够好用，但我们没有资源维护自己的分支。这些微调带有一定的个人偏好，仅针对个人喜好进行了一些调整，并未涵盖所有内容，可能有些过时，或者是为修复现已由官方正式修复的 Bug 而设计的，但或许对某些人有用。

/************************************ 
移动端特定修复/微调
************************************/

/* 修复错误的内边距 */
.form-vertical, 
.user-main .about .primary,
.user-main .about .secondary,
.user-main .user-content {
    padding: 15px;
}

/* 修复页头标志底部被截断的问题 */
.d-header #site-logo {
    max-height: 2.6em;
}

/* 修复锁定/隐藏消息大小不一致的问题，修复主题右侧神秘存在的空白 */
.small-action {
    width: 100%;
}

/* 修复 YouTube 嵌入内容未居中的问题 */
.lazyYT-container {
    margin: 12px 20px;
}

/* 修复平板设备上主题列表的内边距 */
#list-area .contents tbody td {
    padding: 10px 15px;
}

/************************************
通用及桌面端特定修复/微调 
************************************/

/* 修复字体被 html 上的 .font-helvetica 覆盖的问题 */
html {
    font-family: "Assistant", sans-serif !important;
}

/* 方形分类颜色徽章 */
span.badge-category-bg, span.badge-category-parent-bg, span.badge-category-parent-bg+.badge-category-bg {
    border-radius: 0;
}

.badge-wrapper.bullet .badge-category-parent-bg,
.badge-wrapper.bullet .badge-category-parent-bg+.badge-category-bg,
.extra-info-wrapper .badge-wrapper.bullet .badge-category-parent-bg {
    width: 4px;
    min-width: 4px;
}

span.badge-category-parent-bg {
    border-right: 1px solid rgba(0,0,0,0.2);
}

span.badge-category-parent-bg+.badge-category-bg {
    border-left: 1px solid rgba(0,0,0,0.2);
}

/* 修复主题过窄且与页面底部控件对齐异常的问题 */
.topic-post {
    max-width: 758px;
}

.topic-post .embedded-posts {
    width: 758px;
}

#topic-title .title-wrapper {
    margin-left: 0;
    margin-right: 0;
    width: 758px;
}

#topic-title, .posts-wrapper {
    margin: 0;
    width: 758px;
}

html.desktop-view.not-mobile-device .topic-body {
    max-width: 758px;
}

.topic-body {
    width: 100%;
}

/* 修复当显示新主题横幅时，主题列表排序标签对比度不足的问题 */
.show-more.has-topics .alert {
    background: rgba(40,42,49,1);
}

.alert.alert-info {
    background: rgba(19,20,24,1);
}

/* 使代码块融合得更好 */
p>code, li>code, pre>code {
    background: rgba(255,255,255,0.09);
}

/* 修复 YouTube 嵌入内容缺少内边距的问题 */
.lazyYT.lazyYT-container {
    width: 100% !important;
}

/* 修复分类左侧彩色线条未延伸至分类容器底部的问题 */
.category-list tbody .category {
    display: table-cell;
}

/* 更好的子分类布局（仅限桌面端） */
.not-mobile-device .category-list .subcategories {
    display: flex;
    flex-direction: column;
}

.not-mobile-device .category-list .subcategories .subcategory .badge.new-posts {
    display: inline-block;
    margin: 0 5px;
}

.not-mobile-device .category-list .subcategories .subcategory {
    height: 21px;
    align-items: center;
}

/* 高亮置顶帖子 */
.topic-list-item.pinned  {
    background: rgba(200,200,255,0.06);
}

.topic-list tbody tr:nth-of-type(even).pinned {
    background: rgba(200,200,255,0.04);
}

/* 改进“新建主题”按钮禁用状态的外观和对比度 */

.list-controls #create-topic[disabled],
.list-controls #create-topic.disabled {
    background-color: rgba(255,255,255,0.04);
    color: #888
}

.list-controls #create-topic[disabled]:hover,
.list-controls #create-topic.disabled:hover {
    background-color: rgba(255,255,255,0.06);
}

.list-controls #create-topic[disabled] svg,
.list-controls #create-topic.disabled svg {
    color: inherit;
}

/* 增大字间距以提升可读性 */
* {
    letter-spacing: 0.2px;
}

/* 增大字体以提升可读性 */
a {
    font-size: 95%; /* 主题默认设置为 90% */
}

.search-link .blurb {
    font-size: 1em;
}

/* 修复搜索页面 UI 颜色错误的问题 */
.search-container .search-advanced-sidebar .search-advanced-title,
.search-container .search-advanced-sidebar .search-advanced-filters {
    background: rgba(255,255,255,0.04);
}

.search-container .search-advanced-sidebar .search-advanced-title.btn {
    background: rgba(255,255,255,0.04);
}

.search-advanced-options {
    background: rgba(0,0,0,0.3);
    margin-bottom: 10px;
}

/* 修复个人资料简介编辑器周围的浮动边框 */
.user-preferences .bio-composer {
    border: none;
}

/* 修复个人资料页面折叠按钮超出框架的问题 */
.user-main .about .details .primary,
.user-main .about.collapsed-info .details .primary {
    width: auto;
}

/* 修复帖子通知的大小和边框颜色 */
.post-notice {
    width: calc(100% - 1.6em);
    border-top: none;
}

/* 修复帖子链接容器的大小 */
.post-links-container {
    margin-left: 0;
}

/* 修复简介滚动条未位于右侧的问题 */
.user-main .about .details .primary .bio {
    max-width: none;
}

/* 分类链接高亮 */
.category-list .subcategories .subcategory .badge-wrapper:hover .category-name {
    color: white;
}

.category-list .subcategories .subcategory .badge-wrapper .category-name {
    transition: color 0.3s;
}

/* 修复被隐藏帖子被“显示”链接水平分割的问题 */
.post-hidden {
    position: relative;
}

.post-hidden .expand-hidden {
    position: absolute;
    top: 36px;
    left: 0;
    z-index: 1;
}

.post-hidden .post-menu-area,
.post-hidden .expand-hidden {
    opacity: 0.5;
}
}

P2W · 2020 年9 月 1 日 20:15

等修复后很乐意尝试一下。

TotalSoft · 2020 年9 月 6 日 17:33

最精美的主题之一。

@Johani，你为什么停止开发这个主题了？如果你或其他人能继续为大家完成这项工作，我可以提供一笔资金作为支持。

jsha · 2021 年11 月 23 日 19:31

请注意，我们发现了一个使用此主题最近出现的显示问题：https://meta.discourse.org/t/hosted-message-body-resizing-while-scrolling/209959。

我看到 21 天前向主题仓库推送了提交，所以我认为它仍在维护中：Commits · discourse/discourse-vincent-theme · GitHub

darkpixlz · 2022 年7 月 12 日 02:53

有什么解决办法吗？

MoltonMontro · 2022 年9 月 25 日 20:38

我知道这已经过去几个月了，但是……

现在，我使用自己项目的 fork，它没有这些问题。但如果你想要一个简单的 CSS 解决方案，我仍然有一些旧的修复方法。

这里有几个你可能会觉得相关的：

/* 修复页面顶部过多的内边距。
 * 注意：这应该可以消除页面内容与页面顶部之间的大间隙。
 */
#main-outlet {
    padding-top: 1.8em;
}

/* Wrap 应该居中，并且只占据屏幕的一定宽度。
 * 注意：这个特定的修复可能有助于解决你的主题/帖子布局问题！
 */
.wrap {
    max-width: 1110px;
    /* max-width: 60vw; */
}

/* 修复分类列表布局的问题。
 * 注意：有更好的方法可以做到这一点。
 */
#topic-footer-buttons, .top-title-buttons, .user-badge, #user-card.show-badges .more-user-badges, .category-list tbody .category, .nav-pills>li, .layouts-nav-button>li {
    display: revert;
}
.nav-pills>li {
    display: flex;
}

/* 使粗体文本真正粗体。
 * 注意：或者，将主题的默认字体粗细更改为 400。
 * 原始项目默认使用 300 作为所有内容的默认粗细，这会导致粗体/强文本使用类似 400 的值，因为它们被设置为“更粗”。
 * 在大多数字体上，这与 300 无法区分。
 */
b, strong {
    font-weight: 700;
}

/* 删除帖子下方列出的内部交叉链接容器的边距。 */
.post-links-container {
    margin-left: 0;
}

/* 改进主题列表中“上次访问”文本的设计。 */
.topic-list .topic-list-item-separator .topic-list-data span {
    color: var(--primary);
    border: 1px solid var(--secondary-very-high);
    font-weight: bold;
}
.topic-list .topic-list-item-separator .topic-list-data span {
    background-color: var(--secondary);
}

/* 改进主题帖子中“上次访问”文本的设计。 */
.small-action.topic-post-visited .topic-post-visited-line {
    border-bottom: none;
}
.small-action.topic-post-visited .topic-post-visited-line .topic-post-visited-message {
    color: var(--primary);
    border: none;
    font-weight: bold;
}
.small-action.topic-post-visited .topic-post-visited-line .topic-post-visited-message {
    background-color: transparent;
}

twofoursixeight · 2022 年10 月 29 日 17:42

Vincent 主题在移动设备上使用时会出现故障。

不知何故，它也没有主题选择器：

与另一个主题相比：

darkpixlz · 2022 年10 月 29 日 17:57

这似乎让情况变得更糟了。

JammyDodger · 2022 年10 月 29 日 18:11

此主题当前标记为 broken，因此可能与最新版本或主题组件不兼容。

darkpixlz · 2022 年10 月 29 日 19:33

确实很遗憾，这个主题在它能正常工作的时候很棒。

Kartoon · 2023 年2 月 8 日 15:28

不知何故，这与我之前在主题中发布的修复边框的 CSS 一样正常工作，直到我今天愚蠢地看到了一个新更新……

现在它显示了一个错误

错误：@use 规则必须写在任何其他规则之前。 ╷ 4 │ @use "sass:math"; │ ^^^^^^^^^^^^^^^^ ╵ /var/www/discourse/common.scss 4:1 root stylesheet

现在它完全坏了 lol。

如果您的安装之前像我的安装一样仍然有效，那么修复它很容易。从 GitHub 下载主题，打开 common.css 并更改

// functions --------------------------------------------------------------------------------

// Calculate brightness value
@use "sass:math";

@function brightness($color) {
  @return math.div(red($color) + green($color) + blue($color), 255 * 3);
}

// to base color

（这是导致它损坏的新更改）到下面的样子

// functions --------------------------------------------------------------------------------

// Calculate brightness value
@function brightness($color) {
  @return (red($color) + green($color) + blue($color)) / (255 * 3);
}

// to base color

这是它以前的样子，然后将其压缩并上传到您的网站，然后使用您自己的新安装。或者尝试修复他破坏的东西，看看他想做什么。

请记住，这将把它作为全新的主题上传，并且如果将来有更新，它将不再与 GitHub 链接，因此您可能希望保留原始安装（不可选），以防它被修复/支持被重新拾起。另一方面，自己安装它允许您修复或更改您想要的任何内容，因为它不再被主动管理了。

话题		回复	浏览量
A reddit-ish theme for Discourse Theme	113	14845	2026 年4 月 10 日
Mint Theme Theme official , mint-theme	66	27204	2025 年12 月 8 日
Battle Axe - A free theme by the Tappara.co hockey community Theme	56	15577	2025 年12 月 21 日
Air Theme Theme air-theme	386	62842	2026 年2 月 14 日
Daemonite Material Theme Theme	94	29737	2024 年2 月 1 日

Discourse Vincent 主题

Compressed Screenshots:

Installation:

Feedback / suggestions welcome

相关话题