Obsidian là một công cụ quản lý tri thức vô cùng mạnh mẽ, nhưng thành thật mà nói, giao diện mặc định của nó đôi khi khá đơn giản. Nếu bạn giống tôi, khao khát một không gian làm việc vừa chức năng vừa truyền cảm hứng về mặt thị giác, thì bài viết này là dành cho bạn. Tôi sẽ chia sẻ bộ sưu tập các snippet CSS tùy chỉnh yêu thích của mình. Đây không chỉ là những chỉnh sửa về mặt thẩm mỹ; chúng cải thiện đáng kể cách tôi tương tác với các ghi chú trên Obsidian, biến trải nghiệm sử dụng Obsidian của tôi thành một quá trình hấp dẫn và hiệu quả hơn.
Để sử dụng CSS tùy chỉnh trong Obsidian, bạn chỉ cần vào Cài đặt (Settings) > Giao diện (Appearance), cuộn xuống phần CSS snippets, bật tính năng này lên, sau đó đặt các tệp .css của bạn vào thư mục snippets xuất hiện. Obsidian sẽ tự động áp dụng các kiểu được định nghĩa trong các tệp này, giúp bạn dễ dàng tùy chỉnh Obsidian theo ý muốn.
6 Snippet CSS Giúp Biến Đổi Giao Diện Obsidian Của Bạn
1. Pretty Tables (Bảng Biểu Đẹp Mắt)
Bảng biểu là một cách rất hữu ích để sắp xếp dữ liệu trong Obsidian. Tôi thường xuyên sử dụng bảng trong Obsidian để so sánh, tóm tắt thông tin, hiển thị số liệu thống kê và thậm chí theo dõi các bài viết trên blog của mình. Tuy nhiên, các bảng cơ bản của Obsidian trông khá đơn điệu. Đó là lý do tại sao tôi sử dụng snippet CSS Pretty Tables để làm cho chúng trông đẹp mắt hơn rất nhiều. Nó cho phép bạn thực hiện những điều thú vị như bo tròn các góc bảng, tạo cảm giác mềm mại hơn. Bạn cũng có thể làm cho bảng rộng hơn để chứa nhiều nội dung hơn trên trang. Snippet này cung cấp năm kiểu dáng khác nhau: Purple Red, Flat Blue, Latex, White Red và White Red Rounded.
Ngoài các kiểu chính này, CSS còn cung cấp các lớp “hack” để tùy chỉnh sâu hơn. Chúng cho phép bạn căn chỉnh văn bản sang trái, đặt chiều rộng cố định cho cột đầu tiên để sắp xếp tốt hơn và thay đổi khoảng cách xung quanh bảng của bạn. Để áp dụng các kiểu này, bạn chỉ cần đặt tệp CSS được cung cấp vào thư mục snippet của Vault Obsidian. Sau đó, thêm một cssclass cụ thể vào phần frontmatter của ghi chú. Điều này sẽ làm cho các bảng của bạn trông hấp dẫn và bắt mắt hơn ngay lập tức.
2. Daily Notes (Ghi Chú Hàng Ngày Thông Minh)
Tôi sử dụng Obsidian làm nền tảng nhật ký kỹ thuật số hàng ngày của mình vì nó cung cấp một trung tâm tập trung, dễ tìm kiếm để ghi lại suy nghĩ, nhiệm vụ và quan sát mỗi ngày. Từ việc ghi lại các cuộc họp, ghi chú ý tưởng và ngay cả những sự cố nhỏ nhất trong ngày, tôi đều ghi lại tất cả vào ghi chú hàng ngày của mình. Để nâng cao trải nghiệm ghi chú, tôi sử dụng snippet CSS Daily Notes trong Vault Obsidian của mình. Nó tạo ra một tiêu đề động tự động liên kết đến ghi chú hàng ngày của ngày hôm qua, ngày mai và năm trước. Điều này cải thiện đáng kể khả năng điều hướng và ngữ cảnh khi tôi xem lại ghi chú hàng ngày. Nó biến ghi chú hàng ngày tiêu chuẩn của tôi thành một nhật ký cá nhân mạnh mẽ, liên kết chặt chẽ hơn và hợp lý hóa cách tôi xem lại hoặc lên kế hoạch cho tương lai.
Điều hướng nhanh ghi chú hàng ngày với snippet Daily Notes trong Obsidian
3. Extended Typography (Tùy Chỉnh Kiểu Chữ Nâng Cao)
Obsidian cung cấp khả năng kiểm soát trực tiếp hạn chế đối với giao diện văn bản. Đó là lý do tại sao tôi sử dụng snippet CSS Extended Typography, và nó mang lại cho tôi khả năng kiểm soát tốt về giao diện văn bản của mình. Nó hoạt động với plugin Style Settings, cho phép bạn cải thiện đáng kể trải nghiệm đọc và viết trong Obsidian.
Snippet CSS này cho phép bạn chọn phông chữ riêng biệt cho văn bản chính, tiêu đề và các đề mục. Bạn có thể phóng to hoặc thu nhỏ văn bản so với cài đặt mặc định của Obsidian và kiểm soát chính xác kích thước phông chữ. Nó cũng cho phép bạn làm cho văn bản dày hơn hoặc cực đậm. Ngoài việc điều chỉnh kích thước cơ bản, snippet còn cho phép bạn tinh chỉnh khoảng cách giữa các từ, ký tự và dòng, thậm chí điều chỉnh vị trí dọc của văn bản. Bạn có thể truy cập các tính năng OpenType nâng cao để có các kiểu độc đáo như các kiểu số đa dạng hoặc chữ in hoa nhỏ. Để làm cho văn bản nổi bật, bạn có thể thêm màu sắc vào các từ in đậm và in nghiêng, bật hoặc tắt gạch chân liên kết, hoặc thay đổi giao diện của các phần được đánh dấu. Snippet này cơ bản đã biến đổi cách bạn trải nghiệm ghi chú của mình.
Ví dụ về tùy chỉnh kiểu chữ nâng cao với snippet Extended Typography trong Obsidian
4. Kanban Background (Hình Nền Bảng Kanban Độc Đáo)
Plugin Kanban của Obsidian tích hợp quản lý tác vụ trực quan một cách thông minh với cơ sở tri thức liên kết. Tôi theo dõi các tác vụ và quản lý lịch nội dung hàng tháng của mình bằng cách sử dụng Kanban trong Obsidian. Khả năng liên kết các tác vụ trực tiếp với ghi chú chi tiết, nghiên cứu và các thông tin liên quan khác trong vault làm cho nó trở thành một công cụ quản lý tác vụ mạnh mẽ. Tuy nhiên, giao diện Kanban mặc định khá đơn giản. Để tăng thêm sự hấp dẫn về mặt thị giác, tôi sử dụng snippet CSS Kanban Background.
Snippet này cho phép bạn thêm hình nền tùy chỉnh vào các bảng Kanban của mình. Nó hoạt động hoàn hảo ở cả chế độ sáng và tối của Obsidian. Bạn có thể sử dụng bất kỳ hình ảnh nào bằng cách chỉ cần chèn URL hình ảnh vào tùy chọn background-image: url();. Bạn cũng có thể kiểm soát cách hình ảnh lặp lại với tùy chọn background-repeat và điều chỉnh kích thước của nó trên bảng Kanban bằng cách sử dụng background-size. Việc tùy chỉnh đơn giản này cải thiện đáng kể trải nghiệm trực quan của các bảng Kanban.
Tùy chỉnh hình nền bảng Kanban trong Obsidian bằng CSS snippet
5. Canvas Image (Ảnh Tiêu Đề Thẻ Canvas)
Snippet CSS Canvas Image mang đến một cách tuyệt vời để cải thiện trực quan các bảng Obsidian Canvas của bạn. Nó cho phép bạn thêm hình ảnh tiêu đề đầy phong cách vào từng thẻ riêng lẻ. Bạn có sự linh hoạt trong việc lựa chọn nguồn ảnh. Bạn có thể sử dụng hình ảnh được lưu trữ dưới dạng đính kèm của Obsidian hoặc thêm từ các liên kết bên ngoài. Snippet CSS này cho phép bạn nhúng trực tiếp một hình ảnh vào phía trên cùng của một thẻ Canvas. Bạn có thể kéo giãn hình ảnh để lấp đầy chiều rộng của thẻ và chỉ định chiều cao của nó. Snippet này cực kỳ hữu ích để tổ chức dự án trực quan, phân biệt rõ ràng các phần hoặc tăng cường sự hấp dẫn thẩm mỹ của các bản đồ tư duy, ý tưởng hoặc luồng dự án của bạn trong Canvas. Nó biến các thẻ đơn giản thành những yếu tố hấp dẫn và nhiều thông tin hơn.
Ví dụ CSS snippet Canvas Image trong Obsidian giúp nâng cao thẻ Canvas
6. Media Grid (Bố Cục Đa Phương Tiện Dạng Lưới)
Snippet CSS Media Grid cho Obsidian biến đổi cách tổ chức trực quan các ghi chú. Nó cho phép bạn sắp xếp các bộ tệp đa phương tiện thành các bố cục lưới đẹp mắt. Điều này bao gồm cả hình ảnh, video và tệp âm thanh. Việc tùy chỉnh này giúp tăng cường đáng kể sự hấp dẫn về mặt thị giác của các tài liệu của bạn.
Tạo một lưới phương tiện mới rất đơn giản: chỉ cần đặt hai hoặc nhiều liên kết phương tiện (hình ảnh, video hoặc âm thanh) cạnh nhau trong tài liệu Markdown của bạn. Thêm một dòng trống giữa các liên kết để bắt đầu một hàng mới trong lưới. Nó đóng vai trò là dấu phân cách và cho phép bạn sắp xếp bố cục linh hoạt. Media Grid cũng có thể được cấu hình và tùy chỉnh thêm thông qua Plugin Style Settings của Obsidian. Tuy nhiên, đó không phải là yêu cầu bắt buộc đối với chức năng cơ bản.
Bố cục đa phương tiện dạng lưới với Media Grid trong Obsidian
Nâng Tầm Trải Nghiệm Công Nghệ Với Obsidian
Với những snippet CSS tùy chỉnh này, bạn không chỉ thay đổi màu sắc; bạn đang chủ động biến đổi Obsidian của mình thành một trung tâm thực sự cá nhân hóa và mạnh mẽ. Từ những bảng biểu trực quan tuyệt đẹp và ghi chú hàng ngày năng động đến các lưới phương tiện được tổ chức khoa học và bảng Kanban biểu cảm, những snippet này là một công cụ thúc đẩy năng suất thực sự để định hình không gian làm việc kỹ thuật số của bạn, giúp nó phù hợp hoàn hảo với quy trình làm việc và sở thích thẩm mỹ của bạn. Hãy khám phá và chia sẻ trải nghiệm của bạn về những cải tiến này trong phần bình luận bên dưới!
