Image default
Máy Tính

6 CSS Snippets Nâng Tầm Giao Diện Obsidian: Đẹp Hơn, Hiệu Quả Hơn

Obsidian là một công cụ quản lý kiến thức vô cùng mạnh mẽ, nhưng chúng ta phải thành thật, giao diện mặc định của nó đôi khi khá đơn điệu và chưa thực sự truyền cảm hứng. Với những ai mong muốn một không gian làm việc vừa chức năng vừa đẹp mắt, việc tùy chỉnh giao diện là điều không thể thiếu. Bài viết này sẽ chia sẻ bộ sưu tập các đoạn mã CSS (CSS snippets) yêu thích, không chỉ là những chỉnh sửa về mặt thẩm mỹ mà còn là những cải tiến cơ bản giúp tối ưu hóa cách bạn tương tác với các ghi chú của mình trong Obsidian. Chúng sẽ biến trải nghiệm sử dụng Obsidian thành một hành trình thú vị và hiệu quả hơn rất nhiều.

Để sử dụng CSS tùy chỉnh trong Obsidian, bạn chỉ cần truy cập Settings > Appearance, cuộn xuống mục CSS snippets, bật tính năng này lên, và 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, mang đến một diện mạo mới mẻ cho kho lưu trữ của bạn.

Giao diện Obsidian được tùy chỉnh đẹp mắt với các plugin và CSS snippetGiao diện Obsidian được tùy chỉnh đẹp mắt với các plugin và CSS snippet

1. Pretty Tables: Tùy Biến Bảng Biểu Trực Quan

Tái tạo diện mạo cho bảng của bạn

Bảng là một cách cực kỳ hữu ích để sắp xếp dữ liệu trong Obsidian. Chúng tôi thường xuyên sử dụng bảng để so sánh thông tin, tóm tắt dữ liệu, hiển thị số liệu thống kê và thậm chí là theo dõi các bài viết trên blog. Tuy nhiên, các bảng mặc định của Obsidian lại trông khá đơn giản. Đó là lý do tại sao chúng tôi sử dụng đoạn mã CSS Pretty Tables để làm cho chúng đẹp mắt hơn. Pretty Tables cho phép bạn thực hiện các tùy chỉnh thú vị như làm tròn góc bảng, tạo cảm giác mềm mại hơn, hoặc mở rộng chiều rộng bảng để chứa nhiều nội dung hơn. Nó cung cấp năm giao diện khác nhau: Purple Red, Flat Blue, Latex, White Red và White Red Rounded.

Ngoài các kiểu chính này, đoạn mã CSS còn cung cấp các lớp CSS (cssclass) bổ sung để tùy chỉnh sâu hơn. Các lớp này cho phép bạn căn chỉnh văn bản sang trái, cố định chiều rộng cột đầu tiên để tăng tính tổ chức, 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 snippets của Obsidian và thêm một lớp CSS cụ thể vào phần frontmatter của ghi chú. Điều này sẽ ngay lập tức làm cho các bảng của bạn trở nên hấp dẫn và trực quan hơn.

Cách tổ chức thông tin và kế hoạch cá nhân hiệu quả trong ObsidianCách tổ chức thông tin và kế hoạch cá nhân hiệu quả trong Obsidian

2. Daily Notes: Tối Ưu Điều Hướng Ghi Chú Hàng Ngày

Thêm điều hướng thông minh cho ghi chú hàng ngày

Obsidian là nền tảng nhật ký kỹ thuật số lý tưởng bởi nó cung cấp một trung tâm tập trung, dễ dàng tìm kiếm để ghi lại suy nghĩ, nhiệm vụ và quan sát hàng ngày. Từ việc ghi lại các cuộc họp, ý tưởng, đến những sự kiện nhỏ nhất trong ngày, tất cả đều được ghi chú trong phần nhật ký hàng ngày. Để nâng cao trải nghiệm ghi chú, chúng tôi sử dụng đoạn mã CSS Daily Notes trong kho lưu trữ Obsidian của mình. Đoạn mã này tạo ra một tiêu đề động tự động liên kết đến ghi chú của ngày hôm qua, ngày mai và cùng ngày của 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 chúng tôi xem lại các ghi chú hàng ngày. Nó biến ghi chú hàng ngày tiêu chuẩn thành một nhật ký cá nhân mạnh mẽ, kết nối hơn và hợp lý hóa cách chúng tôi nhìn lại hoặc lên kế hoạch cho tương lai.

Ví dụ về Daily Notes CSS snippet trong Obsidian với điều hướng thông minhVí dụ về Daily Notes CSS snippet trong Obsidian với điều hướng thông minh

3. Extended Typography: Nâng Tầm Văn Bản Của Bạn

Giúp các từ của bạn trông đẹp mắt hơn

Obsidian cung cấp khả năng kiểm soát trực tiếp hạn chế đối với diện mạo văn bản. Đó là lý do tại sao chúng tôi sử dụng đoạn mã CSS Extended Typography, và nó mang lại khả năng kiểm soát tốt đối với diện mạo văn bản của chúng tôi. Đoạn mã này hoạt động cùng với plugin Style Settings, giúp trải nghiệm đọc và viết của bạn trong Obsidian tốt hơn rất nhiều.

