28 |
--------------------------------------------------------------------------------
/scss/base/_reset.scss:
--------------------------------------------------------------------------------
1 | html {
2 | scroll-behavior: smooth;
3 | }
4 |
5 | body {
6 | letter-spacing: 0;
7 | font: {
8 | weight: 400;
9 | style: normal;
10 | family: 'Open Sans', PingFang SC, Hiragino Sans GB, Microsoft YaHei, STHeiti,
11 | WenQuanYi Micro Hei, Helvetica, Arial, sans-serif;
12 | size: var(--farallon-text-size-normal);
13 | }
14 | text-rendering: optimizeLegibility;
15 | -webkit-font-smoothing: antialiased;
16 | -moz-osx-font-smoothing: grayscale;
17 | -moz-font-feature-settings: 'liga' on;
18 | color: var(--farallon-text-color);
19 | line-height: 1.8;
20 | background-color: var(--farallon-background-gray);
21 | word-break: break-all;
22 | }
23 |
24 | h1,
25 | h2,
26 | h3,
27 | h4,
28 | h5 {
29 | margin-top: 0;
30 | margin-bottom: 0;
31 | font-weight: 400;
32 | }
33 |
34 | ol,
35 | ul {
36 | margin: 0;
37 | padding: 0;
38 | list-style: none;
39 | }
40 |
41 | a {
42 | color: inherit;
43 | text-decoration: none;
44 | }
45 |
46 | img {
47 | max-width: 100%;
48 | height: auto;
49 | }
50 |
51 | p {
52 | margin-top: 0;
53 | margin-bottom: 0;
54 | }
55 |
56 | button,
57 | input,
58 | textarea {
59 | appearance: none;
60 | outline: none;
61 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
62 | font-family: 'Open Sans', PingFang SC, Hiragino Sans GB, Microsoft YaHei, STHeiti,
63 | WenQuanYi Micro Hei, Helvetica, Arial, sans-serif;
64 | font-size: var(--farallon-text-size-normal);
65 | color: var(--farallon-text-color);
66 | }
67 |
68 | .sep {
69 | &::before {
70 | content: '/';
71 | margin: 0 5px;
72 | }
73 | }
74 |
75 | .notice--wrapper {
76 | background-color: rgba(0, 0, 0, 0.9);
77 | color: #fff;
78 | font-size: var(--farallon-text-size-smallest);
79 | max-width: 800px;
80 | padding: 10px 15px;
81 | border-radius: 8px;
82 | position: fixed;
83 | z-index: 1000;
84 | top: 15px;
85 | left: 50%;
86 | transform: translateX(-50%);
87 | transition: 0.5s transform;
88 |
89 | @media (max-width: 768px) {
90 | width: 80%;
91 | }
92 | }
93 |
94 | .u-textAlignCenter {
95 | text-align: center;
96 | }
97 |
98 | .u-overflowYHidden {
99 | overflow-y: hidden;
100 | }
101 |
102 | .u-cursorPointer {
103 | cursor: pointer;
104 | }
105 |
106 | .u-hide {
107 | display: none;
108 | }
109 |
110 | @media screen and (max-width: 768px) {
111 | .u-xs-hide {
112 | display: none;
113 | }
114 |
115 | .u-xs-show {
116 | display: inline;
117 | }
118 | }
119 |
--------------------------------------------------------------------------------
/scss/modules/_card.scss:
--------------------------------------------------------------------------------
1 | .fCard {
2 | &--list {
3 | display: grid;
4 | grid-template-columns: repeat(2, 1fr);
5 | grid-gap: 20px;
6 | padding-bottom: 20px;
7 |
8 | @media (max-width: 414px) {
9 | grid-template-columns: 1fr;
10 | }
11 | }
12 |
13 | &--item {
14 | border: 1px solid var(--farallon-border-color);
15 | padding: 20px;
16 | border-radius: 18px;
17 | display: flex;
18 | flex-direction: column;
19 |
20 | @media screen and (max-width: 768px) {
21 | padding: 15px;
22 | }
23 |
24 | @include block-hover-gradient;
25 | }
26 |
27 | &--cover {
28 | border-radius: 10px;
29 | margin-bottom: 12px;
30 | object-fit: cover;
31 | aspect-ratio: 60/36;
32 |
33 | &Link {
34 | display: flex;
35 | align-items: center;
36 | position: relative;
37 | }
38 | }
39 |
40 | &--title {
41 | font-size: 20px;
42 | font-weight: bold;
43 | line-height: 1.4;
44 | margin-bottom: 5px;
45 |
46 | &:hover {
47 | color: var(--farallon-hover-color);
48 | }
49 |
50 | & + .fCard--meta {
51 | margin-top: 10px;
52 | }
53 |
54 | @media screen and (max-width: 768px) {
55 | font-size: 18px;
56 | margin-bottom: 0px;
57 | }
58 | }
59 |
60 | &--content {
61 | position: relative;
62 |
63 | .date {
64 | height: 36px;
65 | width: 36px;
66 | background-color: var(--farallon-background-white);
67 | border-radius: 100%;
68 | position: absolute;
69 | text-align: center;
70 | font-weight: bold;
71 | font-size: 24px;
72 | line-height: 36px;
73 | text-align: center;
74 | color: var(--farallon-text-gray);
75 | right: 15px;
76 | top: -30px;
77 | box-shadow: 0 0 0 5px var(--farallon-border-color-light);
78 | }
79 | }
80 |
81 | &--snippet {
82 | font-size: 15px;
83 | color: var(--farallon-text-light);
84 | line-height: 1.6;
85 | max-height: 3.2em;
86 | overflow: hidden;
87 | text-overflow: ellipsis;
88 | display: -webkit-box;
89 | -webkit-line-clamp: 2;
90 | -webkit-box-orient: vertical;
91 |
92 | @media screen and (max-width: 768px) {
93 | font-size: 13px;
94 | }
95 | }
96 |
97 | &--meta {
98 | @include block-meta;
99 | }
100 | }
101 |
--------------------------------------------------------------------------------
/scss/modules/_categoryCard.scss:
--------------------------------------------------------------------------------
1 | .fCard {
2 | &--list {
3 | display: grid;
4 | grid-template-columns: repeat(2, 1fr);
5 | grid-gap: 20px;
6 | padding-bottom: 20px;
7 |
8 | @media (max-width: 414px) {
9 | grid-template-columns: 1fr;
10 | }
11 | }
12 |
13 | &--item {
14 | border: 1px solid var(--farallon-border-color);
15 | padding: 20px;
16 | border-radius: 18px;
17 | display: flex;
18 | flex-direction: column;
19 |
20 | @media screen and (max-width: 768px) {
21 | padding: 15px;
22 | }
23 |
24 | @include block-hover-gradient;
25 | }
26 |
27 | &--cover {
28 | border-radius: 10px;
29 | margin-bottom: 12px;
30 | object-fit: cover;
31 | aspect-ratio: 60/36;
32 |
33 | &Link {
34 | display: flex;
35 | align-items: center;
36 | position: relative;
37 | }
38 | }
39 |
40 | &--title {
41 | font-size: 20px;
42 | font-weight: bold;
43 | line-height: 1.4;
44 | margin-bottom: 5px;
45 |
46 | &:hover {
47 | color: var(--farallon-hover-color);
48 | }
49 |
50 | & + .fCard--meta {
51 | margin-top: 10px;
52 | }
53 |
54 | @media screen and (max-width: 768px) {
55 | font-size: 18px;
56 | margin-bottom: 0px;
57 | }
58 | }
59 |
60 | &--content {
61 | position: relative;
62 |
63 | .date {
64 | height: 36px;
65 | width: 36px;
66 | background-color: var(--farallon-background-white);
67 | border-radius: 100%;
68 | position: absolute;
69 | text-align: center;
70 | font-weight: bold;
71 | font-size: 24px;
72 | line-height: 36px;
73 | text-align: center;
74 | color: var(--farallon-text-gray);
75 | right: 15px;
76 | top: -30px;
77 | box-shadow: 0 0 0 5px var(--farallon-border-color-light);
78 | }
79 | }
80 |
81 | &--snippet {
82 | font-size: 15px;
83 | color: var(--farallon-text-light);
84 | line-height: 1.6;
85 | max-height: 3.2em;
86 | overflow: hidden;
87 | text-overflow: ellipsis;
88 | display: -webkit-box;
89 | -webkit-line-clamp: 2;
90 | -webkit-box-orient: vertical;
91 |
92 | @media screen and (max-width: 768px) {
93 | font-size: 13px;
94 | }
95 | }
96 |
97 | &--meta {
98 | @include block-meta;
99 | }
100 | }
101 |
--------------------------------------------------------------------------------
/scss/modules/_widget.scss:
--------------------------------------------------------------------------------
1 | .fWidget {
2 | &--item {
3 | padding-top: 0;
4 | }
5 |
6 | &--title {
7 | font-size: 16px;
8 | font-weight: bold;
9 | }
10 | }
11 |
12 | .fWidgetCategory {
13 | &--list {
14 | display: grid;
15 | grid-template-columns: repeat(3, 1fr);
16 | grid-gap: 12px;
17 | padding-top: 15px;
18 |
19 | @media (max-width: 768px) {
20 | grid-template-columns: repeat(2, 1fr);
21 | }
22 |
23 | @media (max-width: 414px) {
24 | grid-template-columns: repeat(1, 1fr);
25 | }
26 | }
27 |
28 | &--item {
29 | display: flex;
30 | flex-direction: column;
31 | position: relative;
32 | height: 100px;
33 | }
34 |
35 | &--image {
36 | width: 100%;
37 | height: 100px;
38 | object-fit: cover;
39 | border-radius: 5px;
40 | }
41 |
42 | &--meta {
43 | position: absolute;
44 | top: 0;
45 | bottom: 0;
46 | right: 0;
47 | left: 0;
48 | display: flex;
49 | align-items: center;
50 | justify-content: center;
51 |
52 | &::before {
53 | content: '';
54 | position: absolute;
55 | top: 0;
56 | bottom: 0;
57 | right: 0;
58 | left: 0;
59 | background: linear-gradient(0deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.1) 100%);
60 | border-radius: 5px;
61 | }
62 |
63 | &:hover {
64 | &::before {
65 | background: linear-gradient(0deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.5) 100%);
66 | }
67 | }
68 | }
69 |
70 | &--title {
71 | font-size: 14px;
72 | font-weight: bold;
73 | color: #fff;
74 | position: relative;
75 | }
76 | }
77 |
78 | .fWidgetAuthor {
79 | &--name {
80 | font-size: 24px;
81 | font-weight: bold;
82 | line-height: 1.2;
83 |
84 | @media screen and (max-width: 768px) {
85 | font-size: 20px;
86 | }
87 | }
88 |
89 | &--description {
90 | color: var(--farallon-text-gray);
91 | font-size: 18px;
92 |
93 | @media screen and (max-width: 768px) {
94 | font-size: 14px;
95 | }
96 | }
97 | }
98 |
99 | .footer--bar {
100 | padding: 0 40px;
101 | padding-top: 30px;
102 |
103 | @media (max-width: 414px) {
104 | padding: 0 0px;
105 | }
106 | }
107 |
108 | .top--bar {
109 | padding: 0 40px;
110 | padding-bottom: 30px;
111 |
112 | @media (max-width: 414px) {
113 | padding: 0;
114 | }
115 | }
116 |
--------------------------------------------------------------------------------
/scss/base/_variable.scss:
--------------------------------------------------------------------------------
1 | :root {
2 | --farallon-main-color: #4370f5;
3 | --farallon-hover-color: #3a5f9a;
4 |
5 | --farallon-dark-main-color: rgba(253, 186, 116, 1);
6 | --farallon-dark-hover-color: rgba(255, 237, 213, 1);
7 |
8 | --farallon-text-color: rgba(0, 0, 0, 0.84);
9 | --farallon-text-light: rgba(0, 0, 0, 0.68);
10 | --farallon-text-gray: rgba(0, 0, 0, 0.6);
11 | --farallon-text-gray-lightest: rgba(0, 0, 0, 0.5);
12 |
13 | --farallon-background-white: rgba(255, 255, 255, 1);
14 | --farallon-background-gray: rgba(240, 240, 240, 1);
15 | --farallon-background-gray-light: rgba(248, 248, 248, 1);
16 | --farallon-background-opacity: 0.9;
17 | --farallon-background-white-opacity: rgba(255, 255, 255, var(--farallon-background-opacity));
18 |
19 | --farallon-griedent-start: #007cf0;
20 | --farallon-griedent-end: #00dfd8;
21 |
22 | --farallon-border-color: rgba(0, 0, 0, 0.1);
23 | --farallon-border-color-light: rgba(0, 0, 0, 0.05);
24 |
25 | --block-separator-color: #244654;
26 | --article-target-color: #283c50;
27 |
28 | --farallon-text-size-small: 14px;
29 | --farallon-text-size-normal: 16px;
30 | --farallon-text-size-smallest: 12px;
31 |
32 | --farallon-main-width: 1000px;
33 | }
34 |
35 | @media (prefers-color-scheme: dark) {
36 | .auto {
37 | @include dark-variables;
38 | }
39 | }
40 |
41 | .dark {
42 | @include dark-variables;
43 | }
44 |
45 | @font-face {
46 | font-family: 'Open Sans';
47 | src: url('../fonts/OpenSans-Regular.woff2') format('woff2'),
48 | url('../fonts/OpenSans-Regular.woff') format('woff');
49 | font-weight: 400;
50 | font-style: normal;
51 | font-display: swap;
52 | }
53 |
54 | @font-face {
55 | font-family: 'Open Sans';
56 | src: url('../fonts/OpenSans-Bold.woff2') format('woff2'),
57 | url('../fonts/OpenSans-Bold.woff') format('woff');
58 | font-weight: 700;
59 | font-style: normal;
60 | font-display: swap;
61 | }
62 |
63 | @font-face {
64 | font-family: 'Open Sans';
65 | src: url('../fonts/OpenSans-Light.woff2') format('woff2'),
66 | url('../fonts/OpenSans-Light.woff') format('woff');
67 | font-weight: 200;
68 | font-style: normal;
69 | font-display: swap;
70 | }
71 |
72 | @font-face {
73 | font-family: 'Open Sans';
74 | src: url('../fonts/OpenSans-Medium.woff2') format('woff2'),
75 | url('../fonts/OpenSans-Medium.woff') format('woff');
76 | font-weight: 500;
77 | font-style: normal;
78 | font-display: swap;
79 | }
80 |
81 | @font-face {
82 | font-family: 'mrs_saint_delafieldregular';
83 | src: url('../fonts/mrssaintdelafield-regular-webfont.woff2') format('woff2'),
84 | url('../fonts/mrssaintdelafield-regular-webfont.woff') format('woff');
85 | font-weight: normal;
86 | font-style: normal;
87 | }
88 |
--------------------------------------------------------------------------------
/modules/update.php:
--------------------------------------------------------------------------------
1 | false
11 | ));
12 | if (is_wp_error($response)) {
13 | return false;
14 | }
15 | $res = $response['body'];
16 | $latest = json_decode($res, true)['version'];
17 | set_transient('farallon_latest', $latest, 60 * 60 * 24);
18 | }
19 | return version_compare(FARALLON_VERSION, $latest, '<');
20 | }
21 |
22 | function farallon_update_notice()
23 | {
24 | add_thickbox();
25 | echo '
26 |
主题最新版为 ' . get_transient('farallon_latest') . '，当前版本 ' . FARALLON_VERSION . '。请备份好所有文件，主题升级过程中会删掉原有文件。确认升级
27 |
';
28 | }
29 | if ($farallonSetting->get_setting('auto_update') && farallon_is_get_new()) add_action('admin_notices', 'farallon_update_notice');
30 |
31 | add_action('wp_ajax_farallon_theme_update', 'farallon_theme_update_callback');
32 | function farallon_theme_update_callback()
33 | {
34 |
35 | include_once ABSPATH . 'wp-admin/includes/class-wp-upgrader.php';
36 |
37 | $update_data = array(
38 | 'theme_version' => get_transient('farallon_latest'),
39 | 'update_link' => 'https://github.com/bigfa/Farallon/archive/refs/tags/v' . get_transient('farallon_latest') . '.zip'
40 | );
41 |
42 | $name = "Farallon";
43 | $slug = "Farallon";
44 | $version = $update_data['theme_version'];
45 | $download_link = $update_data['update_link'];
46 |
47 | delete_site_transient('update_themes');
48 |
49 | $themes = wp_get_themes();
50 | $current = (object) array(
51 | "last_checked" => time(),
52 | "checked" => array(),
53 | "response" => array(),
54 | "translations" => array()
55 | );
56 |
57 | foreach ($themes as $theme) {
58 | $current->checked[$theme->get('Slug')] = $theme->get('Version');
59 | }
60 |
61 | $current->response[$slug] = array(
62 | 'theme' => $slug,
63 | 'new_version' => $version,
64 | 'url' => '',
65 | 'package' => $download_link
66 | );
67 |
68 | set_site_transient('update_themes', $current);
69 |
70 | $title = __('Update Theme');
71 | $nonce = 'upgrade-theme_' . $slug;
72 | $url = 'update.php?action=upgrade-theme&theme=' . urlencode($slug);
73 |
74 | $upgrader = new Theme_Upgrader(new Theme_Upgrader_Skin(compact('title', 'nonce', 'url', 'theme')));
75 | $upgrader->upgrade($slug);
76 |
77 | exit;
78 | }
79 |
--------------------------------------------------------------------------------
/modules/widget.php:
--------------------------------------------------------------------------------
1 | __('Show author info', 'Farallon'));
8 | parent::__construct('about', __('About', 'Farallon'), $widget_ops);
9 | }
10 |
11 | function widget($args, $instance)
12 | {
13 | extract($args);
14 | echo $before_widget;
15 | $user = get_user_by('ID', 1);
16 | ?>
17 |
23 | __('Show your category card', 'Farallon'));
33 | parent::__construct('category', __('Categories', 'Farallon'), $widget_ops);
34 | }
35 |
36 | function widget($args, $instance)
37 | {
38 | extract($args);
39 | echo $before_widget;
40 | $categories = get_terms([
41 | 'taxonomy' => 'category',
42 | 'hide_empty' => false,
43 | // 'orderby' => 'meta_value_num',
44 | 'order' => 'DESC',
45 | // 'meta_key' => '_views',
46 | ]);
47 | echo '
';
48 | foreach ($categories as $category) {
49 | $link = get_term_link($category, 'category')
50 | ?>
51 |
52 | term_id, '_thumb', true)) : ?>
53 | ; ?>)
54 |
55 |
56 | ; ?>/build/images/default.jpg)
57 |
58 |
61 |
62 | ';
64 | echo $after_widget;
65 | }
66 | }
67 |
68 | add_action('widgets_init', 'farallon_widget_init');
69 | function farallon_widget_init()
70 | {
71 | register_widget('Farallon_Widget');
72 | register_widget('Farallon_Widget_Category');
73 | }
74 |
--------------------------------------------------------------------------------
/scss/utilities/_wp.scss:
--------------------------------------------------------------------------------
1 | // WordPress Specific Styles
2 | .screen-reader-text {
3 | position: absolute;
4 | left: -9999px;
5 | top: -9999px;
6 | }
7 |
8 | .aligncenter {
9 | margin-left: auto;
10 | margin-right: auto;
11 | display: block;
12 | }
13 |
14 | .alignleft {
15 | float: left;
16 | margin-right: 20px;
17 | }
18 |
19 | .alignright {
20 | float: right;
21 | margin-left: 20px;
22 | }
23 |
24 | .alignfull {
25 | width: 100%;
26 | margin-left: 0;
27 | margin-right: 0;
28 | }
29 |
30 | .gallery {
31 | display: grid;
32 | grid-gap: 10px;
33 | margin-bottom: 25px;
34 |
35 | .gallery-item {
36 | margin: 0;
37 |
38 | .gallery-caption {
39 | text-align: center;
40 | font-size: 12px;
41 | color: var(--farallon-text-light);
42 | }
43 | }
44 |
45 | &-columns-2,
46 | &-columns-4,
47 | &-columns-5,
48 | &-columns-7,
49 | &-columns-8 {
50 | grid-template-columns: repeat(2, 1fr);
51 | }
52 |
53 | &-columns-3,
54 | &-columns-6,
55 | &-columns-9 {
56 | grid-template-columns: repeat(3, 1fr);
57 | }
58 | }
59 |
60 | .grap--figure,
61 | .colonel--figure,
62 | .wp-caption {
63 | margin: 0 -50px 25px;
64 | position: relative;
65 | max-width: calc(100% + 100px);
66 | line-height: 1;
67 |
68 | img {
69 | border-radius: 4px;
70 | }
71 |
72 | @media (max-width: 820px) {
73 | margin: 0 0 20px;
74 | margin-left: -3.5%;
75 | margin-right: -3.5%;
76 | max-width: calc(100% + 7%);
77 | img {
78 | border-radius: 0;
79 | }
80 | }
81 |
82 | .imageCaption,
83 | .wp-caption-text {
84 | font-size: 12px;
85 | text-align: center;
86 | position: absolute;
87 | bottom: 12px;
88 | left: 12px;
89 | color: #fff;
90 | background-color: rgba(18, 18, 18, 0.8);
91 | border-radius: 5px;
92 | padding: 8px 10px;
93 | }
94 | }
95 |
96 | .widget_links {
97 | font-size: var(--farallon-text-size-small);
98 | color: var(--farallon-text-light);
99 |
100 | .blogroll {
101 | padding: 5px 0;
102 | display: flex;
103 | flex-wrap: wrap;
104 |
105 | li {
106 | margin-right: 15px;
107 | margin-bottom: 15px;
108 |
109 | a {
110 | img {
111 | width: 20px;
112 | height: 20px;
113 | margin-right: 5px;
114 | vertical-align: middle;
115 | }
116 |
117 | &:hover {
118 | color: var(--farallon-hover-color);
119 | text-decoration: underline;
120 | }
121 | }
122 | }
123 | }
124 | }
125 |
--------------------------------------------------------------------------------
/template-parts/single-related.php:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/js/setting.ts:
--------------------------------------------------------------------------------
1 | document.querySelectorAll('.fSetting--menu li').forEach((element, index) => {
2 | element.addEventListener('click', (event) => {
3 | document.querySelectorAll('.fSetting--menu li').forEach((element) => {
4 | element.classList.remove('active');
5 | });
6 | element.classList.add('active');
7 | document.querySelectorAll('.div-tab').forEach((element) => {
8 | element.classList.add('hidden');
9 | });
10 | document.querySelectorAll('.div-tab')[index].classList.remove('hidden');
11 | });
12 | });
13 |
14 | document.querySelector('#upload-categoryCover')?.addEventListener('click', (event) => {
15 | event.preventDefault();
16 | //@ts-ignore
17 | const image = wp
18 | .media({
19 | //@ts-ignore
20 | title: obvInit.upload_title,
21 | multiple: false,
22 | button: {
23 | //@ts-ignore
24 | text: obvInit.upload_button,
25 | },
26 | })
27 | .open()
28 | .on('select', function () {
29 | const uploaded_image = image.state().get('selection').first();
30 | const image_url = uploaded_image.toJSON().url;
31 | document.querySelector('#_category_cover')?.setAttribute('value', image_url);
32 | });
33 | });
34 |
35 | document.querySelector('#pure-save')?.addEventListener('click', (event) => {
36 | event.preventDefault();
37 | const form = document.querySelector('#pure-form') as HTMLFormElement;
38 | // @ts-ignore
39 | const formData = new FormData(form);
40 | // @ts-ignore
41 | const data = new URLSearchParams(formData);
42 |
43 | // const emailElement = document.querySelector('#pure-setting-email');
44 | // const email = emailElement?.getAttribute('value');
45 | // if (email && !isEmailValid(email)) {
46 | // return alert('Email is not valid');
47 | // }
48 |
49 | //@ts-ignore
50 | jQuery.ajax({
51 | //@ts-ignore
52 | url: obvInit.ajaxurl,
53 | data: data + '&action=farallon_setting',
54 | type: 'POST',
55 | success: function () {
56 | //@ts-ignore
57 | const html = `
${obvInit.success_message}
`;
58 | //@ts-ignore
59 | jQuery('.pure-wrap').before(html);
60 | window.scrollTo(0, 0);
61 | },
62 | });
63 | });
64 | +(function ($) {
65 | $(document).on('click', '#farallon-settings_updated .notice-dismiss', function () {
66 | $('#farallon-settings_updated').remove();
67 | });
68 | let $switch = $('.pure-setting-switch');
69 | $switch.click(function () {
70 | var $this = $(this),
71 | $input = $('#' + $this.attr('data-id'));
72 |
73 | if (!$this.hasClass('active')) {
74 | $this.addClass('active');
75 | $input.val(1);
76 | } else {
77 | $this.removeClass('active');
78 | $input.val(0);
79 | }
80 |
81 | $input.change();
82 | });
83 | //@ts-ignore
84 | })(jQuery);
85 |
--------------------------------------------------------------------------------
/gulpfile.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | const gulp = require('gulp');
4 | const uglify = require('gulp-uglify');
5 | const plumber = require('gulp-plumber');
6 | const postcss = require('gulp-postcss');
7 | const autoprefixer = require('autoprefixer');
8 | const cssnano = require('cssnano');
9 | const sass = require('gulp-sass')(require('sass'));
10 | const rename = require('gulp-rename');
11 | const ts = require('gulp-typescript');
12 | function fonts() {
13 | return gulp.src('./fonts/*').pipe(gulp.dest('./build/fonts/'));
14 | }
15 |
16 | function images() {
17 | return gulp.src('./images/*.{png,jpg,jpeg,gif,svg}').pipe(gulp.dest('./build/images/'));
18 | }
19 |
20 | function css() {
21 | return gulp
22 | .src('./scss/app.scss')
23 | .pipe(plumber())
24 | .pipe(sass({ outputStyle: 'compressed' }))
25 | .pipe(rename({ suffix: '.min' }))
26 | .pipe(postcss([autoprefixer(), cssnano()]))
27 | .pipe(gulp.dest('./build/css/'));
28 | }
29 |
30 | function settingCss() {
31 | return gulp
32 | .src('./scss/setting.scss')
33 | .pipe(plumber())
34 | .pipe(sass({ outputStyle: 'compressed' }))
35 | .pipe(rename({ suffix: '.min' }))
36 | .pipe(postcss([autoprefixer(), cssnano()]))
37 | .pipe(gulp.dest('./build/css/'));
38 | }
39 |
40 | function setting() {
41 | return gulp
42 | .src(['./js/extensions/*', './js/setting.ts'])
43 | .pipe(plumber())
44 | .pipe(
45 | ts({
46 | noImplicitAny: true,
47 | outFile: 'setting.js',
48 | target: 'es5',
49 | })
50 | )
51 | .pipe(uglify())
52 | .pipe(rename({ suffix: '.min' }))
53 | .pipe(gulp.dest('./build/js/'));
54 | }
55 |
56 | // Transpile, concatenate and minify scripts
57 | function scripts() {
58 | return gulp
59 | .src(['./js/extensions/*', './js/app.ts', './js/modules/*'])
60 | .pipe(
61 | ts({
62 | noImplicitAny: true,
63 | outFile: 'app.js',
64 | target: 'es5',
65 | })
66 | )
67 | .pipe(uglify())
68 | .pipe(rename({ suffix: '.min' }))
69 | .pipe(gulp.dest('./build/js/'));
70 | }
71 |
72 | // Watch files
73 | function watchFiles() {
74 | gulp.watch(['./js/modules/*', './js/extensions/*', './js/app.ts'], gulp.series(scripts));
75 | gulp.watch(
76 | [
77 | './scss/app.scss',
78 | './scss/modules/*',
79 | './scss/templates/*',
80 | './scss/base/*',
81 | './scss/components/*',
82 | './scss/layout/*',
83 | './scss/utilities/*',
84 | ],
85 | gulp.series(css)
86 | );
87 | gulp.watch(['./scss/setting.scss'], gulp.series(settingCss));
88 | gulp.watch(['./js/setting.ts'], gulp.series(setting));
89 | }
90 |
91 | // define complex tasks
92 | const js = gulp.series(scripts);
93 | const watch = gulp.parallel(watchFiles);
94 | const build = gulp.parallel(watch, gulp.parallel(css, fonts, js, images, settingCss, setting));
95 |
96 | exports.css = css;
97 | exports.js = js;
98 | exports.build = build;
99 | exports.watch = watch;
100 | exports.default = build;
101 |
--------------------------------------------------------------------------------
/scss/modules/_navigation.scss:
--------------------------------------------------------------------------------
1 | .post-navigation {
2 | overflow: hidden;
3 | padding-top: 20px;
4 |
5 | &.is-active {
6 | .nav-links {
7 | transform: translate3d(0, 0, 0);
8 | }
9 | }
10 |
11 | .nav-links {
12 | position: relative;
13 | transform: translate3d(0, 150%, 0);
14 | display: flex;
15 | justify-content: space-between;
16 | transition: 0.5s;
17 |
18 | & > div {
19 | &:only-child {
20 | text-align: center !important;
21 | width: 100%;
22 | }
23 | }
24 | }
25 |
26 | .nav-previous,
27 | .nav-next {
28 | padding: 15px;
29 | background-color: var(--farallon-background-white);
30 | width: 48%;
31 | box-sizing: border-box;
32 | text-align: right;
33 | background-origin: border-box;
34 | background-clip: padding-box, border-box;
35 | border: 1px solid transparent;
36 | a {
37 | display: flex;
38 | flex-direction: column;
39 | }
40 | }
41 |
42 | .nav-previous {
43 | text-align: left;
44 | }
45 |
46 | .meta-nav {
47 | font-size: var(--farallon-text-size-smallest);
48 | text-transform: uppercase;
49 | color: var(--farallon-text-gray);
50 | }
51 |
52 | .post-title {
53 | font-size: 14px;
54 | min-height: 3em;
55 | display: -webkit-box;
56 | -webkit-line-clamp: 2;
57 | -webkit-box-orient: vertical;
58 | overflow: hidden;
59 |
60 | &:hover {
61 | color: var(--farallon-hover-color);
62 | }
63 | }
64 | }
65 |
66 | .nav-links {
67 | display: flex;
68 | align-items: center;
69 | justify-content: center;
70 | padding-top: 20px;
71 | //mask-image: linear-gradient(90deg, transparent, #fff 90px, #fff calc(100% - 90px), transparent);
72 | .loadmore {
73 | cursor: pointer;
74 | position: relative;
75 | padding: 4px 32px;
76 | border-radius: 999rem;
77 | font-size: var(--farallon-text-size-smallest);
78 | background-color: #000;
79 | color: #fff;
80 |
81 | &:hover {
82 | background-color: var(--farallon-text-light);
83 | }
84 | }
85 | .page-numbers,
86 | .post-page-numbers {
87 | //border-radius: 999rem;
88 | @include navigation;
89 | }
90 |
91 | &__comment {
92 | .page-numbers,
93 | .post-page-numbers {
94 | font-size: 14px;
95 | padding: 10px;
96 | line-height: 1;
97 | --farallon-navigation-font-size: 16px;
98 | &.current {
99 | font-size: var(--farallon-navigation-font-size);
100 | &:after {
101 | border: 6px solid transparent;
102 | background-clip: padding-box;
103 | content: '';
104 | filter: blur(10px);
105 | height: 50%;
106 | opacity: 0.8;
107 | position: absolute;
108 | width: 50%;
109 | background-image: linear-gradient(165deg, #007cf0, #00dfd8);
110 | left: 0;
111 | }
112 | }
113 | }
114 | }
115 | }
116 |
--------------------------------------------------------------------------------
/template-parts/content-error.php:
--------------------------------------------------------------------------------
1 |
2 |
3 | , 600, 360); ?>)
4 |
5 |
30 |
--------------------------------------------------------------------------------
/scss/modules/_footer.scss:
--------------------------------------------------------------------------------
1 | .fFooter {
2 | font-size: var(--farallon-text-size-small);
3 | padding: 20px 80px;
4 | border-top: 1px dotted var(--farallon-border-color);
5 | color: var(--farallon-text-light);
6 |
7 | @media screen and (max-width: 768px) {
8 | padding: 20px 3.5%;
9 | }
10 |
11 | &--content {
12 | display: flex;
13 | align-items: center;
14 |
15 | @media screen and (max-width: 768px) {
16 | flex-direction: column;
17 | justify-content: center;
18 | align-items: center;
19 | padding-right: 3.5%;
20 | padding-left: 3.5%;
21 | }
22 | }
23 |
24 | &--info {
25 | display: none;
26 | text-align: center;
27 | color: var(--farallon-text-light);
28 |
29 | a {
30 | text-decoration: underline;
31 |
32 | &:hover {
33 | color: var(--farallon-hover-color);
34 | }
35 | }
36 |
37 | &.active {
38 | display: block;
39 | }
40 | }
41 |
42 | &--copyright {
43 | margin-left: auto;
44 | display: flex;
45 | align-items: center;
46 |
47 | @media screen and (max-width: 768px) {
48 | margin-left: 0;
49 | }
50 |
51 | svg {
52 | fill: var(--farallon-text-light);
53 | margin-left: 8px;
54 | cursor: pointer;
55 |
56 | &:hover {
57 | fill: var(--farallon-hover-color);
58 | }
59 | }
60 | }
61 |
62 | &--icons {
63 | @include sns-icons;
64 | --farallon-icon-size: 18px;
65 | }
66 | }
67 |
68 | .fThemeSwitcher {
69 | position: fixed;
70 | right: 10px;
71 | top: 40%;
72 | display: flex;
73 | flex-direction: column;
74 | height: max-content;
75 | box-shadow: 0 0 0 1px var(--farallon-border-color);
76 | background-color: var(--farallon-background-white);
77 | border-radius: 999rem;
78 | width: max-content;
79 | padding: 3px;
80 |
81 | @media (max-width: 768px) {
82 | top: auto;
83 | bottom: 100px;
84 | }
85 |
86 | span {
87 | width: 32px;
88 | height: 32px;
89 | cursor: pointer;
90 | border-radius: 100%;
91 | display: flex;
92 | align-items: center;
93 | justify-content: center;
94 | color: var(--farallon-text-gray-lightest);
95 | margin-bottom: 5px;
96 |
97 | &:hover {
98 | color: var(--farallon-text-color);
99 | }
100 |
101 | &.is-active {
102 | color: var(--farallon-text-color);
103 | background-color: var(--farallon-background-gray-light);
104 | }
105 |
106 | &:last-child {
107 | margin-bottom: 0;
108 | }
109 | }
110 | }
111 |
112 | .fBackTop {
113 | background-color: var(--border-color);
114 | z-index: 10;
115 | transition: all 0.3s ease;
116 | position: fixed;
117 | bottom: 25px;
118 | right: -25px;
119 | cursor: pointer;
120 |
121 | .svgIcon {
122 | width: 17px;
123 | height: 17px;
124 | fill: var(--farallon-main-color);
125 | animation: toTop 1s ease-in infinite alternate;
126 | }
127 |
128 | &:hover {
129 | .svgIcon {
130 | fill: var(--farallon-hover-color);
131 | animation-play-state: paused;
132 | }
133 | }
134 |
135 | &.is-active {
136 | right: 25px;
137 | }
138 | }
139 |
--------------------------------------------------------------------------------
/scss/modules/_block.scss:
--------------------------------------------------------------------------------
1 | .fBlock {
2 | &--list {
3 | position: relative;
4 | }
5 |
6 | &--item {
7 | padding: 25px 40px;
8 | border-radius: 5px;
9 | display: flex;
10 | align-items: center;
11 |
12 | @media (max-width: 820px) {
13 | padding: 20px 30px;
14 | }
15 |
16 | @media (max-width: 768px) {
17 | padding: 15px 0px;
18 | }
19 |
20 | @include block-hover-gradient;
21 | }
22 |
23 | &--content {
24 | flex: 1 1 auto;
25 | }
26 |
27 | &--cover {
28 | width: var(--farallon-block-cover-width, 150px);
29 | height: var(--farallon-block-cover-height, 100px);
30 | object-fit: cover;
31 | border-radius: 5px;
32 | aspect-ratio: 150/100;
33 | transition: 0.5s;
34 |
35 | &Link {
36 | position: relative;
37 | width: var(--farallon-block-cover-width, 150px);
38 | flex: 0 0 auto;
39 | margin-left: 20px;
40 | display: flex;
41 | align-items: center;
42 | height: var(--farallon-block-cover-height, 100px);
43 | border-radius: 5px;
44 | overflow: hidden;
45 |
46 | @media screen and (max-width: 768px) {
47 | width: 100px;
48 | height: 75px;
49 | }
50 |
51 | &:hover {
52 | .fBlock--cover {
53 | transform: scale(1.1);
54 | }
55 | }
56 |
57 | .marker--tips {
58 | left: auto;
59 | right: 8px;
60 | top: 8px;
61 | }
62 |
63 | .cover--count {
64 | position: absolute;
65 | bottom: 8px;
66 | left: 8px;
67 | background-color: rgba(0, 0, 0, 0.5);
68 | color: rgba(255, 255, 255, 0.95);
69 | padding: 0px 5px;
70 | border-radius: 5px;
71 | font-size: 12px;
72 | display: flex;
73 | align-items: center;
74 | font-weight: bold;
75 |
76 | svg {
77 | margin-right: 5px;
78 | }
79 |
80 | @media screen and (max-width: 768px) {
81 | display: none;
82 | }
83 | }
84 | }
85 | }
86 |
87 | &--title {
88 | font-size: 20px;
89 | font-weight: bold;
90 | line-height: 1.4;
91 | margin-bottom: 5px;
92 |
93 | @media screen and (max-width: 768px) {
94 | font-size: 18px;
95 | }
96 |
97 | .sticky--post {
98 | font-size: 12px;
99 | color: #fff;
100 | font-weight: normal;
101 | background: linear-gradient(90deg, #8a63d2, #f81ce5);
102 | padding: 3px 5px;
103 | border-radius: 5px;
104 | line-height: 1;
105 | display: inline-block;
106 | vertical-align: middle;
107 | }
108 |
109 | &:hover {
110 | color: var(--farallon-hover-color);
111 | }
112 | & + .fBlock--meta {
113 | margin-top: 10px;
114 | }
115 | }
116 |
117 | &--snippet {
118 | font-size: 15px;
119 | color: var(--farallon-text-light);
120 | line-height: 1.6;
121 | max-height: 3.2em;
122 | display: -webkit-box;
123 | -webkit-line-clamp: 2;
124 | -webkit-box-orient: vertical;
125 | overflow: hidden;
126 | text-overflow: ellipsis;
127 |
128 | @media screen and (max-width: 768px) {
129 | font-size: 13px;
130 | }
131 | }
132 |
133 | &--meta {
134 | @include block-meta;
135 | }
136 | }
137 |
--------------------------------------------------------------------------------
/scss/components/_zoom.scss:
--------------------------------------------------------------------------------
1 | .overlay {
2 | position: fixed;
3 | top: 0;
4 | bottom: 0;
5 | right: 0;
6 | left: 0;
7 | background-color: var(--farallon-background-white-opacity);
8 | display: flex;
9 | justify-content: center;
10 | align-items: center;
11 | z-index: 100;
12 |
13 | @media (max-width: 800px) {
14 | flex-direction: column;
15 | }
16 |
17 | &-img-wrap {
18 | position: relative;
19 | opacity: 0;
20 | transition: opacity 0.5s;
21 | display: flex;
22 | align-items: center;
23 |
24 | &.is-finieshed {
25 | opacity: 1;
26 | }
27 | }
28 | }
29 |
30 | .zoomImgClose {
31 | border: 0;
32 | color: var(--farallon-text-light);
33 | background-color: var(--farallon-background-gray);
34 | height: 44px;
35 | width: 44px;
36 | display: flex;
37 | align-items: center;
38 | justify-content: center;
39 | border-radius: 100%;
40 | position: absolute;
41 | right: 10px;
42 | top: 10px;
43 | cursor: pointer;
44 |
45 | svg {
46 | transition: 0.5s transform;
47 | fill: var(--farallon-text-light);
48 | }
49 |
50 | &:hover {
51 | svg {
52 | transform: rotate(90deg);
53 | }
54 | }
55 | }
56 |
57 | .zoomNav {
58 | display: flex;
59 | justify-content: center;
60 | }
61 |
62 | .mfp-arrow-left {
63 | position: absolute;
64 | opacity: 0.65;
65 | left: 0;
66 | margin: 0;
67 | top: 50%;
68 | margin-top: -55px;
69 | padding: 0;
70 | width: 90px;
71 | height: 110px;
72 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
73 | border: 0;
74 | background-color: rgba(0, 0, 0, 0);
75 | color: var(--farallon-text-light);
76 | cursor: pointer;
77 |
78 | svg {
79 | transform: rotate(180deg);
80 | fill: currentColor;
81 | }
82 | }
83 |
84 | .mfp-arrow-left {
85 | position: absolute;
86 | left: 10px;
87 | margin: 0;
88 | top: 50%;
89 | margin-top: -55px;
90 | padding: 0;
91 | height: 44px;
92 | background-color: var(--farallon-background-gray);
93 | cursor: pointer;
94 | width: 44px;
95 | display: flex;
96 | align-items: center;
97 | justify-content: center;
98 | border-radius: 100%;
99 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
100 | border: 0;
101 | color: var(--text-gray-light);
102 |
103 | svg {
104 | transform: rotate(180deg);
105 | }
106 |
107 | &.disabled {
108 | opacity: 0.4;
109 | cursor: not-allowed;
110 | }
111 | }
112 |
113 | .mfp-arrow-right {
114 | border: 0;
115 | color: var(--farallon-text-light);
116 | position: absolute;
117 | right: 10px;
118 | background-color: var(--farallon-background-gray);
119 | cursor: pointer;
120 | margin: 0;
121 | top: 50%;
122 | margin-top: -55px;
123 | padding: 0;
124 | height: 44px;
125 | width: 44px;
126 | display: flex;
127 | align-items: center;
128 | justify-content: center;
129 | border-radius: 100%;
130 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
131 |
132 | &.disabled {
133 | opacity: 0.4;
134 | cursor: not-allowed;
135 | }
136 | }
137 |
138 | .image--nav {
139 | width: 120px;
140 | display: flex;
141 | flex-direction: column;
142 | margin-left: 50px;
143 | transform: rotate(90deg) translateX(4%);
144 | text-align: right;
145 | pointer-events: none;
146 | font-size: 100px;
147 | max-height: 80vh;
148 | color: var(--farallon-text-light);
149 | font-style: italic;
150 | white-space: nowrap;
151 |
152 | @media (max-width: 800px) {
153 | transform: rotate(0deg) translateX(0);
154 | width: 100%;
155 | margin-left: 0;
156 | overflow-x: auto;
157 | flex-wrap: nowrap;
158 | flex-direction: row;
159 | justify-content: center;
160 | font-size: 24px;
161 | margin-top: 30px;
162 |
163 | img {
164 | width: 64px;
165 | }
166 | }
167 | }
168 |
--------------------------------------------------------------------------------
/footer.php:
--------------------------------------------------------------------------------
1 |
2 |
25 | get_setting('back2top')) : ?>
26 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
--------------------------------------------------------------------------------
/scss/base/_mixins.scss:
--------------------------------------------------------------------------------
1 | @mixin block-meta {
2 | font-size: var(--farallon-text-size-small);
3 | color: var(--farallon-text-gray-lightest);
4 | display: flex;
5 | align-items: center;
6 | flex-wrap: wrap;
7 | margin-top: 2px;
8 |
9 | time {
10 | display: flex;
11 | align-items: center;
12 | }
13 |
14 | svg {
15 | margin-right: 4px;
16 | fill: var(--farallon-text-gray-lightest);
17 | margin-left: 10px;
18 | &:first-child {
19 | margin-left: 0;
20 | }
21 | }
22 |
23 | a {
24 | &:hover {
25 | text-decoration: underline;
26 | }
27 | }
28 |
29 | @media screen and (max-width: 768px) {
30 | font-size: 12px;
31 | }
32 | }
33 |
34 | @mixin centered {
35 | margin-left: auto;
36 | margin-right: auto;
37 | }
38 |
39 | @mixin sns-icons {
40 | display: flex;
41 | align-items: center;
42 | --farallon-icon-size: 20px;
43 |
44 | a {
45 | margin: 0 10px 0 0;
46 | &:last-child {
47 | margin-right: 0;
48 | }
49 | }
50 |
51 | svg {
52 | fill: var(--farallon-text-color);
53 | width: var(--farallon-icon-size);
54 | height: var(--farallon-icon-size);
55 |
56 | &:hover {
57 | fill: var(--farallon-hover-color);
58 | }
59 |
60 | &.sns {
61 | fill: none;
62 | stroke: var(--farallon-text-color);
63 |
64 | &:hover {
65 | stroke: var(--farallon-hover-color);
66 | fill: none;
67 | }
68 | }
69 | }
70 | }
71 |
72 | @mixin navigation {
73 | //border-radius: 999rem;
74 |
75 | padding: 20px;
76 | --farallon-navigation-font-size: 20px;
77 | color: var(--farallon-text-light);
78 |
79 | &:hover {
80 | color: var(--farallon-hover-color);
81 | }
82 | // border: 1px solid #eee;
83 | &.current {
84 | font-size: var(--farallon-navigation-font-size);
85 | font-weight: bold;
86 | cursor: not-allowed;
87 | body:not(.is-cleanMode) & {
88 | &:after {
89 | border: 12px solid transparent;
90 | background-clip: padding-box;
91 | content: '';
92 | filter: blur(36px);
93 | height: 50%;
94 | opacity: 0.8;
95 | position: absolute;
96 | width: 50%;
97 | //z-index: -1;
98 | background-image: linear-gradient(165deg, #007cf0, #00dfd8);
99 | left: 0;
100 | }
101 | }
102 |
103 | body.dark:not(.is-cleanMode) & {
104 | &:after {
105 | background-image: linear-gradient(180deg, #1e1e1e, #121212);
106 | }
107 | }
108 |
109 | @media (prefers-color-scheme: dark) {
110 | body.auto:not(.is-cleanMode) & {
111 | &:after {
112 | background-image: linear-gradient(180deg, #1e1e1e, #121212);
113 | }
114 | }
115 | }
116 | }
117 |
118 | &.dots {
119 | color: var(--farallon-text-gray);
120 | }
121 | position: relative;
122 | }
123 |
124 | @mixin block-hover-gradient {
125 | &:hover {
126 | background-color: rgba(234, 243, 255, 0.5);
127 | background-image: linear-gradient(12deg, #fff 50%, hsla(0, 0%, 100%, 0));
128 | // border-radius: 18px;
129 | transform: none;
130 | transform-origin: 50% 50% 0px;
131 | }
132 |
133 | .dark & {
134 | &:hover {
135 | background: linear-gradient(180deg, #1e1e1e, #121212);
136 | }
137 | }
138 |
139 | @media (prefers-color-scheme: dark) {
140 | .auto & {
141 | &:hover {
142 | background: linear-gradient(180deg, #1e1e1e, #121212);
143 | }
144 | }
145 | }
146 | }
147 |
148 | @mixin dark-variables {
149 | --farallon-main-color: var(--farallon-dark-main-color);
150 | --farallon-hover-color: var(--farallon-dark-hover-color);
151 | --farallon-text-color: #a1a1aa;
152 | --farallon-text-light: rgba(161, 161, 170, 1);
153 | --farallon-text-gray: rgba(113, 113, 122, 1);
154 | --farallon-text-gray-lightest: rgba(113, 113, 122, 0.95);
155 |
156 | --farallon-background-white: #1e1e1e;
157 | --farallon-background-gray: #000;
158 | --farallon-background-gray-light: #1e1e1e;
159 | --farallon-background-white-opacity: rgba(30, 30, 30, var(--farallon-background-opacity));
160 |
161 | --farallon-border-color: rgba(63, 63, 70, 0.6);
162 | --farallon-border-color-light: rgba(63, 63, 70, 0.4);
163 | }
164 |
--------------------------------------------------------------------------------
/README_CN.md:
--------------------------------------------------------------------------------
1 | # Farallon
2 |
3 | 
4 |
5 | 最新版本: `0.9.3`
6 |
7 | [简单的使用文档](https://fatesinger.com/101971)
8 |
9 | ## 更新日志
10 |
11 | ### 0.9.3
12 |
13 | - 增加日语支持
14 | - 样式改进
15 | - 更新翻译
16 | - 移除默认 logo
17 |
18 | ### 0.9.2
19 |
20 | - 样式改进
21 |
22 | ### 0.9.1
23 |
24 | - 更新翻译
25 | - 样式改进
26 |
27 | ### 0.9.0
28 |
29 | > [!IMPORTANT]
30 | > 类名做了破坏性更新
31 |
32 | - 更新翻译
33 | - 样式改进
34 | - 增加了一些钩子
35 | - 修复搜索页面加载错误的问题
36 |
37 | ### 0.8.8
38 |
39 | - 增加文章阅读时间
40 | - 更新翻译
41 |
42 | ### 0.8.7
43 |
44 | - 样式改进
45 | - 更新翻译
46 | - 使用 php 格式化时间
47 |
48 | ### 0.8.6
49 |
50 | - 修复文章浏览量错误的问题
51 | - 更新翻译
52 |
53 | ### 0.8.5
54 |
55 | - 样式改进
56 | - 更新翻译
57 | - 增加简洁模式
58 |
59 | ### 0.8.4
60 |
61 | - 优先展示摘要
62 | - 增加 wordpress `gallery` 样式支持
63 | - 增加一个一直显示缩略图的设置
64 |
65 | ### 0.8.3
66 |
67 | - 样式改进
68 | - 增加`threads`图标
69 |
70 | ### 0.8.2
71 |
72 | - 样式改进
73 |
74 | ### 0.8.1
75 |
76 | - 修复文章图片数统计错误的问题
77 |
78 | ### 0.8.0
79 |
80 | - 样式改进
81 | - 增加一个是否显示文章图片数的设置
82 |
83 | ### 0.7.9
84 |
85 | - 增加一个文章更新时间的设置
86 | - 更新翻译
87 |
88 | ### 0.7.8
89 |
90 | - 增加一个`follow`认证的 rss 标签设置
91 |
92 | ### 0.7.7
93 |
94 | - 设置`figure`最大宽度
95 | - 加载更多文章时兼容文章格式
96 | - 修复一些样式错误
97 |
98 | ### 0.7.6
99 |
100 | - 增加链接模版标题样式
101 | - 移除评论内容中友情链接标识
102 |
103 | ### 0.7.5
104 |
105 | - 增加图片灯箱
106 | - 增加文章标题居中的选项
107 | - 修复异步获取更多文章渲染错误
108 |
109 | ### 0.7.4
110 |
111 | - 修复默认文章格式下相关文章错误的问题
112 |
113 | ### 0.7.3
114 |
115 | - 稳定版发布
116 |
117 | ### 0.7.2
118 |
119 | - 增加主题设置文档链接
120 |
121 | ### 0.7.1
122 |
123 | - 增加 twiiter 头部标签
124 |
125 | ### 0.7.0
126 |
127 | - 更新翻译
128 | - 增加 Open Graph 标签
129 |
130 | ### 0.6.9
131 |
132 | - 兼容 `wp caption` 样式
133 | - 更新翻译
134 |
135 | ### 0.6.8
136 |
137 | - 增加文章目录标题开始层级设置
138 |
139 | ### 0.6.7
140 |
141 | - 归档页面排除状态文章格式
142 |
143 | ### 0.6.6
144 |
145 | - 相关文章兼容文章格式
146 |
147 | ### 0.6.5
148 |
149 | - 增加标签归档页面
150 | - 更新翻译
151 |
152 | ### 0.6.4
153 |
154 | - 修复评论列表中作者标识显示问题
155 |
156 | ### 0.6.3
157 |
158 | - 增加自定义 SNS 设置
159 |
160 | ### 0.6.2
161 |
162 | - 增加主题文档链接
163 | - 更新翻译
164 |
165 | ### 0.6.1
166 |
167 | - 增一个首页不显示状态文章格式的设置
168 |
169 | ### 0.6.0
170 |
171 | - 增加主题自动更新
172 |
173 | > 因为更新源在 Github 所以又可能出现下载失败的情况。
174 |
175 | ### 0.5.10
176 |
177 | - 更新翻译
178 | - 更新分类小工具样式
179 |
180 | ### 0.5.9
181 |
182 | - 增加 discord 图标
183 | - 增加长毛象图标
184 |
185 | ### 0.5.8
186 |
187 | - 修改页面模版标题
188 |
189 | ### 0.5.7
190 |
191 | - 更新翻译
192 |
193 | ### 0.5.6
194 |
195 | - 增加友情链接标识
196 | - 禁用一些钩子在后台生效
197 |
198 | ### 0.5.5
199 |
200 | - 增加 Github 图标设置
201 | - 增加一些校验规格
202 | - 增加无评论文案设置
203 | - 增加文章分类卡片设置
204 |
205 | ### 0.5.4
206 |
207 | - 更新翻译
208 |
209 | ### 0.5.3
210 |
211 | - 增加一个作者 SNS 图标是否展示的配置
212 |
213 | ### 0.5.2
214 |
215 | - 底部展示 SNS 图标
216 | - 自动获取 rss 地址
217 | - 增加了邮箱地址设置
218 | - 移除了 Telegram 组群和频道设置
219 |
220 | ### 0.5.1
221 |
222 | - 调用 Wordpress 媒体库设置分类封面图片
223 |
224 | ### 0.5.0
225 |
226 | - 增加现在页面
227 |
228 | > 测试性发布
229 |
230 | ### 0.4.10
231 |
232 | - 喝了太多咖啡
233 |
234 | ### 0.4.9
235 |
236 | - 去除摘要中的文章目录
237 | - 修复翻译错误
238 |
239 | ### 0.4.8
240 |
241 | - 修复一些样式问题
242 |
243 | ### 0.4.7
244 |
245 | - 增加一个使用卡片分类模版的设置，不再需要修改分类 slug。
246 |
247 | ### 0.4.6
248 |
249 | - 修复一些样式错误
250 | - 分类页面展示缩略图
251 |
252 | ### 0.4.5
253 |
254 | - 增加一个关闭作者链接的配置
255 |
256 | > 针对中国特殊的网络情况的暖心设置 💗
257 |
258 | ### 0.4.4
259 |
260 | - 细节样式调整
261 | - 增加了一个分类卡片小工具
262 |
263 | ### 0.4.3
264 |
265 | - 分类列表样式调整
266 |
267 | ### 0.4.2
268 |
269 | - 修复相关文章封面宽度不够时比例错误的问题
270 |
271 | ### 0.4.1
272 |
273 | - 分类列表样式调整
274 |
275 | ### 0.4.0
276 |
277 | - 增加分类封面图设置
278 | - 增加分类列表页面
279 | - 增加状态文章格式模版(memes)
280 |
281 | ### 0.3.9
282 |
283 | - 修复文章链接过长时复制链接样式错误
284 |
285 | ### 0.3.8
286 |
287 | - 评论区增加文章作者标识
288 | - 兼容暗黑模式下豆瓣条目样式
289 |
290 | ### 0.3.7
291 |
292 | - 增加作者社交网络图标
293 |
294 | ### 0.3.6
295 |
296 | - 增加 pingback 引用样式
297 |
298 | ### 0.3.4
299 |
300 | - 增加文章缩略图支持
301 | - 增加 `gravatar` 头像代理设置
302 |
303 | ### 0.3.2
304 |
305 | - 文章目录可折叠
306 | - 更新 `normalize.css`
307 |
308 | ### 0.3.1
309 |
310 | - 修复上下文链接错误
311 |
312 | ### 0.3.0
313 |
314 | - 增加文章目录功能
315 |
316 | ### 0.2.4
317 |
318 | - 增加一个返回顶部的选项
319 | - 增加了底部小工具，推荐安装`经典小工具`插件，方便适配
320 | - 修复一点样式错误
321 |
322 | ### 0.2.3
323 |
324 | - 菜单样式改进
325 | - 修复一个设置错误
326 |
327 | ### 0.2.2
328 |
329 | - 增加一个无限加载的开关
330 |
331 | ### 0.2.1
332 |
333 | - 增加分类统计
334 |
335 | ### 0.2.0
336 |
337 | - 增加暗黑模式支持
338 | - 修复移动端 footer 样式错误
339 |
340 | ### 0.1.13
341 |
342 | - bug 修复
343 | - 增加插件`Marker Pro` 的支持
344 |
345 | ### 0.1.12
346 |
347 | - 增加暗黑配色
348 | - 增加了站点 logo 和 favicon 配置选项
349 | - 给页面模版增加微数据
350 |
351 | ### 0.1.11
352 |
353 | - 增加一个是否展示父级评论的设置
354 |
355 | ### 0.1.9
356 |
357 | - 增加一个复制链接分享的配置
358 | - 评论图标优化
359 | - 菜单间距调整
360 | - 对`Marker Pro`支持增强
361 |
362 | ### 0.1.8
363 |
364 | - 增加上下文链接
365 | - 增加文章分页链接开关
366 |
367 | ### 0.1.6
368 |
369 | - 增加 table 样式支持
370 | - 给文章点赞按钮增加了一个开关
371 | - 增加了默认缩略图设置
372 | - 增加了豆瓣专属页面模版
373 |
374 | ### 0.1.5
375 |
376 | - 添加了评论分页链接
377 |
378 | ### 0.1.4
379 |
380 | 修复评论表单 checkbox 样式问题
381 |
382 | ### 0.1.3
383 |
384 | - 增加国内主流 CDN 支持
385 |
386 | ### 0.1.0
387 |
388 | - 初始化发布
389 |
--------------------------------------------------------------------------------
/scss/templates/_single.scss:
--------------------------------------------------------------------------------
1 | .fArticle {
2 | @include centered;
3 | max-width: var(--farallon-article-width, 678px);
4 |
5 | &--wide {
6 | --farallon-article-width: 800px;
7 | }
8 |
9 | &--full {
10 | --farallon-article-width: 100%;
11 | }
12 |
13 | &--header {
14 | text-align: center;
15 | padding-bottom: 15px;
16 |
17 | .fArticle--headline {
18 | margin-bottom: 0px;
19 | }
20 | }
21 |
22 | &--headline {
23 | font-size: 32px;
24 | font-weight: bold;
25 | line-height: 1.5;
26 | margin-bottom: 20px;
27 |
28 | @media screen and (max-width: 768px) {
29 | font-size: 24px;
30 | margin-bottom: 10px;
31 | }
32 | }
33 |
34 | &--meta {
35 | font-size: 14px;
36 | color: var(--farallon-text-gray);
37 | display: flex;
38 | }
39 |
40 | &--toc {
41 | background-color: var(--farallon-background-gray-light);
42 | padding: 12px 15px;
43 | border-radius: 10px;
44 | font-size: var(--farallon-text-size-small);
45 | margin-bottom: 15px;
46 | color: var(--farallon-text-light);
47 | line-height: 1.4 !important;
48 |
49 | summary {
50 | cursor: pointer;
51 | }
52 |
53 | ul {
54 | margin-bottom: 0 !important;
55 |
56 | li {
57 | margin-bottom: 0 !important;
58 | margin-left: 20px !important;
59 |
60 | &::before {
61 | padding-right: 6px !important;
62 | }
63 | }
64 | }
65 |
66 | a {
67 | box-shadow: none !important;
68 |
69 | &:hover {
70 | color: var(--farallon-hover-color);
71 | }
72 | }
73 | }
74 |
75 | &--content {
76 | font-size: 16px;
77 | }
78 |
79 | &--tags {
80 | display: flex;
81 | align-items: center;
82 | flex-wrap: wrap;
83 | padding: 15px 0 5px;
84 |
85 | a {
86 | margin-right: 10px;
87 | margin-bottom: 10px;
88 | background: var(--farallon-background-gray);
89 | font-size: 12px;
90 | padding: 3px 15px;
91 | border-radius: 6px;
92 | color: var(--farallon-text-gray);
93 |
94 | &:hover {
95 | background-color: var(--farallon-background-gray-light);
96 | }
97 | }
98 | }
99 |
100 | &--share {
101 | cursor: pointer;
102 | display: flex;
103 | align-items: center;
104 | justify-content: center;
105 | padding: 20px 0 15px;
106 | font-size: 14px;
107 | color: var(--farallon-text-gray);
108 | line-height: 1.2;
109 |
110 | svg {
111 | height: 16px;
112 | width: 16px;
113 | fill: var(--farallon-text-gray);
114 | margin-right: 4px;
115 | flex: 0 0 auto;
116 | }
117 |
118 | .text {
119 | flex: 0 0 auto;
120 | }
121 |
122 | .link {
123 | margin-left: 5px;
124 | &:hover {
125 | color: var(--farallon-hover-color);
126 | border-bottom-color: var(--farallon-hover-color);
127 | }
128 | border-bottom: 1px dotted;
129 | white-space: nowrap;
130 | overflow: hidden;
131 | text-overflow: ellipsis;
132 | }
133 | }
134 |
135 | &--actions {
136 | display: flex;
137 | align-items: center;
138 | justify-content: center;
139 | padding: 20px 0;
140 |
141 | @media screen and (max-width: 768px) {
142 | padding: 10px 0;
143 | }
144 |
145 | .button--like {
146 | svg {
147 | fill: var(--farallon-text-gray);
148 | }
149 |
150 | &:hover,
151 | &.is-active {
152 | svg {
153 | fill: var(--farallon-hover-color);
154 | }
155 | }
156 | }
157 |
158 | & + .fArticle--share {
159 | padding-top: 0;
160 | }
161 | }
162 |
163 | &--footer {
164 | font-size: 14px;
165 | color: var(--farallon-text-gray);
166 | margin-bottom: 10px;
167 | margin-top: 10px;
168 | display: flex;
169 | align-items: center;
170 |
171 | .icon {
172 | width: 16px;
173 | height: 16px;
174 | fill: var(--farallon-text-gray);
175 | margin-right: 5px;
176 | }
177 |
178 | .text {
179 | margin-right: 5px;
180 | }
181 | }
182 | }
183 |
184 | // Farallon Theme Graph Styles
185 | @import '../modules/graph';
186 | // Farallon Theme Comment Styles
187 | @import '../modules/comment';
188 | // Farallon Theme Author Card Styles
189 | @import '../modules/authorCard';
190 | // Farallon Theme Category Card Styles
191 | @import '../modules/categoryCard';
192 | // Farallon Theme Related Post Styles
193 | @import '../modules/relatedPost';
194 |
--------------------------------------------------------------------------------
/js/modules/comment.ts:
--------------------------------------------------------------------------------
1 | class farallonComment extends farallonBase {
2 | loading = false;
3 | constructor() {
4 | super();
5 | this.init();
6 | }
7 |
8 | private init() {
9 | if (document.querySelector('.comment-form')) {
10 | document.querySelector('.comment-form')?.addEventListener('submit', (e) => {
11 | e.preventDefault();
12 | if (this.loading) return;
13 | const form = document.querySelector('.comment-form') as HTMLFormElement;
14 | const formData = new FormData(form);
15 | const formDataObj: { [index: string]: any } = {};
16 | formData.forEach((value, key: any) => (formDataObj[key] = value));
17 | this.loading = true;
18 | fetch(this.obvInit.restfulBase + 'farallon/v1/comment', {
19 | method: 'POST',
20 | body: JSON.stringify(formDataObj),
21 | headers: {
22 | 'X-WP-Nonce': this.obvInit.nonce,
23 | 'Content-Type': 'application/json',
24 | },
25 | })
26 | .then((response) => {
27 | return response.json();
28 | })
29 | .then((data) => {
30 | this.loading = false;
31 | if (data.code != 200) {
32 | return this.showNotice(data.message, 'error');
33 | }
34 | let a = document.getElementById('cancel-comment-reply-link'),
35 | i = document.getElementById('respond'),
36 | n = document.getElementById('wp-temp-form-div');
37 | const comment = data.data;
38 | const html = ``;
54 | const parent_id = (
55 | document.querySelector('#comment_parent') as HTMLInputElement
56 | )?.value;
57 | if (a) {
58 | a.style.display = 'none';
59 | a.onclick = null;
60 | }
61 | ((document.getElementById('comment_parent') as HTMLInputElement).value =
62 | '0'),
63 | n &&
64 | i &&
65 | n.parentNode &&
66 | (n.parentNode.insertBefore(i, n), n.parentNode.removeChild(n));
67 | if (document.querySelector('.fComment--body__fresh'))
68 | document
69 | .querySelector('.fComment--body__fresh')
70 | ?.classList.remove('fComment--body__fresh');
71 | const commentInput = document.getElementById(
72 | 'comment'
73 | ) as HTMLInputElement | null;
74 | if (commentInput) {
75 | commentInput.value = '';
76 | }
77 | if (parent_id != '0') {
78 | document
79 | .querySelector('#comment-' + parent_id)
80 | ?.insertAdjacentHTML(
81 | 'beforeend',
82 | '
' + html + '
'
83 | );
84 | } else {
85 | if (document.querySelector('.fComment--placeholder')) {
86 | document.querySelector('.fComment--placeholder')?.remove();
87 | }
88 | document
89 | .querySelector('.fComment--list')
90 | ?.insertAdjacentHTML('beforeend', html);
91 | }
92 |
93 | const newComment = document.querySelector(
94 | `#comment-${comment.comment_ID}`
95 | ) as HTMLElement;
96 |
97 | if (newComment) {
98 | newComment.scrollIntoView({ behavior: 'smooth' });
99 | }
100 | this.showNotice(this.obvInit.comment_submit_success_text, 'success');
101 | });
102 | });
103 | }
104 | }
105 | }
106 |
107 | new farallonComment();
108 |
--------------------------------------------------------------------------------
/scss/setting.scss:
--------------------------------------------------------------------------------
1 | a:focus {
2 | box-shadow: none;
3 | }
4 |
5 | input.large-text,
6 | textarea.large-text {
7 | width: 100%;
8 | }
9 |
10 | textarea.code {
11 | line-height: 1.4;
12 | padding: 2%;
13 | }
14 |
15 | .fSetting {
16 | &--wrap {
17 | display: flex;
18 | align-items: flex-start;
19 | }
20 |
21 | &--form {
22 | padding: 30px;
23 | min-height: 400px;
24 | background: #fff;
25 | border-radius: 5px;
26 | overflow: hidden;
27 | flex: 1 1 auto;
28 | }
29 |
30 | &--menu {
31 | .nav {
32 | margin: 0;
33 | padding: 50px 0 0;
34 | display: flex;
35 | flex-direction: column;
36 | li {
37 | font-size: 16px;
38 | margin-bottom: 0;
39 | position: relative;
40 | & > span {
41 | color: #626773;
42 | border-radius: 0;
43 | transition: all 0.2s ease-out 0s;
44 | padding: 15px 25px;
45 | display: block;
46 | cursor: pointer;
47 | i {
48 | width: 16px;
49 | margin-right: 5px;
50 | color: #626773;
51 | font-size: 15px;
52 | top: 1px;
53 | text-align: center;
54 | }
55 | }
56 | &.active {
57 | span {
58 | background-color: #fff;
59 | border-radius: 5px 0 0 5px;
60 | color: #455473;
61 | }
62 | }
63 | }
64 | }
65 | }
66 | }
67 |
68 | .dashicons-basic:before {
69 | content: '\f108';
70 | }
71 |
72 | .dashicons-slider:before {
73 | content: '\f232';
74 | }
75 |
76 | .dashicons-feature:before {
77 | content: '\f475';
78 | }
79 |
80 | .dashicons-interface:before {
81 | content: '\f100';
82 | }
83 |
84 | .dashicons-social-contact:before {
85 | content: '\f304';
86 | }
87 |
88 | .dashicons-save:before {
89 | content: '\f480';
90 | }
91 |
92 | .pure-setting-radio {
93 | display: inline-block;
94 | cursor: pointer;
95 | margin-right: 20px;
96 | user-select: none;
97 | .dashicons-before {
98 | width: 18px;
99 | height: 18px;
100 | border: 1px solid #d3cfc8;
101 | border-radius: 50%;
102 | vertical-align: middle;
103 | display: inline-block;
104 | margin-right: 5px;
105 | position: relative;
106 | }
107 | &.checked {
108 | .dashicons-before {
109 | &::before {
110 | content: '\f147';
111 | background-color: #0074a2;
112 | color: #fff;
113 | border-radius: 50%;
114 | top: -1px;
115 | left: -1px;
116 | text-indent: -1px;
117 | position: absolute;
118 | animation: loader-spinner 300ms linear 1;
119 | }
120 | }
121 | }
122 | }
123 |
124 | .form-table {
125 | th {
126 | width: 140px;
127 | padding: 0;
128 | }
129 |
130 | td {
131 | padding: 0 0 40px 0;
132 | }
133 |
134 | tr {
135 | th label {
136 | color: #455473;
137 | font-weight: normal;
138 | font-size: 16px;
139 | }
140 |
141 | td label {
142 | color: #626773;
143 | font-weight: normal;
144 | font-size: 14px;
145 | }
146 | }
147 | }
148 |
149 | .pure-setting-switch {
150 | display: inline-block;
151 | height: 18px;
152 | width: 42px;
153 | border: 1px solid #cfd6e5;
154 | border-radius: 9px;
155 | background: #fff;
156 | position: relative;
157 |
158 | i {
159 | position: absolute;
160 | top: 2px;
161 | left: 2px;
162 | width: 12px;
163 | height: 12px;
164 | border-radius: 12px;
165 | border: 1px solid #cfd6e5;
166 | transition: all 0.3s ease-out;
167 | animation: loader-spinner 400ms linear 1;
168 |
169 | &:after {
170 | content: '';
171 | position: absolute;
172 | width: 12px;
173 | height: 12px;
174 | border-radius: 12px;
175 | border: 1px solid #cfd6e5;
176 | background-color: #cfd6e5;
177 | left: -1px;
178 | top: -1px;
179 | animation: loader-spinner 400ms linear 1;
180 | }
181 | }
182 |
183 | &.active {
184 | i {
185 | left: 26px;
186 | &:after {
187 | border: 1px solid #0074a2;
188 | background-color: #0074a2;
189 | }
190 | }
191 | }
192 | }
193 |
194 | @keyframes loader-spinner {
195 | 0% {
196 | transform: scale(0);
197 | }
198 | 80% {
199 | transform: scale(1.2);
200 | }
201 | 100% {
202 | transform: scale(1);
203 | }
204 | }
205 |
206 | .pure-save {
207 | padding-top: 60px;
208 | display: flex;
209 | align-items: center;
210 | }
211 |
212 | .button--save {
213 | color: rgb(255, 255, 255);
214 | background-color: #737f99;
215 | padding: 10px 20px;
216 | text-decoration: none;
217 | line-height: 1.4;
218 | text-align: center;
219 | font-size: 16px;
220 | cursor: pointer;
221 | transition: all 0.3s linear;
222 | border-radius: 3px;
223 |
224 | &:hover {
225 | background: #455473;
226 | }
227 | }
228 |
229 | .pure-docs {
230 | display: flex;
231 | padding-bottom: 10px;
232 | align-items: center;
233 | }
234 |
--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | root: true,
3 | parser: 'vue-eslint-parser',
4 | parserOptions: {
5 | parser: 'babel-eslint',
6 | sourceType: 'module'
7 | },
8 | env: {
9 | browser: true,
10 | node: true,
11 | es6: true
12 | },
13 | extends: [
14 | // add more generic rulesets here, such as:
15 | 'eslint:recommended'
16 | //'plugin:prettier/recommended'
17 | //"plugin:vue/vue3-recommended"
18 | // 'plugin:vue/recommended' // Use this if you are using Vue.js 2.x.
19 | ],
20 | rules: {
21 | // override/add rules settings here, such as:
22 | // 'vue/no-unused-vars': 'error'
23 | 'vue/singleline-html-element-content-newline': 'off',
24 | 'vue/multiline-html-element-content-newline': 'off',
25 | 'vue/no-v-html': 'off',
26 | indent: [
27 | 2,
28 | 4,
29 | {
30 | ignoredNodes: ['TemplateLiteral'],
31 | SwitchCase: 1
32 | }
33 | ],
34 | 'template-curly-spacing': 'off',
35 | 'new-parens': 2,
36 | 'no-array-constructor': 2,
37 | 'no-caller': 2,
38 | 'no-console': 'off',
39 | 'no-class-assign': 2,
40 | 'no-cond-assign': 2,
41 | 'no-const-assign': 2,
42 | 'no-control-regex': 0,
43 | 'no-delete-var': 2,
44 | 'no-dupe-args': 2,
45 | 'no-dupe-class-members': 2,
46 | 'no-dupe-keys': 2,
47 | 'no-duplicate-case': 2,
48 | 'no-empty-character-class': 2,
49 | 'no-empty-pattern': 2,
50 | 'no-eval': 2,
51 | 'no-ex-assign': 2,
52 | 'no-extend-native': 2,
53 | 'no-extra-bind': 2,
54 | 'no-extra-boolean-cast': 2,
55 | 'no-extra-parens': [2, 'functions'],
56 | 'no-fallthrough': 2,
57 | 'no-floating-decimal': 2,
58 | 'no-func-assign': 2,
59 | 'no-implied-eval': 2,
60 | 'no-inner-declarations': [2, 'functions'],
61 | 'no-invalid-regexp': 2,
62 | 'no-irregular-whitespace': 2,
63 | 'no-iterator': 2,
64 | 'no-label-var': 2,
65 | 'no-native-reassign': 2,
66 | 'no-negated-in-lhs': 2,
67 | 'no-new-object': 2,
68 | 'no-new-require': 2,
69 | 'no-new-symbol': 2,
70 | 'no-new-wrappers': 2,
71 | 'no-obj-calls': 2,
72 | 'no-octal': 2,
73 | 'no-octal-escape': 2,
74 | 'no-path-concat': 2,
75 | 'no-proto': 2,
76 | 'no-redeclare': 2,
77 | 'no-regex-spaces': 2,
78 | 'no-return-assign': [2, 'except-parens'],
79 | 'no-self-assign': 2,
80 | 'no-self-compare': 2,
81 | 'no-sequences': 2,
82 | 'no-shadow-restricted-names': 2,
83 | 'no-spaced-func': 2,
84 | 'no-sparse-arrays': 2,
85 | 'no-this-before-super': 2,
86 | 'no-throw-literal': 2,
87 | 'no-trailing-spaces': 2,
88 | 'no-undef': 2,
89 | 'no-undef-init': 2,
90 | 'no-unexpected-multiline': 2,
91 | 'no-unmodified-loop-condition': 2,
92 | 'no-unneeded-ternary': [
93 | 2,
94 | {
95 | defaultAssignment: false
96 | }
97 | ],
98 | 'no-unreachable': 2,
99 | 'no-unsafe-finally': 2,
100 | 'no-unused-vars': [
101 | 2,
102 | {
103 | vars: 'all',
104 | args: 'none'
105 | }
106 | ],
107 | 'no-useless-call': 2,
108 | 'no-useless-computed-key': 2,
109 | 'no-useless-constructor': 2,
110 | 'no-useless-escape': 0,
111 | 'no-whitespace-before-property': 2,
112 | 'no-with': 2,
113 | 'one-var': [
114 | 2,
115 | {
116 | initialized: 'never'
117 | }
118 | ],
119 | 'operator-linebreak': [
120 | 2,
121 | 'after',
122 | {
123 | overrides: {
124 | '?': 'before',
125 | ':': 'before'
126 | }
127 | }
128 | ],
129 | 'padded-blocks': [2, 'never'],
130 | quotes: [
131 | 2,
132 | 'single',
133 | {
134 | avoidEscape: true,
135 | allowTemplateLiterals: true
136 | }
137 | ],
138 | semi: [2, 'always'],
139 | 'semi-spacing': [
140 | 2,
141 | {
142 | before: false,
143 | after: true
144 | }
145 | ],
146 | 'space-before-blocks': [2, 'always'],
147 | 'space-before-function-paren': [2, 'never'],
148 | 'space-in-parens': [2, 'never'],
149 | 'space-infix-ops': 2,
150 | 'space-unary-ops': [
151 | 2,
152 | {
153 | words: true,
154 | nonwords: false
155 | }
156 | ],
157 | 'spaced-comment': [
158 | 2,
159 | 'always',
160 | {
161 | markers: ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ',']
162 | }
163 | ],
164 | 'template-curly-spacing': [2, 'never'],
165 | 'use-isnan': 2,
166 | 'valid-typeof': 2,
167 | 'wrap-iife': [2, 'any'],
168 | 'yield-star-spacing': [2, 'both'],
169 | yoda: [2, 'never'],
170 | 'prefer-const': 2,
171 | 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
172 | 'object-curly-spacing': [
173 | 2,
174 | 'always',
175 | {
176 | objectsInObjects: false
177 | }
178 | ],
179 | 'array-bracket-spacing': [2, 'never'],
180 | 'jsx-quotes': [2, 'prefer-single']
181 | }
182 | };
183 |
--------------------------------------------------------------------------------
/single.php:
--------------------------------------------------------------------------------
1 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 | '',
16 | 'pagelink' => '%',
17 | 'separator' => ', ',
18 | )); ?>
19 | get_setting('update_time') && get_the_modified_time('c') != get_post_time('c')) : ?>
20 |
28 |
29 | get_setting('postlike')) : ?>
30 |
31 |
39 |
43 |
48 |
49 |
53 |
54 |
55 |
56 |
59 |
64 |
65 | get_setting('bio')) get_template_part('template-parts/author', 'card'); ?>
66 | get_setting('category_card')) get_template_part('template-parts/category', 'card'); ?>
67 | get_setting('related')) get_template_part('template-parts/single', 'related'); ?>
68 |
73 | get_setting('post_navigation')) get_template_part('template-parts/post', 'navigation');
74 | ?>
75 |
76 |
77 |
78 |
81 |
82 |
83 |
84 |
--------------------------------------------------------------------------------
/scss/modules/_header.scss:
--------------------------------------------------------------------------------
1 | .fHeader {
2 | padding: 20px 80px;
3 | position: relative;
4 | display: flex;
5 | align-items: center;
6 | min-height: 90px;
7 | box-sizing: border-box;
8 |
9 | @media (max-width: 820px) {
10 | padding-left: 40px;
11 | padding-right: 40px;
12 | padding-top: 59px;
13 | }
14 |
15 | @media (max-width: 768px) {
16 | padding-left: 3.5%;
17 | padding-right: 3.5%;
18 | padding-bottom: 0;
19 | }
20 |
21 | &--icon {
22 | margin-left: auto;
23 | fill: var(--farallon-text-gray-lightest);
24 | position: relative;
25 | cursor: pointer;
26 | }
27 |
28 | .avatar {
29 | --farallon-logo-size: 48px;
30 | height: var(--farallon-logo-size);
31 | width: var(--farallon-logo-size);
32 | border: 3px var(--farallon-background-white) solid;
33 | box-shadow: 0 2px 4px 0 var(--farallon-border-color);
34 | border-radius: 100%;
35 | transition: 0.5s ease-in-out;
36 |
37 | @media screen and (max-width: 768px) {
38 | --farallon-logo-size: 40px;
39 | }
40 | }
41 |
42 | &.is-active {
43 | .avatar {
44 | box-shadow: 0 2px 4px 0 var(--farallon-border-color);
45 | }
46 | }
47 |
48 | &--content {
49 | position: absolute;
50 | left: 50%;
51 | transform: translateX(-50%);
52 | height: 39px;
53 | top: 25px;
54 | z-index: 1;
55 | box-shadow: 0 0 #fff, 0 0 0 1px hsla(240, 5%, 96%, 0.1),
56 | 0 10px 15px -3px rgba(39, 39, 42, 0.05), 0 4px 6px -4px rgba(39, 39, 42, 0.05);
57 | backdrop-filter: blur(12px);
58 | background-color: rgba(255, 255, 255, 0.5);
59 | border: 1px solid rgba(255, 255, 255, 0.5);
60 | border-radius: 999rem;
61 | overflow: hidden;
62 |
63 | .dark & {
64 | background-color: rgba(39, 39, 42, 0.9);
65 | border-color: rgba(0, 0, 0, 0.5);
66 | backdrop-filter: saturate(180%) blur(5px);
67 | box-shadow: 0 0 #0000, 0 0 0 calc(1px + 0px) hsla(0, 0%, 100%, 0.1), 0 0 #0000;
68 | color: rgba(228, 228, 231, 1);
69 | }
70 |
71 | @media (prefers-color-scheme: dark) {
72 | background-color: rgba(39, 39, 42, 0.9);
73 | border-color: rgba(0, 0, 0, 0.5);
74 | backdrop-filter: saturate(180%) blur(5px);
75 | box-shadow: 0 0 #0000, 0 0 0 calc(1px + 0px) hsla(0, 0%, 100%, 0.1), 0 0 #0000;
76 | color: rgba(228, 228, 231, 1);
77 | }
78 |
79 | .inner {
80 | display: flex;
81 | flex-direction: column;
82 | min-width: 250px;
83 | transition: 0.5s transform;
84 |
85 | .search--area {
86 | height: 39px;
87 | display: flex;
88 | justify-content: center;
89 | align-items: center;
90 |
91 | .search-field {
92 | background-color: rgba(0, 0, 0, 0);
93 | border: 0;
94 | font-size: 14px;
95 | }
96 |
97 | .search-submit {
98 | background-color: #fff;
99 | border: 0;
100 | display: none;
101 | }
102 | }
103 |
104 | &.search--active {
105 | transform: translate(0px, -39px);
106 | }
107 | }
108 |
109 | @media (max-width: 820px) {
110 | left: 0;
111 | right: 0;
112 | transform: translate3d(0, 0, 0);
113 | border-radius: 0;
114 | top: 0;
115 | box-shadow: 0 0 #fff, 0 0 0 1px hsla(240, 5%, 96%, 0.1),
116 | 3px -8px 15px -3px rgba(39, 39, 42, 0.05), 0 4px 6px -4px rgba(39, 39, 42, 0.05);
117 |
118 | .inner {
119 | .search--area {
120 | width: 100%;
121 |
122 | .search-form {
123 | width: 90%;
124 | }
125 |
126 | .search-field {
127 | width: 100%;
128 | font-size: 12px;
129 | }
130 | }
131 | }
132 | }
133 | }
134 |
135 | &--menu {
136 | display: flex;
137 | align-items: center;
138 | height: 39px;
139 | box-sizing: border-box;
140 | padding: 5px 30px;
141 | // color: var(--farallon-text-light);
142 |
143 | .menu-item {
144 | padding: 0 15px;
145 | flex: 0 0 auto;
146 | position: relative;
147 |
148 | a {
149 | &:hover {
150 | color: var(--farallon-hover-color);
151 | }
152 | }
153 |
154 | &.current-menu-item {
155 | a {
156 | color: var(--farallon-hover-color);
157 | }
158 | }
159 |
160 | @media (max-width: 820px) {
161 | padding: 0 10px;
162 | }
163 | }
164 |
165 | @media (max-width: 820px) {
166 | overflow-x: auto;
167 | padding-left: 40px;
168 | padding-right: 40px;
169 | }
170 |
171 | @media screen and (max-width: 768px) {
172 | padding-left: 20px;
173 | padding-right: 20px;
174 | font-size: 14px;
175 | }
176 |
177 | @media (max-width: 414px) {
178 | padding-left: 5px;
179 | padding-right: 5px;
180 | }
181 | }
182 | }
183 |
184 | .site--url {
185 | display: flex;
186 | align-items: center;
187 | font-size: 22px;
188 | font-weight: bold;
189 |
190 | @media screen and (max-width: 768px) {
191 | font-size: 18px;
192 | }
193 |
194 | .avatar {
195 | margin-right: 10px;
196 | }
197 | }
198 |
199 | .u-xs-show {
200 | display: none;
201 | }
202 |
--------------------------------------------------------------------------------
/scss/templates/_term.scss:
--------------------------------------------------------------------------------
1 | .fTerm {
2 | &--header {
3 | padding-top: 30px;
4 | padding-left: 120px;
5 | padding-right: 120px;
6 | display: flex;
7 | align-items: center;
8 |
9 | & + .site--main {
10 | padding-top: 30px;
11 | }
12 |
13 | @media screen and (max-width: 820px) {
14 | padding-left: 20px;
15 | padding-right: 20px;
16 | padding-top: 20px;
17 | font-size: 14px;
18 | }
19 | }
20 |
21 | &--cover {
22 | height: 72px;
23 | width: 72px;
24 | object-fit: cover;
25 | border-radius: 4px;
26 | margin-right: 15px;
27 | flex: 0 0 auto;
28 |
29 | @media screen and (max-width: 820px) {
30 | height: 50px;
31 | width: 50px;
32 | margin-right: 10px;
33 | }
34 | }
35 |
36 | &--content {
37 | flex: 1 1 auto;
38 | }
39 |
40 | &--title {
41 | font-size: 24px;
42 | font-weight: 700;
43 | line-height: 1;
44 | margin-bottom: 10px;
45 | margin-top: 0;
46 |
47 | @media screen and (max-width: 820px) {
48 | font-size: 18px;
49 | margin-bottom: 5px;
50 | }
51 | }
52 |
53 | &--description {
54 | font-size: 14px;
55 | color: var(--farallon-text-gray);
56 | line-height: 1.5;
57 | }
58 | }
59 |
60 | .tagCard {
61 | display: grid;
62 | grid-template-columns: repeat(var(--farallon-tag-grid, 5), 1fr);
63 | grid-gap: 15px;
64 | padding-top: 20px;
65 |
66 | &--item {
67 | transition: 0.5s;
68 | padding: 8px 15px;
69 | border: 1px solid var(--farallon-border-color);
70 | border-radius: 5px;
71 | overflow: hidden;
72 | position: relative;
73 | color: var(--farallon-text-gray);
74 |
75 | &:hover {
76 | .collectionCard--title {
77 | color: var(--farallon-hover-color);
78 | text-decoration: underline;
79 | }
80 |
81 | color: var(--farallon-hover-color);
82 | }
83 |
84 | &::after {
85 | position: absolute;
86 | content: attr(data-count);
87 | opacity: 0.15;
88 | bottom: -8px;
89 | right: -2px;
90 | color: var(--farallon-text-gray-lightest);
91 | font-size: 40px;
92 | font-style: italic;
93 | font-weight: bold;
94 | line-height: 1;
95 | }
96 | }
97 |
98 | @media screen and (max-width: 920px) {
99 | --farallon-tag-grid: 4;
100 | }
101 |
102 | @media screen and (max-width: 480px) {
103 | --farallon-tag-grid: 2;
104 | }
105 | }
106 |
107 | .collectionCard {
108 | display: grid;
109 | grid-template-columns: repeat(var(--farallon-collection-grid, 3), 1fr);
110 | grid-gap: 12px;
111 | padding-top: 20px;
112 | overflow: hidden;
113 | position: relative;
114 |
115 | &--item {
116 | transition: 0.5s;
117 | padding: 8px;
118 | border: 1px solid var(--farallon-border-color);
119 | border-radius: 8px;
120 | position: relative;
121 | overflow: hidden;
122 |
123 | &:hover {
124 | .collectionCard--title {
125 | color: var(--farallon-hover-color);
126 | text-decoration: underline;
127 | }
128 | }
129 |
130 | &::after {
131 | position: absolute;
132 | content: attr(data-count);
133 | opacity: 0.15;
134 | bottom: -8px;
135 | right: -5px;
136 | color: var(--farallon-text-gray-lightest);
137 | font-size: 60px;
138 | font-style: italic;
139 | font-weight: bold;
140 | line-height: 1;
141 | }
142 | }
143 |
144 | &--image {
145 | height: 100px;
146 | width: 100%;
147 | object-fit: cover;
148 | border-radius: 6px;
149 | }
150 |
151 | &--meta {
152 | padding: 5px;
153 | }
154 |
155 | &--title {
156 | font-weight: 500;
157 | line-height: 1;
158 | margin-bottom: 8px;
159 | }
160 |
161 | &--description {
162 | font-size: 12px;
163 | color: var(--farallon-text-gray);
164 | line-height: 1.2;
165 | height: 2.4em;
166 | overflow: hidden;
167 | text-overflow: ellipsis;
168 | display: -webkit-box;
169 | -webkit-line-clamp: 2;
170 | -webkit-box-orient: vertical;
171 | }
172 |
173 | &--count {
174 | font-size: 12px;
175 | color: var(--farallon-text-gray);
176 | }
177 |
178 | @media (max-width: 920px) {
179 | --farallon-collection-grid: 2;
180 | }
181 |
182 | @media (max-width: 480px) {
183 | --farallon-collection-grid: 1;
184 | }
185 | }
186 |
187 | .link-items {
188 | display: grid;
189 | grid-template-columns: repeat(var(--farallon-link-grid, 3), 1fr);
190 | grid-gap: 20px;
191 | list-style: none;
192 | padding-top: 15px;
193 |
194 | @media screen and (max-width: 768px) {
195 | --farallon-link-grid: 2;
196 | }
197 | }
198 |
199 | .link-item {
200 | border-radius: 10px;
201 | padding: 15px;
202 |
203 | .sitename {
204 | font-size: var(--farallon-text-size-smallest);
205 | color: var(--farallon-text-gray);
206 | display: flex;
207 | flex-direction: column;
208 | line-height: 1.5;
209 |
210 | strong {
211 | font-size: var(--farallon-text-size-noral);
212 | color: var(--farallon-text-color);
213 | margin-bottom: 10px;
214 | }
215 | }
216 |
217 | @include block-hover-gradient;
218 | }
219 |
220 | .link-title {
221 | font-size: 18px;
222 | text-align: center;
223 | font-weight: bold;
224 | line-height: 1.2;
225 | margin-top: 30px;
226 | }
227 |
228 | .link-description {
229 | font-size: 14px;
230 | color: var(--farallon-text-gray);
231 | text-align: center;
232 | }
233 |
--------------------------------------------------------------------------------
/template-parts/content-card.php:
--------------------------------------------------------------------------------
1 |
2 |
3 | get_setting('always_home_cover')) : ?>
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 | post_content))), 0, 90, "...");
22 | } ?>
23 |
24 |
46 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Farallon
2 |
3 | 
4 |
5 | Farallon is a simple single column wordpress theme with perfect performace and elegance design.
6 |
7 | [中文说明](https://github.com/bigfa/Farallon/blob/develop/README_CN.md)
8 |
9 | latest version : `0.9.3`
10 |
11 | [Simple User Guide(Chinese)](https://fatesinger.com/101971)
12 |
13 | ## Changelog
14 |
15 | ### 0.9.3
16 |
17 | - add Japanese support
18 | - style enhancement
19 | - update translation
20 | - remove default logo image
21 |
22 | ### 0.9.2
23 |
24 | - style enhancement
25 |
26 | ### 0.9.1
27 |
28 | - update translation
29 | - style enhancement
30 |
31 | ### 0.9.0
32 |
33 | > [!IMPORTANT]
34 | > scss class name has breaking changes
35 |
36 | - update translation
37 | - style enhancement
38 | - add some filters
39 | - fixed loading error in search result page
40 |
41 | ### 0.8.8
42 |
43 | - add post read time
44 | - update translation
45 |
46 | ### 0.8.7
47 |
48 | - style enhancement
49 | - update translation
50 | - use php time format
51 |
52 | ### 0.8.6
53 |
54 | - fixed post views error
55 | - update translation
56 |
57 | ### 0.8.5
58 |
59 | - style enhancement
60 | - update translation
61 | - add clean mode
62 |
63 | ### 0.8.4
64 |
65 | - show excerpt if exists
66 | - add wp gallery style support
67 | - add config for always show cover
68 |
69 | ### 0.8.3
70 |
71 | - style enhancement
72 | - add `threads` icon
73 |
74 | ### 0.8.2
75 |
76 | - style enhancement
77 |
78 | ### 0.8.1
79 |
80 | - fixed post image count error
81 |
82 | ### 0.8.0
83 |
84 | - style enhancement
85 | - add a config for showing image count of the post
86 |
87 | ### 0.7.9
88 |
89 | - show the update time of post
90 | - update translation
91 |
92 | ### 0.7.8
93 |
94 | - add rss tag setting for `follow`
95 |
96 | ### 0.7.7
97 |
98 | - add max width of wp figure
99 | - handle post format when load more posts
100 | - fixed some style bugs
101 |
102 | ### 0.7.6
103 |
104 | - links template link title style
105 | - remove friend icon in comemnt content
106 |
107 | ### 0.7.5
108 |
109 | - add image zoom
110 | - add centered post header option
111 | - fixed render error when fetch posts
112 |
113 | ### 0.7.4
114 |
115 | - fixed related post error with default post format
116 |
117 | ### 0.7.3
118 |
119 | - stable release
120 |
121 | ### 0.7.2
122 |
123 | - add theme setting docs
124 |
125 | ### 0.7.1
126 |
127 | - add twitter head meta
128 |
129 | ### 0.7.0
130 |
131 | - update translation
132 | - add open graph meta
133 |
134 | ### 0.6.9
135 |
136 | - set `wp caption` style
137 | - update translation
138 |
139 | ### 0.6.8
140 |
141 | - add toc title start setting
142 |
143 | ### 0.6.7
144 |
145 | - exclude status post format in archive template
146 |
147 | ### 0.6.6
148 |
149 | - handle related post format
150 |
151 | ### 0.6.5
152 |
153 | - add tag list template
154 | - update translation
155 |
156 | ### 0.6.4
157 |
158 | - fixed author tag in commentlist
159 |
160 | ### 0.6.3
161 |
162 | - add custom sns config
163 |
164 | ### 0.6.2
165 |
166 | - add theme docs link
167 | - update translation
168 |
169 | ### 0.6.1
170 |
171 | - add a config to exclude post_format status in homepage
172 |
173 | ### 0.6.0
174 |
175 | - add theme uploader
176 |
177 | ### 0.5.10
178 |
179 | - update translation
180 | - update category list widget style
181 |
182 | ### 0.5.9
183 |
184 | - add discord icon
185 | - add mastodon icon
186 |
187 | ### 0.5.8
188 |
189 | - update page template header
190 |
191 | ### 0.5.7
192 |
193 | - update translation
194 |
195 | ### 0.5.6
196 |
197 | - add friend icon
198 | - disable some filter in admin panel
199 |
200 | ### 0.5.5
201 |
202 | - add github icon setting
203 | - add some validate rules
204 | - add no reply text setting
205 | - add post category card setting
206 |
207 | ### 0.5.4
208 |
209 | - update translation
210 |
211 | ### 0.5.3
212 |
213 | - add author card sns icon show config
214 |
215 | ### 0.5.2
216 |
217 | - show sns icons in footer
218 | - auto get feed link
219 | - add email address setting
220 | - remove telegram channel and group setting
221 |
222 | ### 0.5.1
223 |
224 | - use wp media to set category cover
225 |
226 | ### 0.5.0
227 |
228 | - add now template
229 |
230 | > it's a pre release
231 |
232 | ### 0.4.10
233 |
234 | - drunk too much coffee
235 |
236 | ### 0.4.9
237 |
238 | - disable toc in homepage
239 | - fixed translation error
240 |
241 | ### 0.4.8
242 |
243 | - fixed some style error
244 |
245 | ### 0.4.7
246 |
247 | - add category card template setting
248 |
249 | ### 0.4.6
250 |
251 | - fixed some style error
252 | - show category image in archive template
253 |
254 | ### 0.4.5
255 |
256 | - add a config to disable comment author url
257 |
258 | ### 0.4.4
259 |
260 | - detail style change
261 | - add widget cateogry card
262 |
263 | ### 0.4.3
264 |
265 | - term list style change
266 |
267 | ### 0.4.2
268 |
269 | - fixed related post cover size error when img does not have enough width
270 |
271 | ### 0.4.1
272 |
273 | - term list style change
274 |
275 | ### 0.4.0
276 |
277 | - add category cover config
278 | - add category list template
279 | - add post status format archive template(memes)
280 |
281 | ### 0.3.9
282 |
283 | - fixed copy post url style when url is too long
284 |
285 | ### 0.3.8
286 |
287 | - add post author tip in comment item
288 | - hack douban list style in dark mode
289 |
290 | ### 0.3.7
291 |
292 | - add user sns icon
293 |
294 | ### 0.3.6
295 |
296 | - add pingback style
297 |
298 | ### 0.3.4
299 |
300 | - add post thumbnails support
301 | - add `gravatar` proxy config
302 |
303 | ### 0.3.2
304 |
305 | - make toc collapsible
306 | - update `normalize.css`
307 |
308 | ### 0.3.1
309 |
310 | - fixed next post permalink error
311 |
312 | ### 0.3.0
313 |
314 | - Added table of contents functionality.
315 |
316 | ### 0.2.4
317 |
318 | - Added a “back to top” option.
319 | - Added a bottom toolbar, recommended using the “Classic Widgets” plugin for better compatibility.
320 | - Fixed some styling errors.
321 |
322 | ### 0.2.3
323 |
324 | - Improved menu style.
325 | - Fixed a configuration error.
326 |
327 | ### 0.2.2
328 |
329 | - Added an infinite scroll switch.
330 |
331 | ### 0.2.1
332 |
333 | - Added category statistics.
334 |
335 | ### 0.2.0
336 |
337 | - Added dark mode support.
338 | - Fixed footer style error on mobile devices.
339 |
340 | ### 0.1.13
341 |
342 | - Bug fixes.
343 | - Added support for the “Marker Pro” plugin.
344 |
345 | ### 0.1.12
346 |
347 | - Added dark color scheme.
348 | - Added site logo and favicon configuration options.
349 | - Added microdata to page templates.
350 |
351 | ### 0.1.11
352 |
353 | - Added an option to show parent comments.
354 |
355 | ### 0.1.9
356 |
357 | - Added a configuration for sharing links by copying.
358 | - Optimized comment icons.
359 | - Adjusted menu spacing.
360 | - Enhanced support for “Marker Pro”.
361 |
362 | ### 0.1.8
363 |
364 | - Added contextual links.
365 | - Added an option to display article pagination links.
366 |
367 | ### 0.1.6
368 |
369 | - Added support for table styles.
370 | - Added a toggle for the article like button.
371 | - Added a default thumbnail setting.
372 | - Added a template for Douban pages.
373 |
374 | ### 0.1.5
375 |
376 | - Added pagination links for comments.
377 |
378 | ### 0.1.4
379 |
380 | - Fixed checkbox styling issue in comment form.
381 |
382 | ### 0.1.3
383 |
384 | - Added support for popular CDNs in China.
385 |
386 | ### 0.1.0
387 |
388 | - Initial release.
389 |
--------------------------------------------------------------------------------
/js/extensions/zoom.ts:
--------------------------------------------------------------------------------
1 | class imgZoom {
2 | selector: string;
3 | selectorAttr: string;
4 | currentIndex: number;
5 | images: string[];
6 | constructor() {
7 | this.selector = '[data-action="imageZoomIn"]';
8 | this.selectorAttr = 'href';
9 | this.currentIndex = 0;
10 | this.images = [];
11 | this.getZoomImages();
12 | window.addEventListener('resize', () => {
13 | if (document.querySelector('.overlay')) {
14 | this.loadImage(this.images[this.currentIndex]);
15 | }
16 | });
17 | }
18 |
19 | getZoomImages() {
20 | const images = Array.from(document.querySelectorAll(this.selector));
21 | this.images = [...images]
22 | .map((image) => image.getAttribute(this.selectorAttr))
23 | .filter((url) => url !== null) as string[];
24 | images.forEach((image) => {
25 | image.addEventListener('click', (e: any) => {
26 | e.preventDefault();
27 | const url = image.getAttribute(this.selectorAttr) as string;
28 | this.showOverlay(url);
29 | });
30 | });
31 | }
32 |
33 | renderNav() {
34 | const nav = `${this.currentIndex + 1}/${this.images.length}`;
35 | const imageNav = document.querySelector('.image--nav');
36 | if (imageNav) {
37 | imageNav.innerHTML = nav;
38 | }
39 | }
40 |
41 | prevImage() {
42 | if (this.currentIndex === 0) {
43 | return;
44 | }
45 | this.currentIndex = this.currentIndex - 1;
46 | this.loadImage(this.images[this.currentIndex]);
47 | this.renderNav();
48 | }
49 |
50 | nextImage() {
51 | if (this.currentIndex === this.images.length - 1) {
52 | return;
53 | }
54 | this.currentIndex = this.currentIndex + 1;
55 | this.loadImage(this.images[this.currentIndex]);
56 | this.renderNav();
57 | }
58 |
59 | showOverlay(url: string) {
60 | const self = this;
61 | let currentIndex = this.images.indexOf(url);
62 | this.currentIndex = currentIndex;
63 | let nav =
64 | this.images.length > 1
65 | ? `
${currentIndex + 1}/${
66 | this.images.length
67 | }
`
72 | : '';
73 | let html = `
`;
74 | const body = document.querySelector('body');
75 | if (body) {
76 | body.insertAdjacentHTML('beforeend', html);
77 | body.classList.add('u-overflowYHidden');
78 | }
79 | this.loadImage(url);
80 | document.querySelector('.zoomImgClose')?.addEventListener('click', () => {
81 | self.overlayRemove();
82 | });
83 | document.querySelector('.mfp-arrow-right')?.addEventListener('click', () => {
84 | self.nextImage();
85 | });
86 | document.querySelector('.mfp-arrow-left')?.addEventListener('click', () => {
87 | self.prevImage();
88 | });
89 | }
90 |
91 | loadImage(o: any) {
92 | let s = new Image();
93 | const loading = document.querySelector('.lds-ripple') as HTMLElement;
94 | if (loading) {
95 | loading.style.display = 'inline-block';
96 | }
97 | const i = document.querySelector('.overlay-image') as HTMLPreElement;
98 | const nav = document.querySelector('.image--nav');
99 | nav?.classList.add('u-hide');
100 | i.style.display = 'none';
101 | s.onload = () => {
102 | let imageWidth = s.width,
103 | imageHeight = s.height,
104 | maxHeight = window.innerHeight - 140,
105 | maxWidth = window.innerWidth - 80;
106 | maxWidth < imageWidth
107 | ? ((imageHeight *= maxWidth / imageWidth),
108 | (imageWidth = maxWidth),
109 | maxHeight < imageHeight &&
110 | ((imageWidth *= maxHeight / imageHeight), (imageHeight = maxHeight)))
111 | : maxHeight < imageHeight &&
112 | ((imageWidth *= maxHeight / imageHeight),
113 | (imageHeight = maxHeight),
114 | maxWidth < imageWidth &&
115 | ((imageHeight *= maxWidth / imageWidth), (imageWidth = maxWidth)));
116 | i.setAttribute('src', o),
117 | (i.style.width = imageWidth + 'px'),
118 | (i.style.height = imageHeight + 'px'),
119 | (i.style.display = 'block'),
120 | nav?.classList.remove('u-hide');
121 |
122 | document.querySelector('.overlay-img-wrap')?.classList.add('is-finieshed');
123 | loading.style.display = 'none';
124 | };
125 | s.src = o;
126 | }
127 |
128 | overlayRemove() {
129 | let overlay = document.querySelector('.overlay') as HTMLElement;
130 | if (overlay) this._remove(overlay);
131 | const body = document.querySelector('body');
132 | if (body) {
133 | body.classList.remove('u-overflowYHidden');
134 | }
135 | }
136 |
137 | _remove(dom: HTMLElement) {
138 | const parent: any = dom.parentNode;
139 | parent && parent.removeChild(dom);
140 | }
141 | }
142 |
143 | new imgZoom();
144 |
--------------------------------------------------------------------------------
/scss/modules/_graph.scss:
--------------------------------------------------------------------------------
1 | .fGraph {
2 | color: var(--farallon-text-color);
3 | word-break: break-all;
4 | font-size: var(--farallon-text-size-normal);
5 |
6 | table {
7 | border: 1px solid var(--farallon-border-color);
8 | border-collapse: collapse;
9 | margin-bottom: 20px;
10 | margin-left: auto;
11 | margin-right: auto;
12 | font-size: var(--farallon-text-size-smallest);
13 | color: var(--farallon-text-light);
14 | thead {
15 | tr {
16 | background-color: #f5f5f5;
17 | }
18 | }
19 | tr {
20 | background-color: #fff;
21 | &:hover {
22 | & > td {
23 | background-color: #f5f5f5;
24 | background-clip: padding-box;
25 | }
26 | }
27 | }
28 | td,
29 | th {
30 | border-bottom: 1px solid var(--farallon-border-color);
31 | border-right: 1px solid var(--farallon-border-color);
32 | transition: background-color 0.25s ease;
33 | height: 40px;
34 | min-width: 0;
35 | box-sizing: border-box;
36 | text-overflow: ellipsis;
37 | vertical-align: middle;
38 | position: relative;
39 | margin: 0;
40 | padding: 0 10px;
41 | }
42 | }
43 |
44 | code {
45 | word-break: break-all;
46 | white-space: pre-wrap;
47 | background-color: var(--farallon-background-gray);
48 | padding: 5px 10px;
49 | border-radius: 5px;
50 | font-size: var(--farallon-text-size-small);
51 | color: var(--farallon-text-color);
52 | }
53 |
54 | pre {
55 | word-break: break-all;
56 | white-space: break-spaces;
57 | background-color: var(--farallon-background-gray);
58 | padding: 10px;
59 | border-radius: 5px;
60 | font-size: var(--farallon-text-size-small);
61 | }
62 |
63 | p {
64 | margin-bottom: 20px;
65 | hyphens: auto;
66 | &:last-child {
67 | margin-bottom: 0;
68 | }
69 | }
70 |
71 | blockquote {
72 | color: var(--farallon-text-light);
73 | border-color: var(--farallon-border-color-light);
74 | margin-left: -3.5%;
75 | margin-right: -3.5%;
76 | margin-bottom: 35px;
77 | background-color: #fafafa;
78 | background: linear-gradient(
79 | 89.99999999999999deg,
80 | rgba(255, 233, 244, 0.3) 0%,
81 | rgba(234, 243, 255, 0.5) 100%
82 | );
83 | padding: 30px;
84 | border-radius: 10px;
85 |
86 | @media screen and (max-width: 768px) {
87 | padding: 15px;
88 | }
89 |
90 | p {
91 | &:last-child {
92 | margin-bottom: 0;
93 | }
94 | }
95 |
96 | .dark & {
97 | background: linear-gradient(180deg, #1e1e1e, #121212);
98 | }
99 |
100 | @media (prefers-color-scheme: dark) {
101 | .auto & {
102 | background: linear-gradient(180deg, #1e1e1e, #121212);
103 | }
104 | }
105 | }
106 |
107 | a {
108 | text-decoration: none;
109 | box-shadow: inset 0 -3px 0 var(--farallon-main-color);
110 | transition: 0.2s;
111 | &[href*='jpeg'],
112 | &[href*='JPEG'],
113 | &[href*='jpg'],
114 | &[href*='png'],
115 | &[href*='PNG'],
116 | &[href*='JPG'],
117 | &[href*='gif'] {
118 | box-shadow: none;
119 | &:hover {
120 | box-shadow: none;
121 | }
122 | }
123 | &:hover {
124 | //color: var(--main-hover-color);
125 | box-shadow: inset 0 -5px 0 var(--farallon-hover-color);
126 | }
127 | }
128 |
129 | h2,
130 | h3 {
131 | margin-bottom: 15px;
132 | margin-top: 30px;
133 | font-size: 22px;
134 | font-weight: 700;
135 | color: var(--farallon-text-gray);
136 | line-height: 1.3;
137 | & + h4 {
138 | margin-top: 15px;
139 | }
140 | position: relative;
141 | :before {
142 | content: '';
143 | position: absolute;
144 | top: 0.5em;
145 | bottom: -2px;
146 | left: -10px;
147 | width: 3.4em;
148 | z-index: -1;
149 | background: var(--farallon-hover-color);
150 | opacity: 0.3;
151 | transform: skew(-35deg);
152 | transition: opacity 0.2s ease;
153 | border-radius: 3px 8px 10px 6px;
154 | }
155 |
156 | &:target {
157 | // border-radius: 11px;
158 | // animation: fadeOut-headings 0.4s;
159 | // animation-fill-mode: forwards;
160 | color: var(--farallon-hover-color);
161 | }
162 | }
163 |
164 | h4 {
165 | font-size: 20px;
166 | font-weight: 700;
167 | color: var(--farallon-gray-lightest);
168 | margin-bottom: 10px;
169 | margin-top: 30px;
170 | line-height: 1.3;
171 | }
172 |
173 | hr {
174 | border: 0;
175 | text-align: center;
176 | font-size: 32px;
177 | height: auto;
178 | margin-top: 0;
179 | margin-bottom: 15px;
180 | &:before {
181 | content: '...';
182 | letter-spacing: 0.6em;
183 | text-indent: 0.6em;
184 | }
185 | }
186 |
187 | b,
188 | strong {
189 | font-weight: 700;
190 | }
191 |
192 | ul,
193 | ol {
194 | margin-bottom: 25px;
195 | padding-left: 15px;
196 |
197 | li {
198 | margin-left: 25px;
199 | margin-bottom: 5px;
200 |
201 | &:before {
202 | content: '•';
203 | box-sizing: border-box;
204 | font-size: 18px;
205 | margin-left: -35px;
206 | padding-right: 10px;
207 | display: inline-block;
208 | text-align: right;
209 | width: 32px;
210 | color: var(--farallon-hover-color);
211 | }
212 | }
213 | }
214 |
215 | ol {
216 | counter-reset: item;
217 |
218 | & > li {
219 | &:before {
220 | content: counter(item);
221 | counter-increment: item;
222 | font-size: var(--farallon-text-size-smallest);
223 | font-weight: 700;
224 | align-items: center;
225 | background-color: rgba(195, 218, 254, 0.43);
226 | border: 0 solid #999;
227 | border-radius: 9999px;
228 | box-sizing: border-box;
229 | color: var(--farallon-hover-color);
230 | display: inline-flex;
231 | height: 19px;
232 | justify-content: center;
233 | margin-left: -24px !important;
234 | margin-right: 10px;
235 | margin-top: 4px;
236 | transform: translateY(-1px);
237 | width: 30px;
238 | padding: 0;
239 | }
240 | }
241 | }
242 |
243 | @media (max-width: 820px) {
244 | blockquote {
245 | margin-left: 0;
246 | margin-right: 0;
247 | padding-top: 20px;
248 | background-position: left 10px top 0;
249 | margin-bottom: 15px;
250 | }
251 |
252 | h2,
253 | h3 {
254 | font-size: 20px;
255 | }
256 |
257 | ul {
258 | padding-left: 0px;
259 | li {
260 | line-height: 1.6;
261 | }
262 | }
263 |
264 | p {
265 | margin-bottom: 15px;
266 | }
267 | }
268 | }
269 |
--------------------------------------------------------------------------------
/scss/base/_normalize.scss:
--------------------------------------------------------------------------------
1 | /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
2 |
3 | /* Document
4 | ========================================================================== */
5 |
6 | /**
7 | * 1. Correct the line height in all browsers.
8 | * 2. Prevent adjustments of font size after orientation changes in iOS.
9 | */
10 |
11 | html {
12 | line-height: 1.15; /* 1 */
13 | -webkit-text-size-adjust: 100%; /* 2 */
14 | }
15 |
16 | /* Sections
17 | ========================================================================== */
18 |
19 | /**
20 | * Remove the margin in all browsers.
21 | */
22 |
23 | body {
24 | margin: 0;
25 | }
26 |
27 | /**
28 | * Render the `main` element consistently in IE.
29 | */
30 |
31 | main {
32 | display: block;
33 | }
34 |
35 | /**
36 | * Correct the font size and margin on `h1` elements within `section` and
37 | * `article` contexts in Chrome, Firefox, and Safari.
38 | */
39 |
40 | h1 {
41 | font-size: 2em;
42 | margin: 0.67em 0;
43 | }
44 |
45 | /* Grouping content
46 | ========================================================================== */
47 |
48 | /**
49 | * 1. Add the correct box sizing in Firefox.
50 | * 2. Show the overflow in Edge and IE.
51 | */
52 |
53 | hr {
54 | box-sizing: content-box; /* 1 */
55 | height: 0; /* 1 */
56 | overflow: visible; /* 2 */
57 | }
58 |
59 | /**
60 | * 1. Correct the inheritance and scaling of font size in all browsers.
61 | * 2. Correct the odd `em` font sizing in all browsers.
62 | */
63 |
64 | pre {
65 | font-family: monospace, monospace; /* 1 */
66 | font-size: 1em; /* 2 */
67 | }
68 |
69 | /* Text-level semantics
70 | ========================================================================== */
71 |
72 | /**
73 | * Remove the gray background on active links in IE 10.
74 | */
75 |
76 | a {
77 | background-color: transparent;
78 | }
79 |
80 | /**
81 | * 1. Remove the bottom border in Chrome 57-
82 | * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
83 | */
84 |
85 | abbr[title] {
86 | border-bottom: none; /* 1 */
87 | text-decoration: underline; /* 2 */
88 | text-decoration: underline dotted; /* 2 */
89 | }
90 |
91 | /**
92 | * Add the correct font weight in Chrome, Edge, and Safari.
93 | */
94 |
95 | b,
96 | strong {
97 | font-weight: bolder;
98 | }
99 |
100 | /**
101 | * 1. Correct the inheritance and scaling of font size in all browsers.
102 | * 2. Correct the odd `em` font sizing in all browsers.
103 | */
104 |
105 | code,
106 | kbd,
107 | samp {
108 | font-family: monospace, monospace; /* 1 */
109 | font-size: 1em; /* 2 */
110 | }
111 |
112 | /**
113 | * Add the correct font size in all browsers.
114 | */
115 |
116 | small {
117 | font-size: 80%;
118 | }
119 |
120 | /**
121 | * Prevent `sub` and `sup` elements from affecting the line height in
122 | * all browsers.
123 | */
124 |
125 | sub,
126 | sup {
127 | font-size: 75%;
128 | line-height: 0;
129 | position: relative;
130 | vertical-align: baseline;
131 | }
132 |
133 | sub {
134 | bottom: -0.25em;
135 | }
136 |
137 | sup {
138 | top: -0.5em;
139 | }
140 |
141 | /* Embedded content
142 | ========================================================================== */
143 |
144 | /**
145 | * Remove the border on images inside links in IE 10.
146 | */
147 |
148 | img {
149 | border-style: none;
150 | }
151 |
152 | /* Forms
153 | ========================================================================== */
154 |
155 | /**
156 | * 1. Change the font styles in all browsers.
157 | * 2. Remove the margin in Firefox and Safari.
158 | */
159 |
160 | button,
161 | input,
162 | optgroup,
163 | select,
164 | textarea {
165 | font-family: inherit; /* 1 */
166 | font-size: 100%; /* 1 */
167 | line-height: 1.15; /* 1 */
168 | margin: 0; /* 2 */
169 | }
170 |
171 | /**
172 | * Show the overflow in IE.
173 | * 1. Show the overflow in Edge.
174 | */
175 |
176 | button,
177 | input {
178 | /* 1 */
179 | overflow: visible;
180 | }
181 |
182 | /**
183 | * Remove the inheritance of text transform in Edge, Firefox, and IE.
184 | * 1. Remove the inheritance of text transform in Firefox.
185 | */
186 |
187 | button,
188 | select {
189 | /* 1 */
190 | text-transform: none;
191 | }
192 |
193 | /**
194 | * Correct the inability to style clickable types in iOS and Safari.
195 | */
196 |
197 | button,
198 | [type='button'],
199 | [type='reset'],
200 | [type='submit'] {
201 | -webkit-appearance: button;
202 | }
203 |
204 | /**
205 | * Remove the inner border and padding in Firefox.
206 | */
207 |
208 | button::-moz-focus-inner,
209 | [type='button']::-moz-focus-inner,
210 | [type='reset']::-moz-focus-inner,
211 | [type='submit']::-moz-focus-inner {
212 | border-style: none;
213 | padding: 0;
214 | }
215 |
216 | /**
217 | * Restore the focus styles unset by the previous rule.
218 | */
219 |
220 | button:-moz-focusring,
221 | [type='button']:-moz-focusring,
222 | [type='reset']:-moz-focusring,
223 | [type='submit']:-moz-focusring {
224 | outline: 1px dotted ButtonText;
225 | }
226 |
227 | /**
228 | * Correct the padding in Firefox.
229 | */
230 |
231 | fieldset {
232 | padding: 0.35em 0.75em 0.625em;
233 | }
234 |
235 | /**
236 | * 1. Correct the text wrapping in Edge and IE.
237 | * 2. Correct the color inheritance from `fieldset` elements in IE.
238 | * 3. Remove the padding so developers are not caught out when they zero out
239 | * `fieldset` elements in all browsers.
240 | */
241 |
242 | legend {
243 | box-sizing: border-box; /* 1 */
244 | color: inherit; /* 2 */
245 | display: table; /* 1 */
246 | max-width: 100%; /* 1 */
247 | padding: 0; /* 3 */
248 | white-space: normal; /* 1 */
249 | }
250 |
251 | /**
252 | * Add the correct vertical alignment in Chrome, Firefox, and Opera.
253 | */
254 |
255 | progress {
256 | vertical-align: baseline;
257 | }
258 |
259 | /**
260 | * Remove the default vertical scrollbar in IE 10+.
261 | */
262 |
263 | textarea {
264 | overflow: auto;
265 | }
266 |
267 | /**
268 | * 1. Add the correct box sizing in IE 10.
269 | * 2. Remove the padding in IE 10.
270 | */
271 |
272 | [type='checkbox'],
273 | [type='radio'] {
274 | box-sizing: border-box; /* 1 */
275 | padding: 0; /* 2 */
276 | }
277 |
278 | /**
279 | * Correct the cursor style of increment and decrement buttons in Chrome.
280 | */
281 |
282 | [type='number']::-webkit-inner-spin-button,
283 | [type='number']::-webkit-outer-spin-button {
284 | height: auto;
285 | }
286 |
287 | /**
288 | * 1. Correct the odd appearance in Chrome and Safari.
289 | * 2. Correct the outline style in Safari.
290 | */
291 |
292 | [type='search'] {
293 | -webkit-appearance: textfield; /* 1 */
294 | outline-offset: -2px; /* 2 */
295 | }
296 |
297 | /**
298 | * Remove the inner padding in Chrome and Safari on macOS.
299 | */
300 |
301 | [type='search']::-webkit-search-decoration {
302 | -webkit-appearance: none;
303 | }
304 |
305 | /**
306 | * 1. Correct the inability to style clickable types in iOS and Safari.
307 | * 2. Change font properties to `inherit` in Safari.
308 | */
309 |
310 | ::-webkit-file-upload-button {
311 | -webkit-appearance: button; /* 1 */
312 | font: inherit; /* 2 */
313 | }
314 |
315 | /* Interactive
316 | ========================================================================== */
317 |
318 | /*
319 | * Add the correct display in Edge, IE 10+, and Firefox.
320 | */
321 |
322 | details {
323 | display: block;
324 | }
325 |
326 | /*
327 | * Add the correct display in all browsers.
328 | */
329 |
330 | summary {
331 | display: list-item;
332 | }
333 |
334 | /* Misc
335 | ========================================================================== */
336 |
337 | /**
338 | * Add the correct display in IE 10+.
339 | */
340 |
341 | template {
342 | display: none;
343 | }
344 |
345 | /**
346 | * Add the correct display in IE 10.
347 | */
348 |
349 | [hidden] {
350 | display: none;
351 | }
352 |
--------------------------------------------------------------------------------
/js/modules/action.ts:
--------------------------------------------------------------------------------
1 | class farallonAction extends farallonBase {
2 | like_btn: any;
3 | selctor: string = '.like-btn';
4 | is_single: boolean = false;
5 | post_id: number = 0;
6 | is_archive: boolean = false;
7 |
8 | constructor() {
9 | super();
10 | this.is_single = this.obvInit.is_single;
11 | this.post_id = this.obvInit.post_id;
12 | this.is_archive = this.obvInit.is_archive;
13 | this.like_btn = document.querySelector(this.selctor);
14 |
15 | if (this.like_btn) {
16 | this.like_btn.addEventListener('click', () => {
17 | this.handleLike();
18 | });
19 |
20 | if (this.getCookie('like_' + this.post_id)) {
21 | this.like_btn.classList.add('is-active');
22 | }
23 | }
24 |
25 | const theme = localStorage.getItem('theme') ? localStorage.getItem('theme') : 'auto';
26 |
27 | const html = `
28 |
29 |
34 |
35 |
36 |
49 |
50 |
51 |
58 |
59 |
`;
60 |
61 | if (this.darkmode) {
62 | document.querySelector('body')!.insertAdjacentHTML('beforeend', html);
63 | }
64 |
65 | document.querySelectorAll('.fThemeSwitcher span').forEach((item) => {
66 | item.addEventListener('click', () => {
67 | if (item.classList.contains('is-active')) return;
68 |
69 | document.querySelectorAll('.fThemeSwitcher span').forEach((item) => {
70 | item.classList.remove('is-active');
71 | });
72 |
73 | if ((item as HTMLElement).dataset.actionValue == 'dark') {
74 | localStorage.setItem('theme', 'dark');
75 | document.querySelector('body')!.classList.remove('auto');
76 | document.querySelector('body')!.classList.add('dark');
77 | item.classList.add('is-active');
78 | } else if ((item as HTMLElement).dataset.actionValue == 'light') {
79 | localStorage.setItem('theme', 'light');
80 | document.querySelector('body')!.classList.remove('auto');
81 | document.querySelector('body')!.classList.remove('dark');
82 | item.classList.add('is-active');
83 | } else if ((item as HTMLElement).dataset.actionValue == 'auto') {
84 | localStorage.setItem('theme', 'auto');
85 | document.querySelector('body')!.classList.remove('dark');
86 | document.querySelector('body')!.classList.add('auto');
87 | item.classList.add('is-active');
88 | }
89 | });
90 | });
91 |
92 | if (document.querySelector('.fArticle--share')) {
93 | document.querySelector('.fArticle--share')!.addEventListener('click', () => {
94 | navigator.clipboard.writeText(document.location.href).then(() => {
95 | this.showNotice(this.obvInit.copy_success_text);
96 | });
97 | });
98 | }
99 |
100 | document.querySelector('[data-action="show-search"]')!.addEventListener('click', () => {
101 | document.querySelector('.fHeader--content .inner')!.classList.toggle('search--active');
102 | });
103 | if (this.is_single && this.obvInit.post_view) {
104 | this.trackPostView();
105 | }
106 |
107 | if (this.is_archive) {
108 | this.trackArchiveView();
109 | }
110 |
111 | console.log(`theme version: ${this.VERSION} init success!`);
112 |
113 | const copyright = ``;
116 |
117 | document.querySelector('.fFooter--content')!.insertAdjacentHTML('afterend', copyright);
118 |
119 | document.querySelector('.icon--copryrights')!.addEventListener('click', () => {
120 | document.querySelector('.fFooter--info')!.classList.toggle('active');
121 | });
122 | }
123 |
124 | trackPostView() {
125 | const id = this.obvInit.post_id;
126 | const url = this.obvInit.restfulBase + 'farallon/v1/view?id=' + id;
127 | fetch(url, {
128 | headers: {
129 | 'X-WP-Nonce': this.obvInit.nonce,
130 | 'Content-Type': 'application/json',
131 | },
132 | })
133 | .then((response) => {
134 | return response.json();
135 | })
136 | .then((data) => {
137 | console.log(data);
138 | });
139 | }
140 |
141 | trackArchiveView() {
142 | if (document.querySelector('.archive-header')) {
143 | const id = this.obvInit.archive_id;
144 | fetch(`${this.obvInit.restfulBase}farallon/v1/archive/${id}`, {
145 | method: 'POST',
146 | headers: {
147 | 'X-WP-Nonce': this.obvInit.nonce,
148 | 'Content-Type': 'application/json',
149 | },
150 | }).then((response) => {
151 | return response.json();
152 | });
153 | }
154 | }
155 |
156 | handleLike() {
157 | if (this.getCookie('like_' + this.post_id)) {
158 | return this.showNotice('You have already liked this post');
159 | }
160 | const url = this.obvInit.restfulBase + 'farallon/v1/like';
161 | fetch(url, {
162 | method: 'POST',
163 | body: JSON.stringify({
164 | id: this.post_id,
165 | }),
166 | headers: {
167 | 'X-WP-Nonce': this.obvInit.nonce,
168 | 'Content-Type': 'application/json',
169 | },
170 | })
171 | .then((response) => {
172 | return response.json();
173 | })
174 | .then(() => {
175 | this.showNotice(this.obvInit.like_success_message, 'success');
176 | this.setCookie('like_' + this.post_id, '1', 1);
177 | });
178 | this.like_btn.classList.add('is-active');
179 | }
180 |
181 | refresh() {}
182 | }
183 |
184 | new farallonAction();
185 |
--------------------------------------------------------------------------------
/template-parts/content.php:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
12 |
13 | post_content))), 0, 150, "...");
18 | } ?>
19 |
20 |
51 |
, 300, 200); ?>)
55 |
56 | get_setting('home_image_count') && farallon_get_post_image_count(get_the_ID()) > 1) : ?>
57 |
61 |
62 |
63 |
64 |
--------------------------------------------------------------------------------
9 | 14 | 15 |
16 | 17 |18 | 'ol', 'avatar_size' => 48, 'callback' => 'farallon_comment')); 20 | } else { ?> 21 |-
22 | get_setting('no_reply_text')) {
23 | echo $farallonSetting->get_setting('no_reply_text');
24 | } else {
25 | _e('This post has no comment yet', 'Farallon');
26 | } ?>
27 |
28 |
29 |
30 | 35 | 38 |