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 · GitHub

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

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

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

/* 修复填充不足 */
.form-vertical, 
.user-main .about .primary,
.user-main .about .secondary,
.user-main .user-content {
    padding: 15px;
}

/* 修复页眉 Logo 底部被截断 */
.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	114	15848	2026 年4 月 24 日
Mint Theme Theme official , mint-theme	66	27661	2025 年12 月 8 日
Battle Axe - A free theme by the Tappara.co hockey community Theme	56	15819	2025 年12 月 21 日
Air Theme Theme air-theme	389	65635	2026 年6 月 7 日
Daemonite Material Theme Theme	93	29998	2024 年2 月 1 日

Discourse Vincent 主题

Compressed Screenshots:

Installation:

Feedback / suggestions welcome

相关话题