「Trac」：修訂間差異

出自Gea-Suan Lin's Wiki
跳至導覽 跳至搜尋
本頁面具有訪問限制。如果您看見此訊息，這代表您沒有訪問本頁面的權限。
（→‎CSS）
行 93： 行 93：
=== site.html ===
=== site.html ===
 在<code>templates/site.html</code>裡做了一些事情進行客製化。
 在<code>templates/site.html</code>裡做了一些事情進行客製化。
對於外部引用，不要 洩漏<code>Referrer</code>：
<syntaxhighlight lang="html">
<head>
<meta name="referrer" content="no-referrer" />
</head>
</syntaxhighlight>


==== CSS ====
==== CSS ====

於 2018年4月24日 (二) 04:58 的修訂

Trac是一套問題追蹤系統（英語：Issue tracking system）。

簡介

優點

  • 簡單，專注在事情的記錄上，而不是限制行為上。

缺點

  • 目前還是不支援Python 3。

安裝

用pip安裝以下套件： 

$ pip install Trac
$ pip install ​Pygments
$ pip install mysql-python

使用MySQL作為後端資料庫時，建議用utf8mb4作為基礎，這樣資料庫可以存所有範圍的Unicode字元[1]，另外建立獨立的使用者供Trac使用： 

CREATE DATABASE trac DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_bin;
GRANT ALL ON trac.* TO `trac`@`localhost` IDENTIFIED BY 'password_here';

這樣在安裝Trac時的連線設定會是mysql://trac:password_here@localhost/trac（需要自己修改對應欄位）。

在安裝套件時，軟體本體常常會放在Subversion的伺服器內，在透過pip或是easy_install時會呼叫Subversion，所以會需要安裝對應的軟體： 

# apt install subversion

另外要建立目錄，並且讓Trac可以寫入： 

# mkdir trac/files
# chown x:y trac/files

目前有安裝的

除了基本安裝外，還會安裝這些套件：

以前有安裝的

以前會安裝，但現在因為自己用而沒有裝上（沒有需求或是不想裝）：

設定

權限

Trac預設的權限設定過於嚴格，只給內部使用的情境下，建議對authenticated群組加上：

  • TICKET_EDIT_CC
  • TICKET_EDIT_DESCRIPTION

trac.ini

讓系統吃code.jquery.com所提供的jQuery以及jQuery UI[2]，稍微降低伺服器的負載，另外也有機會與外部網站共用cache。目前的Trac 1.2.2版本可以這樣設： 

[trac]
jquery_location = https://code.jquery.com/jquery-1.12.4.min.js
jquery_ui_location = https://code.jquery.com/ui/1.12.1/jquery-ui.min.js
jquery_ui_theme_location = https://code.jquery.com/ui/1.12.1/themes/start/jquery-ui.css

另外因為我們不太用Trac內建的Wiki，但又關不掉，所以只能針對沒找到的頁面就不要產生連結了： 

[wiki]
ignore_missing_pages = enabled

site.html

在templates/site.html裡做了一些事情進行客製化。

對於外部引用，不要 洩漏Referrer： 

<head>
<meta name="referrer" content="no-referrer" />
</head>

CSS

  • 全部使用sans-serif字型。
  • 修正button因為CSS效果而有時會按不到的問題。
  • 針對今天到期與過期的票用不同的標示標出（配合下方的JavaScript）。
  • 將已經關掉的票變淡（配合下方的JavaScript）。
  • 讓編輯區域使用等寬字型。
  • 讓可用範圍變寬。
  • 讓圖片不要超過螢幕寬度。
    <style type="text/css">
    <!--
    body, th, tr {
        font-family: sans-serif;
    }
    input[type=button]:active, input[type=submit]:active,
    input[type=reset]:active {
        position: relative;
        top: 0;
        left: 0;
    }
    table.tickets tr.duedate_overdue {
        font-weight: bold;
    }
    table.tickets tr.duedate_today {
        border: 2px solid;
    }
    table.subtickets tr.ticket_closed, .closed.ticket {
        opacity: 0.5;
    }
    textarea {
        font-family: monospace;
    }
    #content.ticket {
        width: 78em;
    }
    #main img {
        max-width: 100%;
    }
    -->
    </style>

JavaScript

  • 用JavaScript針對今天到期以及過期的票增加CSS。
  • 將新票裡的Due Date改為零點零分零秒。
  • 將票裡的attachments與modify內容展開。
  • 將日曆選擇器中，關閉動畫效果[3]，另外將每週的第一天設為星期天[3]，並且允許選擇其他月份的日期[3]。

在head的地方先加入strftime套件，後面會用到： 

    <script src="https://cdn.jsdelivr.net/npm/strftime@0.10.0/strftime.min.js"></script>

    <script>
    <!--
    // Run immediately.
    (function($) {
        // Due date css handling
        var d = new Date();
        var today = (new Date(d.getTime() - d.getTimezoneOffset() * 60000)).toISOString().slice(0, 10);
        document.querySelectorAll('table.tickets td.due_date').forEach(function(el) {
            var due = el.innerText.trim();
            if (due < today) {
                el.parentElement.classList.add('duedate_overdue');
            } else if (due === today) {
                el.parentElement.classList.add('duedate_today');
            }
        });

        // Due date (newticket) set to 00:00:00 (in UTC)
        if ($('form[action$="/newticket#ticket"]').length > 0) {
            do {
                let el = $('#field-due_date');
                let t = el.val();

                if ('Z' === t.slice(-1)) {
                    console.log(t);
                    t = new Date(Date.parse(t) + 86400000);
                    t = strftime('%Y-%m-%dT00:00:00Z', t);
                    el.val(t);
                    break;
                }

                let a = t.match(/\+(\d\d:\d\d)$/);
                if (null !== a) {
                    let tz = a[1];
                    let new_str = 'T' + tz + ':00+' + tz;
                    t = new Date(Date.parse(t) + 86400000);
                    t = strftime('%Y-%m-%d' + new_str, t);
                    el.val(t);
                    break;
                }
            } while (false);
        }

        // Closed tickets handling
        $('tr:has(a.closed)').addClass('ticket_closed');
    })(jQuery);

    // Run after content loaded.
    jQuery(function() {
        // Layout
        jQuery('#attachments').removeClass('collapsed');
        jQuery('#modify').parent().removeClass('collapsed');

        // Datepicker
        if ($.datepicker) {
            $.datepicker.setDefaults({
                firstDay: 0,
                selectOtherMonths: true,
                showAnim: '',
                showOtherMonths: true
            });
        }
    });
    //-->
    </script>

著名使用單位

  • Django
  • FFmpeg
  • Tor
  • WebKit
  • WordPress
  • jQuery

參考資料

  1. ↑ MySqlDb – The Trac Project. [2018-03-01]. 
  2. ↑ TracIni – The Trac Project. [2018-02-28]. 
  3. ↑ 3.0 3.1 3.2 Datepicker Widget | jQuery UI API Documentation. [2018-02-28]. 

外部連結

取自「https://wiki.gslin.org/index.php?title=Trac&oldid=622」