CSS snippet này cho phép bạn chọn các font 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 mặc định của Obsidian và kiểm soát chính xác kích thước font. Nó cũng cho phép bạn làm cho văn bản dày hơn hoặc cực kỳ đậm. Ngoài việc điều chỉnh kích thước cơ bản, đoạn mã còn cho phép bạn tinh chỉnh khoảng cách giữa các từ, các chữ cái và các dòng, thậm chí điều chỉnh vị trí văn bản theo chiều dọc. Bạn có thể truy cập các tính năng OpenType nâng cao để tạo ra các kiểu độc đáo như các dạng số khác nhau hoặc chữ viết hoa nhỏ. Để làm nổi bật văn bản, bạn có thể thêm màu sắc cho 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 cách hiển thị các phần đánh dấu. Đoạn mã này về cơ bản đã thay đổi cách bạn trải nghiệm các ghi chú của mình.

Ghi chú Obsidian với font chữ và kiểu hiển thị được tối ưu bằng Extended Typography CSSGhi chú Obsidian với font chữ và kiểu hiển thị được tối ưu bằng Extended Typography CSS

4. Kanban Background: Tạo Nền Độc Đáo Cho Bảng Kanban

Một phông nền đẹp có thể làm cho danh sách nhiệm vụ khó khăn trở nên dễ dàng!

Plugin Kanban của Obsidian tích hợp quản lý tác vụ trực quan với cơ sở kiến thức liên kết. Chúng tôi theo dõi các nhiệm vụ và quản lý lịch nội dung hàng tháng của mình bằng Kanban trong Obsidian. Khả năng liên kết trực tiếp các nhiệm vụ với ghi chú chi tiết, nghiên cứu và các thông tin liên quan khác trong kho lưu trữ khiến nó trở thành một công cụ quản lý nhiệm vụ mạnh mẽ. Tuy nhiên, giao diện Kanban mặc định khá đơn giản. Để tăng thêm tính trực quan, chúng tôi sử dụng đoạn mã CSS Kanban Background.

Đoạn mã này cho phép bạn thêm hình nền tùy chỉnh vào 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 bằng 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 background-size. Tùy chỉnh đơn giản này giúp nâng cao đáng kể trải nghiệm trực quan của các bảng Kanban.

Sử dụng Obsidian như một hệ thống quản lý kiến thức cá nhân (PKM) mạnh mẽSử dụng Obsidian như một hệ thống quản lý kiến thức cá nhân (PKM) mạnh mẽ

5. Canvas Image: Thêm Ảnh Tiêu Đề Cho Thẻ Canvas

Nâng cao thẻ Canvas Obsidian với hình ảnh tiêu đề tùy chỉnh

Đoạn mã 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ẻ. Bạn có thể linh hoạt trong việc tìm nguồn hình ảnh. Bạn có thể sử dụng hình ảnh được lưu trữ dưới dạng tệp đính kèm trong Obsidian hoặc thêm từ các liên kết bên ngoài. Đoạn mã CSS này cho phép bạn nhúng trực tiếp một hình ảnh lên 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ó. Đoạn mã này cực kỳ hữu ích để tổ chức dự án một cách trực quan, phân biệt rõ ràng các phần, hoặc tăng tính thẩm mỹ cho các sơ đồ tư duy, các buổi brainstorm, hoặc luồng dự án của bạn trong Canvas. Nó biến các thẻ đơn giản thành các yếu tố hấp dẫn và giàu thông tin hơn rất nhiều.

Bảng Kanban trong Obsidian với hình nền tùy chỉnh áp dụng qua CSS snippetBảng Kanban trong Obsidian với hình nền tùy chỉnh áp dụng qua CSS snippet

6. Media Grid: Sắp Xếp Trực Quan Các Tệp Media

Bố cục dạng lưới tùy chỉnh trong ghi chú của bạn

Đoạn mã CSS Media Grid cho Obsidian giúp thay đổ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 phương tiện thành các bố cục dạng 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ể tính thẩm mỹ của tài liệu của bạn.

Việc 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. Dòng trống này đó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 sâu hơn thông qua Plugin Style Settings của Obsidian. Tuy nhiên, đây không phải là yêu cầu bắt buộc đối với các chức năng cơ bản.

Ví dụ về Canvas trong Obsidian với ảnh tiêu đề tùy chỉnh bằng CSS snippetVí dụ về Canvas trong Obsidian với ảnh tiêu đề tùy chỉnh bằng CSS snippet

Nâng Cấp Giao Diện – Bí Quyết Tăng Năng Suất

Với những đoạn mã 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 Obsidian của mình thành một trung tâm cá nhân hóa và mạnh mẽ thực sự. Từ các 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 gọn gàng và bảng Kanban biểu cảm, những đoạn mã này là một yếu tố 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ó hoàn toàn phù hợp 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à biến Obsidian thành công cụ tối ưu cho công việc và học tập của bạn ngay hôm nay!

Thiết lập một wiki cục bộ cho các dự án cá nhân bằng ObsidianThiết lập một wiki cục bộ cho các dự án cá nhân bằng Obsidian

Related posts

Notion Mail: Ứng Dụng Email Mới Tích Hợp AI Thay Đổi Cách Bạn Làm Việc

Administrator

Top 5 Phần Mềm Chỉnh Sửa Video Online Miễn Phí Thay Thế Adobe Premiere Pro

Administrator

Trải Nghiệm Doom Gốc Ngay Trên Trình Duyệt: Hoài Niệm Tuổi Thơ Cùng Proton Drive

Administrator